jQuery 常用语法详解

html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

2. 选择器

jQuery 提供了强大的选择器功能，可以轻松地选择页面中的元素。

2.1 基本选择器

ID 选择器：$("#id")
类选择器：$(".class")
标签选择器：$("tag")
属性选择器：$("[attribute]") 和 $("[attribute=value]")

html<div id="myDiv">Hello, World!</div>
<p class="myClass">This is a paragraph.</p>
<a href="https://example.com">Link</a>

<script>
    $(document).ready(function() {
        $("#myDiv").css("color", "red"); // 将 ID 为 myDiv 的元素文本颜色设置为红色
        $(".myClass").css("font-size", "20px"); // 将类为 myClass 的元素字体大小设置为 20px
        $("p").text("This is a new paragraph text."); // 将所有 p 标签的文本内容设置为新的内容
        $("[href]").css("text-decoration", "none"); // 移除所有带有 href 属性的链接的下划线
        $("[href='https://example.com']").css("color", "blue"); // 将 href 为 https://example.com 的链接文本颜色设置为蓝色
    });
</script>

2.2 层次选择器

后代选择器：$("ancestor descendant")
子选择器：$("parent > child")
相邻兄弟选择器：$("prev + next")
通用兄弟选择器：$("prev ~ siblings")

html<div id="container">
    <p class="first">First paragraph</p>
    <p class="second">Second paragraph</p>
    <p class="third">Third paragraph</p>
</div>

<script>
    $(document).ready(function() {
        $("#container p").css("color", "blue"); // 选择 container 下的所有 p 元素
        $("#container > .first").css("font-weight", "bold"); // 选择 container 的直接子元素 .first
        $(".first + .second").css("text-decoration", "underline"); // 选择 .first 的下一个兄弟元素 .second
        $(".first ~ .third").css("background-color", "yellow"); // 选择 .first 的所有后续兄弟元素 .third
    });
</script>

2.3 伪类选择器

第一个元素：$("selector:first")
最后一个元素：$("selector:last")
偶数索引元素：$("selector:even")
奇数索引元素：$("selector:odd")
可见元素：$("selector:visible")
不可见元素：$("selector:hidden")

html<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li style="display: none;">Item 4</li>
</ul>

<script>
    $(document).ready(function() {
        $("li:first").css("color", "green"); // 选择第一个 li 元素
        $("li:last").css("color", "red"); // 选择最后一个 li 元素
        $("li:even").css("background-color", "lightgray"); // 选择索引为偶数的 li 元素
        $("li:odd").css("background-color", "lightblue"); // 选择索引为奇数的 li 元素
        $("li:visible").css("font-weight", "bold"); // 选择可见的 li 元素
        $("li:hidden").css("border", "1px solid red"); // 选择不可见的 li 元素
    });
</script>

3. 操作 DOM

jQuery 提供了丰富的 DOM 操作方法，可以轻松地修改和操作页面元素。

3.1 获取和设置属性

获取属性：$("element").attr("attribute")
设置属性：$("element").attr("attribute", "value")
移除属性：$("element").removeAttr("attribute")

<a id="myLink" href="https://example.com">Link</a>

<script>
    $(document).ready(function() {
        var href = $("#myLink").attr("href"); // 获取 href 属性值
        console.log(href); // 输出: https://example.com

        $("#myLink").attr("href", "https://newexample.com"); // 设置 href 属性值
        $("#myLink").removeAttr("href"); // 移除 href 属性
    });
</script>

3.2 获取和设置样式

获取样式：$("element").css("property")
设置样式：$("element").css("property", "value")
批量设置样式：$("element").css({ property1: "value1", property2: "value2" })

html<div id="myDiv">Hello, World!</div>

<script>
    $(document).ready(function() {
        var color = $("#myDiv").css("color"); // 获取 color 属性值
        console.log(color); // 输出: rgb(0, 0, 0)

        $("#myDiv").css("color", "red"); // 设置 color 属性值
        $("#myDiv").css({ "font-size": "20px", "background-color": "yellow" }); // 批量设置样式
    });
</script>

3.3 添加和删除类

添加类：$("element").addClass("class")
删除类：$("element").removeClass("class")
切换类：$("element").toggleClass("class")

html<div id="myDiv" class="initial-class">Hello, World!</div>

<script>
    $(document).ready(function() {
        $("#myDiv").addClass("new-class"); // 添加新类
        $("#myDiv").removeClass("initial-class"); // 删除初始类
        $("#myDiv").toggleClass("active"); // 切换 active 类
    });
</script>

3.4 创建和插入元素

