js实现$()

实现类似 jQuery 的 $() 函数

要实现类似 jQuery 的 $() 函数，可以通过原生 JavaScript 创建一个简单的 DOM 选择器。以下是几种实现方式：

基础选择器实现

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

增强版实现（支持多种参数类型）

function $(param) {
  if (typeof param === 'string') {
    const elements = document.querySelectorAll(param);
    return elements.length === 1 ? elements[0] : elements;
  }
  if (param instanceof HTMLElement) {
    return param;
  }
  if (typeof param === 'function') {
    document.addEventListener('DOMContentLoaded', param);
  }
  return null;
}

链式操作支持

function $(selector) {
  const elements = document.querySelectorAll(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;
    }
  };
}

完整迷你 jQuery 实现

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

    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;
    }

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

  return function(selector) {
    return new MiniQuery(selector);
  };
})();

这些实现展示了如何从简单到复杂地构建自己的 $() 函数。基础版本只提供选择功能，而完整版本支持链式操作和方法调用。