热门关键字：
jquery > jquery教程 > jquery教程 > 9个最常用的Jquery代码片段

9个最常用的Jquery代码片段

1849
作者：管理员
发布时间：2012/7/26 20:53:33
评论数：0
转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=18

1、图片预加载
  1. (function($) {   
  2.   var cache = [];   
  3.   // 参数是相对于当前页面的图像路径    
  4.  $.preLoadImages = function() {   
  5.     var args_len = arguments.length;   
  6.     for (var i = args_len; i--;) {   
  7.       var cacheImage = document.createElement('img');   
  8.       cacheImage.src = arguments[i];   
  9.       cache.push(cacheImage);   
  10.     }   
  11.   }   
  12. jQuery.preLoadImages("image1.gif", "/images/2.png");  
 
2、 在新窗口打开链接 (target=”blank”)
  1. $('a[@rel$='external']').click(function(){   
  2.      this.target = "_blank";   
  3. });   
  4. /*  
  5.    Usage:  
  6.    <a href="http://www.jq-school.com" rel="external">http://www.jq-school.com</a>  
  7. */  
 
3、平滑滚动页面到某个锚点
  1. $(document).ready(function() {   
  2.     $("a.topLink").click(function() {   
  3.         $("html, body").animate({   
  4.             scrollTop: $($(this).attr("href")).offset().top + "px"  
  5.         }, {   
  6.             duration: 500,   
  7.             easing: "swing"  
  8.         });   
  9.         return false;   
  10.     });   
  11. });  
 
4、鼠标滑动时的渐入和渐出
  1. $(document).ready(function(){   
  2.     $(".thumbs img").fadeTo("slow", 0.6); // 这设置的透明度   
  3.    $(".thumbs img").hover(function(){   
  4.         $(this).fadeTo("slow", 1.0);       
  5.     },function(){   
  6.         $(this).fadeTo("slow", 0.6);        
  7.    });   
  8. });  
 
5、制作等高的列
  1. var max_height = 0;   
  2. $("div.col").each(function(){   
  3.     if ($(this).height() > max_height) { max_height = $(this).height(); }   
  4. });   
  5. $("div.col").height(max_height);  
 
6、在一些老的浏览器上启用 HTML5 的支持
  1. (function(){   
  2.     if(!/*@cc_on!@*/0)   
  3.         return;   
  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. })()   
  6.   
  7. //然后在head中引入该js   
  8. <!--[if lt IE 9]>   
  9. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>   
  10. <![endif]-->  
 
7、测试浏览器是否支持某些 CSS3 属性
  1. var supports = (function() {   
  2.    var div = document.createElement('div'),   
  3.       vendors = 'Khtml Ms O Moz Webkit'.split(' '),   
  4.       len = vendors.length;   
  5.   
  6.    return function(prop) {   
  7.       if ( prop in div.style ) return true;   
  8.   
  9.       prop = prop.replace(/^[a-z]/, function(val) {   
  10.          return val.toUpperCase();   
  11.       });   
  12.   
  13.       while(len--) {   
  14.          if ( vendors[len] + prop in div.style ) {   
  15.             // browser supports box-shadow. Do what you need.   
  16.             // Or use a bang (!) to test if the browser doesn't.   
  17.             return true;   
  18.          }   
  19.       }   
  20.       return false;   
  21.    };   
  22. })();   
  23.   
  24. if ( supports('textShadow') ) {   
  25.    document.documentElement.className += ' textShadow';  
 
8、获取 URL 中传递的参数
  1. $.urlParam = function(name){   
  2.     var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);   
  3.     if (!results) { return 0; }   
  4.     return results[1] || 0;   
  5. }  
 
9、禁用表单的回车键提交
  1. $("#form").keypress(function(e) {   
  2.   if (e.which == 13) {   
  3.     return false;   
  4.   }   
  5. });  




如果您觉得本文的内容对您的学习有所帮助：支付鼓励



关键字：Web
友荐云推荐