jQuery入门案例

以下是一些 jQuery 学习的案例，涵盖了基本的选择器、事件处理、动画效果、AJAX 请求以及插件使用。这些案例可以帮助你更好地理解和掌握 jQuery 的核心功能。

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

在这个案例中，我们将使用 jQuery 选择器选择页面中的元素并进行简单的操作。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器和操作</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>jQuery 基本选择器和操作</h1>
    <p class="intro">这是一个介绍段落。</p>
    <p class="content">这是主要内容段落。</p>
    <button id="highlightBtn">高亮介绍段落</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#highlightBtn").click(function() {
                $(".intro").toggleClass("highlight");
            });
        });
    </script>
</body>
</html>

<script>
        $(document).ready(function() {
            //....
            
        });

		// 这种写法是一种确保 jQuery 代码在文档完全加载后执行的可靠方式，避免了在 DOM 元素未完全加载时操作这些元素可能导致的错误。这是 jQuery 的一个重要特性，能够提高代码的稳定性和可靠性。
		
		//另一种写法
		$(function() {
		    // 你的 jQuery 代码
		});
    </script>

案例2：事件处理

这个案例展示了如何使用 jQuery 处理用户交互事件。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
</head>
<body>
    <h1>jQuery 事件处理</h1>
    <input type="text" id="nameInput" placeholder="输入你的名字">
    <button id="greetBtn">问候</button>
    <p id="greeting"></p>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#greetBtn").click(function() {
                var name = $("#nameInput").val();
                $("#greeting").text("你好，" + name + "!");
            });
        });
    </script>
</body>
</html>

案例3：动画效果

这个案例展示了如何使用 jQuery 创建简单的动画效果。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画效果</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
    </style>
</head>
<body>
    <h1>jQuery 动画效果</h1>
    <div class="box"></div>
    <button id="animateBtn">动画</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#animateBtn").click(function() {
                $(".box").animate({
                    left: '250px',
                    opacity: '0.5',
                    height: '150px',
                    width: '150px'
                }, 1000);
            });
        });
    </script>
</body>
</html>

案例4：AJAX 请求

这个案例展示了如何使用 jQuery 发起 AJAX 请求并处理响应数据。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX 请求</title>
</head>
<body>
    <h1>jQuery AJAX 请求</h1>
    <button id="loadDataBtn">加载数据</button>
    <div id="dataContainer"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#loadDataBtn").click(function() {
                $.ajax({
                    url: 'https://jsonplaceholder.typicode.com/posts',
                    method: 'GET',
                    success: function(data) {
                        var html = '';
                        for (var i = 0; i < data.length; i++) {
                            html += '<h3>' + data[i].title + '</h3>';
                            html += '<p>' + data[i].body + '</p>';
                        }
                        $("#dataContainer").html(html);
                    }
                });
            });
        });
    </script>
</body>
</html>

案例5：使用 jQuery 插件

这个案例展示了如何在项目中使用 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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
</head>
<body>
    <h1>jQuery 插件</h1>
    <div class="slider">
        <div><img src="https://via.placeholder.com/400x200" alt="Image 1"></div>
        <div><img src="https://via.placeholder.com/400x200" alt="Image 2"></div>
        <div><img src="https://via.placeholder.com/400x200" alt="Image 3"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.slider').slick({
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1
            });
        });
    </script>
</body>
</html>