js实现jquery

实现 jQuery 核心功能

使用原生 JavaScript 实现类似 jQuery 的功能，主要涉及 DOM 操作、事件处理、AJAX 等核心功能。以下是关键功能的实现方法：

DOM 选择器

function $(selector) {
  const elements = document.querySelectorAll(selector);
  return {
    length: elements.length,
    [Symbol.iterator]: function*() {
      yield* elements;
    },
    // 其他方法将在这里添加
  };
}

CSS 操作

css: function(property, value) {
  if (arguments.length === 1) {
    return this[0].style[property] || 
           window.getComputedStyle(this[0]).getPropertyValue(property);
  }
  Array.from(this).forEach(el => el.style[property] = value);
  return this;
}

事件绑定

on: function(eventType, handler) {
  Array.from(this).forEach(el => {
    el.addEventListener(eventType, handler);
  });
  return this;
}

AJAX 功能实现

实现简化版的 AJAX 功能：

ajax: function(options) {
  const xhr = new XMLHttpRequest();
  xhr.open(options.method || 'GET', options.url, true);

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      options.success && options.success(xhr.responseText);
    } else {
      options.error && options.error(xhr.statusText);
    }
  };

  xhr.onerror = function() {
    options.error && options.error('Network Error');
  };

  xhr.send(options.data || null);
}

链式调用支持

通过在每个方法中返回对象本身来实现链式调用：

each: function(callback) {
  Array.from(this).forEach((el, index) => callback.call(el, index, el));
  return this;
},

addClass: function(className) {
  Array.from(this).forEach(el => el.classList.add(className));
  return this;
}

动画效果实现

基础动画功能示例：

animate: function(properties, duration) {
  Array.from(this).forEach(el => {
    el.style.transition = `all ${duration}ms`;
    Object.keys(properties).forEach(prop => {
      el.style[prop] = properties[prop];
    });
  });
  return this;
}

插件系统扩展

实现简单的插件扩展机制：

$.fn = $.prototype;
$.fn.extend = function(obj) {
  Object.assign($.fn, obj);
};

这个实现提供了 jQuery 的核心功能框架，可以根据需要进一步扩展。注意这只是基础实现，实际 jQuery 有更多边界情况处理和性能优化。