WEB前端的jQuery程序语言

作为一个java商城开发以及jsp商城开发者来说js和jQuery是最长见也是最常用的,下面就来介绍jQuey常用的方法,首先$.fn.method()语法来表示调用一组匹配元素的方法。比如当我说$.fn.addClass,则表示$('div').addClass('blue')或者$('a.active').addClass('in-use')此类的用法。$.fn是jQuery包装元素的原型。

1.Sizzle的权重:Sizzle是jQuery用于在DOM找元素的的选择器引擎,基于CSS选择器。正是它将$('div.active')转换成可操作的元素数组。我知道Sizzle占了jQuery相当大的部分,但它的庞大还是吓到了我。按行数来说它很无疑是jQuery中唯一最庞大的特性。我估计它占了总代码库的22%,而第二大的特性——$.ajax只占了8%。

2.$.grep:这个方法与Underscore的_.filter类似。接受两个参数,一个元素数组和一个函数,对每个元素依次执行函数,返回执行结果为true的元素数组。

3.冒泡禁止:jQuery明文禁止load事件冒泡。从内部看,jQuery在所有的load事件中传入特殊的noBubble:true标记,所以image.load事件才不会冒泡到window上错误地触发window.load事件。

4.默认动画速度:jQuery通过快速连续地改变样式属性来实现元素动画效果。每一次小改变被称作一个tick。默认动画速度是每13毫秒运行一次tick,要改变速度你可以重写jQuery.fx.interval成你想要的整数。

5.fn.addClass可以接受函数:我们通常向$.fn.addClass提供一个包含类名的字符串来创建元素。但它也可以接受一个函数。这个函数必须返回一个字符串,多个类名间要以空格隔开。这里还有个彩蛋,这个函数接受已匹配元素的索引作为参数,你可以用这个特性来构造智能变化的类名。

6.fn.removeClass也一样:与上文的一样,它也可以接受一个函数。这个函数也会自动接收元素的索引。

7.:empty伪选择器:可以方便地用来匹配没有孩子的元素。

8.:lt与:gt伪选择器:它们会根据元素在匹配集合中的索引来匹配元素。比如$('div:gt(2)')会返回所有的div,除了前三个(从0开始)。如果你传入一个负数,它会倒过来从尾开始数。

9.$(document).ready()的承诺:jQuery貌似是用回了自己的东西。在内部,可信赖的$(document).ready()使用了一个jQuery延迟来确定DOM在什么时候完全加载。

10.$.type:大家肯定能熟练使用typeof来确定数据类型,但你知不知道jQuery提供了一个.type()方法?jQuery版比原生版更加智能。比如typeof(newNumber(3))返回object,而$.type(newNumber(3))则返回number。更新:正如ShirtlessKirk在评论中指出,$.type返回其对象的.valueOf()属性。所以更准确的说法应该是$.type告诉你一个对象的返回值的类型。

11.$.fn.queue:你可以通过$(‘div’).queue()查看一个元素的效果队列,很方便地了解元素还剩余多少效果。更有用的是,你可以直接操作队列去添加效果。从jQuery文档摘录的:

12.禁用元素不会触发click事件:jQuery默认不会为禁用的元素执行click事件,有了这个优化,你无需自己用代码再检查一遍。

13.$.fn.on可以接受对象:你知道$.fn.on可以接受一个对象来一次过连接多个事件吗?jQuery文档的

14.$.camelCase:这个有用的方法可以将连字符式的字符串转换成驼峰式的字符串。

15.$.active:调用$.active返回XHR(XMLHttpRequest)查询的个数。利用它可以手动制定AJAX请求的并发上限。

16.$.fn.parentsUntil/$.fn.nextUntil/$.fn.prevUntil:我比较熟悉.parents()、.next()和.prev(),却不知道原来还有其它的方法。它们会匹配所有的双亲/下一个/前一个元素直到(until)遇到符合终止条件的元素。

17.$.fn.clone参数:当你用.clone()克隆一个元素,你可以用true作为第一个参数来克隆该元素的数据属性(dataattributes)和事件。

18.更多的$.fn.clone参数:除了上面的方法外,你还可以再传多一个true参数来克隆该元素所有孩子的数据属性和事件。这叫做“深克隆”。第二个参数的默认值与第一个一样(第一个默认false)。所以当第一个参数是true而你想让第二个参数也是true时,完全可以忽略第二个参数。

相关推荐