当前位置：首页 > JavaScript

js实现jq

2026-02-01 05:23:05JavaScript

使用原生 JavaScript 实现 jQuery 的部分功能

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

选择元素

jQuery 使用 $() 来选择元素，原生 JavaScript 可以使用 querySelector 或 querySelectorAll 实现类似功能。

// jQuery
$('.className');
$('#idName');

// 原生 JavaScript
document.querySelector('.className');
document.querySelector('#idName');
document.querySelectorAll('.className');

事件绑定

jQuery 使用 on() 方法绑定事件，原生 JavaScript 使用 addEventListener。

// jQuery
$('#button').on('click', function() {
  console.log('Button clicked');
});

// 原生 JavaScript
document.querySelector('#button').addEventListener('click', function() {
  console.log('Button clicked');
});

修改 CSS

jQuery 使用 css() 方法修改元素的样式，原生 JavaScript 可以直接操作 style 属性。

js实现jq

// jQuery
$('#element').css('color', 'red');

// 原生 JavaScript
document.querySelector('#element').style.color = 'red';

类操作

jQuery 提供了 addClass()、removeClass() 和 toggleClass() 方法，原生 JavaScript 可以使用 classList。

// jQuery
$('#element').addClass('active');
$('#element').removeClass('active');
$('#element').toggleClass('active');

// 原生 JavaScript
document.querySelector('#element').classList.add('active');
document.querySelector('#element').classList.remove('active');
document.querySelector('#element').classList.toggle('active');

获取和设置属性

jQuery 使用 attr() 方法获取或设置属性，原生 JavaScript 使用 getAttribute 和 setAttribute。

js实现jq

// jQuery
$('#element').attr('data-value');
$('#element').attr('data-value', 'newValue');

// 原生 JavaScript
document.querySelector('#element').getAttribute('data-value');
document.querySelector('#element').setAttribute('data-value', 'newValue');

AJAX 请求

jQuery 使用 $.ajax() 发送 AJAX 请求，原生 JavaScript 可以使用 fetch 或 XMLHttpRequest。

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

// 原生 JavaScript (使用 fetch)
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

动画效果

jQuery 提供了 animate() 方法，原生 JavaScript 可以使用 CSS 动画或 requestAnimationFrame。

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

// 原生 JavaScript (使用 CSS)
document.querySelector('#element').style.transition = 'opacity 1s';
document.querySelector('#element').style.opacity = '0.5';

链式调用

jQuery 支持链式调用，原生 JavaScript 可以通过返回对象本身实现类似功能。

// jQuery
$('#element').css('color', 'red').addClass('active');

// 原生 JavaScript (自定义实现)
function $(selector) {
  const element = document.querySelector(selector);
  return {
    css: function(property, value) {
      element.style[property] = value;
      return this;
    },
    addClass: function(className) {
      element.classList.add(className);
      return this;
    }
  };
}

$('#element').css('color', 'red').addClass('active');