阅读 jQuery 源码的18个惊喜

标签: 编程技术 jquery 源码 | 发表时间:2014-07-29 01:41 | 作者:techug
出处:http://www.vaikan.com

我热爱 jQuery,且尽管我认为自己算是一名高级 JavaScript 开发者,我从来没有试过由头到尾把 jQuery 的源码看一遍,直到现在。这里分享一些我一路下来学到的东西:

注意:我使用  $.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 (new Number(3)) 返回  object,而  $.type(new Number(3)) 则返回  number。更新:正如 ShirtlessKirk 在评论中指出, $.type 返回其对象的  .valueOf() 属性。所以更准确的说法应该是  $.type 告诉你一个对象的返回值的类型。

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

$( document.body ).click(function() {
$( "div" )
  .show( "slow" )
  .animate({ left: "+=200" }, 2000 )
  .queue(function() {
    $( this ).addClass( "newcolor" ).dequeue();
  })
  .animate({ left: "-=200" }, 500 )
  .queue(function() {
    $( this ).removeClass( "newcolor" ).dequeue();
  })
  .slideUp();
});

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

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

$( "div.test" ).on({
click: function() {
  $( this ).toggleClass( "active" );
}, mouseenter: function() {
  $( this ).addClass( "inside" );
}, mouseleave: function() {
  $( this ).removeClass( "inside" );
}
});

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

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

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

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

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

相关 [阅读 jquery 源码] 推荐:

阅读 jQuery 源码的18个惊喜

- - 外刊IT评论
我热爱 jQuery,且尽管我认为自己算是一名高级 JavaScript 开发者,我从来没有试过由头到尾把 jQuery 的源码看一遍,直到现在. 这里分享一些我一路下来学到的东西:. 注意:我使用  $.fn.method() 语法来表示调用一组匹配元素的方法. 比如当我说  $.fn.addClass,则表示 $('div').addClass('blue') 或者  $('a.active').addClass('in-use') 此类的用法.

15 款基于 jQuery 的 RSS 阅读器插件

- - ITeye资讯频道
想要第一时间获得网站和博客的更新. RSS提供的更新内容包括博客文章、新闻标题、标准格式的音频或视频等. 本文介绍了15款实用的基于jQuery的RSS阅读器插件,有了它们的帮助,你可以轻松在网站中显示其他网站或博客的最近更新. 该插件与最初的jQuery RSS 十分类似,不过它演示了如何在列表中通过悬停鼠标来预览内容,提示框由隐藏的div构成,在鼠标滑过的时候出现.

jquery源码分析之扩展函数 extend, $.extend

- - CSDN博客推荐文章
声明:本文为 斯人原创,全部为作者一一分析得之,有不对的地方望赐教. 本文地址: http://imsiren.com/archives/525. 好久没写jquery源码的内容了. jquery的发展有很大因素是因为它非常易于扩展,究其原因就得益于 extend函数. 该函数是一个扩展函数…说是一个扩展函数,其实就是一个浅拷贝和深拷贝的函数而已.

Java源码阅读的真实体会

- wangjia - ITeye论坛最新精华讨论帖
刚才在论坛不经意间,看到有关源码阅读的帖子. 回想自己前几年,阅读源码那种兴奋和成就感(1),不禁又有一种激动. 源码阅读,我觉得最核心有三点:技术基础+强烈的求知欲+耐心. 说到技术基础,我打个比方吧,如果你从来没有学过Java,或是任何一门编程语言如C++,一开始去啃《Core Java》,你是很难从中吸收到营养的,特别是《深入Java虚拟机》这类书,别人觉得好,未必适合现在的你.

不得不爱开源 Wijmo jQuery 插件集(2)-【准备工作】(附30种Theme演示和源码)

- - ITeye博客
由于我写这个系列文章的目的是让大家快速、简单的制作绚丽的 jQuery 站点. 第一,ITEYE里有许许多多的大牛. 大牛们可以忽略掉前面的部分内容,直接查看 Theme 展示. 刚刚入门的朋友可以细致的查看前面关于 介绍一些 jQuery 的基础知识,还有如何引用 Wijmo 资源文件的内容. 第二,上篇文章中讲到 Wijmo 内置了多种 Theme,为了满足大牛们的胃口,所以给出了 Wijmo 的 30 种 Theme 演示,并且提供了源码下载:.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大,虽然一直在用jquery,不用一直都没有深入,这几天重新学习了一下,不得不感叹她的强大,已经让我深深入迷. 这里记录一下,她是怎么快速地操作xml的.. 这里我们有一个xml文件:. jquery如何操作呢,总的思想,就是和操作dom差不多的方法. 首先我们获取这个文件的内容:(我先引入jquery库哈).

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候,由于使用了单点登录,所以页面会跳转到sso服务器,进行统一登录,. 现在需要在该界面增加令牌的认证,但是SSO服务器和令牌服务器部署在不同的服务器,且暂时没有要合并的可能,所以在SSO登录的时候必须要对令牌进行验证,就必须涉及到了跨域访问的问题.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

让jquery更快

- - JavaScript - Web前端 - ITeye博客
很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记. 其内容和一些新提供的方法还是很多有值得学习的地方. 使用最新版本的jQuery. jQuery的版本更新很快,你应该总是使用最新的版本. 因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.