频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
jQuery内核详解与实践读书笔记2:破解jQuery选择器接口1
2014-09-28 08:51:02      个评论      
收藏   我要投稿
前两篇已经介绍了如何搭建一个jQuery框架的雏形,从这一篇开始详细了解jQuery选择器的接口。jQuery选择器功能强大但用法很简单,它仅仅提供了一个接口:jQuery(),也可以简写为$()。

 

1. 简单但很复杂的黑洞

 

jQuery提供了唯一的接口(jQuery()或$())使选择器与外界进行交流。

jQuery框架的基础是查询,即查询文档元素对象,因此可以认为jQuery对象就是一个选择器,并在此基础上构建和运行查询过滤器。

jQuery查询结果的数据集合是jQuery对象的一部分。

在$()函数中可以包含选择字符串,HTML字符串,DOM对象和数据集合等不同类型的参数。jQuery是如何分辨这些参数呢?

为了方便理解其中的奥秘,把jQuery框架进行简化,先删除所有方法,函数以及逻辑代码,然后在init()构造器中,使用alert()方法获取selector参数的类型和信息,代码如下:

 

复制代码

 1 (function() {

 2   var window = this;

 3   jQuery = window.jQuery = window.$ = function(selector, context) {

 4     return new jQuery.fn.init(selector, context);

 5   };

 6   jQuery.fn = jQuery.prototype = {

 7        init : function(selector, context) {

 8          alert(selector);

 9        }

10   };

11 })();

12 window.onload = function() {

13   $("p.red");//获取"p.red"

14   $("p .red");//获取"p .red"

15   $(document.getElementById("wrap"));//获取"[object HTMLDivElement]"

16   $("#wrap", document.forms[0]);//获取"wrap"

17   $("<p>hello, world</p>");//获取"<p>hello, world</p>"

18 }; 

复制代码

 

 

2. 盘根错节的逻辑关系

 

jQuery()的4种构建jQuery对象的方式:

 

  jQuery(expression, [context])

 

  jQuery(html, [ownerDocument])

 

  jQuery(elements)

 

  jQuery(callback)

 

jQuery对象的方法都是针对DOM元素对象进行的操作。

 

jQuery对象就是jQuery.fn.init构造器创建的对象,而通过jQuery.fn.init.prototype = jQuery.fn途径,再使用jQuery的原型对象去覆盖jQuery.fn的原型对象,使得jQuery对象的原型方法也就被继承过来,从而形成了错综复杂但又井然有序的关系。

 

 

 

3. jQuery构造器

 

jQuery的构造器就是jQuery.fn.init()函数,它负责对传入的参数进行分析,然后生成并返回jQuery对象。这个函数的第一个参数是必需的,如果为空,则默认为document。

从本质上讲,使用jQuery选择器(即jQuery.fn.init()构造器)构建jQuery对象,就是在this对象上附加DOM元素集合,附加的方式包括以下两种:

  1. 如果是单个DOM元素,可以直接把DOM元素作为数组元素传递给this对象,还可以通过ID从DOM文档中查询元素

  2. 如果是多个DOM元素,则以集合方式附加,如jQuery对象、数组和对象等,此时可以通过CSS选择器匹配到所有DOM元素,然后过滤,最后构建类数组的数据结构

其中,CSS选择器是通过jQuery().find(selector)函数来完成的。通过jQuery().find(selector)可以分析选择器字符串,并在DOM文档树中查找到符合语法的元素集合。

 

下面先来分析一下init()初始化构造器函数,来分析jQuery选择器是如何工作的。

 

