jQuery说到底是一个函数对象，一个通过原生js实现了某些功能的函数，被封装成了一个js对象。jQuery对象是类似{0:xx,1:xx,length:2,····}的伪数组，知道原理后，我们自己也可以实现一个简单的jQuery。
需求：实现简单的获取元素，增加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实现上述功能
//获取所有的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实际上是一个对象
网友评论