10个很棒的jQuery代码片段

图片预加载

做网站、成都网站建设,成都做网站公司-创新互联已向上1000家企业提供了,网站设计,网站制作,网络营销等服务!设计与技术结合,多年网站推广经验,合理的价格为您打造企业品质网站。

 
 
 
    
  
  
  
  1. (function($) { 
    2. 
  
  
  
  2.   var cache = []; 
    3. 
  
  
  
  3.   // Arguments are image paths relative to the current page. 
    4. 
  
  
  
  4.   $.preLoadImages = function() { 
    5. 
  
  
  
  5.     var args_len = arguments.length; 
    6. 
  
  
  
  6.     for (var i = args_len; i--;) { 
    7. 
  
  
  
  7.       var cacheImage = document.createElement('img'); 
    8. 
  
  
  
  8.       cacheImage.src = arguments[i]; 
    9. 
  
  
  
  9.       cache.push(cacheImage); 
    10. 
  
  
  
  10.     } 
    11. 
  
  
  
  11.   } 
    12. 
  
  
  
  12. 
  
  
  
  13. jQuery.preLoadImages("image1.gif", "/path/to/image2.png");
    14.

在新窗口打开链接 (target=”blank”)

 
 
 
    
  
  
  
  1. $('a[@rel$='external']').click(function(){ 
    2. 
  
  
  
  2.      this.target = "_blank"; 
    3. 
  
  
  
  3. }); 
    4. 
  
  
  
  4. 
  
  
  
  5. /* 
    6. 
  
  
  
  6.    Usage: 
    7. 
  
  
  
  7.    catswhocode.com
    8. 
  
  
  
  8. */
    9.

当支持 JavaScript 时为 body 增加 class

 
 
 
    
  
  
  
  1. /* 该代码只有1行，但是最简单的用来检测浏览器是否支持 JavaScript 的方法，如果支持 JavaScript 就在 body 元素增加一个 hasJS 的 class */
    2. 
  
  
  
  2. $('body').addClass('hasJS');
    3.

平滑滚动页面到某个锚点

 
 
 
    
  
  
  
  1. $(document).ready(function() { 
    2. 
  
  
  
  2.     $("a.topLink").click(function() { 
    3. 
  
  
  
  3.         $("html, body").animate({ 
    4. 
  
  
  
  4.             scrollTop: $($(this).attr("href")).offset().top + "px"
    5. 
  
  
  
  5.         }, { 
    6. 
  
  
  
  6.             duration: 500, 
    7. 
  
  
  
  7.             easing: "swing"
    8. 
  
  
  
  8.         }); 
    9. 
  
  
  
  9.         return false; 
    10. 
  
  
  
  10.     }); 
    11. 
  
  
  
  11. });
    12.

鼠标滑动时的渐入和渐出

 
 
 
    
  
  
  
  1. $(document).ready(function(){ 
    2. 
  
  
  
  2.     $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads 
    3. 
  
  
  
  3. 
  
  
  
  4.     $(".thumbs img").hover(function(){ 
    5. 
  
  
  
  5.         $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover 
    6. 
  
  
  
  6.     },function(){ 
    7. 
  
  
  
  7.         $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout 
    8. 
  
  
  
  8.     }); 
    9. 
  
  
  
  9. });
    10.

制作等高的列

 
 
 
    
  
  
  
  1. var max_height = 0; 
    2. 
  
  
  
  2. $("div.col").each(function(){ 
    3. 
  
  
  
  3.     if ($(this).height() > max_height) { max_height = $(this).height(); } 
    4. 
  
  
  
  4. }); 
    5. 
  
  
  
  5. $("div.col").height(max_height);
    6.

在一些老的浏览器上启用 HTML5 的支持

 
 
 
    
  
  
  
  1. (function(){ 
    2. 
  
  
  
  2.     if(!/*@cc_on!@*/0) 
    3. 
  
  
  
  3.         return; 
    4. 
  
  
  
  4.     var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])} 
    5. 
  
  
  
  5. })() 
    6. 
  
  
  
  6. 
  
  
  
  7. //然后在head中引入该js 
    8. 
  
  
  
    9.

测试浏览器是否支持某些 CSS3 属性

 
 
 
    
  
  
  
  1. var supports = (function() { 
    2. 
  
  
  
  2.    var div = document.createElement('div'), 
    3. 
  
  
  
  3.       vendors = 'Khtml Ms O Moz Webkit'.split(' '), 
    4. 
  
  
  
  4.       len = vendors.length; 
    5. 
  
  
  
  5. 
  
  
  
  6.    return function(prop) { 
    7. 
  
  
  
  7.       if ( prop in div.style ) return true; 
    8. 
  
  
  
  8. 
  
  
  
  9.       prop = prop.replace(/^[a-z]/, function(val) { 
    10. 
  
  
  
  10.          return val.toUpperCase(); 
    11. 
  
  
  
  11.       }); 
    12. 
  
  
  
  12. 
  
  
  
  13.       while(len--) { 
    14. 
  
  
  
  14.          if ( vendors[len] + prop in div.style ) { 
    15. 
  
  
  
  15.             // browser supports box-shadow. Do what you need. 
    16. 
  
  
  
  16.             // Or use a bang (!) to test if the browser doesn't. 
    17. 
  
  
  
  17.             return true; 
    18. 
  
  
  
  18.          } 
    19. 
  
  
  
  19.       } 
    20. 
  
  
  
  20.       return false; 
    21. 
  
  
  
  21.    }; 
    22. 
  
  
  
  22. })(); 
    23. 
  
  
  
  23. 
  
  
  
  24. if ( supports('textShadow') ) { 
    25. 
  
  
  
  25.    document.documentElement.className += ' textShadow';
    26.

获取 URL 中传递的参数

 
 
 
    
  
  
  
  1. $.urlParam = function(name){ 
    2. 
  
  
  
  2.     var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); 
    3. 
  
  
  
  3.     if (!results) { return 0; } 
    4. 
  
  
  
  4.     return results[1] || 0; 
    5. 
  
  
  
  5. }
    6.

禁用表单的回车键提交

 
 
 
    
  
  
  
  1. $("#form").keypress(function(e) { 
    2. 
  
  
  
  2.   if (e.which == 13) { 
    3. 
  
  
  
  3.     return false; 
    4. 
  
  
  
  4.   } 
    5. 
  
  
  
  5. });
    6.

原文：http://www.oschina.net/code/snippet_12_7271

文章名称：10个很棒的jQuery代码片段
文章源于：http://www.csdahua.cn/qtweb/news13/121163.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

电子商务知识

同城分类信息

温江做网站公司　　 　成都网站推广　　 　成都商城开发　　 　SF双层罐　　 　工商财税　　 　成都云主机　　 　吉安网站建设　　 　域名申请　　 　网站建设公司　　 　力比特机械　　 　阿坝网站建设　　 　微信网站开发　　 　温江网站建设　　 　红光高低压开关厂　　 　h5响应式网站　　 　格蓝特设备　　 　小程序　　 　成都枢纽中心　　 　广汉网站建设　　 　重庆建站