jQuery 코드의 실현 과정

1200 단어
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'를 통해).방법은 윈도우를 호출할 수 있습니다.jquey 안의 방법은 충돌 등 걱정 없이 사용하기에 더욱 편리하다

좋은 웹페이지 즐겨찾기