jquery核心功能分析

作者:zccst

核心功能包括:

jQuery是如何定义的,如何调用的,如何扩展的。掌握核心方法是如何实现的,是理解jQuery源码的关键。这里理解了一切豁然开朗。

1,如何定义,即入口

// Define a local copy of jQuery
var jQuery = function( selector, context
) {
    // The jQuery object is actually just the init constructor
‘enhanced‘
    return new jQuery.fn.init( selector, context,
rootjQuery );//jQuery对象仅仅是构造函数jQuery.prototype.init加强版
}

2,jQuery的原型,及与jQuery.fn.init的关系

//定义对象方法,也即只有通过$("xx").的方式才能调用。

jQuery.fn = jQuery.prototype = {

init:function( selector, context, rootjQuery ) {

return jQuery.makeArray( selector, this
);

}

其他还有很多属性和方法,

属性有:jquery,constructor, selector, length

方法有:toArray,get, pushStack,each, ready,slice, first,last,eq,
map,end, push, sort, splice

...

}

//把jQuery.prototype赋给jQuery.prototype.init.prototype,是为了后面的实例化

// Give the init function the jQuery prototype for later
instantiation
jQuery.fn.init.prototype = jQuery.fn;

也即是,$("xx")拥有了实例方法,可以调用。(调用jQuery.prototype下定义的方法)

3,extend扩展对象方法和静态方法原理

jQuery.extend = jQuery.fn.extend = function() {

var target = arguments[0] || {};

return target;

}

使用extend就方便了,无非就是$.extend({});和$.fn.extend({});如果你能在看到fn时理解联想到是jQuery.prototype就好了。

再通过this作用域看一下:

$.extend ->this是$-> this.aa()

$.fn.extend->this是$.fn-> this.aa()

附extend实现细节:

使用场景:

1,扩展一些函数

只有一个参数。例如:$.extend({f1:function(){},f2:function(){},f3:function(){}})

2,合并多个对象到第一个对象

(1)浅copy,第一个参数是目标对象。例如

var a = {name:"hello"}

var b = {age:30}

$.extend(a,b);//a={name:"hello",age:30}

(2)深copy,第一个参数是TRUE,第二个参数是目标对象。例如

var a = {name:{job:"it"}};
var b = {name:{age: 30
}};
//$.extend(a,b);
$.extend(true,a,b);
console.log(a);


 1 jQuery.extend = jQuery.fn.extend = function() {
2 var options, name, src, copy, copyIsArray, clone,
3 target = arguments[0] || {},
4 i = 1,
5 length = arguments.length,
6 deep = false;
7
8 // 是不是深复制 Handle a deep copy situation
9 if ( typeof target === "boolean" ) {
10 deep = target;
11 target = arguments[1] || {};
12 // skip the boolean and the target
13 i = 2;
14 }
15
16 // 不是对象类型 Handle case when target is a string or something (possible in deep copy)
17 if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
18 target = {};
19 }
20
21 // 扩展插件的情况 extend jQuery itself if only one argument is passed
22 if ( length === i ) {//$.extend({f1:function(){},f2:function(){},f3:function(){}})
23 target = this;//this是$,或是$.fn
24 --i;
25 }
26
27 for ( ; i < length; i++ ) {//可能有多个对象扩展到第一个对象上
28 // Only deal with non-null/undefined values
29 if ( (options = arguments[ i ]) != null ) {//options是一个对象
30 // Extend the base object
31 for ( name in options ) {
32 src = target[ name ]; //src是target里已经存在的value(也可能不存在)
33 copy = options[ name ];//copy是待合入的一个value
34
35 // 防止循环引用 Prevent never-ending loop
36 if ( target === copy ) {//例如:var a={};$.extend(a,{name:a});//可能导致循环引用
37 continue;
38 }
39
40 // if是深复制else是浅复制 Recurse if we‘re merging plain objects or arrays
41 if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
42 if ( copyIsArray ) {
43 copyIsArray = false;
44 clone = src && jQuery.isArray(src) ? src : [];
45
46 } else {
47 clone = src && jQuery.isPlainObject(src) ? src : {};
48 }
49
50 // 亮了,直至剥离至最深一层非对象类型,而且是逐个。Never move original objects, clone them
51 target[ name ] = jQuery.extend( deep, clone, copy );
52
53 // Don‘t bring in undefined values
54 } else if ( copy !== undefined ) {
55 target[ name ] = copy;//target[ name ] = options[ name ];
56 }
57 }
58 }
59 }
60
61 // Return the modified object
62 return target;
63 };

