实现一个 jQuery 的 API

思路

判断传入的参数类型，选择器则选取对应全部元素，元素则放入伪数组
通过DOM操作，实现添加class与修改内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <style>
          .red{color: red;}
        </style>
        
    </head>
    <body>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <script>
      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){
          classes.forEach((value)=> {
            for (let i = 0;i<nodes.length;i++){
              nodes[i].classList.add(value)
            }
          })
        }
        
        
        nodes.setText = function(classes){
          classes.forEach((value)=> {
            for (let i = 0;i<nodes.length;i++){
              nodes[i].textContent = value
            }
          })
        }
        return nodes
      }
      window.$ = jQuery
      
      
    </script>
    </body>
</html>

实现一个 jQuery 的 API

思路

推荐阅读更多精彩内容