JQUERY 语法

jQuery 的语法主要基于 CSS 选择器，用于选取 HTML 元素，并提供了丰富的方法来操作这些元素。以下是 jQuery 的基本语法要点：

1、选择器（Selectors）

jQuery 使用 CSS 选择器语法来选择 HTML 元素，例如：

元素选择器：选择所有指定类型的 HTML 元素。

$("p") // 选择所有 <p> 元素

ID 选择器：选择指定 ID 的元素。

$("#myId") // 选择 ID 为 "myId" 的元素

类选择器：选择指定类名的元素。

$(".myClass") // 选择所有类名为 "myClass" 的元素

属性选择器：选择具有指定属性的元素。

$("[href]") // 选择带有 href 属性的所有元素

组合选择器：组合不同的选择器。

$("p.intro") // 选择类名为 "intro" 的 <p> 元素

2、动作（Actions）

jQuery 提供了许多方法来执行操作或修改选定的元素，如添加、修改、移除元素，以及获取和设置元素的属性和内容。

获取和设置 HTML 内容：

$("p").html() // 获取第一个 <p> 元素的 HTML 内容
$("p").html("新内容") // 设置所有 <p> 元素的 HTML 内容为 "新内容"

获取和设置文本内容：

$("p").text() // 获取第一个 <p> 元素的文本内容
$("p").text("新文本") // 设置所有 <p> 元素的文本内容为 "新文本"

添加和移除元素：

$("p").append("<span>新文本</span>") //在每个 <p>　元素的结尾添加一个　<span> 元素
$("p").remove() // 移除所有 <p> 元素

添加和移除 CSS 类：

$("p").addClass("green") // 向所有 <p> 元素添加 "green" 类
$("p").removeClass("green") // 从所有 <p> 元素移除 "green" 类

3、事件（Events）

jQuery 允许绑定和处理各种事件，如点击、鼠标移入移出、键盘事件等。

点击事件：

$("button").click(function() {
    // 点击按钮时执行的操作
});

鼠标事件：

$("p").mouseenter(function() {
    // 鼠标移入 <p> 元素时执行的操作
});
$("p").mouseleave(function() {
    // 鼠标移出 <p> 元素时执行的操作
});

表单事件：

$("input").focus(function() {
    // 输入框获得焦点时执行的操作
});
$("input").blur(function() {
    // 输入框失去焦点时执行的操作
});

4、文档加载完成时执行

为了确保 DOM 已完全加载后再执行 jQuery 代码，建议使用 $(document).ready() 函数或简写形式 $(function() { ... })：

$(document).ready(function() {
    // jQuery 代码
});
// 或者简写形式
$(function() {
    // jQuery 代码
});

5、AJAX

使用 jQuery 发送 Ajax 请求。

$.ajax({
    url: 'your-endpoint', // 请求的 URL
    type: 'GET', // 请求方法
    success: function(response) {
        // 请求成功时的回调函数
        console.log(response);
    },
    error: function(xhr, status, error) {
        // 请求失败时的回调函数
        console.error(error);
    }
});

示例

下面是一个简单的示例，演示了如何使用 jQuery 来动态改变元素的内容和样式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery 示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <style>
        .blue {
            color: blue;
        }
		.red {
            color: red;
        }
    </style>
</head>
<body>
<p>点击按钮改变文本及颜色。</p>
<button id="blueButton">变成蓝色</button>
<button id="redButton">变成红色</button><script>
$(document).ready(function() {
    $("#blueButton").click(function() {
    	$("p").text("文字颜色已变成绿色！").removeClass("red");
    	$("p").text("文字颜色已变成绿色！").addClass("blue");
    });
    $("#redButton").click(function() {
    	$("p").text("文字颜色已变成绿色！").removeClass("blue");
        $("p").text("文字颜色已变成红色！").addClass("red");
    });
});
</script>
</body>
</html>