一、预加载图像

如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。

  1. $.preloadImages = function (){ 
  2.     for (var i = 0; = 0; i < arguments.length; i++) { 
  3.         $('<img>').attr('src',arguments[i]); 
  4.     } 
  5. $.preloadImages('images/hover-on.png','images/hover-pff.png'); 

二、检查图像是否加载

有时为了继续脚本,你可能需要检查图像是否全部加载完毕。

  1. $('img').load(function)(){ 
  2.     console.log('image load successful'); 
  3. }); 

你也可以使用 ID 或 CLASS 替换 标签来检查某个特定的图像是否被加载。

三、自动修复破坏的图像

逐个替换已经破坏的图像链接是非常痛苦的。不过,下面这段简单的代码可以帮助你。

  1. $('img').on('error',function(){ 
  2.     if(!$(this).hasClass('broken-image')){ 
  3.         $(this).prop('src','ima/broken.png').addClass('broken-image'); 
  4.     } 
  5. }); 

四、悬停切换

当用户鼠标悬停在可点击的元素上时,可添加类到元素中,反之则移除类。

  1. $(selector).hover(function () { 
  2.     $(this).addClass('hover'); 
  3. }, function () { 
  4.     $(this).removeClass('hover'); 
  5. }); 

只需要添加必要的 CSS 即可。更简单的方法是使用 toggleClass() 方法。

  1. $(selector).hover(function () { 
  2.     $(this).addClass('hover'); 
  3. }); 

五、淡入淡出/显示隐藏

  1. //淡出 
  2. $('.btn').click(function(){ 
  3. $('.element').fadeToggle('slow'); 
  4. }); 
  5. //淡入 
  6. $('.btn').click(function(){ 
  7. $('.element').slideToggle('slow'); 
  8. }); 

六、鼠标滚轮

  1. $('#content').on("mousewheel DOMMouseScroll"function (event) {  
  2.     // chrome & ie || // firefox 
  3.     var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  
  4.         (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));   
  5.      
  6.     if (delta > 0) {  
  7.         console.log('mousewheel top'); 
  8.     } else if (delta < 0) { 
  9.         console.log('mousewheel bottom'); 
  10.     }  
  11. }); 

七、鼠标坐标

 

1、JavaScript实现

  1. X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" /> 
  2. function mousePosition(ev){ 
  3.     if(ev.pageX || ev.pageY){ 
  4.         return {x:ev.pageX, y:ev.pageY}; 
  5.     } 
  6.     return { 
  7.         x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
  8.         y:ev.clientY + document.body.scrollTop - document.body.clientTop 
  9.     }; 
  10. function mouseMove(ev){ 
  11.     ev = ev || window.event; 
  12.      
  13.     var mousePos = mousePosition(ev); 
  14.      
  15.     document.getElementById('xxx').value = mousePos.x; 
  16.     document.getElementById('yyy').value = mousePos.y; 
  17. document.onmousemove = mouseMove; 

 

2、jQuery实现

  1. $('#ele').click(function(event){ 
  2.     //获取鼠标在图片上的坐标  
  3.     console.log('X:' + event.offsetX+'  Y:' + event.offsetY);  
  4.      
  5.     //获取元素相对于页面的坐标  
  6.     console.log('X:'+$(this).offset().left+'  Y:'+$(this).offset().top); 
  7. }); 

八、禁止移动端浏览器页面滚动

 

1、HTML实现

  1. <body ontouchmove="event.preventDefault()" > 

 

2、JavaScript实现

  1. document.addEventListener('touchmove'function(event) { 
  2.     event.preventDefault(); 
  3. }); 

九、阻止默认行为

  1. // JavaScript 
  2. document.getElementById('btn').addEventListener('click'function (event) { 
  3.     event = event || window.event; 
  4.     if (event.preventDefault){ 
  5.         // W3C 
  6.         event.preventDefault(); 
  7.     } else
  8.         // IE 
  9.         event.returnValue = false
  10.     } 
  11. }, false); 
  12. // jQuery 
  13. $('#btn').on('click'function (event) { 
  14.     event.preventDefault(); 
  15. }); 

十、阻止冒泡

  1. // JavaScript 
  2. document.getElementById('btn').addEventListener('click'function (event) { 
  3.     event = event || window.event; 
  4.     if (event.stopPropagation){ 
  5.         // W3C 
  6.         event.stopPropagation(); 
  7.     } else
  8.         // IE 
  9.         event.cancelBubble = true
  10.     } 
  11. }, false); 
  12. // jQuery 
  13. $('#btn').on('click'function (event) { 
  14.     event.stopPropagation(); 
  15. }); 

