非常全的jQuery常用技巧总结(6)_H5之家 - 中国HTML5教程资源分享第一站

//使用class来调用submit按钮要比使用绝对的ID选择器慢很多
var main_button= $('#main .button');
var main_button= $('#main_button');
　　8.善于利用jQuery链
　　jQuery链不但允许以简洁的方式写出强大的操作，而且提高了开发效率，因为它能够把多个命令应用到包装集，而不必重新计算包装集。从而你不用再这样写了：
<li>Description:<inputtype="text" value="" /></li>

$('#shopping_cart_items input.text').css('border','3px dashed yellow');
$('#shopping_cart_items input.text').css('background-color','red');
$('#shopping_cart_items input.text').val("text updated");
　　取而代之你可以使用jQuery链来完成简便的操作：
var input_text= $('#shopping_cart_items input.text');
input_text.css('border','3px dashed yellow');
input_text.css('background-color','red');
input_text.val("text updated");

//same with chaining:
var input_text= $('#shopping_cart_items input.text');
input_text
.css('border','3px dashed yellow')
.css('background-color','red')
.val("text updated");
　　9.绑定jQuery函数到$(window).load事件
　　大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件。虽然$(document).ready事件在大多数情况下都OK，但是它的解析顺序是在文档准备就绪，单文档中的图片等对象正在下载的时候开始运行的。所以在某些时候使用$(document).ready事件并不一定能达到我们预期的效果，比如一些视觉效果和动画、拖拽、预读取隐藏图片等…通过使用$(window).load事件便可以安全的在整个文档都准备就绪之后再开始运行你期望的代码。
$(window).load(function(){
// 将你希望在页面完全就绪之后运行的代码放在这里
});
　　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 - 用于遍历所有元素的堆栈

// 包含当前元素则返回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>
<ahref="#">without rel</a>
</li>
<li>
<arel="somerel" href="#">with rel</a>
</li>
<li>
<arel="" href="#">without rel</a>
</li>
<li>
<arel="nofollow" href="#">a link with rel</a>
</li>
</ul>

　　13.预加载图片