当前位置：首页 > JavaScript

js实现jq

2026-04-05 21:48:29JavaScript

使用原生 JavaScript 实现 jQuery 的核心功能

jQuery 的核心功能包括 DOM 操作、事件处理、AJAX 请求等。以下是使用原生 JavaScript 实现类似功能的方法：

DOM 选择器

jQuery 的选择器功能可以通过 document.querySelectorAll 实现：

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

DOM 操作

jQuery 的 DOM 操作方法可以用原生 API 替代：

js实现jq

// 添加类
Element.prototype.addClass = function(className) {
  this.classList.add(className);
};

// 移除类
Element.prototype.removeClass = function(className) {
  this.classList.remove(className);
};

// 切换类
Element.prototype.toggleClass = function(className) {
  this.classList.toggle(className);
};

事件处理

jQuery 的事件绑定可以用 addEventListener 实现：

Element.prototype.on = function(event, callback) {
  this.addEventListener(event, callback);
};

AJAX 请求

jQuery 的 AJAX 功能可以用 fetch API 或 XMLHttpRequest 实现：

js实现jq

function ajax(options) {
  return fetch(options.url, {
    method: options.method || 'GET',
    body: options.data || null,
    headers: options.headers || {}
  }).then(response => response.json());
}

链式调用

实现 jQuery 风格的链式调用：

function $(selector) {
  const elements = document.querySelectorAll(selector);
  elements.addClass = function(className) {
    this.forEach(el => el.classList.add(className));
    return this;
  };
  return elements;
}

动画效果

实现简单的动画效果：

Element.prototype.animate = function(properties, duration) {
  const element = this;
  const start = performance.now();

  requestAnimationFrame(function animate(time) {
    const timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    for (const prop in properties) {
      element.style[prop] = properties[prop] * timeFraction + 'px';
    }

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }
  });
};