创建元素：$(html)
插入元素：$("element").append(content) / $("element").prepend(content) / $("element").before(content) / $("element").after(content)

html<div id="container"></div>

<script>
    $(document).ready(function() {
        var newDiv = $("<div>").text("New Div").addClass("new-div"); // 创建新 div 元素
        $("#container").append(newDiv); // 将新 div 插入到 container 的末尾
        $("#container").prepend("<p>New Paragraph</p>"); // 将新 p 插入到 container 的开头
        $("#container").before("<h1>Title</h1>"); // 在 container 前插入 h1
        $("#container").after("<footer>Footer</footer>"); // 在 container 后插入 footer
    });
</script>

3.5 删除元素

删除元素：$("element").remove()
清空内容：$("element").empty()

html<div id="container">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>

<script>
    $(document).ready(function() {
        $("#container").find("p").first().remove(); // 删除第一个 p 元素
        $("#container").empty(); // 清空 container 的所有内容
    });
</script>

4. 事件处理

jQuery 提供了多种事件处理方法，可以轻松地绑定和触发事件。

4.1 常见事件

点击事件：$("element").click(function() { ... })
鼠标悬停事件：$("element").hover(function() { ... }, function() { ... })
表单提交事件：$("form").submit(function() { ... })
键盘事件：$("input").keydown(function() { ... }) / $("input").keyup(function() { ... })

html<button id="myButton">Click me</button>
<div id="result"></div>
<input type="text" id="myInput">

<script>
    $(document).ready(function() {
        $("#myButton").click(function() {
            $("#result").text("Button clicked!");
        });

        $("#myButton").hover(
            function() {
                $(this).css("background-color", "lightblue");
            },
            function() {
                $(this).css("background-color", "");
            }
        );

        $("#myInput").keydown(function(event) {
            console.log("Key pressed: " + event.key);
        });

        $("#myInput").keyup(function(event) {
            console.log("Key released: " + event.key);
        });
    });
</script>

4.2 事件委托

事件委托：$("staticParent").on("event", "dynamicChild", function() { ... })

html<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<button id="addButton">Add Item</button>

<script>
    $(document).ready(function() {
        $("#addButton").click(function() {
            $("#list").append("<li>Item " + ($("#list li").length + 1) + "</li>");
        });

        $("#list").on("click", "li", function() {
            $(this).remove();
        });
    });
</script>

5. 动画效果

jQuery 提供了多种动画方法，可以轻松地实现元素的动画效果。

5.1 常见动画方法

显示/隐藏：$("element").show(duration) / $("element").hide(duration)
淡入/淡出：$("element").fadeIn(duration) / $("element").fadeOut(duration)
滑动展开/收起：$("element").slideDown(duration) / $("element").slideUp(duration)
自定义动画：$("element").animate(properties, duration)

html<div id="myDiv" style="display: none;">Hello, World!</div>
<button id="toggleButton">Toggle</button>
<button id="animateButton">Animate</button>

<script>
    $(document).ready(function() {
        $("#toggleButton").click(function() {
            $("#myDiv").slideToggle(500); // 切换显示和隐藏，持续时间为 500 毫秒
        });

        $("#animateButton").click(function() {
            $("#myDiv").animate({
                width: "200px",
                height: "100px",
                opacity: 0.5
            }, 1000); // 自定义动画，持续时间为 1000 毫秒
        });
    });
</script>

6. AJAX 调用

jQuery 简化了 AJAX 调用，使得异步数据请求变得更加容易。

6.1 常见 AJAX 方法

GET 请求：$.get(url, data, callback)
POST 请求：$.post(url, data, callback)
通用 AJAX 请求：$.ajax(settings)

html<button id="ajaxButton">Fetch Data</button>
<div id="dataResult"></div>

<script>
    $(document).ready(function() {
        $("#ajaxButton").click(function() {
            $.get("https://api.example.com/data", function(data) {
                $("#dataResult").text(JSON.stringify(data));
            }).fail(function() {
                $("#dataResult").text("An error occurred.");
            });
        });

        $("#ajaxButton").click(function() {
            $.post("https://api.example.com/submit", { key: "value" }, function(data) {
                $("#dataResult").text(JSON.stringify(data));
            }).fail(function() {
                $("#dataResult").text("An error occurred.");
            });
        });

        $("#ajaxButton").click(function() {
            $.ajax({
                url: "https://api.example.com/data",
                method: "GET",
                dataType: "json",
                success: function(data) {
                    $("#dataResult").text(JSON.stringify(data));
                },
                error: function() {
                    $("#dataResult").text("An error occurred.");
                }
            });
        });
    });
</script>