原生js仿jquery一些常用方法(必看篇)

“原生js仿jquery一些常用方法(必看篇)”是一篇文章，介绍了如何使用纯原生的JavaScript实现一些常见的jQuery方法。这些方法包括：选择器、事件绑定、DOM操作、特效等。

以下是这篇文章中介绍的一些内容：

选择器

在jQuery中，我们可以使用美元符号（$）来简化选择器的书写。例如：

$(".my-class")

在原生JavaScript中，我们可以使用document.querySelector()来实现相同的效果。例如：

document.querySelector(".my-class")

这个方法返回匹配选择器的第一个元素。

如果我们需要选择器的所有元素，我们可以使用document.querySelectorAll()方法。例如：

document.querySelectorAll(".my-class")

这个方法返回一个NodeList对象，包含了所有匹配选择器的元素。

事件绑定

在jQuery中，我们可以使用$(".my-class").click()方法来绑定click事件。例如：

$(".my-class").click(function() {
// do something
})

在原生JavaScript中，我们可以使用addEventListener()方法来绑定事件。例如：

document.querySelector(".my-class").addEventListener("click", function() {
// do something
})

DOM操作

在jQuery中，我们可以使用html()方法来获取或设置元素的HTML内容。例如：

$(".my-class").html()

在原生JavaScript中，我们可以使用innerHTML属性来实现相同的效果。例如：

document.querySelector(".my-class").innerHTML

同样地，我们可以使用outerHTML属性来获取元素包括自身的HTML内容。

特效

在jQuery中，我们可以使用hide()方法来隐藏元素。例如：

$(".my-class").hide()

在原生JavaScript中，我们可以使用style.display属性来实现相同的效果。例如：

document.querySelector(".my-class").style.display = "none"

我们还可以使用fadeIn()和fadeOut()方法来实现淡入淡出效果。例如：

```function fadeIn(el) {
el.style.opacity = 0;

var tick = function() {
    el.style.opacity = +el.style.opacity + 0.01;

    if (+el.style.opacity < 1) {
        (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
    }
};

tick();

}

function fadeOut(el) {
el.style.opacity = 1;

var tick = function() {
    el.style.opacity = +el.style.opacity - 0.01;

    if (+el.style.opacity > 0) {
        (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
    }
};

tick();

}```

我们可以将这些函数分别绑定到元素的fadeIn()和fadeOut()方法中。

以上是“原生js仿jquery一些常用方法(必看篇)”的简要介绍，希望对你有帮助。