jQuery.prototype.init选择器构造函数源码思路分析

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery.prototype.init选择器构造函数源码思路分析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7082字，纯文字阅读大概需要11分钟。

内容图文

var obj = document.getElementById('container'), 
jq = $(obj); 

console.log(jq.length); //1 
console.log(jq.context); //obj 
console.log(jq.[0]); //obj 
 
3、处理$(HTML字符串) 
如果第一个参数为HTML字符串，jQuery对象包含由jQuery.clean函数创建的fragment文档碎片中的childnodes节点 
例3.1： 
 代码如下:

var jqHTML = $('<h1>文章标题</h1><p>内容</p>'); 
console.log(jqHTML); //[<h1>,<p>]; 
 
如果第一个参数(HTML字符串)为一个空的单标签，且第二个参数context为一个非空纯对象 
例3.2： 
 代码如下:

var jqHTML = $('<div></div>', { class: 'css-class', data-name: 'data-val' }); 

console.log(jqHTML.attr['class']); //css-class 
console.log(jqHTML.attr['data-name']); //data-val 
 
4、处理$(#id) 
如果第一个参数是一个#加元素id，jQuery对象包含唯一拥有该id的元素节点， 
并分别增加属性值为document、参数字符串、1、的context、selector、length属性和用[]访问jQuery对象中dom节点的用法 
例4.1： 
 代码如下:

var jq = $('#container'); 

console.log(jq.[0]); //包含的dom节点元素 
console.log(jq.length); //1 
console.log(jq.context); //document 
console.log(jq.selector); //container 
 
5、处理$(.className) 
如果第一个参数是一个.className，jQuery对象中拥有class名为className的标签元素，并增加一个属性值为参数字符串、document的selector、context属性 
实际执行代码为： 
 代码如下:

return jQuery(document).find(className); 
 
6、处理$(.className, context) 
如果第一个参数是.className，第二个参数是一个上下文对象(可以是.className(等同于处理$(.className .className))，jQuery对象或dom节点)， 
jQuery对象包含第二个参数上下文对象中拥有class名为className的后代节点元素，并增加一个context和selector属性 
实际执行代码为： 
 代码如下:

return jQuery(context).find(className); 
 
例6.1： 
html代码: 
 代码如下:

<div class="main"> 
<h2 class="title">主内容标题</h2> 
<p>主标题</p> 
</div> 
<div class="sub"> 
<h2 class="title">次内容标题</h2> 
<p>次标题</p> 
</div> 
 
JavaScript代码： 
 代码如下:

var jq, context; 
context = '.sub'; 
var jq = $('.title', context); 
console.log(jq.text()); //次内容标题 
console.log(jq.context); //document 
console.log(jq.selector); //.sub .title 
context = $('.sub'); 
var jq = $('.title', context); 
console.log(jq.text()); //次内容标题 
console.log(jq.context); //document 
console.log(jq.selector); //.sub .title 
context = $('.sub')[0]; 
var jq = $('.title', context); 
console.log(jq.text()); //次内容标题 
console.log(jq.context); //className为sub的节点元素 
console.log(jq.selector); //.title 
 
7、处理$(fn) 
如果第一个参数是fn函数，则调用$(document).ready(fn); 
例7.1： 
 代码如下:

$(function(e){ 
console.log('DOMContent is loaded'); 
}) 
//上面代码等同于： 
jQuery(document).ready(function(e) { 
console.log('DOMContent is loaded'); 
}); 
 
8、处理$(jQuery对象) 
如果第一个参数是jQuery对象，上面已经分析过如果在查询dom时，参数是一个#加元素id，返回的jQuery对象会增加一个属性值为参数字符串、document的selector、context属性 
例8.1： 
 代码如下:

var jq = $('#container'); 
console.log(jq.selector); // #container 
console.log(jq.context); // document 
 
那么当出现$($('#container'))该如何处理呢？同样的，返回的jQuery对象同情况5和6处理的情况一样 
例8.2： 
 代码如下:

var jq2 = $($('#container')); 
console.log(jq2.selector); // #container 
console.log(jq2.context); // document 
 
二、源码注释分析 
[ 基于jQuery1.8.3 ] 
 代码如下:

var rootjQuery = $(document), 
rquickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/; 
jQuery.fn = jQuery.prototype = { 
init: function( selector, context, rootjQuery ) { 
var match, elem, ret, doc; 
// Handle $(""), $(null), $(undefined), $(false) 
if ( !selector ) { 
return this; 
} 
// Handle $(DOMElement) 
if ( selector.nodeType ) { 
this.context = this[0] = selector; 
this.length = 1; 
return this; 
} 
// Handle HTML strings 
if ( typeof selector === "string" ) { 
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 = rquickExpr.exec( selector ); 
} 
// Match html or make sure no context is specified for #id 
// match[1]不为null，则为html字符串，match[2]不为null，则为元素id 
if ( match && (match[1] || !context) ) { 
// HANDLE: $(html) -> $(array) 
if ( match[1] ) { 
context = context instanceof jQuery ? context[0] : context; 
doc = ( context && context.nodeType ? context.ownerDocument || context : document ); 
// scripts is true for back-compat 
// selector是由文档碎片中的childnodes组成的数组 
selector = jQuery.parseHTML( match[1], doc, true ); 
// 如果match[1]为空的单标签元素(如：<div><div>)且context为对象字面量 
if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) { 
// 如果context对象不为空，则将对象中的属性添加到selector数组中仅有的dom节点中 
this.attr.call( selector, context, true ); 
} 
// merge函数的参数应该为两个数组，目的是将第二个数组中的项合并到第一个数组，而this并不是一个数组， 
// this是选择器init构造函数的实例对象，该对象继承jQuery.prototype对象中的length属性(默认为0)，因此可以理解好merge函数源码 
// 将selector中的dom项合并到this对象中，并返回该对象 
return jQuery.merge( this, selector ); 
// HANDLE: $(#id) 
} else { 
elem = document.getElementById( match[2] ); 
// 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 
// ie6，7和Opera存在此bug，当一个标签name和一个标签id值相等时， 
// document.getElementById(#id)函数将返回提前出现的标签元素 
if ( elem.id !== match[2] ) { 
// 如果存在以上Bug，则返回由find函数返回的document文档的后代元素集合 
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; 
} 
// HANDLE: $(expr, $(...)) 
// context不存在或者context为jQuery对象 
} else if ( !context || context.jquery ) { 
return ( context || rootjQuery ).find( selector ); 
// HANDLE: $(expr, context) 
// (which is just equivalent to: $(context).find(expr) 
// context为className或者dom节点元素 
} else { 
// 等同于jQuery(context).find(selector) 
return this.constructor( context ).find( selector ); 
} 
// 处理$(fn)===$(document).ready(fn) 
} else if ( jQuery.isFunction( selector ) ) { 
return rootjQuery.ready( selector ); 
} 
// 处理$(jQuery对象) 
if ( selector.selector !== undefined ) { 
this.selector = selector.selector; 
this.context = selector.context; 
} 
// 当第一个参数selector为jQuery对象时，将selector中的dom节点合并到this对象中，并返回this对象 
return jQuery.makeArray( selector, this ); 
} 
} 

            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的jQuery.prototype.init选择器构造函数源码思路分析全部内容，希望文章能够帮你解决jQuery.prototype.init选择器构造函数源码思路分析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端