手写jQuery核心代码Day1

以下是一个简化的jQuery核心函数的示例代码，用于演示如何选择DOM元素并进行操作。注意，这不是完整的jQuery实现，而是一个教学用的简化版本。

// 构造函数
function jQuery(selector) {
    var elements = document.querySelectorAll(selector);
    var length = elements.length;
 
    for (var i = 0; i < length; i++) {
        this[i] = elements[i];
    }
 
    this.length = length;
    this.selector = selector;
}
 
// 原型方法：显示选中的元素数量
jQuery.prototype.size = function() {
    return this.length;
};
 
// 原型方法：事件绑定
jQuery.prototype.on = function(event, handler) {
    for (var i = 0; i < this.length; i++) {
        this[i].addEventListener(event, handler);
    }
    return this; // 使其支持链式调用
};
 
// 原型方法：获取或设置元素属性
jQuery.prototype.attr = function(name, value) {
    if (value === undefined) {
        return this[0].getAttribute(name);
    } else {
        for (var i = 0; i < this.length; i++) {
            this[i].setAttribute(name, value);
        }
        return this; // 使其支持链式调用
    }
};
 
// 简单的使用示例
window.onload = function() {
    // 选择所有的段落元素
    var paragraphs = new jQuery('p');
 
    // 显示选中的元素数量
    console.log(paragraphs.size());
 
    // 绑定点击事件
    paragraphs.on('click', function() {
        alert('Clicked on: ' + this.textContent);
    });
 
    // 获取或设置元素的class属性
    paragraphs.attr('class', 'highlight'); // 设置
    console.log(paragraphs.attr('class')); // 获取
};

这段代码演示了如何实现一个简单的jQuery核心功能，包括选择元素、事件绑定、属性操作等。虽然它不是完全按照原jQuery实现的，但它展示了如何用JavaScript实现这些基本功能，并且演示了如何使用原型方法来扩展对象的功能。