任务二十九 实现一个 jQuery 的 API

在我看来,DOM的一些方法过于反直觉了,jQuery就是使用DOM的API包装成更好用的方法。
下面是学习jQuery举的一个例子

window.jQuery = ???
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

填写???,能够使用addClasssetText方法。

function (x){
    let nodes = {}
    if(typeof x === 'string'){
        let temp = document.querySelectorAll(x)
        for( let i=0; i <temp.length;i++){
            nodes[i]=temp[i]
        }
        nodes.length=temp.length
    }else if(x instanceof node){
        nodes = {
            0:x,
            length:1
        }
    }

首先,检查传入的参数的类型,是字符串则调用document.querySelectorAll传入临时变量,传入临时变量的目的是把用document.querySelectorAll选出来的对象的原型从Nodelist转换为Object,于是就有下面遍历的步骤。

    nodes.addClass =function (classes){
                for(let i=0;i<nodes.length;i++){
                    nodes[i].classList.add(value)
            }
        }
    nodes.setText = function(someText){
            for(var i=0; i<nodes.length; i++){
                nodes[i].textContent = someText
        }
    }
return nodes
}

添加addClass方法:
读取传入的参数,使用for循环遍历,用DOM的classList.add方法添加class
添加setText方法:
读取传入的参数,使用for循环遍历,用DOM的textContent方法添加class

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

推荐阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 674评论 0 3
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,205评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,404评论 0 2
  • jQuery jQuery是JavaScript世界中使用最广泛的一个库。 jQuery这么流行,肯定是因为它解决...
    星腾_范特西阅读 2,116评论 0 27
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,489评论 0 44