十一、检测浏览器是否支持svg

  1. function isSupportSVG() {  
  2.     var SVG_NS = 'http://www.w3.org/2000/svg'
  3.     return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;  
  4. }  
  5. console.log(isSupportSVG()); 

十二、检测浏览器是否支持canvas

  1. function isSupportCanvas() { 
  2.     if(document.createElement('canvas').getContext){ 
  3.         return true
  4.     }else
  5.         return false
  6.     } 
  7. console.log(isSupportCanvas()); 

十三、检测是否是微信浏览器

  1. function isWeiXinClient() { 
  2.     var ua = navigator.userAgent.toLowerCase();  
  3.     if (ua.match(/MicroMessenger/i)=="micromessenger") {  
  4.         return true;  
  5.     } else {  
  6.         return false;  
  7.     } 
  8. alert(isWeiXinClient()); 

十四、检测是否移动端及浏览器内核

  1. var browser = {  
  2.     versions: function() {  
  3.         var u = navigator.userAgent;  
  4.         return {  
  5.             trident: u.indexOf('Trident') > -1, //IE内核  
  6.             presto: u.indexOf('Presto') > -1, //opera内核  
  7.             webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核  
  8.             gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko  
  9.             mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否移动终端  
  10.             ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios  
  11.             android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android  
  12.             iPhone: u.indexOf('iPhone') > -1 , //iPhone  
  13.             iPad: u.indexOf('iPad') > -1, //iPad  
  14.             webApp: u.indexOf('Safari') > -1 //Safari  
  15.         };  
  16.     } 
  17. }  
  18. if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {  
  19.     alert('移动端');  

十五、检测是否电脑端/移动端

  1. var browser={  
  2.     versions:function(){ 
  3.         var u = navigator.userAgent, app = navigator.appVersion; 
  4.         var sUserAgent = navigator.userAgent; 
  5.         return { 
  6.         trident: u.indexOf('Trident') > -1, 
  7.         presto: u.indexOf('Presto') > -1,  
  8.         isChrome: u.indexOf("chrome") > -1,  
  9.         isSafari: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u), 
  10.         isSafari3: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1, 
  11.         webKit: u.indexOf('AppleWebKit') > -1,  
  12.         gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, 
  13.         mobile: !!u.match(/AppleWebKit.*Mobile.*/),  
  14.         ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/),  
  15.         android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, 
  16.         iPhone: u.indexOf('iPhone') > -1,  
  17.         iPad: u.indexOf('iPad') > -1, 
  18.         iWinPhone: u.indexOf('Windows Phone') > -1 
  19.         }; 
  20.     }() 
  21. if(browser.versions.mobile || browser.versions.iWinPhone){ 
  22.     window.location = "http:/www.baidu.com/m/"

十六、检测浏览器内核

  1. function getInternet(){     
  2.     if(navigator.userAgent.indexOf("MSIE")>0) {     
  3.       return "MSIE";       //IE浏览器   
  4.     }   
  5.     if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){     
  6.       return "Firefox";     //Firefox浏览器   
  7.     }   
  8.     if(isSafari=navigator.userAgent.indexOf("Safari")>0) {     
  9.       return "Safari";      //Safan浏览器   
  10.     }   
  11.     if(isCamino=navigator.userAgent.indexOf("Camino")>0){     
  12.       return "Camino";   //Camino浏览器   
  13.     }   
  14.     if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){     
  15.       return "Gecko";    //Gecko浏览器   
  16.     }     

十七、强制移动端页面横屏显示

  1. $( window ).on( "orientationchange"function( event ) { 
  2.     if (event.orientation=='portrait') { 
  3.         $('body').css('transform''rotate(90deg)'); 
  4.     } else { 
  5.         $('body').css('transform''rotate(0deg)'); 
  6.     } 
  7. }); 
  8. $( window ).orientationchange(); 

十八、电脑端页面全屏显示

  1. function fullscreen(element) { 
  2.     if (element.requestFullscreen) { 
  3.         element.requestFullscreen(); 
  4.     } else if (element.mozRequestFullScreen) { 
  5.         element.mozRequestFullScreen(); 
  6.     } else if (element.webkitRequestFullscreen) { 
  7.         element.webkitRequestFullscreen(); 
  8.     } else if (element.msRequestFullscreen) { 
  9.         element.msRequestFullscreen(); 
  10.     } 
  11. fullscreen(document.documentElement); 

十九、获得/失去焦点

 

1、JavaScript实现

  1. <input id="i_input" type="text" value='会员卡号/手机号'/> 
  2. // JavaScript 
  3. window.onload = function(){ 
  4.     var oIpt = document.getElementById("i_input"); 
  5.     if(oIpt.value == "会员卡号/手机号"){ 
  6.         oIpt.style.color = "#888"
  7.     }else
  8.         oIpt.style.color = "#000"
  9.     }; 
  10.     oIpt.onfocus = function(){ 
  11.         if(this.value == "会员卡号/手机号"){ 
  12.             this.value=""
  13.             this.style.color = "#000"
  14.             this.type = "password"
  15.         }else
  16.             this.style.color = "#000"
  17.         } 
  18.     }; 
  19.      
  20.     oIpt.onblur = function(){ 
  21.         if(this.value == ""){ 
  22.             this.value="会员卡号/手机号"
  23.             this.style.color = "#888"
  24.             this.type = "text"
  25.         } 
  26.     }; 

 

2、jQuery实现

  1. <input type="text"  class="oldpsw" id="showPwd" value="请输入您的注册密码"/> 
  2. <input type="password" name="psw" class="oldpsw" id="password" value="" style="display:none;"/> 
  3. // jQuery 
  4. $("#showPwd").focus(function() { 
  5.     var text_value=$(this).val(); 
  6.     if (text_value =='请输入您的注册密码') { 
  7.         $("#showPwd").hide(); 
  8.         $("#password").show().focus(); 
  9.     } 
  10. }); 
  11. $("#password").blur(function() { 
  12.     var text_value = $(this).val(); 
  13.     if (text_value == "") { 
  14.         $("#showPwd").show(); 
  15.         $("#password").hide(); 
  16.     } 
  17. }); 

二十、获取上传文件大小

  1. <input type="file" id="filePath" onchange="getFileSize(this)"/> 
  2. // 兼容IE9低版本 
  3. function getFileSize(obj){ 
  4.     var filesize; 
  5.      
  6.     if(obj.files){ 
  7.         filesize = obj.files[0].size; 
  8.     }else
  9.         try
  10.             var path,fso;  
  11.             path = document.getElementById('filePath').value; 
  12.             fso = new ActiveXObject("Scripting.FileSystemObject");  
  13.             filesize = fso.GetFile(path).size;  
  14.         } 
  15.         catch(e){ 
  16.             // 在IE9及低版本浏览器,如果不容许ActiveX控件与页面交互,点击了否,就无法获取size 
  17.             console.log(e.message); // Automation 服务器不能创建对象 
  18.             filesize = 'error'// 无法获取 
  19.         } 
  20.     } 
  21.     return filesize; 

