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 相关文章推荐
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
浅析JS运动
Dec 28 Javascript
详解javascript new的运行机制
Jan 26 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python爬虫常用的模块分析
2014/08/29 Python
简单的Python抓taobao图片爬虫
2014/10/26 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
python颜色随机生成器的实例代码
2020/01/10 Python
python自动点赞功能的实现思路
2020/02/26 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
单位实习鉴定评语
2015/01/04 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
中标通知书范本
2015/04/17 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
MySQL创建管理KEY分区
2022/04/13 MySQL