jQuery 的使用
关于 jQuery
jQuery 是一个拥有链式风格且手动声明的函数
jQuery（选择器） 用于获取对应的元素，但它却不返回这些元素
相反，它返回一个对象，称为 jQuery 构造出来的对象
这个对象可以操作对应的元素
jQuery 是一个不需要加 new 的构造函数，非常意义规构造函数
因为 jQuery 函数确实构造出了一个对象
但因为不需要写 new jQuery() 就能构造一个对象
jQuery 对象
不是说 jQuery 这个对象而是代指它所构造出的对象
一、如何获取元素
1
2
3
4
5
6
7
8
9
| $('#test') 返回值并不是元素，而是一个 api 对象
$('#test').find('.test') 查找 #test 里的 .test 元素
$('#test').parent() 获取父级
$('#test').children() 获取子级
$('#test').siblings() 获取兄弟元素
$('#test').index() 获取排行索引（从0开始）
$('#test').next() 获取当前元素的下一个元素
$('#test').prev() 获取当前元素的上一个元素
$('#test').each(fn) 遍历每个元素并执行 fn
|
二、链式操作是怎样的
jQuery（选择器） 用于获取对应的元素
但它却不返回这些元素
相反，它返回一个对象，称为 jQuery 构造出来的对象
这个对象可以操作对应的元素，即可形成操作链
1
2
3
4
| $('div')
.find('.child2')
.prev()
.print()
|
三、如何创建元素
1
2
| $('<div><span>test</span></div>') 创建 div
.appendTo(document.body) 插入到 body 中
|
四、如何修改元素
1
2
3
4
5
6
7
| $div.text(?) 读写文本内容
$div.html(?) 读写 HTML 内容
$div.attr('title',?) 读写属性
$div.css({ color: 'red' }) 读写style
$div.addClass('blue')
$div.on('click', fn)
$div.off('click', fn)
|
1
2
| $div.remove()
$div.empty()
|
五、如何移动元素
1
2
| $('test2').insertAfter($('test1')); 把test1元素移动到test2后面
$('test1').after($('test2')); 把texst1元素移动到test2前面
|
表面上看，这两种方法的效果是一样的，实际上，它们返回的元素不一样。第一种方法返回test2元素，第二种方法返回test1元素。
使用这种模式的方法还有四对：
1
2
3
4
5
6
7
| .insertAfter()和.after()：在现存元素的外部，从后面插入元素
.insertBefore()和.before()：在现存元素的外部，从前面插入元素
.appendTo()和.append()：在现存元素的内部，从后面插入元素
.prependTo()和.prepend()：在现存元素的内部，从前面插入元素
|
六、如何修改元素的属性
使一个函数，来完成取值getter/赋值setter，即”getter”与”setter”合一。到底是取值还是赋值，由函数的参数决定。
1
2
| $('test1').html(); html()没有参数，表示取出test1的值
$('test1').html('测试'); html()有参数'测试'，表示对test1进行赋值
|
元素常见的赋值与取值
1
2
3
4
5
6
7
8
9
10
11
| .html() 取出或设置html内容
.text() 取出或设置text内容
.attr() 取出或设置某个属性的值
.width() 取出或设置某个元素的宽度
.height() 取出或设置某个元素的高度
.val() 取出某个表单元素的值
|
七、jQuery 是如何封装的
使用原型
把共用属性（函数）全部放到 $.protorype
$.fn = $.prototype
然后让 api.proto 指向 $.fn
封装
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
| window.$ = window.jQuery = function (selectorOrArray) {
let elements
if (typeof selectorOrArray === 'string') {
if (selectorOrArray[0] === '<') {
elements = [createElement(selectorOrArray)]
} else {
elements = document.querySelectorAll(selectorOrArray)
}
elements = document.querySelectorAll(selectorOrArray)
} else if (selectorOrArray instanceof Array) {
elements = selectorOrArray
} else {
elements = selectorOrArray
}
const api = Object.create(jQuery.fn)
Object.assign(api, {
elements: elements,
oldApi: selectorOrArray.oldApi
})
return api
};
jQuery.fn = jQuery.prototype = {
jQuery: true,
constructor: jQuery,
find(selector) {
let array = []
this.each((node) => {
array = array.concat(Array.from(document.querySelectorAll(selector)))
})
array.oldApi = this
return jQuery(array)
},
each(fn) {
for (let i = 0; i < this.elements.length; i++) {
fn.call(null, this.elements[i], i)
}
return this
},
parent() {
let array = []
this.each((node) => {
if (array.indexOf(node.parentNode) === -1) {
array.push(node.parentNode)
}
})
return jQuery(array)
},
children() {
let array = []
this.each((node) => {
array.push(...node.children)
})
return jQuery(array)
},
siblings() {
let array = []
let array1 = []
this.each((node) => {
array.push(...node.parentNode.children)
})
for (let i = 0; i < array.length; i++) {
if (array[i].className !== this.elements[0].className) {
array1.push(array[i])
}
}
return jQuery(array1)
},
index() {
let array = []
let i
this.each((node) => {
array.push(...node.parentNode.children)
})
for (i = 0; i < array.length; i++) {
if (array[i].className === this.elements[0].className) {
break
}
}
return jQuery(i)
},
next() {
let array = []
let next
this.each((node) => {
array.push(...node.parentNode.children)
})
for (let i = 0; i < array.length; i++) {
if (array[i].className === this.elements[0].className) {
next = array[i].nextElementSibling
}
}
return jQuery(next)
},
prev() {
let array = []
let prev
this.each((node) => {
array.push(...node.parentNode.children)
})
for (let i = 0; i < array.length; i++) {
if (array[i].className === this.elements[0].className) {
prev = array[i].previousElementSibling
}
}
return jQuery(prev)
},
print() {
return console.log(this.elements)
},
addClass(className) {
this.each((node) => {
node.classList.add(className)
})
return this
},
end() {
return this.oldApi
}
}
.....
|