jQuery源码阅读计划－8月4日－2/40

1.jQuery选择器接口

jQuery本身就是接口的总入口，选择器支持多种选择方式。

当在jQuery中输入字符串时，其中源码中最先处理的选择方式有两种：

• ID选择器，例如$('#myDiv');
• jQuery的DOM元素生成器，例如$('<div>hello</div>');

对于输入的字符串，jQuery是这么处理：

1. 首先检测输入的字符串是不是HTML字符串：
   1. 如果是的话，直接进入下一步
   2. 如果不是的话，使用正则表达式寻找字符串的ID信息，使用的正则表达式为/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/
2. 下一步进入分支，如果判断输入的字符串是ID选择的话：
   1. 通过上一步得到的ID信息，使用原生API－document.getElementById()找到对应的元素
   2. 将这个元素设为jQuery对象（数组）的第一个元素
   3. 将jQuery对象（数组）的长度设为1
3. 如果判断输入的字符的目的是DOM生成的话：
   1. 先将context提取出来
   2. 开始解析HTML字符串
   3. 先使用正则表达式/^<(\w+)\s*\/?>(?:<\/\1>|)$/检测这个字符串是不是独立的没有子标签的HTML标签（例如：<div></div>）：
      1. 是的话就直接使用原生的createElement来生成
      2. 如果是较为复杂的HTML结构的话使用jQuery.buildFragment来解析
      3. 复杂的HTML结构具体是用正则表达式和innerHTML来实现的
      4. 需要注意的是因为浏览器的不同，传入的HTML字符串不一定能被正确的转换成对应的DOM元素，例如 <tittle></tittle>

 

几个值得关注的东西：

正则表达式方法：exec()

• 这个方法很强大，返回的结果是一个数组
• 数组的第一个元素是找到的匹配
• 数组的第二个元素是正则表达式第一部分的匹配
• 数组的第三个元素是正则表达式第二部分的匹配
• ...以此类推

缓存在JS里生成DOM元素的方法：document.createDocumentFragment()

• 这个方法可以有效的减少页面渲染的次数，提高页面的效率
• 原因是我们可以将多次需要插入的元素先插入fragment里面，然后一次性插入页面

 

通过选择器的两个初步匹配器，我们可以知道，通过$()返回的对象不是一般的DOM元素。

而是将DOM元素储存在jQuery对象（数组）里面，这样jQuery就可以用自身的方法很方便的操作这些元素。