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

一、源码思路分析总结
概要:
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 );
}
}

(0)

相关推荐

  • jQuery源码分析之init的详细介绍

    init 构造器 由于这个函数直接和 jQuery() 的参数有关,先来说下能接受什么样的参数. 源码中接受 3 个参数: init: function (selector, context, root) { ... } jQuery() ,空参数,这个会直接返回一个空的 jQuery 对象,return this. jQuery( selector [, context ] ) ,这是一个标准且常用法,selector 表示一个 css 选择器,这个选择器通常是一个字符串,#id 或者 .cl

  • jQuery学习笔记之jQuery.fn.init()的参数分析

    从return new jQuery.fn.init( selector, context, rootjQuery )中可以看出参数selector和context是来自我们在调用jQuery方法时传过来的.那么selector和context都有哪些可能. 对于表格中的4~9行中的可能做具体分析. 如果selector是字符串,则首先检测是html代码还是#id.126行的if语句:以"<"开头,以">"结尾,且长度>=3.则假设额这个是HTML

  • jQuery构造函数init参数分析

    在我的上一篇随笔里面分析了jQuery的构造函数,jQuery对象中有一个原型方法init才是是真正的构造函数,通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用jQuery的原型方法,就好像是jQuery的实例一样.下面就来看看init这个幕后的构造函数是怎么写的: init: function( selector, context, rootjQuery ) { ... } 可以看到这个方法接受3个参数,其前两个参数是jQuery方法传递过来的 var

  • jQuery构造函数init参数分析续

    如果selector是其他字符串情况就比较多了比较复杂了 // Handle HTML strings if ( typeof selector === "string" ) {...} 开始分不同的情况处理 // Are we dealing with HTML string or an ID? if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 )

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

    一.源码思路分析总结 概要: jQuery的核心思想可以简单概括为"查询和操作dom",今天主要是分析一下jQuery.prototype.init选择器构造函数,处理选择器函数中的参数: 这个函数的参数就是jQuery()===$()执行函数中的参数,可以先看我之前写的浅析jQuery基础框架一文,了解基础框架后,再看此文. 思路分析: 以下是几种jQuery的使用情况(用于查询dom),每种情况都返回一个选择器实例(习惯称jQuery对象(一个nodeList对象),该对象包含查询

  • jQuery日期范围选择器附源码下载

    jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件.整个日期选择器插件使用CSS来渲染样式,可以非常容易的使用CSS来定制皮肤.而且浏览器兼容性非常好,支持多种时间格式. 查看演示             下载源码 准备 使用该日期选择器插件需要 jQuery 1.3.2+和Moment 2.2.0+的支持. <link rel="stylesheet" href="css/daterangepicker.cs

  • 一款简单的jQuery图片标注效果附源码下载

    为了提高用户体验度,在一些电商网站和家居网站上我们会看到,一张图片中显示多种商品,点击每个商品可以弹出对应商品的简单介绍,包括价格等等,设计非常的人性化,今天我们通过实例给大家分享使用jQuery插件来实现这一效果. 先给大家展示下效果图: 效果演示          源码下载 HTML 首先,我们加载jQuery库和easypin插件. <script src="jquery.min.js"></script> <script src="jqu

  • jQuery插件-jRating评分插件源码分析及使用方法

    该插件被广泛应用于各种需要评分的页面当中,今天作为学习,把源码拿出来分析一下,顺便学习其使用方法. 一.插件使用一览. 复制代码 代码如下: <div> <div>第一个例子</div> <div id="16_1" class="myRating"></div> </div> 复制代码 代码如下: <link href="Script/jRating/jRating.jquer

  • jQuery Ajax File Upload实例源码

    本文实例为大家分享了jQuery Ajax File Upload实例源码,供大家参考,具体内容如下 项目结构 Default.aspx Upload.aspx Scripts/- style.css 效果图 客户端html代码 <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="UploadFile.aspx.vb" Inherits="Web.UploadFil

  • Java源码角度分析HashMap用法

    -HashMap- 优点:超级快速的查询速度,时间复杂度可以达到O(1)的数据结构非HashMap莫属.动态的可变长存储数据(相对于数组而言). 缺点:需要额外计算一次hash值,如果处理不当会占用额外的空间. -HashMap如何使用- 平时我们使用hashmap如下 Map<Integer,String> maps=new HashMap<Integer,String>(); maps.put(1, "a"); maps.put(2, "b&quo

  • java线程池核心API源码详细分析

    目录 概述 源码分析 Executor ExecutorService ScheduledExecutorService ThreadPoolExecutor ScheduledThreadPoolExecutor 总结 概述 线程池是一种多线程处理形式,处理过程中将任务添加到队列,然后在创建线程后自动启动这些任务.线程池线程都是后台线程.每个线程都使用默认的堆栈大小,以默认的优先级运行,并处于多线程单元中.如果某个线程在托管代码中空闲(如正在等待某个事件),则线程池将插入另一个辅助线程来使所有

  • Android Choreographer源码详细分析

    目录 一.首先介绍一些基础知识 二.android源码中Choreographer是如何运行 一.首先介绍一些基础知识 1.刷新率(Refresh Rate): 刷新率代表屏幕在一秒内刷新屏幕的次数,用赫兹来表示.赫兹是频率的单位,一秒震动的次数.这个刷新率取决于硬件固定的参数.这个值一般是60Hz.即每16.66ms刷新一次屏幕. 2.帧速率(Frame Rate): 帧速率代表了GPU在一秒内绘制操作的帧数.比如30FPS.60FPS.Frame Per Second. 3.如果两个设备独立

  • java锁机制ReentrantLock源码实例分析

    目录 一:简述 二:ReentrantLock类图 三:流程简图 四:源码分析 lock()源码分析: 非公平实现: 公平锁实现: tryAcquire()方法 公平锁实现: 非公平锁实现: addWaiter() acquireQueued() shouldParkAfterFailedAcquire() parkAndCheckInterrupt() unlock()方法源码分析: tryRelease() unparkSuccessor() 五:总结 一:简述 ReentrantLock是

  • java 中Buffer源码的分析

    java 中Buffer源码的分析 Buffer Buffer的类图如下: 除了Boolean,其他基本数据类型都有对应的Buffer,但是只有ByteBuffer才能和Channel交互.只有ByteBuffer才能产生Direct的buffer,其他数据类型的Buffer只能产生Heap类型的Buffer.ByteBuffer可以产生其他数据类型的视图Buffer,如果ByteBuffer本身是Direct的,则产生的各视图Buffer也是Direct的. Direct和Heap类型Buff

随机推荐