美文网首页
初探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 实现过程

    代码实现细节: 声明一个伪数组 判断传入的参数是节点还是字符串,若是字符串则用querySelectorAll()...

  • JQuery初探------Api功能实现

    1、封装获取当前元素的兄弟元素 上面代码我们根据提供的node节点获取父节点的所有子节点,然后遍历这个子节点形成一...

  • 初探jQuery

    实现一个jQuery的API 传一个选择器或节点 为nodes添加类,并且遍历nodes 遍历nodes,并且改变...

  • jQuery 初探

    在网页中,常常使用 HTML、CSS、javascript HTML 用于页面的布局,以及一些组件的布放 CSS ...

  • 初探jQuery

    封装一个函数html部分 选项1 选项2 选项3 选项4 选项5 js部分function getSi...

  • jQuery初探

    造两个简单版的jQuery函数 面试题

  • jQuery初探

    1. 基础 什么是jQuery对象? --- 就是通过jQuery包装DOM对象后产生的对象。jQuery对象是j...

  • Jquery初探

    node.querySelectorAll获取到的是一个伪数组,为了以后使用方便应该变成一个简单的对象。 一个对象...

  • 初探jQuery

    jQuery API的实现 自己模拟jQuery的一个API预览:http://js.jirengu.com/pa...

  • JQuery初探

    jQuery 在兼容性方面做得很好,1.7 版本兼容到 IE 6 jQuery 还有动画、AJAX 等模块,不止 ...

网友评论

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

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