思洋互动网站建设学前班

10.使用jQuery链来限定选择器，让你的代码更简洁更优雅　　

 

由于JavaScript支持链结构而且支持断行，所以你的代码可以写成下面这样，这个例子先在元素上移除一个class然后在同一个元素上添加另一个class：

1. $('#shopping_cart_items input.in_stock')  
2.    .removeClass('in_stock')  
3.    .addClass('3-5_days');  

如果想让它更简单实用，你可以创建一个支持链结构的jQuery函数：
广州网站建设,网站建设,广州网页设计,广州网站设计

1.  $.fn.makeNotInStock = function() {  
2.     return $(this).removeClass('in_stock').addClass('3-5_days');  
3. }  
4.    
5. $('#shopping_cart_items input.in_stock').makeNotInStock().log();  

11.使用回调函数同步效果　　

如果你想确保某个事件或动画效果要在另一个事件运行之后再调用，那你就要使用回调函数了。你可以在这些动画效果后面绑定回调函数：

1. slideDown( speed, [回调] ) ie. $(‘#sliding’).slideDown(’slow’, function(){…   
2.  <style> 
3.  div.button    { background:#cfd; margin:3px; width:50px;  
4.    text-align:center; float:left; cursor:pointer;  
5.    border:2px outset black; font-weight:bolder; }  
6.  #sliding      { display:none; }  
7. </style>   
8.  
9.  $(document).ready(function(){  
10. // 使用jQuery的click事件改变视觉效果，并开启滑动效果  
11.  $("div.button").click(function () {  
12.    //div.button 现在看上去是按下的效果  
13.    $(this).css({ borderStyle:"inset", cursor:"wait" });  
14.    //#sliding 现在将渐隐并在完成动作之后开启渐显效果  
15.    //slideup once it completes  
16.    $('#sliding').slideDown('slow', function(){  
17.      $('#sliding').slideUp('slow', function(){  
18.        //渐显效果完成后将会改变按钮的CSS属性  
19.        $('div.button').css({ borderStyle:"outset", cursor:"auto" });  
20.      });  
21.    });  
22.  });  
23. });  

12.学会使用自定义选择器　　

jQuery允许我们在css选择器的基础上定义自定义选择器来让我们的代码更简洁:

1. $.expr[':'].mycustomselector= function(element, index, meta, stack){  
2.     // element- DOM元素  
3.     // index - 堆栈中当前遍历的索引值  
4.     // meta - 关于你的选择器的数据元  
5.     // stack - 用于遍历所有元素的堆栈  
6.    
7.     // 包含当前元素则返回true  
8.     // 不包含当前元素则返回false  
9. };  
10. // 自定义选择器的应用:  
11. $('.someClasses:test').doSomething();  

下面让我们来看看一个小例子，我们通过使用自定义选择器来锁定含有”rel”属性的元素集：
广州网站建设,网站建设,广州网页设计,广州网站设计

1. $.expr[':'].withRel = function(element){  
2.   var $this = $(element);  
3.   //仅返回rel属性不为空的元素  
4.   return ($this.attr('rel') != '');  
5. };  
6.    
7. $(document).ready(function(){  
8. //自定义选择器的使用很简单，它和其他选择器一样，返回一个元素包装集  
9. //你可以为他使用格式方法，比如下面这样修改它的css样式  
10.  $('a:withRel').css('background-color', 'green');  
11. });   
12. <ul> 
13.   <li> 
14.     <a href="#">without rel</a> 
15.   </li> 
16.   <li> 
17.     <a rel="somerel" href="#">with rel</a> 
18.   </li> 
19.   <li> 
20.     <a rel="" href="#">without rel</a> 
21.   </li> 
22.   <li> 
23.     <a rel="nofollow" href="#">a link with rel</a> 
24.   </li> 
25. </ul>  

13.预加载图片

通常使用JavaScript来预加载图片是个相当不错的方法:

1. //定义预加载图片列表的函数(有参数)  
2. jQuery.preloadImages = function(){  
3.   //遍历图片  
4.   for(var i = 0; i<arguments.length; i++){  
5.     jQuery("<img>").attr("src", arguments[i]);  
6.    
7.   }  
8. }  
9. // 你可以这样使用预加载函数  
10. $.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");  

14.将你的代码测试完好

jQuery有一个名为QUnit单元测试框架。编写测试很容易，它能让您可以放心地修改您的代码，并确保它仍然按预期工作。下面是如何工作的：

1. //将测试分成若干模块.  
2. module("Module B");  
3. test("some other test", function() {  
4.   //指定多少个判断语句需要加入测试中.  
5.   expect(2);  
6.     
7.   equals( true, false, "failing test" );  
8.   equals( true, true, "passing test" );  
9. });