jQuery 语法学习笔记

什么是 jQuery？

jQuery 是一款快速、简洁的 JavaScript 库，是最流行的 JavaScript 库之一。它封装了常用的 DOM 操作、事件处理、动画效果和 AJAX 等操作，使得 JavaScript 编程变得更为简单易懂。

如何引入 jQuery？

可以通过以下方式引入 jQuery：

htmlCopy Code
<!-- 从官网获取最新的 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

或者可以下载 jQuery，然后在本地引入：

htmlCopy Code
<!-- 引入本地的 jQuery 库 -->
<script src="jquery-3.6.0.min.js"></script>

jQuery 常用语法

选择器

jQuery 根据 CSS 选择器来选择元素，并提供了一些额外的选择器，例如筛选器和内容筛选器等。

下面是几个常用的选择器：

$("element")：选取所有给定元素。
$("#id")：根据 id 选择元素。
$(".class")：根据 class 选择元素。
$(":input")：选择所有 input 元素。
$("selector1, selector2, selector3")：选择多个元素。

事件处理

jQuery 提供了一系列的事件处理方法，包括点击事件、鼠标移动事件、键盘事件等等。

下面是一个例子，当按钮被点击时，会将文本框中的内容隐藏：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 事件处理</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button>Hide</button>

</body>
</html>

操作 DOM 元素

jQuery 提供了一系列的操作 DOM 元素的方法，包括添加元素、删除元素、移动元素等等。

下面是一个例子，点击按钮后会添加一个新的段落：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 操作 DOM 元素</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").after("<p>This is a new paragraph.</p>");
  });
});
</script>
</head>
<body>

<p>If you click on the "Add" button, a new paragraph will be added.</p>

<button>Add</button>

</body>
</html>

总结

本文介绍了 jQuery 的基本概念、如何引入 jQuery 库以及常见的 jQuery 语法，包括选择器、事件处理和操作 DOM 元素等。

通过使用 jQuery，可以使得 JavaScript 编程变得更加简单易懂，提高开发效率。