JQuery原理剖析——自己手写简易版JQuery

// 定义一个简易版的jQuery函数
function jQuery(selector) {
    var elements = [];
 
    // 如果传入的是ID选择器，直接通过getElementById获取元素
    if (selector.charAt(0) === '#') {
        var element = document.getElementById(selector.substring(1));
        if (element) elements.push(element);
    } else {
        // 如果传入的是类选择器，通过getElementsByClassName获取元素列表
        var elements = document.getElementsByClassName(selector.substring(1));
        for (var i = 0; i < elements.length; i++) {
            elements.push(elements[i]);
        }
    }
 
    // 返回包含所有匹配元素的数组
    return {
        length: elements.length,
        get: function(index) {
            return elements[index];
        },
        each: function(callback) {
            for (var i = 0; i < elements.length; i++) {
                callback.call(elements[i], i, elements[i]);
            }
        }
    };
}
 
// 使用示例
jQuery('.my-class').each(function(index, elem) {
    console.log(index, elem.nodeName);
});

这段代码实现了一个简化版的jQuery，用于选择DOM元素并迭代它们。它只支持ID选择器和类选择器，并且在内部处理它们的方式非常基础。在实际的jQuery中，选择器和方法的处理要复杂得多，包括对CSS选择器、DOM遍历、事件绑定、Ajax请求等的支持。