jquery学习笔记

jquery用了4、5个月，也算比较熟了，能比较熟练的使用一般用的比较多的东西，但是看看jquery的文档，我还是发现了自己对jquery中的很多好东西感到很陌生，于是萌生出进一步学习jquery的想法，以下就是我学习jquery的一些笔记。我也希望大家在用框架或者函数库的时候别停留在中低级的阶段，尽量往上看，把一些比较牛逼的用法都掌握下来，说不定哪天你就需要了。

1、callbacks.add(callbacks)。这个方法比较有意思，它可以帮助同时调用若干个函数，当然了，给这些函数传的参数都是一样。看看一个例子：

var foo = function( value ){
console.log( 'foo:' + value );
}
var bar = function( value ){
console.log( 'bar:' + value );
}
//以上定义了两个我们需要调用的函数
var callbacks = $.Callbacks();
callbacks.add( foo );
callbacks.fire( 'hello' );
// outputs: 'foo: hello'
// add the function 'bar' to the list
callbacks.add( bar );
// fire the items on the list again
callbacks.fire( 'world' );
// outputs:
// 'foo: world'
// 'bar: world'

两个核心的方法就是add(fn)和fire(arg),add(fn)传入的参数是方法，fire(arg)传入的是你本该直接调用那两个函数时需要传入的参数。我想这样一个函数调用方式可以帮助你集体调用若干个函数，看上去比较简约。以上这几点还不够，我们继续学一下其他若干个方法：

callbacks.disable()//我想你一看就知道了，顾名思义，就是停止调用之前传入的函数，跟不调用是一样一样的，但是callbacks里面还是有那两个函数的。

callbacks.empty();//和disabled有点像，这个empty()用来清空之前传入，这个时候callbacks里面已经再没有任何函数了

callbacks.fired()//这个fired()用来检验传进来的函数是否已经被调用了，如果已经调用了那这个方法返回的是true，否则，你懂得。。。

callbacks.fireWith( window, ['foo','bar']);//和原生js中的call有点像，你看第一参数window，这个参数就是接下来要被调用的函数的上下文对象，后一个参数是一个参数数组

console.log( callbacks.has( foo ) ); // true 用来检验是否包含一个函数，还是有点用的

callbacks.lock();//顾名思义，lock就是锁住函数，当你调用了这个函数以后，callbacks里面所有的函数都不能再被调用了，而locked()用来检验是否正在被锁住

callbacks.remove( foo );//remove（）就是用来删除一个函数

好了，关于callback的用法就是这么些，好像也不是很牛逼的样子。我们继续看点其他的。
2、contents()这个方法返回某一个元素下面的所有子节点，包括文本节点。如果你需要筛选一下的话推荐使用.not()函数去筛选

3、parents()这个方法注意和parent()是有区别的，前者一层一层往上寻找父元素，直到html根元素，而parent()寻找的只是父元素，要么没有要么一个。另外也谈一下cloest()这个方法，这个方法也是层层向上寻找目标祖父元素，但是要记住它是从自己开始找起的，返回1或0个元素。

4、data()这个方法比较有意思，用它可以在任何元素上保存任何类型的数据，而不仅仅是字符串。设置获取都非常方便。

5、看到一个方法:delay();比较耐人寻味的一个方法，就在不久前我刚刚完成一个任务，这个任务中包括这么一个动画效果：一个一个很稳定展示元素。看似比较简单的事情却花费了我相当的精力。一开始我用setInteravl去做，还是比较成功的，没想到运行几次以后不知道浏览器哪根经出错了，一直存在一个bug，最终结果结果就是没有动画效果。我后来是这么解决的，写一下简化页面以后的方法：

<ul>
<li><img src="tree.png"></li>
<li><img src="tree.png"></li>
<li><img src="tree.png"></li>
<li><img src="tree.png"></li>
<li><img src="tree.png"></li>
<li><img src="tree.png"></li>
<li><img src="tree.png"></li>
</ul>
<script>
function showOneByOne(firstEle,speed){
(function func(ele,speed){
ele.fadeIn(speed,function(){
if(ele.next().length){
func(ele.next(),speed);
}else{
return;
}
});
})(firstEle,speed);
}
showOneByOne($('ul li:eq(0)'),1500);
</script>

仅仅是模拟一下，当时的情况比这个要复杂。这个showOneByOne方法需要你传入要执行动画的那一串元素中的第一个元素以及一个speed参数表示多快的动画效果。传入的第一个元素会自动判断下一个元素存不存在，如果存在的话那就调用自身再继续进行动画，如果下一个元素不存在的话那就退出。通过这样，我就很稳定的实现了这种one by one展示的动画效果，但是今天看到这个delay()方法，我又产生了利用它来完成这个动画效果的欲望，我写到现在还没有使用过这个方法，我要去试试看。实现代码如下：

function showOneByOne(ele,speed){
(function f(ele,speed){
ele.delay(speed).show(speed,function(){
if(ele.next().length){
f(ele.next(),speed);
}else{
return;
}
});
})(ele,speed);
}
showOneByOne($('ul li:eq(0)'),500);

其实实现的手段差不多。在这里我不得不谈谈js原生里面实现的时间调用方法setInterval和setTimeout，这两个方法其实并不是很推荐多用，因为每个浏览器对他们的实现手段比较有差异，他们的执行顺序和结果都受到你的代码环境的影响，因此在相对复杂的代码环境中还是别用这两个方法了，改成用那种递归式的调用来模拟setInterval是一种不错的选择。
6、detach()用来删除匹配的元素或者元素集合，但是它和remove有一点不同，remove彻底删除元素，不可再重新拿回来，而detach之后的元素可以将来再拿回来使用，并且事件、属性都还保留着。

7、eq(-index) 呵呵，之前还不知道eq可以传负的参数，呵呵，负的参数就表示从最后面开始数起，比如-2就表示倒数第二个元素。

8、刚刚跑题一会儿，我用css('opacity',0.5)的这个jquery方法去测试ie7和8发现完全显示，而在css样式表里面用opacity去做就不行，哎，看来以后直接用css()方法来兼容好了。