实现一个jQuery的API
某统计网站的数据统计 ，使用jQuery的比例占70%左右。我们来看看jQuery 到底做了哪些事情，给开发者带来多么大的方便，能得到这么多的喜爱呢？
探索一下jQuery内部到底做了什么？
<div class="" id="sss">选项1</div>
<div class="" id="sss">选项2</div>
<div class="" id="sss">选项3</div>
<div class="" id="sss">选项4</div>
<div class="" id="sss">选项5</div>
.red{
color: red;
}
window.jQuery = function (nodeOrSelector) {
var nodes = {}
if (typeof nodeOrSelector === 'string') {
let temp = document.querySelectorAll(nodeOrSelector)
for (let i = 0; i < temp.length; i++) {
nodes[i] = temp[i]
}
nodes.length = temp.length
console.log(nodes)//得到一个纯净的原型链
} else {
if (nodeOrSelector instanceof Node) {
nodes = {
0: nodeOrSelector,
length: 1
}
}
}
nodes.addClass = function (value) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(value)
}
}
nodes.setText = function (text) {
var texts = []
if (text === undefined) {
console.log(nodes)
for (let i = 0; i < nodes.length; i++) {
texts.push(nodes[i].textContent)
}
console.log(texts)
return texts
} else {
for (let i = 0; i < nodes.length; i++) {
console.log(nodes[i])
nodes[i].textContent = text
}
}
}
return nodes
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText() // 可将所有 div 的 textContent 变为hi hi
首先我们知道 window.$= jQuery，这表明 $就是jQuery
一般来说，怎么使用jQuery获取元素 ，回想一下有哪些常用的方式呢？
- 获取ul 的子级li元素
$('ul>li')
- 获取所有的<div>元素
$('div')
3.获取id为item3的元素
$(item3)
- 获取class为xx的元素
$('.xx')
首先写获取的元素，一定要搞清楚 获取的元素的性质和各自的特点。
$(item2) ，传入的参数 item2 是一个元素的id，就代表一个node 节点
其中id选择器获取的元素只有一个， 因为 id 是唯一的。
除此之外，像class，html中可以有相同的class名，和标签，不唯一。
上述代码中，html 代码中多个<div>
获取div , 获取的是多个元素， 所以用document.querySelectorAll()
nodeOrSelector instanceof Node
$(item2), item2 代表的元素是Node 构造函数构造的，也说明只传入了一个节点。
nodes是伪数组时，最好后面返回的数据也是伪数组（对象）的形式。
对比jQuery 获取文本时， 当text() 传入参数， 则是设置元素的文本
不传参，就是获取元素的文本内容
对于两种形式， 都存在，才能保证与jQuery本身的方法一致。
所以需要判断 传入的参数是否 为undefined
undefined 就是指传入的参数名已存在， 但是没赋值的一种判断。
如果 $div.addClass('red')传入的参数是 字符串， 就直接传入。
当 $div.addClass(['red','yellow']) ，参数是一个数组，就必须遍历数组，array.forEach(function(){})将每一个class样式传给每一个元素。
确定一下主题， 我们平常用到的jQuery ，相比js而言， 不用写一长串的API获取元素， 使用更加简洁。但是了解内部以后， 会知道原来jQuery在我们执行获取时， 其实内部调用了很多方法， 获取到元素
那么 经过事先一个jQuery部分功能的API , 我们知道jQuery在自己要获取一个或多个元素时， 内部就会自动去查找符合条件的元素返回。当使用jQuery方法时， jQuery会找到jQuery对象的方法， 执行相关操作。
jQuery 本质就是一个构造函数， 接收一个参数， 参数可能是节点或者是选择器， 返回一个方法对象去操作节点。
在轻松简单表象的背后，jQuery得到的青睐也是付出了努力的不是吗？哈哈end
