当前位置：首页 > JavaScript

js实现$

2026-04-05 04:36:33JavaScript

js实现$

实现 jQuery 的 `$` 函数

在 JavaScript 中，$ 是一个合法的函数名，jQuery 通过它作为核心选择器的入口。以下是几种实现方式：

基础选择器实现

function $(selector) {
  return document.querySelectorAll(selector);
}

类 jQuery 链式调用实现

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

  return {
    css: function(property, value) {
      elements.forEach(el => el.style[property] = value);
      return this;
    },
    hide: function() {
      elements.forEach(el => el.style.display = 'none');
      return this;
    },
    show: function() {
      elements.forEach(el => el.style.display = '';
      return this;
    }
  };
}

支持 DOM 就绪事件

function $(selectorOrFunction) {
  if (typeof selectorOrFunction === 'function') {
    document.addEventListener('DOMContentLoaded', selectorOrFunction);
    return;
  }

  return document.querySelectorAll(selectorOrFunction);
}

完整迷你 jQuery 实现

const $ = (function() {
  class MiniQuery {
    constructor(elements) {
      this.elements = elements;
    }

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

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

    on(event, handler) {
      this.elements.forEach(el => el.addEventListener(event, handler));
      return this;
    }
  }

  return function(selector) {
    const elements = document.querySelectorAll(selector);
    return new MiniQuery(elements);
  };
})();

使用方法示例

// 选择元素
$('.my-class').css('color', 'red');

// 事件绑定
$('#my-button').on('click', () => alert('Clicked'));

// DOM 就绪
$(function() {
  console.log('DOM is ready');
});

这些实现展示了如何构建类似 jQuery 的核心功能，包括选择器、链式调用和 DOM 操作。实际项目中如果需要完整功能，建议直接使用 jQuery 或现代替代方案如 Zepto.js。

标签: js