简单实现jQuery API

具体的思路:
1.封装一个函数,传入节点或者选择器字符串,可以返回伪数组,伪数组中包含获取到的dom元素
==> 对函数的参数进行判断,并构造一个临时对象,将节点或者遍历选择器得到的节点存入临时对象并返回
2.在这个返回的对象上,可以添加上一下方法操作dom

 window.jQuery = function (selectOrNode) {
        let nodes = {}      //创建一个空对象,最后返回这个对象
        if (typeof selectOrNode === 'string') {   //判断传入的是选择器还是Node节点
            let items = document.querySelectorAll(selectOrNode)
            for (let i = 0; i < items.length; i++) {
                nodes[i] = items[i]
            }
            nodes.length = items.length  //添加长度标记,方便后边使用
        } else if (selectOrNode instanceof Node) {
            nodes.length = 1
            nodes[0] = selectOrNode
        }

        nodes.addClass = function (classes) {
            for (let i in classes) {
                let name = classes[i] ? "add" : "remove"
                for (let l = 0; l < nodes.length; l++) {
                    nodes[l].classList[name](i)
                }
            }
        }
        nodes.text=function(text){
            if(text === undefined){
                var texts=[]
                for(let i=0;i<nodes.length;i++){
                    console.log(nodes[i])
                    texts.push(nodes[i].textContent)
                }
                console.log(texts)
                return text
            }else {
                for(let i=0;i<nodes.length;i++){
                    nodes[i].textContent = text
                }
            }
        }
        return nodes
    }

  let classes = {
        blue: true,
        a: false,
        c: true
    }

    let node2 = window.jQuery("ul>li")

    node2.addClass.call(node2, classes)
    node2.text.call(node2,"11")





最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 10,614评论 0 21
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,090评论 0 3
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,958评论 1 45
  •   DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 5,353评论 1 3
  • 回顾“2018超声医学会疑难病例讨论会——浅表专场”,会议内容丰富,会场不是那么活跃。先来看看分享的病例目录: 1...
    星月_19ee阅读 4,419评论 0 0