纳金网

标题: 了解jQuery技巧来提高你的代码质量(3) [打印本页]

---

作者: 奇    时间: 2012-1-13 10:25
标题: 了解jQuery技巧来提高你的代码质量(3)

jQuery之所以如此流行并被从大公司到个人博客，几乎每个人都广泛使用，是因为它上手和使用相当简单，而且为我们提供了一些人都不知道的相当棒的特性，下面给大家介绍一些实用的jQuery技巧，希望对您有所帮助。
AD：







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

由于JavaScript支持链结构而且支持断行，所以你的代码可以写成下面这样，这个例子先在元素上移除一个class然后在同一个元素上添加另一个class：
$('#shopping_cart_items input.in_stock')     .removeClass('in_stock')     .addClass('3-5_days');  
如果想让它更简单实用，你可以创建一个支持链结构的jQuery函数：
$.fn.makeNotInStock = function() {      return $(this).removeClass('in_stock').addClass('3-5_days');  }     $('#shopping_cart_items input.in_stock').makeNotInStock().log();  
11.使用回调函数同步效果　　
如果你想确保某个事件或动画效果要在另一个事件运行之后再调用，那你就要使用回调函数了。你可以在这些动画效果后面绑定回调函数：
slideDown( speed, [回调] ) ie. $(‘#sliding’).slideDown(’slow’, function(){…    <style>  div.button    { background:#cfd; margin:3px; width:50px;     text-align:center; float:left; cursor:pointer;     border:2px outset black; font-weight:bolder; }   #sliding      { display:none; }  </style>     $(document).ready(function(){  // 使用jQuery的click事件改变视觉效果，并开启滑动效果   $("div.button").click(function () {     //div.button 现在看上去是按下的效果     $(this).css({ borderStyle:"inset", cursor:"wait" });     //#sliding 现在将渐隐并在完成动作之后开启渐显效果     //slideup once it completes     $('#sliding').slideDown('slow', function(){       $('#sliding').slideUp('slow', function(){         //渐显效果完成后将会改变按钮的CSS属性         $('div.button').css({ borderStyle:"outset", cursor:"auto" });       });     });   });  });  
12.学会使用自定义选择器　　
jQuery允许我们在css选择器的基础上定义自定义选择器来让我们的代码更简洁:
$.expr[':'].mycustomselector= function(element, index, meta, stack){      // element- DOM元素      // index - 堆栈中当前遍历的索引值      // meta - 关于你的选择器的数据元      // stack - 用于遍历所有元素的堆栈         // 包含当前元素则返回***e      // 不包含当前元素则返回false  };  // 自定义选择器的应用:  $('.someClasses:test').doSomething();  
下面让我们来看看一个小例子，我们通过使用自定义选择器来锁定含有”rel”属性的元素集：
$.expr[':'].withRel = function(element){    var $this = $(element);    //仅返回rel属性不为空的元素    return ($this.attr('rel') != '');  };     $(document).ready(function(){  //自定义选择器的使用很简单，它和其他选择器一样，返回一个元素包装集  //你可以为他使用格式方法，比如下面这样修改它的css样式   $('a:withRel').css('background-color', 'green');  });   <ul>   <li>     <a href="#">without rel</a>   </li>   <li>     <a rel="somerel" href="#">with rel</a>   </li>   <li>     <a rel="" href="#">without rel</a>   </li>   <li>     <a rel="nofollow" href="#">a link with rel</a>   </li> </ul>  
13.预加载图片
通常使用JavaScript来预加载图片是个相当不错的方法:
//定义预加载图片列表的函数(有参数)  jQuery.preloadImages = function(){    //遍历图片    for(var i = 0; i<arguments.length; i++){      jQuery("<img>").attr("src", arguments);       }  }  // 你可以这样使用预加载函数  $.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");  
14.将你的代码测试完好
jQuery有一个名为QUnit单元测试框架。编写测试很容易，它能让您可以放心地修改您的代码，并确保它仍然按预期工作。下面是如何工作的：
//将测试分成若干模块.  module("Module B");  test("some other test", function() {    //指定多少个判断语句需要加入测试中.    expect(2);        equals( ***e, false, "failing test" );    equals( ***e, ***e, "passing test" );  });  

文章转自Lee's程序人生的博客，
原文地址：http://www.cnblogs.com/analyzer/articles/1732327.html





纳金网：http://www.narkii.com

---

作者: tc    时间: 2012-2-5 23:25
路过……

---

作者: 菜刀吻电线    时间: 2012-7-8 23:19
我就看看，我不说话

---

作者: tc    时间: 2012-7-12 23:24
先顶上去，偶要高亮加精鸟！

---

作者: C.R.CAN    时间: 2012-8-18 23:43
不会吧，太恐怖了

---

作者: tc    时间: 2012-9-6 23:48
很经典，很实用，学习了!

---

作者: 奇    时间: 2012-9-25 23:18
不错不错，收藏了

---

作者: C.R.CAN    时间: 2012-12-1 23:18
真不错,全存下来了.

---

欢迎光临 纳金网 (http://go.narkii.com/club/)

Powered by Discuz! X2.5