这样使用JQuery，让应用更快捷高效

一、使用自定义选择器

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

 $.expr[':'].mycustomselector= function(element, index, meta, stack){
    // element- DOM元素
    // index - 堆栈中当前遍历的索引值
    // meta - 关于你的选择器的数据元
    // stack - 用于遍历所有元素的堆栈

    // 包含当前元素则返回true
    // 不包含当前元素则返回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>

 

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

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

 

三、绑定jQuery函数到$(window).load事件

大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件。虽然$(document).ready事件在大多数情况下都OK，但是它的解析顺序是在文档准备就绪，单文档中的图片等对象正在下载的时候开始运行的。所以在某些时候使用$(document).ready事件并不一定能达到我们预期的效果，比如一些视觉效果和动画、拖拽、预读取隐藏图片等…通过使用$(window).load事件便可以安全的在整个文档都准备就绪之后再开始运行你期望的代码。

$(window).load(function(){
// 将你希望在页面完全就绪之后运行的代码放在这里
});

 

四、关于选择器的使用建议

a) 尽量使用Id选择器，jQuery的选择器使用的API都是基于getElementById或getElementsByTagName，因此可以知道效率最高的是Id选择器，因为jQuery会直接调用getElementById去获取dom，而通过样式选择器获取jQuery对象时往往会使用 getElementsByTagName去获取然后筛选。

b) 样式选择器应该尽量明确指定tagName, 如果开发人员使用样式选择器来获取dom，且这些dom属于同一类型，例如获取所有className为jquery的div，那么我们应该使用的写法是$('div.jquery')而不是$('.jquery')，这样写的好处非常明显，在获取dom时jQuery会获取div然后进行筛选，而不是获取所有dom再筛选。

 

c) 避免迭代，很多同学在使用jQuery获取指定上下文中的dom时喜欢使用迭代方式，如$('.jquery .child')，获取className为jquery的dom下的所有className为child的节点，其实这样编写代码付出的代价是非常大的，jQuery会不断的进行深层遍历来获取需要的元素，即使确实需要，我们也应该使用诸如$(selector,context), $('selector1>selector2'), $(selector1).children(selector2), $(selctor1).find(selector2)之类的方式。比如：$("#list p");后代选择器获取的是元素内部所有元素。而有时候实际只要获取子元素，那么就不应该使用后代选择器。应该使用子选择器，代码如下：$("#list > p");