js 实现 jq

使用原生 JavaScript 实现 jQuery 功能

选择器功能

jQuery 的核心功能之一是选择器，可以通过 $() 或 jQuery() 选择 DOM 元素。以下是原生 JavaScript 实现：

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

如果需要更接近 jQuery 的链式调用，可以返回一个包含常用方法的对象：

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 的 on() 方法可以用原生 JavaScript 的 addEventListener 实现：

function $(selector) {
  const elements = document.querySelectorAll(selector);
  return {
    elements,
    on: function(event, callback) {
      this.elements.forEach(el => {
        el.addEventListener(event, callback);
      });
      return this;
    }
  };
}

AJAX 请求

jQuery 的 $.ajax 可以用 fetch API 或 XMLHttpRequest 实现：

function ajax(options) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(options.method || 'GET', options.url);

    if (options.headers) {
      Object.keys(options.headers).forEach(key => {
        xhr.setRequestHeader(key, options.headers[key]);
      });
    }

    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };

    xhr.onerror = () => reject(xhr.statusText);
    xhr.send(options.data);
  });
}

DOM 操作

实现 jQuery 的 append, prepend, remove 等方法：

function $(selector) {
  const elements = document.querySelectorAll(selector);
  return {
    elements,
    append: function(html) {
      this.elements.forEach(el => {
        el.insertAdjacentHTML('beforeend', html);
      });
      return this;
    },
    remove: function() {
      this.elements.forEach(el => {
        el.parentNode.removeChild(el);
      });
    }
  };
}

动画效果

实现简单的 fadeIn 和 fadeOut 效果：

function $(selector) {
  const elements = document.querySelectorAll(selector);
  return {
    elements,
    fadeIn: function(duration = 400) {
      this.elements.forEach(el => {
        el.style.opacity = 0;
        el.style.display = 'block';
        let start = null;

        function step(timestamp) {
          if (!start) start = timestamp;
          const progress = timestamp - start;
          const opacity = Math.min(progress / duration, 1);
          el.style.opacity = opacity;
          if (progress < duration) {
            window.requestAnimationFrame(step);
          }
        }

        window.requestAnimationFrame(step);
      });
      return this;
    }
  };
}

完整简易实现

以下是一个更完整的简易 jQuery 实现：

function $(selector) {
  const elements = selector instanceof HTMLElement ? 
    [selector] : 
    document.querySelectorAll(selector);

  return {
    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;
    },

    removeClass(className) {
      this.elements.forEach(el => el.classList.remove(className));
      return this;
    },

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

    html(content) {
      if (content === undefined) {
        return this.elements[0].innerHTML;
      }
      this.elements.forEach(el => el.innerHTML = content);
      return this;
    },

    hide() {
      this.elements.forEach(el => el.style.display = 'none');
      return this;
    },

    show() {
      this.elements.forEach(el => el.style.display = '';
      return this;
    }
  };
}

使用示例

// 选择元素并修改样式
$('.my-class').css('color', 'red').addClass('highlight');

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

// AJAX 请求
ajax({
  url: '/api/data',
  method: 'GET'
}).then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

这些实现展示了如何用原生 JavaScript 模拟 jQuery 的核心功能。实际项目中，可以根据需要扩展更多方法和功能。