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


Posted in Javascript onFebruary 05, 2013

一、源码思路分析总结
概要:
jQuery的核心思想可以简单概括为“查询和操作dom”,今天主要是分析一下jQuery.prototype.init选择器构造函数,处理选择器函数中的参数;
这个函数的参数就是jQuery()===$()执行函数中的参数,可以先看我之前写的浅析jQuery基础框架一文,了解基础框架后,再看此文。
思路分析:
以下是几种jQuery的使用情况(用于查询dom),每种情况都返回一个选择器实例(习惯称jQuery对象(一个nodeList对象),该对象包含查询的dom节点):
1、处理 $(""), $(null), $(undefined), $(false)
如果参数为以上非法值,jQuery对象不包含dom节点
2、处理 $(DOMElement)
如果参数为节点元素,jQuery对象包含该参数节点元素,并分别增加属性值为参数节点元素、1的context、length属性和用[]访问jQuery对象中dom节点的用法
例2.1:

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 ); 
} 
}
Javascript 相关文章推荐
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 #Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 #Javascript
jquery zTree异步加载简单实例分享
Feb 05 #Javascript
JS打印gridview实现原理及代码
Feb 05 #Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 #Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 #Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 #Javascript
You might like
sony ICF-2010 拆解与改装
2021/03/02 无线电
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
php利用事务处理转账问题
2015/04/22 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
PHP基本语法实例总结
2016/09/09 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
python的id()函数解密过程
2012/12/25 Python
Python NumPy库安装使用笔记
2015/05/18 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
学术会议主持词
2014/03/17 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
学生保证书格式
2015/02/27 职场文书
停电放假通知
2015/04/14 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
陪护人员误工证明
2015/06/24 职场文书
暑期工社会实践报告
2015/07/13 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers