一个简单jquery api的实现
2019-03-21 本文已影响0人
砂糖橘最甜
如下的代码结构：
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
</body>
需求如下：
window.jQuery = ???
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 给所有 div 的 class 添加一个 red
$div.setText('hi') // 将所有 div 的 textContent 变为 hi
思路分析
写一个方法 ，找到这个节点
写一个 addClass方法，给节点添加样式
写一个 setText 方法，给节点设置内容
对以上方法进行封装
具体方法
先找到这个节点
然后传入的参数可能是个节点，也可能是个字符串，所以要分情况
function(nodeOrSelector){
let 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
} else if(nodeOrSelector instanceof Node){ //当参数为节点时
nodes = {
0:nodeOrSelector,
length:1
}
}
return nodes
}
addClass 方法，给节点添加样式
给找到的节点添加样式，所以要传入一个参数
节点可能不止一个，所以要依次对节点进行遍历，对每个节点添加样式
nodes.addClass = function(classes){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(classes);
}
}
setText 方法，给节点设置内容
和上面的方法一样，先找到需要改变的节点，对它依次遍历后再设置其内容
同时，传入一个参数
nodes.setText = function(text){
for(let i=0;i<nodes.length;i++){
nodes[i].textContent = text;
}
}
return nodes
最后一步，封装
window.jQuery = function(nodeOrSelector) {
let 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
} else if (nodeOrSelector instanceof Node) {
nodes = {
0: nodeOrSelector,
length: 1
}
}
nodes.addClass = function(classes){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(classes);
}
}
nodes.setText = function(text) {
for(let i=0;i<nodes.length;i++){
nodes[i].textContent = text;
}
}
return nodes
}
