jQuery的实现

1、完成选择器的功能。

选择器可能会是标签选择、id选择或者class选择器等等。

var $div = jQuery('div')

1）先判断传入的参数是字符串还是节点：

- 字符串，使用document.querySelector()选中

方法文档：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

- 节点，直接返回节点

1 window.jQuery = function(nodeOrSelector){
2     let node;
3     if (typeof nodeOrSelector === 'string'){
4         node = document.querySelector(nodeOrSelector);
5     } else {
6         node = nodeOrSelector;
7     }
8     return node;
9 }

2）选择的对象可能会有一个或多个，

那就需要用到document.querySelectorAll()这个方法来获取dom对象。

但需注意：

- 这个方法会返回一个伪数组，所以判断后的返回需要一致。

- 可选去掉其不需要的原型链

方法文档：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

 1 window.jQuery = function(nodeOrSelector){
 2     let nodes = {};
 3     if (typeof nodeOrSelector === 'string'){
 4         var temp = document.querySelectorAll(nodeOrSelector);
 5         for(let i=0;i<temp.length;i++){
 6             nodes[i] = temp[i]
 7         }
 8         nodes.length = temp.length;
 9     } else if(nodeOrSelector instanceof Node){
10         nodes = {
11             0:nodeOrSelector,
12             length:1
13         }
14     }
15     return nodes;
16 }

2、完成class的添加

$div.addClass('red')

1）通过节点的classList属性的add()方法，进行遍历，对每个节点进行class的添加。

1 nodes.addClass = function(classes){
2     classes.forEach((value) => {
3         for(let i=0;i<nodes.length;i++){
4             nodes[i].classList.add(value);
5         }
6     })
7 }

2）添加的class，可能是单个或者多个，则加入一个判断即可

nodes.addClass = function(classes){
    let tempClasses = [];
    
    if(typeof classes === 'string'){
        tempClasses.push(classes);
    } else {
        tempClasses = classes;
    }

    tempClasses.forEach((value) => {
        for(let i=0;i<nodes.length;i++){
            nodes[i].classList.add(value);
        }
    })

}

3、设置

遍历节点，设置每个节点的textContent为传参即可。

nodes.setText = function(text){
    for(let i=0;i<nodes.length;i++){
        nodes[i].textContent = text;
    }
}

4、使用缩写alias

window.$ = jQuery，

最终实现一个简单的jQuery

 1 window.jQuery = function(nodeOrSelector){
 2     let nodes = {};
 3     if (typeof nodeOrSelector === 'string'){
 4         var temp = document.querySelectorAll(nodeOrSelector);
 5         for(let i=0;i<temp.length;i++){
 6             nodes[i] = temp[i]
 7         }
 8         nodes.length = temp.length;
 9     } else if(nodeOrSelector instanceof Node){
10         nodes = {
11             0:nodeOrSelector,
12             length:1
13         }
14     }
15 
16     nodes.addClass = function(classes){
17         let tempClasses = [];
18 
19         if(typeof classes === 'string'){
20             tempClasses.push(classes);
21         } else {
22             tempClasses = classes;
23         }
24 
25         tempClasses.forEach((value) => {
26             for(let i=0;i<nodes.length;i++){
27                 nodes[i].classList.add(value);
28             }
29         })
30 
31     }
32 
33     nodes.setText = function(text){
34         for(let i=0;i<nodes.length;i++){
35             nodes[i].textContent = text;
36         }
37     }
38 
39     return nodes;
40 }
41 window.$ = jQuery
42 
43 var $div = $('div')
44 $div.addClass('red') // 可将所有 div 的 class 添加一个 red
45 $div.setText('hi') // 可将所有 div 的 textContent 变为 hi

猜你喜欢