10 个很棒的 jQuery 代码片段

图片预加载

 1  ( function ($) {
 2     var  cache  =  [];
 3     //  Arguments are image paths relative to the current page.
 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 
13  jQuery.preLoadImages( " image1.gif " ,  " /path/to/image2.png " );

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

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

当支持 JavaScript 时为 body 增加 class

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

平滑滚动页面到某个锚点

 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  });

鼠标滑动时的渐入和渐出

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

制作等高的列

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);

在一些老的浏览器上启用 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] -->

测试浏览器是否支持某些 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';

获取 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  }

禁用表单的回车键提交

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