实现一个jQuery的API

在这里我们将实现两个功能,给一个div元素,添加多个classname,并把div元素的内容全部输出为‘hi’

首先我们先实现添加多个classname的函数:

   ``` nodes.addClass = function(classes){ //以数组的方式传参

    classes.forEach(function(value){
        for(let i = 0;i<nodes.length;i++){ //遍历这个节点伪数组
            nodes[i].classList.add(value);}
    })

}

实现把div元素的内容全部输出为‘hi’的函数:

nodes.setText = function(text){
        for(let i = 0;i<nodes.length;i++){
            nodes[i].textContent = text;}
    }

接下来我们开始实现jQuery的API

  window.jQuery = function(nodeOrSelector){ //传一个节点或者字符串

    let nodes = {}; //定义一个伪数组,用来存要操作的节点
    if(nodeOrSelector === 'string') //如果传的是字符串,则用选择器去查找
    {
        let temp = document.querySelectorAll(nodeOrSelector);
        for(let i = 0;i<temp.length;i++){
            nodes[i] = temp[i]; //用temp作为临时对象,使得返回的nodes不是nodelist,而是伪数组
        }
        nodes.length = temp.length;
    }
    else if(nodeOrSelector instanceof Node){
        nodes = {0:nodeOrSelector,length:1} //如果传入的值是节点,返回的nodes也写成伪数组的形式
    }



    nodes.addClass = function(classes){ //实现添加classname

            classes.forEach(function(value){
                for(let i = 0;i<nodes.length;i++){
                    nodes[i].classList.add(value);}
            })
    }


    nodes.setText = function(text){ //实现改变元素的textcontent的功能
        for(let i = 0;i<nodes.length;i++){
            nodes[i].textContent = text;}
    }

    return nodes;} //返回nodes,供给外部使用

var $div = $('div') //封装一个jQuery对象
$div.addClass('red') // 调用addClass函数
$div.setText('hi') // 调用setText函数
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 思路 判断传入的参数类型,选择器则选取对应全部元素,元素则放入伪数组 通过DOM操作,实现添加class与修改内容
    张镕凡阅读 3,008评论 0 51
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,918评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,247评论 0 2
  • jQuery 实质上是一个构造函数,接受一个参数(这个参数可能是节点)并返回一个方法去操作这个节点。
    梅林1993阅读 1,589评论 0 0
  • 01. 交一个欣赏你的朋友,在你穷困潦倒的时候安慰你帮助你。 02. 交一个有正能量的朋友,在你情绪低落的时候陪伴...
    烈日凉风阅读 1,643评论 0 0

友情链接更多精彩内容