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>