jQuery基础概念

理论讲解

什么是jQuery？

jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果和AJAX交互等操作。jQuery的设计理念是"写得少，做得多"（Write Less, Do More），通过封装复杂的JavaScript代码，提供简洁易用的API，使开发者能够更高效地开发交互式网页应用。

jQuery的优势

简洁的语法：jQuery提供了简洁的选择器语法，使DOM元素的选择和操作更加直观。
跨浏览器兼容性：jQuery解决了不同浏览器之间的兼容性问题，使代码能够在各种浏览器中正常运行。
丰富的API：jQuery提供了大量实用的方法，涵盖了DOM操作、事件处理、动画效果和AJAX等方面。
链式调用：jQuery支持链式调用，使代码更加简洁易读。
插件系统：jQuery拥有丰富的插件生态系统，可以轻松扩展其功能。

jQuery的安装方法

方法1：通过CDN引入

使用CDN（内容分发网络）引入jQuery是最常用的方法，它可以提高加载速度并减轻服务器负担。

<!-- 引入Google CDN的jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入Microsoft CDN的jQuery -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>

<!-- 引入jQuery官方CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                    

方法2：本地文件引入

从jQuery官网下载jQuery文件，然后在本地引入。

<!-- 引入本地jQuery文件 -->
<script src="jquery-3.6.0.min.js"></script>
                    

jQuery的基本语法

jQuery的基本语法结构为：

$(selector).action()

$：jQuery的简写符号，等同于jQuery。
selector：选择器，用于选择DOM元素。
action()：对选中元素执行的操作。

DOM就绪事件

在jQuery中，我们通常使用DOM就绪事件来确保DOM加载完成后再执行JavaScript代码，这样可以避免因DOM未加载完成而导致的错误。

// 写法1：jQuery标准写法
$(document).ready(function() {
    // 代码...
});

// 写法2：简写形式
$(function() {
    // 代码...
});
                    

链式调用

jQuery支持链式调用，即在一个jQuery对象上连续调用多个方法，这样可以减少代码量并提高可读性。

// 链式调用示例
$("p").css("color", "red").slideUp(2000).slideDown(2000);
                    

代码示例

示例1：基本选择器和操作

<!DOCTYPE html>
<html>
<head>
    <title>jQuery基本示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // 选择所有p元素并修改其内容
            $("p").text("Hello jQuery!");
            
            // 选择id为demo的元素并修改其背景色
            $("#demo").css("background-color", "yellow");
            
            // 选择class为test的元素并隐藏
            $("#hide").click(function() {
                $(".test").hide();
            });
            
            // 显示被隐藏的元素
            $("#show").click(function() {
                $(".test").show();
            });
        });
    </script>
</head>
<body>
    <p>这是一个段落。</p>
    <p class="test">这是一个带有class的段落。</p>
    <p id="demo">这是一个带有id的段落。</p>
    <button id="hide">隐藏class="test"的元素</button>
    <button id="show">显示class="test"的元素</button>
</body>
</html>
                    

示例2：链式调用

<!DOCTYPE html>
<html>
<head>
    <title>jQuery链式调用示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // 链式调用：修改样式并添加动画效果
            $("button").click(function() {
                $("p").css("color", "blue")
                      .slideUp(1000)
                      .slideDown(1000)
                      .fadeOut(1000)
                      .fadeIn(1000);
            });
        });
    </script>
</head>
<body>
    <p>这是一个测试段落。</p>
    <button>点击我执行链式操作</button>
</body>
</html>
                    

实践案例

案例：简单的图片轮播

使用jQuery实现一个简单的图片轮播效果，展示jQuery的基本动画和事件处理能力。

<!DOCTYPE html> <html> <head> <title>简单图片轮播</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> .slider { width: 500px; height: 300px; overflow: hidden; position: relative; margin: 0 auto; } .slides { display: flex; transition: transform 0.5s ease; } .slide { width: 500px; height: 300px; flex-shrink: 0; } .slide img { width: 100%; height: 100%; object-fit: cover; } .controls { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); } .control-btn { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); border: none; margin: 0 5px; cursor: pointer; } .control-btn.active { background-color: white; } </style> <script> $(document).ready(function() { const slides = $(".slides"); const slideCount = $(".slide").length; let currentIndex = 0; // 初始化控制按钮 for (let i = 0; i < slideCount; i++) { $(".controls").append(''); } $(".control-btn:first").addClass("active"); // 切换到指定幻灯片 function goToSlide(index) { slides.css("transform", "translateX(-" + (index * 100) + "%)"); $(".control-btn").removeClass("active"); $(".control-btn[data-index=" + index + "]").addClass("active"); currentIndex = index; } // 控制按钮点击事件 $(".control-btn").click(function() { const index = $(this).data("index"); goToSlide(index); }); // 自动轮播 setInterval(function() { let nextIndex = (currentIndex + 1) % slideCount; goToSlide(nextIndex); }, 3000); }); </script> </head> <body> <div class="slider"> <div class="slides"> <div class="slide"><img src="https://picsum.photos/id/1015/500/300" alt="图片1"></div> <div class="slide"><img src="https://picsum.photos/id/1025/500/300" alt="图片2"></div> <div class="slide"><img src="https://picsum.photos/id/1035/500/300" alt="图片3"></div> </div> <div class="controls"></div> </div> </body> </html>

这个案例展示了如何使用jQuery实现一个简单的图片轮播效果，包括以下功能：

使用jQuery选择器选择DOM元素
使用jQuery修改CSS样式
使用jQuery绑定事件处理函数
使用setInterval实现自动轮播

互动练习

练习：文本颜色切换器

创建一个简单的文本颜色切换器，使用jQuery实现以下功能：

在输入框中输入颜色名称（如red、blue、green等）
点击"应用颜色"按钮，将文本颜色更改为输入的颜色
点击"重置颜色"按钮，将文本颜色恢复为默认颜色

这是一段测试文本，点击按钮可以改变我的颜色。