jQuery玩法

发表于

/*jQuery.fn = jQuery.prototype = { //添加实例属性和方法

jquery : 版本

constructor : 修正指向问题

init() : 初始化和参数管理

selector : 存储选择字符串

length : this对象的长度

toArray() :  转数组

get() :  转原生集合

<!--more-->

pushStack() :  JQ对象的入栈

each() :  遍历集合

ready() :  DOM加载的接口

slice() :  集合的截取

first() :  集合的第一项

last() :   集合的最后一项

eq() :   集合的指定项

map() :   返回新集合

end() :   返回集合前一个状态

push() :    (内部使用)

sort() :    (内部使用)

splice() :  (内部使用)

};*/

$.extend()
$.fn.extend()

当只写一个对象自变量的时候，JQ中扩展插件的形式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$.extend({     //扩展工具方法
	aaa : function(){
		alert(1);
	},
	bbb : function(){
		alert(2);
	}
});
$.fn.extend({     //扩展JQ实例方法
	aaa : function(){
		alert(3);
	},
	bbb : function(){
		alert(4);
	}
});
$.aaa();
$.bbb();
$().aaa();
$().bbb();
$.extend();  -> this -> $  -> this.aaa  ->  $.aaa()
$.fn.extend(); -> this -> $.fn -> this.aaa ->  $().aaa()*/

当写多个对象自变量的时候 , 后面的对象都是扩展到第一个对象身上

1
2
3
4
5
var a = {};
$.extend( a , { name : 'hello' } , { age : 30 } );
console.log( a );

还可以做 深拷贝(第一个参数为true) 和 浅拷贝(默认)

1
2
3
4
5
6
7
8
9
10
var a = {};
var b = {  name : { age : 30 } };
$.extend( true , a , b );
//a.name = 'hi';
a.name.age = 20;
alert( b.name.age );

源码分析：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
jQuery.extend = jQuery.fn.extend = function(){
	定义一些变量
	if(){}   看是不是深拷贝情况
	if(){}   看参数正确不
	if(){}   看是不是插件情况
	for(){   可能有多个对象情况
		if(){}  防止循环引用
		if(){}   深拷贝
		else if(){}   浅拷贝
	}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
jQuery.extend({
	expando  :  生成唯一JQ字符串(内部)
	noConflict()  :  防止冲突
	isReady  :  DOM是否加载完(内部)
	readyWait  :  等待多少文件的计数器(内部)
	holdReady()  :  推迟DOM触发
	ready()  :  准备DOM触发
	isFunction()  :  是否为函数
	isArray()  :  是否为数组
	isWindow()  :  是否为window
	isNumeric()  :  是否为数字
	type()  :  判断数据类型
	isPlainObject()  :  是否为对象自变量
	isEmptyObject()  :  是否为空的对象
	error()  :  抛出异常
	parseHTML()  :  解析节点
	parseJSON()  :  解析JSON
	parseXML()  :  解析XML
	noop()  :  空函数
	globalEval()  :  全局解析JS
	camelCase()  :  转驼峰(内部)
	nodeName()  :  是否为指定节点名(内部)
	each()  :  遍历集合
	trim()  :  去前后空格
	makeArray()  :  类数组转真数组
	inArray()  :  数组版indexOf
	merge()  :  合并数组
	grep()  :  过滤新数组
	map()  :  映射新数组
	guid  :  唯一标识符(内部)
	proxy()  :  改this指向
	access()  :  多功能值操作(内部)
	now()  :  当前时间
	swap()  :  CSS交换(内部)
});

DOMContentLoaded