jquery转js
使用原生JavaScript替代jQuery选择器
jQuery的选择器功能可以通过document.querySelector或document.querySelectorAll实现。
- 单元素选择：
// jQuery: $('#id') document.getElementById('id'); // 或 document.querySelector('#id'); - 多元素选择：
// jQuery: $('.class') document.querySelectorAll('.class');
DOM操作替代
jQuery的DOM操作方法可以用原生JavaScript属性或方法替换。
- 修改内容：
// jQuery: $('#el').text('content') document.getElementById('el').textContent = 'content'; - 修改HTML：
// jQuery: $('#el').html('<span>content</span>') document.getElementById('el').innerHTML = '<span>content</span>'; - 修改属性：
// jQuery: $('#el').attr('src', 'image.jpg') document.getElementById('el').setAttribute('src', 'image.jpg');
事件监听替代
jQuery的事件绑定可以用addEventListener替代。
// jQuery: $('#el').on('click', handler)
document.getElementById('el').addEventListener('click', handler);AJAX请求替代
使用fetch或XMLHttpRequest替代jQuery的$.ajax。
- 使用fetch：
// jQuery: $.ajax({ url, method: 'GET' }) fetch(url) .then(response => response.json()) .then(data => console.log(data)); - 使用XMLHttpRequest：
const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onload = () => console.log(xhr.responseText); xhr.send();
类名操作替代
jQuery的addClass、removeClass等可以用classList替代。
// jQuery: $('#el').addClass('active')
document.getElementById('el').classList.add('active');动画效果替代
CSS动画或requestAnimationFrame可以替代jQuery动画。
- CSS过渡：
.element { transition: opacity 0.3s; }// jQuery: $('#el').fadeIn() document.getElementById('el').style.opacity = '1';
遍历与数组操作
jQuery的$.each可以用forEach或for...of替代。
// jQuery: $.each(array, (i, item) => {})
array.forEach((item, i) => {});链式操作替代
原生JavaScript不支持链式操作，但可以通过变量暂存实现类似效果。
const el = document.getElementById('el');
el.style.color = 'red';
el.classList.add('highlight');
