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 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
浅谈JavaScript字符集
May 22 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
easyui validatebox验证
Apr 29 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
javascript删除数组元素的七个方法示例
Sep 09 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
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
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
jQuery中:button选择器用法实例
2015/01/04 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
python处理中文编码和判断编码示例
2014/02/26 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Python可变参数函数用法实例
2015/07/07 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
python3实现飞机大战
2020/11/29 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
高级Java程序员面试要点
2013/08/02 面试题
后勤副校长自我鉴定
2013/10/13 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
安全教育实施方案
2014/03/02 职场文书
学校运动会霸气口号
2014/06/07 职场文书
市场部岗位职责
2015/02/12 职场文书
入学证明
2015/06/23 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python