jQuery 是一个 JavaScript 库,它封装了很多 JavaScript 操作 DOM 的方法,使得我们在操作 DOM 时更加简便。
主要的区别在于:
- jQuery 是一个库,它遵循 JavaScript 语法和规则,只是封装了很多常用的方法,使我们更方便地操作 DOM。
- jQuery 的方法通常返回一个 jQuery 对象,我们可以在这个对象上继续调用 jQuery 的其他方法。
- JavaScript 是原生的 JavaScript,不依赖于任何库,它需要我们自己写更多的代码来实现相同的功能。
- JavaScript 的方法通常返回一个 JavaScript 的原生对象,或者 null,我们只能在这个对象上调用原生 JavaScript 的方法。
以下是一个简单的例子,展示了如何用 jQuery 和原生 JavaScript 选择 DOM 元素,并为选择的元素添加点击事件:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
});
window.onload = function() {
document.getElementById("btn2").addEventListener("click", function(){
document.getElementById("test2").textContent = "Hello world!";
});
};
</script>
</head>
<body>
<button id="btn1">点击我-jQuery</button>
<p id="test1"></p>
<button id="btn2">点击我-JavaScript</button>
<p id="test2"></p>
</body>
</html>
在这个例子中,我们使用 jQuery 通过 id 选择器选择了一个按钮和一个段落,并为这个按钮添加了点击事件。在点击按钮后,我们使用 jQuery 的 text 方法改变段落的文本。
同时,我们也使用原生 JavaScript 完成了同样的操作。在 JavaScript 中,我们使用 getElementById
选择 DOM 元素,并使用 addEventListener
添加事件监听器。在点击按钮后,我们使用 textContent
改变段落的文本。