jQuery简介与入门

jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax操作。

什么是jQuery？

jQuery是一个开源的JavaScript库，由John Resig于2006年创建。它使HTML文档遍历和操作、事件处理、动画和Ajax更加简单，并且可以在多种浏览器中工作。

为什么选择jQuery？

简化DOM操作
跨浏览器兼容性
强大的选择器
丰富的插件生态系统
易于学习和使用
轻量级（压缩后约30KB）

如何引入jQuery

有两种主要方式引入jQuery：

1. 使用CDN（推荐）

<!-- 使用Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- 使用jQuery官方CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

2. 下载本地文件

<script src="/path/to/jquery-3.7.1.min.js"></script>

提示： 通常建议将jQuery放在<head>标签中或页面底部，但在</body>标签前引入可以提高页面加载速度。

第一个jQuery程序

下面是一个简单的jQuery示例，当点击按钮时隐藏一个段落：

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <p id="demo">点击按钮我会消失！</p>
    <button id="hideBtn">隐藏段落</button>

    <script>
        $(document).ready(function(){
            $("#hideBtn").click(function(){
                $("#demo").hide();
            });
        });
    </script>
</body>
</html>

jQuery语法

jQuery的基本语法是：$(selector).action()

$ 符号定义jQuery
(selector) 查询HTML元素
.action() 执行对元素的操作

示例：

$(this).hide()          // 隐藏当前元素
$("p").hide()           // 隐藏所有<p>元素
$(".test").hide()       // 隐藏所有class="test"的元素
$("#test").hide()       // 隐藏id="test"的元素

文档就绪事件

为了防止文档在完全加载之前运行jQuery代码，所有jQuery代码都应该包含在文档就绪事件中：

$(document).ready(function(){
    // jQuery代码写在这里
});

// 简写形式
$(function(){
    // jQuery代码写在这里
});

注意： 在文档完全加载之前操作DOM可能会导致错误。文档就绪事件确保代码在DOM完全加载后执行。

jQuery选择器

jQuery选择器允许您选择和操作HTML元素。它们基于CSS选择器，并添加了一些自定义选择器。

选择器	示例	描述
元素选择器	`$("p")`	选择所有<p>元素
ID选择器	`$("#test")`	选择id="test"的元素
类选择器	`$(".test")`	选择所有class="test"的元素
所有元素	`$("*")`	选择所有元素
当前元素	`$(this)`	选择当前HTML元素

综合示例

下面是一个包含多种操作的jQuery示例：

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            margin: 10px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <button id="btn1">隐藏所有段落</button>
    <button id="btn2">显示所有段落</button>
    <button id="btn3">切换显示</button>
    <button id="btn4">添加新段落</button>

    <div id="content">
        <p>段落1</p>
        <p class="special">特殊段落</p>
        <p>段落2</p>
    </div>

    <div class="box"></div>

    <script>
        $(document).ready(function(){
            // 隐藏所有段落
            $("#btn1").click(function(){
                $("p").hide(1000);
            });

            // 显示所有段落
            $("#btn2").click(function(){
                $("p").show(1000);
            });

            // 切换显示/隐藏
            $("#btn3").click(function(){
                $(".special").toggle(500);
            });

            // 添加新段落
            $("#btn4").click(function(){
                $("#content").append("<p>新添加的段落</p>");
            });

            // 盒子点击事件
            $(".box").click(function(){
                $(this).css("background-color", "#e74c3c");
            });
        });
    </script>
</body>
</html>

下一步： 现在您已经了解了jQuery的基础知识，接下来可以学习更多高级主题，如DOM操作、事件处理、动画效果和Ajax。

已是第一章下一章: jQuery 语法

jQuery教程