实现一个 jQuery 的 API

先列出代码

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) {
    for (let i = 0; i < nodes.length; i++) {
        nodes[i].classList.add(classes)
    }
}

nodes.setText = 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.setText('hi')

通过window.jQuery('div')获取到所有的div然后操作它,将所有的div的class添加一个red,将所有 div 的 textContent 变为 hi。
我们需要写一个jQuery,来完成这个需求。

首先jQuery是一个函数,你传给我一个css标签选择器,把你获取到的节点封装成一个伪数组,然后再在这个伪数组上添加属性实现addClass以及setText功能

操作

相同的部分不再赘述,我说一下不同的部分,获取部分我就没改了,多一个判断也能完成需求,

addclass部分,由于我们只用把全部的div添加上class,遍历nodes然后全部add就好了,不过我查了一下,Element.classList.add()可以添加多个class了,

seText函数,要求只要添加hi,获取我也没删除掉.

说一下我遇到的一个问题,在第4行代码的for循环中我错把length写成了lenght,我大概花了2个h才找到这个问题,没有任何报错,于是我去搜了下js代码语法检查,找个一个叫eslint的插件,和npm有关,于是我发现我的命令行都忘记了,研究了半天也没在vscode上实现,需要好好回顾下原来的内容,好像WebStorm自带语法检查,下次研究下。

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

推荐阅读更多精彩内容

  • 自己练习写一个类似jQuery的API,可以实现的功能为 $div.addClass('red') // 可将所有...
    zhangyuwen阅读 265评论 0 1
  • 某统计网站的数据统计 ,使用jQuery的比例占70%左右。我们来看看jQuery 到底做了哪些事情,给开发者带来...
    怎么昵称阅读 231评论 0 1
  • 一、需求:构造一个名叫“ jQuery” 的 库,含有API:1.addClass():给所选元素添加一个clas...
    Zoey_h阅读 324评论 0 0
  • 在这里我们将实现两个功能,给一个div元素,添加多个classname,并把div元素的内容全部输出为‘hi’ 首...
    charllote8阅读 214评论 0 1
  • 今天在得到APP中翻看自己以前的学习记录,其中有一个音频就是李国刚老师解说的“罗胖对互联网的6个认知”,里面的一些...
    勇哥在进化阅读 673评论 2 0