阅读jQuery源代码带给我们的18个惊喜

相信大家都非常熟悉jQuery类库，绝对最受欢迎的JS框架，如果你也有兴趣阅读v源代码的话，或者你也会有同感。

以下便是阅读jQuery源代码后挖掘的18条令人惊奇的信息：

1. sizzle的大小

Sizzle是用来帮助jQuery实现DOM查询操作的引擎，可能你不知道它占用了jQuery源代码的22%。

其次最大的特性是$.ajax，占用了jQuery源代码中的8%。

2. $.grep

这个方法类似underscore中的_.filter方法，使用两个参数，一个数组变量和一个回调函数，返回通过回调函数为true的元素。

3. 冒泡提醒

jQuery特意的阻止了一个事件类型的气泡。这就是load事件，jQuery传递了一个特别的noBubble:true来阻止事件冒泡到window对象（这可能导致错误的匹配了window.load事件）

4. 缺省的动画速度

jQuery通过快速的变化元素样式属性来实现动画。每一个变化被叫做一个"滴答"。缺省的动画速度是每13毫秒滴答一次，你可以通过重写jQuery.fx.interval来修改缺省的值

5. $.fn.addClass接受一个方法

我们通常提供$.fn.addClass一个class定义名称。但是它同样可以支持方法。你只需要方法返回一个空格分隔的字符串class定义即可。这个方法甚至接受元素的索引为参数，这样我们可以构建自己的只能class名。

6. $.fn.removeClass同样支持

这个方法也可以支持接受方法为参数，和$.fn.addClass一样。

7. :empty伪选择器

这个伪选择器可以匹配所有没有子元素的元素

8. :lt和:gt伪选择器

这些伪选择器基于索引来匹配。例如，$('div:gt(2)')将会返回所有的div除了前３个元素（基于０索引）。如果你提供一个负值，那么就从末尾算起。

9. $(document.ready()使用了promise

jQuery内部使用了jQuery的deferred来保证DOM完整被加载

10. $.type

大家可能都熟悉typeof来判断数据类型，但是你是否知道jQuery提供了.type()方法？这个方法比浏览器本地版本更智能。

例如，typeof(new Number(3))返回了“object”，然而$.type(new Number(3))放回数字。

更确切的说$.type告诉你返回对象的值类型

11. $.fn.queue

你可以使用$('div').queue()来检查一个元素的特效队列。这对于你想了解多少个特效还保持在对象元素很有好处。

更有用的在于，你可以直接操作队列来添加自己的特效，如下：

1. $( document.body ).click(function() {
2. $( "div" )
3. .show( "slow" )
4. .animate({ left: "+=200" }, 2000 )
5. .queue(function() {
6. $( this ).addClass( "newcolor" ).dequeue();
7. })
8. .animate({ left: "-=200" }, 500 )
9. .queue(function() {
10. $( this ).removeClass( "newcolor" ).dequeue();
11. })
12. .slideUp();
13. });

 

12. Click事件针对禁用元素将失效

jQuery针对禁用的元素自动中断点击事件，这样可以有效优化保证让你不用书写更多代码来检测这种情况

13. $.fn.on 接受多个对象

你是否知道$.fn.on方法接受对象来添加多个事件？下面是例子：

1. $( "div.test" ).on({
2. click: function() {
3. $( this ).toggleClass( "active" );
4. }, mouseenter: function() {
5. $( this ).addClass( "inside" );
6. }, mouseleave: function() {
7. $( this ).removeClass( "inside" );
8. }
9. });

 

14. $.camelCase

这个方法帮助你将破折号风格字符串转化为驼峰拼写方式，如下：

background-color 转化为 backgroundColor

15. $.active

调用$.active返回活动的XHR查询数量。这个可以用来强制限制同时处理多少个ajax请求

16. $.fn.parentsUntil/$.fn.nextUntil/$.fn.prevUntil

我过去非常熟悉.parents()，.next()和.prev()方法，但是不知道其它版本。

他们匹配所有父层/下一个元素/上一个元素直到遇到了停止条件元素

17. $.fn.clone参数

这个方法带的参数可以通过传递参数true来帮助你确认拷贝数据属性和事件

18. 更多$.fn.clone参数

除了上面参数，你也可以通过传递另外一个参数true来克隆子元素的数据属性和事件，这叫做深层次克隆。

第二参数缺省使用第一个参数值。如果你第一个参数为true，那么第二个参数也为true的话，就可以省略

以上就是阅读jQuery源代码的收获，希望大家觉得有帮助，感谢阅读，如果你有更多的心得，请和我们分享！