美文网首页
初探jquery 实现过程

初探jquery 实现过程

作者: 饥人谷_小霾 | 来源:发表于2019-12-18 21:34 被阅读0次
         window.jQuery =  function(xx){
            let  nodes = {}                            //新建一个伪数组 获得函数即将操作的对象
    
           //分析接收到的节点或选择器
          if (typeof xx === 'string') {     
            let temp
            temp = document.querySelectorAll(xx)
            for (let i = 0; i < temp.length; i++) {
              nodes[i] = temp[i]
            }
            nodes.length = temp.length
          } else if (xx instanceof Node) {
            nodes = {                               //以哈希形式返回
              0: xx,
              length: 1
            }
          }
    
          nodes.addClass = function (classes) {/*实现这个内部函数功能*/
            classes.forEach((value) => {
              for (let k = 0; k < nodes.length; k++) {
                nodes[k].classList.add(value)
              }
            })
          }
    
          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
              }
            }
          }
    
          return nodes
    }
    window.$ = jQuery
    var $div = $('div')
    $div.addClass('red') // 可将所有 div 的 class 添加一个 red
    $div.setText('hi') // 可将所有 div 的 textContent 变为 hi
    
    

    代码实现细节:

    1. 声明一个伪数组
    2. 判断传入的参数是节点还是字符串,若是字符串则用querySelectorAll()方法获取,若是节点则以哈希形式存储在声明的伪数组中
    3. 以闭包形式封装功能函数

    相关文章

      网友评论

          本文标题:初探jquery 实现过程

          本文链接:https://www.haomeiwen.com/subject/tehpnctx.html