美文网首页
实现一个 jQuery 的 API

实现一个 jQuery 的 API

作者: 饥人谷_bibi | 来源:发表于2018-05-30 22:36 被阅读0次

先列出代码

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

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

  • 如何实现一个jQuery的api

    什么是jQuery 实现jQuery的api 实现jQuery的api说起来也很简单,就是对DOM进行封装。话不多...

  • 实现一个 jQuery 的 API

    实现一个 jQuery 的 API 实现步骤 命名空间模式 这个模式的调用为jQuery.addClass(ite...

  • 前端基础入门五(掌握jQuery的常用api,实现动态效果)

    jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常...

  • 用原生DOM实现一个jQuery的API

    今天第一次接触jQuery,先简单的实现一个jQuery的API,实现两个方法: addClass() setTe...

  • 实现一个 jQuery 的 API

    想要实现一个以下功能用原生js的DOM API来实现一个类jQuery API的功能 1、首先获取DOM元素 判断...

  • Angularjs选项卡

    用jQuery实现选项卡,通过操作dom节点实现,jQuery多数api方便操作dom。例如next()、sibl...

  • 2018-08-22

    实现JQuery之API 1.需求分析window.jQuery = ???window.div = div.ad...

  • 实现jQuery的API

    1. jQuery函数结构 jQuery函数要方便与输入一个选择器参数或则节点正确返回一个伪数组,便于对其明确执行...

  • 实现一个jQuery API

    通过以下四步实现jQuery: 接受一个node或选择器 封装成一个伪数组 在这个伪数组上加上几个API 把这个伪...

网友评论

      本文标题:实现一个 jQuery 的 API

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