美文网首页
模拟封装jquery的api

模拟封装jquery的api

作者: 土土y | 来源:发表于2018-11-15 23:03 被阅读0次

封装一个函数

function addClass(div,name){

    if(typeof div==='string'){

        var node=document.querySelectorAll(div)

         node.forEach((v,k){ node[k].classList.add(name) }) }

    }else if(div instanceof Node) {

        var node=document.querySelectorAll(div)

    } 

命名空间

window.ss={addClass:addClass}

 ss.addClass('div',"red")

 扩展Node

Node.prototype.addClass=function(name){

    this.classList.add(name)

}

div.addClass("red")

新的接口

window.jquery=function(node){

    return{

        addClass:function(name){

            if(typeof node==='string'){

                var node1=document.querySelectorAll(node)                 node1.forEach((v,k)=>{ node1[k].classList.add(name) })

            }else if(node instanceof Node){ node.classList.add(name) }

        },

        setText:function(name){

            if(typeof node==='string'){

                var node1=document.querySelectorAll(node)

                node1.forEach((v,k)=>{ node1[k].innerText=name })

            }else if(node instanceof Node){

                console.log(node) node.innerText=name

            }

         }

    }

}

window.$=jquery;

$('div').addClass('red')

$('div').setText("Hi")

选择器是字符串,另一种是node、dom对象

相关文章

  • 模拟封装jquery的api

    封装一个函数 function addClass(div,name){if(typeof div==='strin...

  • 如何实现一个jQuery的api

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

  • 初探jQuery

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

  • jQuery

    其实JQuery就是一个封装好的jQuery库,他有强大的选择器和DOM操作1、封装了DOM API2、封装了 完...

  • jQuery (first day)

    // 获取dom元素、点击事件、获取文本内容 // 模拟封装JQuery (function() { functi...

  • jQuery

    jQuery 能做什么? jQuery将JavaScript的代码进行了封装,处理了兼容性问题,提供API进行调用...

  • jQuery

    jQuery 能做什么? jQuery将JavaScript的代码进行了封装,处理了兼容性问题,提供API进行调用...

  • 模拟jQuery简单API

    JQuery的主要功能:通过强大的选择器获得DOM元素,然后针将这些DOM元素的日常操作封装成对应的方法,如取值、...

  • 简单模仿两个jQuery API

    这篇博客主要是使用DOM API进行封装模仿jQuery API的实现。在平常写代码时常常会发现DOM API在大...

  • 模拟 jQuery API的实现

    jQuery 是什么? jQuery实质上是一个构造函数,接受一个参数,这个参数可能是节点,然后返回一个方法对象去...

网友评论

      本文标题:模拟封装jquery的api

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