当前位置：首页 > JavaScript

js 实现 jq

2026-04-05 07:37:34JavaScript

要在 JavaScript 中实现类似 jQuery 的功能，可以创建一个简单的类或函数来封装常见的 DOM 操作、事件处理和 AJAX 请求。以下是实现 jQuery 核心功能的一种方式：

基础结构

创建一个名为 $ 的函数，用于选择元素并返回一个对象，该对象包含操作 DOM 的方法。

function $(selector) {
  const elements = document.querySelectorAll(selector);
  return {
    elements,
    // 方法将在这里定义
  };
}

常用方法实现

添加类

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

移除类

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

设置/获取属性

attr(name, value) {
  if (value === undefined) {
    return this.elements[0].getAttribute(name);
  }
  this.elements.forEach(el => el.setAttribute(name, value));
  return this;
}

设置/获取内容

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

事件绑定

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

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(xhr.statusText);
  };
  xhr.send(options.data);
};

链式调用

通过在每个方法中返回 this，可以实现链式调用：

js 实现 jq

$('div').addClass('active').attr('data-id', '123');

完整示例

function $(selector) {
  const elements = document.querySelectorAll(selector);
  return {
    elements,
    addClass(className) {
      this.elements.forEach(el => el.classList.add(className));
      return this;
    },
    removeClass(className) {
      this.elements.forEach(el => el.classList.remove(className));
      return this;
    },
    attr(name, value) {
      if (value === undefined) {
        return this.elements[0].getAttribute(name);
      }
      this.elements.forEach(el => el.setAttribute(name, value));
      return this;
    },
    html(content) {
      if (content === undefined) {
        return this.elements[0].innerHTML;
      }
      this.elements.forEach(el => el.innerHTML = content);
      return this;
    },
    on(eventName, callback) {
      this.elements.forEach(el => el.addEventListener(eventName, callback));
      return this;
    }
  };
}

$.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(xhr.statusText);
  };
  xhr.send(options.data);
};

使用示例

// DOM 操作
$('.test').addClass('highlight').html('Hello World');

// 事件处理
$('button').on('click', () => alert('Clicked!'));

// AJAX
$.ajax({
  url: '/api/data',
  method: 'GET',
  success: (data) => console.log(data),
  error: (err) => console.error(err)
});

这种方法实现了 jQuery 的核心功能，但实际 jQuery 要复杂得多，包含更多特性和跨浏览器兼容处理。