js实现jquery常用方法

在前端开发的世界里，jQuery 曾经是王者，它的链式调用和丰富的插件让DOM操作变得异常简单，虽然现在随着原生JavaScript的崛起，jQuery的使用逐渐减少，但它的一些常用方法依然值得学习，我们就来聊聊如何用原生JavaScript实现一些jQuery的常用方法。

1. 选择元素：$(selector)

jQuery中选择元素是最简单的操作之一，对应的原生JavaScript方法是document.querySelector和document.querySelectorAll，这两个方法分别用于选择单个元素和多个元素。

// 选择单个元素
const element = document.querySelector('selector');
// 选择多个元素
const elements = document.querySelectorAll('selector');

事件绑定：`.on()`

在jQuery中，绑定事件是通过.on()方法实现的，在原生JavaScript中，我们可以使用addEventListener方法来绑定事件。

// 绑定点击事件
element.addEventListener('click', function() {
  // 事件处理代码
});

AJAX请求：`$.ajax()`

jQuery的$.ajax()方法是一个强大的工具，用于发送异步HTTP（Ajax）请求，在原生JavaScript中，我们可以使用fetch API来实现类似的功能。

fetch(url, {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => {
  // 处理数据
})
.catch(error => {
  // 处理错误
});

4. 动画效果：.fadeIn()和.fadeOut()

jQuery提供了许多简单易用的动画效果，如.fadeIn()和.fadeOut()，在原生JavaScript中，我们可以使用CSS过渡和requestAnimationFrame来实现类似的效果。

// 淡入效果
element.style.opacity = 0;
element.style.display = 'block';
let last = +new Date();
let tick = function() {
  element.style.opacity = +element.style.opacity + (new Date() - last) / 400;
  last = +new Date();
  if (+element.style.opacity < 1) {
    requestAnimationFrame(tick);
  }
};
tick();
// 淡出效果
let last = +new Date();
let tick = function() {
  element.style.opacity = +element.style.opacity - (new Date() - last) / 400;
  last = +new Date();
  if (+element.style.opacity > 0) {
    requestAnimationFrame(tick);
  } else {
    element.style.display = 'none';
  }
};
tick();

5. DOM操作：.append()和.prepend()

在jQuery中，.append()和.prepend()方法用于向元素内部添加内容，在原生JavaScript中，我们可以使用appendChild和insertBefore方法。

// 在元素内部添加内容
const newElement = document.createElement('div');
element.appendChild(newElement);
// 在元素内容的开始位置添加内容
const newElement = document.createElement('div');
element.insertBefore(newElement, element.firstChild);

属性操作：`.attr()`

jQuery的.attr()方法用于获取和设置元素的属性，在原生JavaScript中，我们可以使用getAttribute和setAttribute方法。

// 获取属性值
const attributeValue = element.getAttribute('attributeName');
// 设置属性值
element.setAttribute('attributeName', 'attributeValue');

这些只是jQuery常用方法的一些基础实现，随着你对原生JavaScript的学习，你会发现它提供了更多强大和灵活的功能，而且性能也更加出色，jQuery的时代虽然已经过去，但它留下的宝贵遗产——对DOM操作的简化和封装——依然值得我们学习和借鉴。