如果selector是其他字符串情况就比较多了比较复杂了
开始分不同的情况处理
If里面先判断第一个字符是“<”最后一个字符是“>”并且长度大于3就假设此时的selector是html简单标签,比如$(‘
如果不满足if的条件就会调用一个正则去得到match的结果,quickExpr是jQuery构造函数里面声明的变量
这个正则主要是为了区别html字符串和id字符串的,第二个注释中讲到了为了避免基于 location.hash的 XSS 攻击,于是在 quickExpr 中增加了 #(#9521)的意思是我们可以在jQuery官网找到相关解释。
首先访问然后搜索对应的值即可
quickExpr.exec( selector )执行的结果可以是一个数组,数组的第一个元素是匹配的元素,剩下的分别是分组匹配的元素,这个正则有两个分组(<[\w\W]+>)[^>]和([\w\-]*)一个是标签一个是id值。最终会把结果交给match。下面就来分析下match的各种情况首先单标签不用正则式是 [ null,null ]的形式,下面在代码中证明:
在html里面我们创建一个jQuery对象然后再init方法里面输出得到的match结果:
下面我们修改一下参数改为$(‘#div')然后再看一下结果
还有一种比较特殊的情况$(‘
我们可以看到id总是在第三个元素而标签值在第二个元素保存着,对于最后一种情况而言跟$(‘
接下来的会根据match的结果分为三种情况
...
} else if ( !context || context.jquery ) {
...
} else {
...
}
第一种情况满足的条件是match一定要有值,match[1]就是第二个元素就是保存标签的这个有值或者不存在上下文,但是好像没有id什么事啊?其实不是的通过分析match的结果可以知道第二个元素没有值肯定就是id选择器得到的结果,而id是唯一的,不需要写上下文(其实写了上下文也会正常执行只不过会使用Sizzle而不是在这里处理了跟body是一样的)。好了第一个条件进来的情况就是
1.标签
$(‘
2.没有上下文的id $(‘#div')
第一个条件内部又进行了细分:
...
// HANDLE: $("#id")
}else{
}
很显然if是处理标签的else是处理id的,先来看看是怎么处理标签的吧
// just do a createElement and skip the rest
ret = rsingleTag.exec( selector );
if ( ret ) {
if ( jQuery.isPlainObject( context ) ) {
selector = [ document.createElement( ret[1] ) ];
jQuery.fn.attr.call( selector,true );
} else {
selector = [ doc.createElement( ret[1] ) ];
}
} else {
ret = jQuery.buildFragment( [ match[1] ],[ doc ] );
selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes;
}
return jQuery.merge( this,selector);
首先修正一下context的值,如果是jQuery对象就把他变成dom元素就是使用下标的方法这个原理之前说过了,然后有处理了doc变量,如果context不存在就把document赋值给doc如果存在且有ownerDocument属性那就是dom元素了这个值还是document如果不是dom元素比如普通的js对象的话那就把这个对象赋值给doc变量。紧接着对selector又进行了一个正则判断,这个正则也是在jQuery构造函数里面声明的目的是判断单标签 比如
然后把结果交给ret变量,基于ret的值又进行划分按照单标签和复杂标签分开处理ret值存在那就是匹配到了单标签然后再根据context是不是普通对象又分为两种情况isPlainObject是检测是不是普通对象的方法,如果是普通对象,就利用js原生方法createElement传入标签创建元素并放在一个数组里面,之所以这样是为了以后跟jquery对象合并方便,然后把数组赋值给selector,后采用对象冒充的方法调用attr方法,这里attr居然有3个参数,而平常我们使用的api里面是两个参数,其实jQuery中有很多类似的情况,同样的方法有着对内对外两个接口。第二个参数就是对象形式的上下文,因为attr可以像
这给我们的其实就是我们以后可以$(‘
不像之前的return this这里是返回merge执行后的结果其实他的任务就是把放在数组里面的创建好的的dom元素合并到jquery元素中去,最终变成{0:div,length:1...}这样的对象形式。这样的话简标签情况就处理完毕。
然后else里面处理的是id的情况
很简单直接调用原生js的id选择器但是有一些系统会出现bug
注释说的很清楚黑莓系统,就是元素已经不存在了但是依然能够匹配得到所以再加上父节点,不存在的元素肯定没有父节点的。还有一种情况就是ie和opera浏览器会出现按name值匹配的情况所以在做了一个判断
if ( elem.id !== match[2] ) {
如果真的不幸出现了那就不能使用原生方法而是用find方法也就是使用sizzle引擎了,在大多数正常情况下就直接将获取到的元素放到this里面就可以啦然后修改下context的值。Ok终于把第一个大分支分析完了。然后再看根据match的第二个分支
这里是如果没有上下文或者上下文是jquery对象的时候这个比较简单就是直接用find方法了rootjQuery 就是$(document)
最后字符串的情况上面都不属于的话