强大的jQuery

摘要

做为网站开发人员,大多数开发者都是jQuery(简称JQ)的受益者。jQuery作为网站开发人员提高工作效率首选的JS框架,其不但处理了各个浏览器之间的兼容性问题,同时还为我们提供了便捷的API。借助这些API,我们可以很方便的做出想要的效果。

做为网站开发人员,大多数开发者都是jQuery(简称JQ)的受益者。jQuery作为网站开发人员提高工作效率首选的JS框架,其不但处理了各个浏览器之间的兼容性问题,同时还为我们提供了便捷的API。借助这些API,我们可以很方便的做出想要的效果。

虽然jQuery很强大,但是如果想将jQuery的效率发挥到极致,我们还有很多需要学习、借鉴和积累的地方。

初次接触jQuery的时候,笔者就被其强大的元素选择器所吸引。虽然jQuery 的选择器很强大,但是很多开发者在使用的过程中确没有很好的发挥出其优势。笔者见过一些开发者在获取元素的时候放入两个ID选择器(如$('#E #F')),虽然最后也能成功获取元素,但是这种写法无疑有点画蛇添足的意味。原因很简单,ID作为页面中唯一的元素,你要获取它,仅仅只要把它自己拎出 来就好了,没必要带上它的先辈。

为什么这么多开发者会使用jQuery呢?笔者给出的答案是:简单、方便、链式操作

在jQuery中,对于很多操作我们可以使用比原生少80%左右的代码完成。

对于元素的显示与隐藏,JQ为我们提供了show()和hide()方法。值得让人称道的是:在使用show()方法时,jQuery会自动嗅探元素自身属性,而不是一味的通过添加display: block;来显示元素。相信很多朋友可能在使用jQuery的过程中并没注意过这一小细节。

类似show()和hide()的方法还有fadeIn()、fadeOut()、slideDown()、slideUp()。

在使用jQuery 的过程中,笔者发现有一种需求特别常见:寻找某个元素的祖先元素。对于这种需求,笔者刚开始用parents()方法比较多,不过后来就被另一个更好用的closest()方法所替代了。因为相比较于parents()方法,closest()不仅可以找父级元素,同时也能找祖先元素。有一点要特别注 意,closest()方法会先从当前元素开始找,如果当前元素满足条件就不再继续查找了,所以使用的时候一定要特别注意这点。

closest()方法和parents()方法的主要区别是:

1、前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;

2、前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;

3、前者返回0或1个元素,后者可能包含0个或多个元素。

很多时间我们发现用jQuery获取到的元素不能使用原生JS方法和属性,那是因为这些获取到的元素已经被包装成了jQuery对象。所以,要想使用原生的JS方法和属性可以通过[]或get()的方法转成JS原生对象,如:$('#box')[0]或$('#box').get(0),笔者推荐使用get()方法,因为get()方法是官方API提供的。

最后再说一点:我们通过for循环遍历一组jQuery对象时,操作jQuery对象时要使用eq()而不是[],这点一定要特别注意,可别掉到这个坑里了。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: