美文网首页我爱编程
jQuery一段代码的实现过程

jQuery一段代码的实现过程

作者: 谢小疯 | 来源:发表于2018-06-07 18:29 被阅读0次

jQuery就是一个函数,接收一个参数,然后返回一个方法对象来操作DOM。

window.jQuery = function (nodeorSelector) {
let nodes = {};
if (typeof nodeorSelector === 'string') {
    let temp = document.querySelectorAll(nodeorSelector);
    for (let i = 0; i < temp.length; i++) {
        nodes[i] = temp[i];
    }
    nodes.length = temp.length;
} else if (nodeorSelector instanceof Node) {
    nodes = {
        0: nodeorSelector,
        length: 1
    }
}
nodes.addClass = function (classes) {
    for (let i = 0; i < nodes.length; i++) {
        nodes[i].classList.add(classes)
    }
}
nodes.setText = function (text) {
    if (text === undefined) {
        let texts = [];
        for (let i = 0; i < nodes.length; i++) {
            texts.push(nodes[i].textContent)
        }
        return texts;
    } else {
        for (let i = 0; i < nodes.length; i++) {
            nodes[i].textContent = text;
        }
    }
}
return nodes;
}
window.$ = jQuery;
var $div = $('div');
$div.addClass('red');
$div.setText('hi')

上述代码将一个函数赋值给window.jquey,然后更改名字为$,
通过$('xxx').方法就可以调用window.jquey里面的方法,不用担心冲突等问题,使用也更方便一些

相关文章

网友评论

    本文标题:jQuery一段代码的实现过程

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