当前位置：首页 > JavaScript

js实现jq

2026-03-14 03:42:03JavaScript

JavaScript 实现 jQuery 功能

jQuery 是一个流行的 JavaScript 库，主要用于简化 DOM 操作、事件处理、动画和 AJAX 等功能。以下是用原生 JavaScript 实现 jQuery 常见功能的方法。

选择器功能

jQuery 的核心功能之一是选择器，通过 $() 快速选择 DOM 元素。原生 JavaScript 提供了类似的方法：

// jQuery 方式
$('.class-name');

// 原生 JavaScript 方式
document.querySelectorAll('.class-name');

querySelectorAll 返回一个 NodeList，类似于 jQuery 对象。如果需要单个元素，可以使用 querySelector。

DOM 操作

jQuery 提供了丰富的 DOM 操作方法，以下是原生实现：

// 创建元素
const div = document.createElement('div');

// 添加类名
div.classList.add('new-class');

// 设置属性
div.setAttribute('id', 'my-div');

// 插入元素
document.body.appendChild(div);

// 移除元素
div.remove();

事件绑定

jQuery 的事件绑定非常简洁，原生 JavaScript 也能实现类似功能：

// jQuery 方式
$('#button').on('click', function() {
  console.log('Clicked');
});

// 原生 JavaScript 方式
document.getElementById('button').addEventListener('click', function() {
  console.log('Clicked');
});

AJAX 请求

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

// jQuery 方式
$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  }
});

// 原生 JavaScript 方式 (fetch API)
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

动画效果

jQuery 的动画功能可以通过 CSS 过渡或原生 JavaScript 实现：

// jQuery 方式
$('#box').animate({ opacity: 0.5 }, 1000);

// 原生 JavaScript 方式
const box = document.getElementById('box');
box.style.transition = 'opacity 1s';
box.style.opacity = '0.5';

链式调用

jQuery 的链式调用可以通过返回对象自身实现：

function $(selector) {
  const el = document.querySelector(selector);
  return {
    addClass: function(className) {
      el.classList.add(className);
      return this;
    },
    css: function(property, value) {
      el.style[property] = value;
      return this;
    }
  };
}

// 使用方式
$('#box').addClass('highlight').css('color', 'red');

封装成迷你 jQuery 库

可以将上述功能封装成一个简单的库：

js实现jq

function $(selector) {
  const elements = document.querySelectorAll(selector);
  return {
    elements,
    on(event, callback) {
      this.elements.forEach(el => el.addEventListener(event, callback));
      return this;
    },
    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;
    },
    html(content) {
      if (content === undefined) {
        return this.elements[0].innerHTML;
      }
      this.elements.forEach(el => el.innerHTML = content);
      return this;
    }
  };
}

通过以上方法，可以用原生 JavaScript 实现 jQuery 的核心功能。虽然原生代码可能稍显冗长，但现代 JavaScript 已经提供了很多便捷的 API，足以替代 jQuery 的大部分功能。