分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

jQuery构造函数init参数分析续

JavaScript   发布时间：2022-04-16  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jQuery构造函数init参数分析续，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如果SELEctor是其他字符串情况就比较多了比较复杂了

Strings if ( typeof SELEctor === "String" ) {...}

开始分不同的情况处理

String or an ID? if ( SELEctor.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { // Assume that Strings that start and end with <> are HTML and skip the regex check match = [ null,SELEctor,null ]; } else { match = quickExPR.exec( SELEctor ); }

If里面先判断第一个字符是“<”最后一个字符是“>”并且长度大于3就假设此时的SELEctor是html简单标签,比如$(‘

')但是记住仅仅是假设”assume”比如$(‘')这样的也会走这里。然后把match数组修改成[null,null],这里的match是在init函数里面声明的变量，主要是用来作为区分是参数类型的工具稍后在将可能情况列出，下面是源码中声明的四个变量

SELEctor,context,rootjQuery ) { var match,elem,ret,doc;

如果不满足if的条件就会调用一个正则去得到match的结果，quickExpr是jQuery构造函数里面声明的变量

check for HTML Strings or ID Strings // Prioritize #id over to avoid XSS via LOCATIOn.hash (#9521) quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,

这个正则主要是为了区别html字符串和id字符串的，第二个注释中讲到了为了避免基于 LOCATIOn.hash的 XSS 攻击，于是在 quickExpr 中增加了 #（#9521）的意思是我们可以在jQuery官网找到相关解释。

首先访问然后搜索对应的值即可

quickExpr.exec( selector )执行的结果可以是一个数组，数组的第一个元素是匹配的元素，剩下的分别是分组匹配的元素，这个正则有两个分组(<[\w\W]+>)[^>]和([\w\-]*)一个是标签一个是id值。最终会把结果交给match。下面就来分析下match的各种情况首先单标签不用正则式是 [ null,null ]的形式，下面在代码中证明：

在html里面我们创建一个jQuery对象然后再init方法里面输出得到的match结果：

= 3 ) { // Assume that strings that start and end with <> are HTML and skip the regex check match = [ null,null ]; } else { match = quickExpr.exec( selector ); } console.log(match); // [null,"
",null];

下面我们修改一下参数改为$(‘#div')然后再看一下结果

代码如下:

还有一种比较特殊的情况$(‘

123')然后我们再看一下结果

title"> 代码如下:
dewrwe",input: "
dewrwe"]

我们可以看到id总是在第三个元素而标签值在第二个元素保存着，对于最后一种情况而言跟$(‘

')是没有什么区别的因为生成dom元素时是不会处理第一个元素的。基于这个结果可以接着来分析下一个判断了。

接下来的会根据match的结果分为三种情况

ntext) ) { 
 ...

} else if ( !context || context.jquery ) {

...

} else {

...

}

第一种情况满足的条件是match一定要有值，match[1]就是第二个元素就是保存标签的这个有值或者不存在上下文，但是好像没有id什么事啊？其实不是的通过分析match的结果可以知道第二个元素没有值肯定就是id选择器得到的结果，而id是唯一的，不需要写上下文（其实写了上下文也会正常执行只不过会使用Sizzle而不是在这里处理了跟body是一样的）。好了第一个条件进来的情况就是

1.标签

$(‘

') $(‘
123') $(‘
23213213
')...

2.没有上下文的id $(‘#div')

第一个条件内部又进行了细分：

$(array) if ( match[1] ) {

...

// HANDLE: $("#id")

}else{

}

很显然if是处理标签的else是处理id的，先来看看是怎么处理标签的吧

ntext = context instanceof jQuery ? context[0] : context; doc = ( context ? context.ownerDocument || context : document );

// If a single String is passed in and it's a single tag
// 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构造函数里面声明的目的是判断单标签 比如

这样的

title"> 代码如下:
(?:<\/\1>)?$/,

然后把结果交给ret变量，基于ret的值又进行划分按照单标签和复杂标签分开处理ret值存在那就是匹配到了单标签然后再根据context是不是普通对象又@R_325_6962@isPlainObject是检测是不是普通对象的方法,如果是普通对象，就利用js原生方法createElement传入标签创建元素并放在一个数组里面，之所以这样是为了以后跟jquery对象合并方便，然后把数组赋值给SELEctor，后采用对象冒充的方法调用attr方法，这里attr居然有3个参数，而平常我们使用的api里面是两个参数，其实jQuery中有很多类似的情况，同样的方法有着对内对外两个接口。第二个参数就是对象形式的上下文，因为attr可以像

title"> 代码如下:
{ src: "test.jpg",alt: "Test Image" });

这给我们的其实就是我们以后可以$(‘

',{id:'div'})这样写了也是支持的。如果不是对象就直接创建元素不考虑属性。还是把创建的元素放在数组里面。如果ret没有值那就是复杂的标签了比如$(‘
231
')这样的这个时候原生的js就搞不定啦需要调取另外一个方法jQuery.buildFragment来处理，这个方法实现以后在学习吧，总之最后都会创建dom元素。最后返回合并后的结果

title"> 代码如下:
SELEctor );

不像之前的return this这里是返回merge执行后的结果其实他的任务就是把放在数组里面的创建好的的dom元素合并到jquery元素中去，最终变成{0：div,length:1...}这样的对象形式。这样的话简标签情况就处理完毕。

然后else里面处理的是id的情况

); // check parentNode to catch when Blackberry 4.6 returns // nodes that are no longer in the document #6963 if ( elem && elem.parentNode ) { // Handle the case where IE and Opera return items // by name instead of ID if ( elem.id !== match[2] ) { return rootjQuery.find( SELEctor ); } // Otherwise,we inject the element directly into the jQuery object this.length = 1; this[0] = elem; } this.context = document; this.SELEctor = SELEctor; return this;

很简单直接调用原生js的id选择器但是有一些系统会出现bug

注释说的很清楚黑莓系统，就是元素已经不存在了但是依然能够匹配得到所以再加上父节点，不存在的元素肯定没有父节点的。还有一种情况就是ie和opera浏览器会出现按name值匹配的情况所以在做了一个判断

if ( elem.id !== match[2] ) {

如果真的不幸出现了那就不能使用原生方法而是用find方法也就是使用sizzle引擎了，在大多数正常情况下就直接将获取到的元素放到this里面就可以啦然后修改下context的值。Ok终于把第一个大分支分析完了。然后再看根据match的第二个分支

ntext || context.jquery ) { return ( context || rootjQuery ).find( SELEctor ); }

这里是如果没有上下文或者上下文是jquery对象的时候这个比较简单就是直接用find方法了rootjQuery 就是$（document）

最后字符串的情况上面都不属于的话

title"> 代码如下:
s.constructor( context ).find( SELEctor );

This.constructor就是jQuery其实还是使用find方法。

以上所述就是本文的全部内容了，希望大家能够喜欢。

大佬总结

以上是大佬教程为你收集整理的jQuery构造函数init参数分析续全部内容，希望文章能够帮你解决jQuery构造函数init参数分析续所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：init参数构造函数
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap