当前位置：首页 > JavaScript

js实现$

2026-01-31 12:28:13JavaScript

在JavaScript中实现$符号功能通常有两种常见场景：作为jQuery的别名或自定义选择器/工具函数。以下是具体实现方法：

实现jQuery风格的$选择器

// 简易版DOM选择器
const $ = function(selector) {
    return document.querySelectorAll(selector);
};
// 使用示例
$('.className').forEach(el => {
    el.style.color = 'red';
});

实现链式调用

// 支持链式调用的实现
class CustomQuery {
    constructor(elements) {
        this.elements = Array.from(elements);
    }

    css(property, value) {
        this.elements.forEach(el => {
            el.style[property] = value;
        });
        return this;
    }

    addClass(className) {
        this.elements.forEach(el => {
            el.classList.add(className);
        });
        return this;
    }
}

const $ = selector => new CustomQuery(document.querySelectorAll(selector));

// 链式调用示例
$('div').css('color', 'blue').addClass('highlight');

实现模板字符串处理

// 实现模板字符串标签函数
const $ = (strings, ...values) => {
    return strings.reduce((result, str, i) => {
        return `${result}${str}${values[i] || ''}`;
    }, '');
};
// 使用示例
const name = 'World';
console.log($`Hello, ${name}!`); // 输出: Hello, World!

实现数学计算

// 实现数学计算函数
const $ = {
    add: (a, b) => a + b,
    multiply: (a, b) => a * b,
    sqrt: x => Math.sqrt(x)
};
// 使用示例
console.log($.add(2, 3)); // 输出: 5

注意事项：

js实现$