自定义jQuery,理解jQuery核心实现原理

实现核心功能:
1.自定义$(selector)函数,通过$(‘#red’),$(‘.gold’)调用;
2.添加.html,.css, .attr方法;

jQuery优点:
1.隐式迭代(自动循环)
2.完美的链式操作(连贯操作)
3.完美的错误处理(不报错)

自定义jquery代码:

Select Code
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// 自调函数引入
(function(window){
	window.$ = $;
	window.jQuery = $;	//取别名

	function $(selector)
	{
		var mark = selector.substr(0,1);
		var element = selector.substr(1);

		var obj = [];
		switch(mark){
			case '#':
				obj[0] = document.getElementById(element);
				break;

			case '.':
				obj = document.getElementsByClassName(element);
				break;

			default:
				obj = document.getElementsByTagName(element);
				break;
		}
		console.dir(obj);

		obj.html = function(val)
		{
			if (val === undefined) {
				return obj[0].innerHTML;
			} else{
				for(var i=0; i<obj.length; i++)
				{
					obj[i].innerHTML = val;
				}
			}
			//实现连贯操作
			return this;
		}

		//用于修改style样式的方法
		obj.css = function(key,val)
		{
		    if (val === undefined) {
		        return obj[0].style[key];
		    } else {
		        for (var i=0; i<obj.length; i++) {
		            obj[i].style[key] = val;
		        }
		    }
		    //实现连贯操作
		    return this;
		}

		// 修改属性
		obj.attr = function(key, val)
		{
			if (val === undefined) {
				return obj[0][key];
			} else{
				for (var i = 0; i < obj.length; i++) {
					obj[i][key] = val;
				}
			}
			return this;	//实现连贯操作
		}

		return obj;
	}
}(window));

html:

Select Code
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
//**********************html部分代码*************/
	<p>111111111111111111</p>
	<p id="red">111111111111111111</p>
	<p class="gold">111111111111111111</p>
	<p>111111111111111111</p>
	<p>111111111111111111</p>
	<p>111111111111111111</p>
	<p id="attr" title="获得属性">111111111111111111</p>
	<p title="2222">111111111111111111</p>
	<p title="3333">111111111111111111</p>
	<p>111111111111111111</p>
	<p>111111111111111111</p>

//**********************js部分代码*************/
<script>
	// 原生js
	// var red = document.getElementById('red');
	// red.style.color = 'red';

	// jQ写法:$('#red').css('color', 'red')
	// $('#red').css('color', 'red');
	$('.gold').css('color', 'red');
	$('#red').html('123');
	// alert($('#red').html());

	// 修改属性
	// alert($('#attr').attr('title'));
	$('#attr').attr('title', '修改属性值');
</script>

源码:https://github.com/webjust/case-study/blob/master/jquery/01custom_my_jquery/js/myjquery.js