JQuery技巧总结

 

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

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

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

 

2.在FireBug控制台记录jQuery

　　FireBug是我最喜欢用的一个浏览器扩展工具之一，这个工具可以让你快速的在可视化界面中了解当前页面的HTML+CSS+JavaScript，并在该工具下完成即时开发。作为jQuery或JavaScript开发人员，FireFox对于记录你的JavaScript代码 也得到支持。

console.log("hello world")

　　你也可以按照你希望的方式写一些参数：

console.log(2,4,6,8,"foo",bar)

　　你也可以编写一个小扩展来记录jQuery对象到控制台：

jQuery.fn.log= function(msg) {

console.log("%s: %o", msg,this);
return this;
};

　　对于这个扩展，你可以直接使用.log()方法来记录当前对象到控制台。

$('#some_div').find('li.source > input:checkbox')
 .log("sources to uncheck")
 .removeAttr("checked");

 

3.存储数据

　　使用data方法可以避免在DOM中存储数据，有些前端开发er喜欢使用HTML的属性来存储数据：

$('selector').attr('alt','data being stored');
//之后可以这样读取数据:
$('selector').attr('alt');

　　使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的，我们可以使用jQuery的data方法来为页面中的某个元素存储数据

$('selector').data('参数名','要存储的数据');

 //之后这样取得数据:
$('selector').data('参数');

4 .jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：

$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

5.使用回调函数同步效果

　　如果你想确保某个事件或动画效果要在另一个事件运行之后再调用，那你就要使用回调函数了。你可以在这些动画效果后面绑定回调函数：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" });
 });
 });
 });
});

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

　　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>

7.预加载图片

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