当前位置：首页 > JavaScript

js 实现$方法

2026-04-07 01:58:19JavaScript

实现 $ 方法

在 JavaScript 中实现类似 jQuery 的 $ 方法，可以通过创建一个函数来简化 DOM 操作。以下是一个基本的实现方式：

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

扩展功能

为了更接近 jQuery 的功能，可以扩展 $ 方法，使其支持 DOM 操作和事件绑定：

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

  const api = {
    elements,
    css: function(property, value) {
      this.elements.forEach(el => {
        el.style[property] = value;
      });
      return this;
    },
    on: function(event, callback) {
      this.elements.forEach(el => {
        el.addEventListener(event, callback);
      });
      return this;
    }
  };

  return api;
}

链式调用

通过返回 this，可以实现链式调用：

$('.my-class')
  .css('color', 'red')
  .on('click', () => console.log('Clicked'));

创建元素

支持通过字符串创建新元素：

function $(selector) {
  if (selector.startsWith('<') && selector.endsWith('>')) {
    const el = document.createElement(selector.slice(1, -1));
    return {
      element: el,
      appendTo: function(parent) {
        document.querySelector(parent).appendChild(this.element);
        return this;
      }
    };
  }
  // 其他实现...
}

完整示例

结合以上功能，以下是一个更完整的实现：

js 实现$方法

function $(selector) {
  if (selector.startsWith('<') && selector.endsWith('>')) {
    const el = document.createElement(selector.slice(1, -1));
    return {
      element: el,
      appendTo: function(parent) {
        document.querySelector(parent).appendChild(this.element);
        return this;
      },
      attr: function(name, value) {
        this.element.setAttribute(name, value);
        return this;
      }
    };
  }

  const elements = document.querySelectorAll(selector);

  const api = {
    elements,
    css: function(property, value) {
      this.elements.forEach(el => {
        el.style[property] = value;
      });
      return this;
    },
    on: function(event, callback) {
      this.elements.forEach(el => {
        el.addEventListener(event, callback);
      });
      return this;
    },
    addClass: function(className) {
      this.elements.forEach(el => {
        el.classList.add(className);
      });
      return this;
    }
  };

  return api;
}

使用示例

$('<div>')
  .attr('id', 'new-div')
  .appendTo('body');

$('#new-div')
  .css('background', 'blue')
  .addClass('highlight')
  .on('mouseover', () => console.log('Mouse over'));

这种方法提供了基本的 DOM 操作和事件绑定功能，可以根据需要进一步扩展。