以下是对jquery-1.6.1.js中的init的解析,旨在分析ID选择器返回唯一一个匹配的元素(1),而多条件选择器返回的确是全部匹配的元素(2)。
(1)是ID选择器走的分支
(2)是多条件选择器走的分支
init: function( selector, context, rootjQuery ) {
var match, elem, ret, doc;
// 传入的selector为$(""), $(null), or $(undefined)
if ( !selector ) {
return this;
}
// 传入的selector是Dom元素,如document.getElementById("id")
//注解1
if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;
}
if ( selector === "body" && !context && document.body ) {
this.context = document;
this[0] = document.body;
this.selector = selector;
this.length = 1;
return this;
}
// Handle HTML strings
if ( typeof selector === "string" ) {
// 传入"<tr>"
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 = quickExpr.exec( selector );
}
// Verify a match, and that no context was specified for #id
if ( match && (match[1] || !context) ) {
// HANDLE: $(html) -> $(array)
if ( match[1] ) {
context = context instanceof jQuery ? context[0] : context;
doc = (context ? context.ownerDocument || context : document);
// If a single string is passed in and it's a single tag
ret = rsingleTag.exec( selector ); // "<tr>" to "tr"
if ( ret ) {
if ( jQuery.isPlainObject( context ) ) {
selector = [ document.createElement( ret[1] ) ];
jQuery.fn.attr.call( selector, context, true ); //TODO
} else {
selector = [ doc.createElement( ret[1] ) ]; //createElement: "tr" --> "<tr>"
}
} else {
//传入的selector中不包括Element,例如"fff"
ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
selector = (ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment).childNodes; //return NodeList[<TextNode textContent="fff">]
}
return jQuery.merge( this, selector );
// HANDLE: $("#id")
} else {
//(1)是ID选择器走的分支
elem = document.getElementById( match[2] );
if ( elem && elem.parentNode ) {
// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem.id !== match[2] ) {
return rootjQuery.find( selector );
}
// Otherwise, we inject the element directly into the jQuery object
//(1)是ID选择器走的分支
this.length = 1;
this[0] = elem;
}
this.context = document;
this.selector = selector;
return this;
}
// HANDLE: $(expr, $(...))
} else if ( !context || context.jquery ) {
//(2)是多条件选择器走的分支
return (context || rootjQuery).find( selector );
// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
return this.constructor( context ).find( selector );
}
// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
if (selector.selector !== undefined) {
this.selector = selector.selector;
this.context = selector.context;
}
return jQuery.makeArray( selector, this );
}
ID选择器和多条件选择器Demo:
$("#id");
$("#id1, #id2");
上面的例子在调用init创建就Query对象的时候,根本没有传递context,这里借用http://api.jquery.com/context/中的一句话来解释一下:The value of this property is typically equal to document, as this is the default context for jQuery objects if none is supplied. The context may differ if, for example, the object was created by searching within an <iframe> or XML document.
总结:(context || rootjQuery).find( selector );实际上是执行的document.find(selector);
注解1:关于这个分支的运用,举例如下:
var elem = document.getElementById("id_list[4521216583]");//返回的是Dom元素
//将Dom元素转为jquery对象的方法,也就是传入一个Dom元素,走注解1所在的分支
var $elem = $(elem);
//顺带解释一下,.value和.val()的区别
//value是Dom元素的属性
//val是jquery对象所有的
elem.value;
$elem.val();
分享到:
相关推荐
本文将对 jQuery 源码中的重要部分——初始化函数 init 进行详细介绍。 首先,jQuery 的入口函数 jQuery.fn.init 是一个构造器,用于创建新的 jQuery 对象。通过分析这个函数的源码,我们可以理解 jQuery 是如何...
总结来说,jQuery源码解析系列将带领我们逐步揭开这个前端库的神秘面纱,从整体结构、接口设计到具体实现,深入理解其设计思想和实现细节。无论是对于提高开发效率,还是对于个人技能提升,都有极大的帮助。通过学习...
总结来说,jQuery源码解读涉及了JavaScript的闭包、对象构造、原型链、方法扩展、浏览器兼容性和自定义扩展等多个核心知识点。理解这些原理有助于我们更深入地使用和定制jQuery,提升JavaScript编程效率。
jQuery的核心之一是选择器引擎,这部分源码涉及到如何解析和执行CSS选择器。例如,`jQuery.fn.init = function( selector, context ) { ... }`是jQuery对象原型链上的初始化方法,它负责根据传入的选择器和上下文...
### jQuery源码解析:深入理解jQuery JavaScript库 #### 核心概述 `jQuery JavaScript Library v1.8.3`是jQuery框架的一个版本,发布于2012年11月13日,由jQuery Foundation和其他贡献者共同开发,遵循MIT许可协议...
### jQuery源码+中文详细注解 #### 一、引言 本文档是对jQuery源码进行中文注解的详细介绍,旨在帮助广大前端开发者更深入地理解jQuery的核心逻辑和技术要点。通过对核心部分的逐行注解,可以更好地掌握jQuery的...
《jQuery源码解析:深入理解核心机制》 jQuery,这个小巧而强大的JavaScript库,自2006年发布以来,就以其简洁的API和出色的跨浏览器兼容性赢得了开发者们的广泛喜爱。今天,我们有幸深入剖析这份来之不易的jQuery...
### jQuery源码分析—构造jQuery对象 #### 一、源码结构概览 根据所提供的文件内容,本节将深入分析如何构建jQuery对象及其核心构造逻辑。首先,让我们从整体上理解jQuery构造函数的设计思路。 ##### 总体结构 ...
《深入解析jQuery 1.11源码》 jQuery,作为JavaScript库的杰出代表,以其简洁易用的API,极大地简化了DOM操作、事件处理、动画制作和Ajax交互。...对jQuery源码的探索,是提升JavaScript开发能力的重要步骤。
在jQuery未压缩版本源码中,`jQuery.fn.init`是核心构造函数,负责处理各种类型的输入参数,将其转换为jQuery对象。这个函数的主要任务包括: - 处理空字符串、`null`或`undefined`作为输入的情况,此时返回一个空...
#### 四、`init` 方法解析 `init` 方法是初始化方法,用于处理传入的选择器和上下文。该方法的具体实现位于 `jQuery.fn.init` 中,这个方法是 jQuery 对象原型的一个方法,因此所有 jQuery 对象都可以访问它。 ```...
《深入剖析jQuery源码》 jQuery,作为一款广泛使用的JavaScript库,它的出现极大地简化了JavaScript的DOM操作,事件处理,动画制作以及Ajax交互。本文将深入探讨jQuery的源码,帮助开发者理解其内部机制,提升...
通过对 jQuery 源码的深入解析,我们不仅可以了解到 jQuery 内部的工作原理,还可以学习到很多 JavaScript 编程的最佳实践。例如,如何使用 IIFE 来避免全局命名冲突,如何利用原型链来优化内存使用,以及如何编写可...
本文将详细解析jQuery源码中的魔术方法,帮助你更好地理解和运用这个强大的工具。 首先,我们要明确什么是魔术方法。在编程领域,魔术方法通常是指那些在特定时刻自动调用,且名字以两个下划线(__)开头的方法。在...
三、jQuery源码解析 jQuery的源码结构清晰,主要分为选择器、DOM操作、事件处理、动画效果、AJAX等模块。其中,`jQuery.fn`(即`jQuery.prototype`)包含了大部分方法,如`$(...)`构造函数、`each()`遍历方法等。...
源码中的`init`函数是构造jQuery对象的关键,它负责解析选择器,创建并返回jQuery实例。 二、DOM操作 jQuery对DOM操作进行了大量优化,如`append`、`prepend`、`remove`等方法,使得动态更新页面变得轻松。在源码...
在源码中,我们可以看到`init`函数是构造器的主要入口,它负责解析参数、初始化对象以及执行相应的操作。 在DOM操作方面,jQuery提供了如`$(selector).html()`、`$(selector).append()`等方法,这些方法在源码中都...
在进行jQuery源码分析的过程中,我们了解到jQuery对象是通过内部函数`jQuery.fn.init`构造的,其方法和属性则通过原型链继承自`jQuery.fn`,这是jQuery能够提供丰富且灵活DOM操作方法的基石。通过这种方式,即使不...
二、jQuery源码解析 jQuery的核心在于它的构造函数`$()`,它接受一个参数,可以是CSS选择器、HTML字符串或者DOM元素。源码中,`init`函数负责初始化,它首先解析参数,然后对选择到的元素进行操作。例如,`$...