当前位置：首页 > JavaScript

js 实现$方法

2026-02-02 08:34:19JavaScript

实现类似 jQuery 的 $ 方法

在 JavaScript 中实现类似 jQuery 的 $ 方法，可以通过以下方式创建一个简单的 DOM 选择器工具函数：

function $(selector) {
    const elements = document.querySelectorAll(selector);
    return elements.length > 1 ? elements : elements[0];
}

扩展功能版本

更完整的实现可以包含 DOM 操作和事件绑定等常用功能：

function $(selector) {
    const elements = document.querySelectorAll(selector);

    return {
        elements,

        // CSS 样式操作
        css(property, value) {
            this.elements.forEach(el => {
                el.style[property] = value;
            });
            return this;
        },

        // 事件绑定
        on(event, callback) {
            this.elements.forEach(el => {
                el.addEventListener(event, callback);
            });
            return this;
        },

        // 类名操作
        addClass(className) {
            this.elements.forEach(el => {
                el.classList.add(className);
            });
            return this;
        },

        removeClass(className) {
            this.elements.forEach(el => {
                el.classList.remove(className);
            });
            return this;
        }
    };
}

使用方法示例

// 选择元素并修改样式
$('.my-class').css('color', 'red');

// 绑定点击事件
$('#my-button').on('click', () => {
    console.log('Button clicked');
});

// 添加类名
$('div').addClass('highlight');

支持链式调用

通过在每个方法中返回 this，可以实现 jQuery 风格的链式调用：

$('.menu-item')
    .css('color', 'blue')
    .addClass('active')
    .on('mouseover', handleHover);

创建新元素

可以扩展 $ 函数支持创建新 DOM 元素：

function $(param) {
    if (typeof param === 'string' && param.startsWith('<')) {
        const tagName = param.replace(/[<>]/g, '');
        const element = document.createElement(tagName);
        return {
            element,
            appendTo(parentSelector) {
                const parent = document.querySelector(parentSelector);
                parent.appendChild(this.element);
                return this;
            }
        };
    }
    // 原有的选择器逻辑...
}

使用方式：

js 实现$方法