复制代码

 1 /**

 2  * jQuery构造器源码分析,

 3  * 注意该书是以jQuery的1.3版本来分析的,与当前Github上的源码的init函数有一定的出入,

 4  * 但是整体的思路是差不多的,只是具体的实现方式有所不同而已,

 5  */

 6 //jQuery原型函数,构造jQuery对象的入口

 7 //所有jQuery对象方法都通过jQuery原型对象来继承

 8 jQuery.fn = jQuery.prototype = {

 9     /*

10      * jQuery对象初始化构造器,相当于jQuery对象的类型,有该函数负责创建jQuery对象

11      * 参数说明:

12      *         selector:选择器的符号,可以是任意数据类型。考虑DOM元素操作需要,该函数应该是包含DOM元素的任何数据

13      *         context:上下文,指定在文档DOM中哪个节点下开始进行查询,默认值为document

14      */

15     init : function(selector, context) {

16         selector = selector || document; //确保selector参数存在,默认值为document

17         /*

18          * 第一种情况,处理选择符为DOM元素,此时将忽略上下文,即忽略第二个参数

19          *         例如,$(document.getElementById("wrap")),jQuery(DOMElement)匹配DOM元素。

20          *             先使用selector.nodeType判断当selector为元素节点,将length设置为1,

21          *             并且赋值给context,实际上context作为init的第二个参数,

22          *             也意味着它的上下文节点就是selector该节点,返回它的$(DOMElement)对象

23          */

24         if(selector.nodeType) { //存在nodeType属性,说明选择符是一个DOM元素

25             this[0] = selector; //直接把当前参数的DOM元素存入类数组中

26             this.length = 1;    //设置类数组的长度,以方便遍历访问

27             this.context = selector; //设置上下文属性

28             return this;        //返回jQuery对象,即类数组对象

29         }

30         

31         //如果选择符参数为字符串,则进行处理

32         //例如,$("<p>hello, world</p>"),jQuery(html, [ownerDocument])匹配HTML字符串

33         if(typeof selector == "string") {

34             //使用quickExpr正则表达式匹配该选择符字符串,决定是处理HTML字符串,还是处理ID字符串

35             quickExpr = /^[^<]*(<(.|\s)+>[^>]*$|^#([\w-]+)$)/;

36             var match = quickExpr.exec(selector);

37             //验证匹配的信息

38             if(match && (match[1] || !context)) {

39                 /*

40                  * 第二种情况,处理HTML字符串,类似$(html) -> $(array)

41                  */

42                 if(match[1]) {

43                     selector = jQuery.clean([match[1]], context);

44                 } 

45                 /*

46                  * 第三种情况,处理ID字符串,类似$("#id")

47                  */

48                 else {

49                     var elem = document.getElementById(match[3]);  //获取该元素确保该元素存在

50                     //处理在IE和Opera浏览器下根据name,而不是根据ID返回元素

51                     if(elem && elem.id != match[3]) {

52                         return jQuery().find(selector);    //默认调用document.find()方法

53                     }

54                     //否则将把elem作为元素参数直接调用jQuery()函数,返回jQuery对象

55                     var ret = jQuery(elem || []); 

56                     ret.context = document;        //设置jQuery对象的上下文属性

57                     ret.selector = selector;    //设置jQuery对象上的选择符属性

58                     return ret;                    //返回jQuery对象

59                 }

60             } 

61             /*

62              * 第四种情况,处理jQuery(expression, [context])

63              *         例如,$("p .red")的表达式字符串

64              */

65             else {

66                 return jQuery(context).find(selector);

67             }

68         } else if(jQuery.isFunction(selector)) {

69             /*

70              * 第五种情况,处理jQuery(callback),即$(document).ready()的简写

71              *         例如,$(function() { alert("hello, world");}),

72              *         或者 $(document).ready(function() { alert("hello, world");})

73              */

74             return jQuery(document).ready(selector);

75         }

76         //确保旧的选择符能够通过

77         if(selector.selector && selector.context) {

78             this.selector = selector.selector;

79             this.context = selector.context;

80         }

81         /*

82          * 第六种情况,处理类似$(elements)

83          */

84         return this.setArray(jQuery.isArray(selector) ? selector : jQuery.makeArray(selector));

85     }

86     //其它代码。。。

87 };

复制代码

代码中已经对相关的判断逻辑做了详细的说明,这里就不在做解释说明了。

 

今天就先写到这里,下一篇内容将是关于jQuery如何生成DOM元素和引用DOM元素。欢迎转载,转载请注明出处。

 

 

点击复制链接 与好友分享!回本站首页
相关TAG标签 内核 接口 笔记
上一篇:JS省市区联动
下一篇:jQuery对象与dom对象的转换
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站