当前位置：首页 > JavaScript

js实现$()

2026-04-05 04:35:13JavaScript

实现 $() 函数

在 JavaScript 中实现类似 jQuery 的 $() 函数，可以通过以下方式完成。该函数通常用于选择 DOM 元素或创建 DOM 元素。

基本实现

function $(selector) {
    // 如果传入的是字符串，尝试选择 DOM 元素
    if (typeof selector === 'string') {
        const elements = document.querySelectorAll(selector);
        return elements.length === 1 ? elements[0] : elements;
    }
    // 如果传入的是函数，在 DOM 加载完成后执行
    else if (typeof selector === 'function') {
        document.addEventListener('DOMContentLoaded', selector);
    }
    // 如果传入的是 DOM 元素，直接返回
    else if (selector instanceof Element) {
        return selector;
    }
    // 其他情况返回 null 或 undefined
    return null;
}

支持创建新元素

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

function $(selector, attributes = {}, children = []) {
    // 创建新元素
    if (selector.startsWith('<') && selector.endsWith('>')) {
        const tagName = selector.slice(1, -1);
        const element = document.createElement(tagName);

        // 设置属性
        for (const [key, value] of Object.entries(attributes)) {
            element.setAttribute(key, value);
        }

        // 添加子元素
        children.forEach(child => {
            if (typeof child === 'string') {
                element.appendChild(document.createTextNode(child));
            } else {
                element.appendChild(child);
            }
        });

        return element;
    }
    // 其他情况保持不变
    return $(selector);
}

链式调用支持

如果需要支持链式调用（如 jQuery 风格），可以返回一个包含 DOM 元素和方法的新对象：

js实现$()

function $(selector) {
    const elements = typeof selector === 'string' 
        ? document.querySelectorAll(selector) 
        : [selector];

    return {
        elements,
        css: function(property, value) {
            this.elements.forEach(el => el.style[property] = value);
            return this;
        },
        addClass: function(className) {
            this.elements.forEach(el => el.classList.add(className));
            return this;
        }
        // 可以添加更多方法...
    };
}

使用示例

// 选择元素
const header = $('#header');
const buttons = $('.btn');

// 创建元素
const newDiv = $('<div>', { id: 'new-div' }, ['Hello World']);

// 链式调用
$('.btn').css('color', 'red').addClass('active');

注意事项

这个实现是简化版，jQuery 的实际实现要复杂得多，包含更多功能和方法。
在现代前端开发中，原生 JavaScript 的 document.querySelector 和 document.querySelectorAll 已经足够强大，可能不需要自己实现 $() 函数。
如果需要完整功能，建议直接使用 jQuery 或其他现代库如 React、Vue 等。

标签: js