jquery转js
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
$.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 的依赖。
