美文网首页
模仿一个 jQuery

模仿一个 jQuery

作者: 月光下的微笑 | 来源:发表于2017-12-18 13:51 被阅读0次
window.jQuery = function(nodeOrSelector) {
      let nodes = {}
      if (typeof nodeOrSelector === "string") {
        nodes = document.querySelectorAll(nodeOrSelector)
      } else {
        nodes = nodeOrSelector
      }
      nodes.setClass = function(setClass) {
        for (let key in setClass) {
          let method = setClass[key] ? "add": "remove"
            for (let i = 0; i < this.length; i++) {
              this[i].classList[method](key)
            }
        }
        return nodes
      }
      nodes.text = function(text){
        let texts = []
        if(text === undefined) {
          for (let i = 0; i < this.length; i++) {
            texts.push(this[i].textContent)
          }
          return texts
        }else if(text instanceof Array){
          for (let i = 0; i < this.length; i++) {
            this[i].textContent = text[i]
          }
          return nodes
        }else if(typeof text=== "string"){
          for (let i = 0; i < this.length; i++) {
            this[i].textContent = text
          }
          return nodes
        }
      }
      
      return nodes
    }
    window.$ = jQuery
    var $li = $('li')
    $li.setClass({pink:true, red: false})
    console.log($li.text())
    $li.text(["hehe","haha"])
    $li.text("haha")

分析:jquery 返回的是一个伪数组对象,这个伪数组会有一堆自己属性,那么可以按需写个 setClass,text

setClass:

  • 接受一个对象结构如下{className:true, className: false}

    className 为你需要添加或删除的 class 名;

    true or false 为选择添加或者删除的操作;

text:

  • 当输入为数组时候:
    • 把获取元素的文本内容设置为对应数组的值;
  • 当不输入的时候:
    • 获取元素的文本内容;
  • 当输入为字符串的时候:
    • 所有的元素都设置为输入的值;

相关文章

  • 模仿jQuery

    封装函数 用原生DOM和js模仿jQuery的功能。 1.0版本 不能输入选择器字符串。只能输入单个node,操作...

  • 模仿一个 jQuery

    分析:jquery 返回的是一个伪数组对象,这个伪数组会有一堆自己属性,那么可以按需写个 setClass,tex...

  • 模仿一个jQuery

    jQuery 的本质是一个函数,它返回一个伪数组 调用DOM api document.querySelector...

  • 模仿jQuery实现一个API

    title: 模仿jQuery实现一个APIdate: 2018-09-29 16:46:48tags: [Jav...

  • jQuery源码探索之路(5)-- $.each, .hasCl

    自己最近在学习一些JS插件的写法,那么当然就绕不开jquery,于是自己就边学习边模仿,写一个自己的jQuery ...

  • jQuery源码探索之路(6)-- 事件绑定的不同

    自己最近在学习一些JS插件的写法,那么当然就绕不开jquery,于是自己就边学习边模仿,写一个自己的jQuery ...

  • 简易的jQuery

    @(Inbox) 本文会用最简单的形式来模仿jQuery源码。 jQuery看着是什么样子的? $(美元符号)是j...

  • jquery学习第一天

    1.js模仿jquery的入口函数: $(document).ready(function(){ function...

  • 模仿jQuery封装一个函数

    目的:模仿jQuery的使用模式封装一个函数,并增加一个新方法基本思路:声明一个函数,该函数接受一个参数并返回一个...

  • 来,模仿个jQuery

    想要看看:jQuery到底是什么 尝试封装个函数 封装一个可以加类的函数: 来搞一个命名空间(就是起个名字,方便用...

网友评论

      本文标题:模仿一个 jQuery

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