jQuery与javascript的区别＋案例锋芒毕露

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 改变段落的文本。

jQuery与javascript的区别＋案例锋芒毕露

评论已关闭

推荐阅读