美文网首页前端
[jQuery]之封装函数

[jQuery]之封装函数

作者: 是苏菇凉呀 | 来源:发表于2019-06-21 14:37 被阅读0次

本文介绍封装实现addClass()与text()方法。

window.jQuery = function (nodeOrSelector) {
        let nodes = {};
        if (typeof nodeOrSelector === 'string') {
            node = document.querySelectorAll(nodeOrSelector);   //伪数组
            for(let i = 0; i < node.length; i++) {
                nodes[i] = node[i];
            }
            nodes.length = node.length;
        } else if (nodeOrSelector instanceof Node) {
            nodes = { '0': nodeOrSelector, length: 1 }   //跟上面保持一致
            console.log(nodes)
        }
        nodes.addClass = function (classes) {
            classes.forEach(element => {
                for (let i = 0; i < nodes.length; i++) {
                    nodes[i].classList.add(element)
                }
            });
        }
        nodes.text = function (text) {
            if (text === undefined) {
                var texts = [];
                for (let i = 0; i < nodes.length; i++) {
                    texts.push(nodes[i].innerText);
                }
                return texts;
            } else {
                for (let i = 0; i < nodes.length; i++) {
                    nodes[i].innerText = text;
                }
            }
        }
        return nodes;
}

总结:jQuery中addClass()与text()方法的本质还是调用了DOM的API

相关文章

  • [jQuery]之封装函数

    本文介绍封装实现addClass()与text()方法。 总结:jQuery中addClass()与text()方...

  • jQuery插件

    1.jQuery插件分类 封装对象方法的插件 应用最广 封装全局函数的插件 作为jQuery全局函数插件 选择器插...

  • 理解jQuery过程

    1.封装函数,命名空间 2.封装函数 node 放在前面,参考jQuery习惯,node.getSiblings(...

  • JQ第一天

    JQ初级 一、认识jQuery 1、什么是jQuery jQuery是对原生JavaScript二次封装的工具函数...

  • 030 JQ初级

    JQ初级 一、认识jQuery 1、什么是jQuery jQuery是对原生JavaScript二次封装的工具函数...

  • JQuery简介

    一、什么是JQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数...

  • javascript 封装

    常规封装 (将具体初始化放在构造函数里面) 常规封装(放一个初始化方法在构造函数里面) 类jQuery 封装 原文...

  • 01-jQuery简介

    一.什么是 jQuery? jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到...

  • jQuery不过如此

    简易的JQuery 1.1单纯的获取所有兄弟元素 1.2为一个元素添加类2.1 封装函数 2.2 封装函数 3.命...

  • 自制jQuery

    自己做一个jQuery的思路 封装两个函数 → 添加命名空间 → 扩展Node原型/无侵入设置 1、封装两个函数 ...

网友评论

    本文标题:[jQuery]之封装函数

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