·jQuery是什么？
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。（摘自jQuery中文文档）
其实jQuery就是接受一个元素，返回一个新的对象，这个对象有新的API
那接受一个元素，返回一个新的对象可以用如下代码表示
<ul id='ul'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var jQuery = function (nodeOrSelector) {
let nodes = {}
if (typeof nodeOrSelector === 'string') {
nodes = document.querySelectorAll(nodeOrSelector)
}
else if (nodeOrSelector instanceof Node) {
nodes = { 0: nodeOrSelector, length: 1 }
}
return nodes
console.log(nodes)
}
</script>
image.png
为了方便使用，像Node一样加入window中，结果是一样的，注意返回的结果统一为伪数组。（重点理解）
<script>
window.jQuery = function (nodeOrSelector) {
let nodes = {}
if (typeof nodeOrSelector === 'string') {
nodes = document.querySelectorAll(nodeOrSelector)//伪数组
}
else if (nodeOrSelector instanceof Node) {
nodes = { 0: nodeOrSelector, length: 1 } //创建伪数组
}
return nodes
console.log(nodes)
}
</script>
image.png
想要让这个返回的对象有新的API，就利用对象的特点，在nodes对象中添加。
<script>
window.jQuery = function (nodeOrSelector) {
let nodes = {} //返回的对象！！！
if (typeof nodeOrSelector === 'string') {
nodes = document.querySelectorAll(nodeOrSelector)
}
else if (nodeOrSelector instanceof Node) {
nodes = { 0: nodeOrSelector, length: 1 }
}
//////////////////////添加addClass属性
nodes.addClass = function (classes) {
if (classes instanceof Array) {
classes.forEach(function (value) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(value)
}
})
}
else {
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(classes)
}
}
}
////////////////////////////////////////////
return nodes
}
</script>
这样就可以通过addClass增加class
var $li = jQuery('li')
$li.addClass('red')
var $ul = jQuery(ul)
$ul.addClass(['blue','red'])
image.png
增加获取text或者修改text的API
window.jQuery = function (nodeOrSelector) {
let nodes = {}
if (typeof nodeOrSelector === 'string') {
nodes = document.querySelectorAll(nodeOrSelector)
}
else if (nodeOrSelector instanceof Node) {
nodes = { 0: nodeOrSelector, length: 1 }
}
nodes.addClass = function (classes) {
if (classes instanceof Array) {
classes.forEach(function (value) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(value)
}
})
}
else {
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(classes)
}
}
}
//////////////////////添加text属性
nodes.text = function (text) {
if (text === undefined) {
var texts = []
for (let i = 0; i < nodes.length; i++) {
texts.push(nodes[i].textContent)
}
return texts
}
else {
for (let i = 0; i < nodes.length; i++) {
nodes[i].textContent = text
}
}
}
////////////////////////////////////////////
return nodes
}
通过text获取或者修改文本内容
<ul id='ul'>
<li>小红</li>
<li>小明</li>
<li>小花</li> //修改成小黄
</ul>
var $getText = jQuery('li')
var getText = $getText.text()
console.log(getText)
var $setText = jQuery('li:nth-child(3)')
$setText.text('小黄')
image.png
image.png
