jQuery說到底是一個函數對象，一個通過原生js實現(xiàn)了某些功能的函數，被封裝成了一個js對象。jQuery對象是類似{0:xx,1:xx,length:2,····}的偽數組，知道原理后，我們自己也可以實現(xiàn)一個簡單的jQuery。
需求：實現(xiàn)簡單的獲取元素，增加class類，以及修改元素文本的功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一個簡單的jQuery</title>
</head>
<style>
.red{
color:red;
}
.green{
color:green;
}
</style>
<body>
<ul>
<li class="item1">第1項</li>
<li class="item2">第2項</li>
<li class="item3">第3項</li>
<li class="item4">第4項</li>
</ul>
</body>
</htmnl>
首先，通過原生JS實現(xiàn)上述功能
//獲取所有的li元素
var items = document.querySelectorAll('li');
//為所有的li增加red類
for (let i = 0; i < items.length; i++) {
items[i].classList.add('red');
}
//修改所有的li文本
for (let i = 0; i < items.length; i++) {
items[i].textContent = 'hi';
}
封裝這兩個函數
var items = document.querySelectorAll('li');
function addClass(e){
for (let i = 0; i < items.length; i++) {
items[i].classList.add(e);
}
}
addClass('red');
function setText(e){
for (let i = 0; i < items.length; i++) {
items[i].textContent = e;
}
}
setText('hi');
將上面的對象及方法封裝成一個對象，并對空間命名
var node = {};
var items = document.querySelectorAll('li');
node.length = items.length;
for (let i = 0; i < items.length; i++) {
node[i] = items[i];
}
node.addClass = function (e){
for (let i = 0; i < node.length; i++) {
node[i].classList.add(e);
}
}
node.setText = function (e){
for (let i = 0; i < node.length; i++) {
node[i].textContent = e;
}
}
node.addClass('red')
node.setText('hi')
把node對象也封裝進去，使它變成一個函數對象，更像jQuery
window.jQuery = function (nodeorselector){
var node = {};
var items = document.querySelectorAll(nodeorselector);
node.length = items.length;
for (let i = 0; i < items.length; i++) {
node[i] = items[i];
}
node.addClass = function (e){
for (let i = 0; i < this.length; i++) {
this[i].classList.add(e);
}
}
node.setText = function (e){
for (let i = 0; i < this.length; i++) {
this[i].textContent = e;
}
}
return ndoe;
}
var $li = jQuery('li');
$li.addClass('red');
$li.setText('hi');
最后，console.log($li)可以看到一個如圖所示的偽數組，有addClass方法與setText方法，jQuery本質也是如此，便可以對jQuery有更深的認識。
$li實際上是一個對象
