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()方法来兼容好了。