jquery核心功能分析

时间: 2024-10-06 11:40:37

jquery核心功能分析的相关文章

jQuery核心之 $

参考jQuery官网API文档 $ 和 $() 的区别很重要: 1.$(document).ready() 和 $(document).load() 的 区别: 前者等到DOM准备好了之后就会触发,后者必须等到整个网页(包括图片,iframe)准备好了才触发. $(function(){ alert("hello jquery"); }); 是 $(document).ready(function(){ alert("hello jquery"); })的缩写. 2

jQuery核心之DOM操作的常用方法

参考jQuery官网API文档 1..attr() 获取 : $( "a" ).attr( "href" ); 设置: $( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" ); $( "a" ).attr({ title: "all titles are the same too!", href: "s

jQuery 核心

1.each(callback) 以每一个匹配的元素作为上下文来执行一个函数.意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素).而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型). 返回 'false' 将停止循环 (就像在普通的循环中使用 'break').返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue'). 参数:callba

Jquery核心函数

在Jquery中,所有的DOM对象都将封装成Jquery对象,而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作. 所以Jquery提供了一个可以将DOM对象封装成Jquery对象的函数,就是Jquery核心函数jquery(),也称为工厂函数. jquery核心函数有7个重载,分别如下: jquery()  该函数返回一个空的jquery对象. jquery(elements)  该函数将一个或多个DOM元素转化为Jquery对象(或jquery集合) jquery(ca

jQuery核心之那些有效的方法

jQuery提供了一些很有效的方法,这些方法都在$命名空间之下,对常规的编码很有帮助,完整的api详见:utilities documentation on api.jquery.com $.trim():删除多余的空格: // Returns "lots of extra whitespace" $.trim( " lots of extra whitespace " ); $.each() : 遍历数组和对象: $.each([ "foo",

jQuery核心之jQuery Object及其相关的常用方法

1.jQuery Object 和 原生的DOM对象之间有许多方法是不一样的,用jQuery的方法大部分情况下返回的是jQuery Object,但是jQuery也提供了一些方法可以很轻松的获取原生的DOM对象. 先来看:获取jQuery Object之一, // Selecting only the first <h1> element on the page (in a jQuery object) var headings = $( "h1" ); var first

jQuery 核心 - noConflict() 方法

摘录自W3School>> jQuery 核心参考手册 实例 使用 noConflict() 方法为 jQuery 变量规定新的名称: var jq=$.noConflict(); 定义和用法 noConflict() 方法让渡变量 $ 的 jQuery 控制权. 该方法释放 jQuery 对 $ 变量的控制. 该方法也可用于为 jQuery 变量规定新的自定义名称. 提示:在其他 JavaScript 库为其函数使用 $ 时,该方法很有用. 语法 jQuery.noConflict(remo

JQuery 核心函数 基础研究与提高

前言 jquery对于一个程序员来说,或多或少都听过.相信很多人在项目中也都用过.现在也有很多开源的库都是依赖于jQuery,因此熟悉jQuery还是很有必要的.使用熟练的大神可以简单看看,对于小白来说还是纯纯的干货.熟悉jQuery还是先从核心函数入手比较好,后面其他的功能都是在此核心函数的基础上扩展的. jQuery 核心函数 jQuery(expression, [context]) jQuery(html, [ownerDocument]) jQuery(html, props) jQu

JQuery DOM元素方法跟JQuery 核心函数跟JQuery 事件方法

JQuery DOM 元素 函数                            描述 .get()                           从队列中删除所有未运行的项目. .index()                        存储与指定元素相关的任意数据. .size()                          存储与匹配元素相关的任意数据. .toArray()                     从队列最前端移除一个队列函数,并执行它. JQuer