自定义一个jquery方法；自定义选择器；预加载图片

参考http://kb.cnblogs.com/page/52290/4/

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

　　

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

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

13.预加载图片

通常使用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");