如果想让它更简单实用，你可以创建一个支持链结构的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 – 用于遍历所有元素的堆栈
// 包含当前元素则返回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>
