jQuery-初窥jQuery工作原理

目的：了解jQuery的工作原理

相关链接

源码链接

预览链接

实现功能：

1. 点击按钮一，修改所有div样式
2. 点击按钮二，修改所有div的内容

设计思路

1. 点击按钮一时，可以为div，添加class
2. 点击按钮二时，可以获取到textContent内容，并提交新内容覆盖

操作步骤

HTML内容

<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<button id="btn1">点我改变样式</button>
<button id="btn2">点我改变内容</button>

CSS内容

button{
    display: block;
    margin: 10px auto;
    width: 100px;
    height: 40px;
}
div{
    margin:10px auto;
    width: 100px;
    height: 100px;
    background-color: gray;
    text-align: center;
}
.changeAfter{
    width: 180px;
    height: 90px;
    background-color: orange;
}

JS

- 原始代码

1. 获得所有元素。如果要对传入的所有节点类型进行操作，我们首先要获得所有节点组成的伪数组

   let nodes = document.querySelectorAll(nodeOrSelector)  
   

2. 将classes里的value添加到获得的数组内的元素里

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

3. 移除同理

       nodes.removeClass = function (classes) {
           classes.forEach((value) => {
               for (let i = 0; i < nodes.length; i++) {
                   nodes[i].classList.remove(value)
               }
           })
       }
   

4. 获取节点的文本内容

   node.getText = function(){
       var texts = []
       for(let i=0;i<nodes.length;i++){
           texts.push(nodes[i].textContent)
       }
       return texts
   }
   

5. 设置文本内容

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

- 优化代码

1. 传入参数进行类型检测，始终返回伪数组

      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
           }
       }
   

2. 合并文本获取与设置

       nodes.text = function (text) {
           if (text === undefined) {                               //不给参数说明想要获取参数
               var texts = []
               for (let i = 0; i < nodes.length; i++) {
                   texts.push(nodes[i].textContent)
               }
               return texts
           } else {                                                //否则传入参数设置文本内容
               for (let i = 0; i < nodes.length; i++) {
                   nodes[i].textContent = text
               }
           }
       }
   

- 封装函数

window.jQuery = function (nodeOrSelector){
    let nodes = {}                      //获取节点数组
    nodes.addClass = function(){}       //添加class   
    nodes.removeClass = function(){}    //删除class
    nodes.text = function(){}           //获取、设置文本   
}

- 简写函数名

window.$ = jQuery
var $div = $('div')

- 添加鼠标事件

var oBtn1 = document.querySelector('#btn1')
var oBtn2 = document.querySelector('#btn2')

oBtn1.onclick = function () {
    for (let i = 0; i < $div.length ; i++) {
        if ($div[i].className === ""){
            $div.addClass(['changeAfter'])
        }else {
            $div.removeClass(['changeAfter'])
        }
    }
}
oBtn2.onclick = function () {
    $div.text('hi')

个人总结

jQuery其实就是利用现有的DOM API进行功能的进一步优化，使其更加的简洁高效。

——远方不远