自制jquery API

作者: slience1213 | 来源:发表于2018-04-09 21:38 被阅读0次
window.jQuery = (nodeOrSelector) => {
    let o = {}
    if (typeof nodeOrSelector === "string") {
        let nodes = document.querySelectorAll(nodeOrSelector)
        nodes.forEach((node,i) => {
            o[i] = node
        })
        o.length = nodes.length

    } else if (nodeOrSelector instanceof Node) {
        o = {
            0: nodeOrSelector,
            length: 1
        }
    }
    o.addClass = (cls) => {
        for (let i = 0; i < o.length; i++) {
            o[i].classList.add(cls)
        }
        return o
    }
    o.setText = (text) => {
        for (let i = 0; i < o.length; i++) {
            o[i].textContent = text
        }
        return o
    }
    return o
}

jquery函数既可以接受节点作为参数,也可接受选择器字符串作为参数,然后创建一个对象o,如果参数是选择器字符串,那么用querySelectorAll返回nodes伪数组,遍历nodes,把它加入o中,同时制定length,如果参数是节点对象,也把它加入o中,同时制定length。然后创建两个api放在o中。

相关文章

  • 自制jquery API

    jquery函数既可以接受节点作为参数,也可接受选择器字符串作为参数,然后创建一个对象o,如果参数是选择器字符串,...

  • 实习一个jQuery的api

    在不使用jQuery函数库的情况下自制一个与jQuery同样原理的API: 首先,确认以下两个需求: var $d...

  • 如何实现一个jQuery的api

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

  • jQuery--第二节--事件

    jQuery API 中文文档 : http://jquery.cuishifeng.cn/jQuery插件库...

  • jQuery API学习之CSS操作函数与动画效果篇

    jQuery CSS操作函数 常用jQuery CSS操作函数介绍: jQuery 常用特效API: jQuery...

  • 实现一个自制jQuery框架

    实现一个自制jQuery框架 理解jquery jquery常用方法如下 那么要要实现jquery从什么入手呢? ...

  • 初识 jQuery API

    最近在了解 jQuery API的相关知识,方方老师通过自己写一个jQery API,告诉我们jQuery API...

  • jQuery

    jQuery学习: 最好的学习方法:查看jQuery的API jQuery下载: jQuery官网:http://...

  • 初探jQuery

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

  • 区别和详解:jQuery extend()和jQuery.fn.

    1、认识jQuery extend()和jQuery.fn.extend() jQuery的API手册中,exte...

网友评论

    本文标题:自制jquery API

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