二十一、限制上传文件类型

 

 1、高版本浏览器

  1. <input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docxs,.pdf"> 

 

2、限制图片

  1. <input type="file" class="file" value="上传" accept="image/*"/> 

 

3、低版本浏览器

  1. <input type="file" id="filePath" onchange="limitTypes()"/> 
  2. <script type="text/javascript"> 
  3. /* 通过扩展名,检验文件格式。 
  4.  * @parma filePath{string} 文件路径 
  5.  * @parma acceptFormat{Array} 允许的文件类型 
  6.  * @result 返回值{Boolen}:true or false 
  7.  */ 
  8. function checkFormat(filePath,acceptFormat){ 
  9.     var resultBoolfalse
  10.         ex = filePath.substring(filePath.lastIndexOf('.') + 1); 
  11.         exex = ex.toLowerCase(); 
  12.          
  13.     for(var i = 0; i < acceptFormat.length; i++){ 
  14.       if(acceptFormat[i] == ex){ 
  15.             resultBool = true
  16.             break; 
  17.       } 
  18.     } 
  19.     return resultBool; 
  20. }; 
  21.          
  22. function limitTypes(){ 
  23.     var obj = document.getElementById('filePath'); 
  24.     var path = obj.value; 
  25.     var result = checkFormat(path,['bmp','jpg','jpeg','png']); 
  26.      
  27.     if(!result){ 
  28.         alert('上传类型错误,请重新上传'); 
  29.         obj.value = ''
  30.     } 
  31. </script> 

 请根据本身使用情况适当更改代码使用!