当前位置：首页 > jquery

jquery转js

2026-04-08 15:32:41jquery

jQuery 转换为原生 JavaScript

jQuery 是一个流行的 JavaScript 库，简化了 DOM 操作、事件处理和 AJAX 等功能。随着现代浏览器对原生 JavaScript 的支持增强，许多 jQuery 功能可以直接用原生 JavaScript 实现。

选择元素

jQuery 使用 $() 或 jQuery() 选择元素，而原生 JavaScript 提供了类似的方法：

// jQuery
$('.class');
$('#id');
$('tag');

// 原生 JavaScript
document.querySelector('.class'); // 返回第一个匹配元素
document.querySelectorAll('.class'); // 返回所有匹配元素的 NodeList
document.getElementById('id');
document.getElementsByTagName('tag');

DOM 操作

jQuery 提供了便捷的 DOM 操作方法，原生 JavaScript 也能实现类似功能：

// 创建元素
// jQuery
$('<div>');

// 原生 JavaScript
document.createElement('div');

// 添加元素
// jQuery
$('#parent').append($('<div>'));

// 原生 JavaScript
const parent = document.getElementById('parent');
const child = document.createElement('div');
parent.appendChild(child);

// 修改内容
// jQuery
$('#element').text('Hello');
$('#element').html('<strong>Hello</strong>');

// 原生 JavaScript
document.getElementById('element').textContent = 'Hello';
document.getElementById('element').innerHTML = '<strong>Hello</strong>';

事件处理

jQuery 的事件绑定方法可以轻松替换为原生 JavaScript：

// jQuery
$('#button').click(function() { alert('Clicked'); });
$('#button').on('click', function() { alert('Clicked'); });

// 原生 JavaScript
document.getElementById('button').addEventListener('click', function() {
  alert('Clicked');
});

样式操作

修改元素样式在原生 JavaScript 中也很直接：

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

// 原生 JavaScript
document.getElementById('element').style.color = 'red';
document.getElementById('element').classList.add('active');
document.getElementById('element').classList.remove('active');

AJAX 请求

jQuery 的 AJAX 功能可以用 fetch 或 XMLHttpRequest 替代：

// jQuery
$.get('https://api.example.com/data', function(response) {
  console.log(response);
});

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

// 原生 JavaScript (XMLHttpRequest)
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
  console.log(xhr.responseText);
};
xhr.send();

动画效果

jQuery 的动画可以用 CSS 或原生 JavaScript 实现：

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

// 原生 JavaScript + CSS
document.getElementById('element').style.transition = 'opacity 1s';
document.getElementById('element').style.opacity = '1';

实用工具函数

jQuery 提供了一些实用工具函数，原生 JavaScript 也有对应的方法：

jquery转js

// jQuery
$.each(array, function(index, value) {});
$.extend({}, obj1, obj2);

// 原生 JavaScript
array.forEach((value, index) => {});
Object.assign({}, obj1, obj2);

注意事项

原生 JavaScript 的某些方法（如 querySelectorAll）返回的是 NodeList，不是 jQuery 对象，不能直接调用 jQuery 方法。
事件委托在原生 JavaScript 中需要通过 event.target 手动实现。
对于复杂的动画，可以使用 CSS 动画或 Web Animations API 替代 jQuery 动画。

通过以上方法，可以逐步将 jQuery 代码迁移到原生 JavaScript，减少对 jQuery 的依赖。