当前位置：首页 > news >正文

jQuery 入门案例教程

news 来源：原创 2025/6/17 15:15:15

jQuery 入门案例教程

jQuery 是一个流行的 JavaScript 库，它极大地简化了 HTML 文档的操作、事件处理、动画效果以及 Ajax 交互。本文将通过一些基础案例，帮助你快速掌握 jQuery 的基本用法。

1. 引入 jQuery

在 HTML 文件中，你可以通过以下方式引入 jQuery：

使用 CDN 方式：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

下载本地 jQuery 文件：

如果你希望离线使用 jQuery，可以从 jQuery 官网下载并在 HTML 中引入：

<script src="js/jquery.min.js"></script>

2. jQuery 语法基础

jQuery 的核心语法是 $ 选择器，它用于选择 HTML 元素并执行操作：

$("选择器").操作();

例如，页面加载完成后改变 <p> 元素的颜色：

$(document).ready(function(){
    $("p").css("color", "blue");
});

3. jQuery 基础案例

3.1 按钮点击事件

<button id="btn">点击我</button>
<p id="text">Hello, jQuery!</p>
<script>
$("#btn").click(function(){
    $("#text").text("你点击了按钮！");
});
</script>

3.2 隐藏和显示元素

<button id="hide">隐藏</button>
<button id="show">显示</button>
<p id="content">这是一个段落。</p>
<script>
$("#hide").click(function(){
    $("#content").hide();
});
$("#show").click(function(){
    $("#content").show();
});
</script>

3.3 切换元素显示状态

<button id="toggle">切换</button>
<p id="toggleText">点击按钮切换显示状态。</p>
<script>
$("#toggle").click(function(){
    $("#toggleText").toggle();
});
</script>

3.4 事件绑定（`on` 方法）

<button id="dynamic">动态添加按钮</button>
<div id="container"></div>
<script>
$("#dynamic").click(function(){
    $("#container").append("<button class='new-btn'>新按钮</button>");
});

$("#container").on("click", ".new-btn", function(){
    alert("你点击了一个新按钮！");
});
</script>

3.5 获取和修改表单值

<input type="text" id="inputBox" value="默认值">
<button id="getValue">获取输入值</button>
<button id="setValue">修改输入值</button>
<script>
$("#getValue").click(function(){
    alert($("#inputBox").val());
});

$("#setValue").click(function(){
    $("#inputBox").val("新值");
});
</script>

3.6 CSS 样式操作

<p id="styleText">改变我的样式！</p>
<button id="changeStyle">改变颜色</button>
<script>
$("#changeStyle").click(function(){
    $("#styleText").css({"color": "red", "font-size": "20px"});
});
</script>

3.7 添加和移除类

<p id="classText">点击按钮切换样式</p>
<button id="toggleClass">切换样式</button>
<style>
.red {
    color: red;
    font-weight: bold;
}
</style>
<script>
$("#toggleClass").click(function(){
    $("#classText").toggleClass("red");
});
</script>

4. jQuery 动画效果案例

4.1 滑动效果

<button id="slideUp">向上滑动</button>
<button id="slideDown">向下滑动</button>
<div id="slideBox" style="width:200px; height:100px; background:lightblue; margin-top:10px;"></div>
<script>
$("#slideUp").click(function(){
    $("#slideBox").slideUp();
});

$("#slideDown").click(function(){
    $("#slideBox").slideDown();
});
</script>

4.2 淡入淡出效果

<button id="fadeOut">淡出</button>
<button id="fadeIn">淡入</button>
<p id="fadeText">淡入淡出效果示例</p>
<script>
$("#fadeOut").click(function(){
    $("#fadeText").fadeOut();
});

$("#fadeIn").click(function(){
    $("#fadeText").fadeIn();
});
</script>

5. jQuery Ajax 案例

5.1 发送 GET 请求

<button id="getData">获取数据</button>
<div id="result"></div>
<script>
$("#getData").click(function(){
    $.get("https://jsonplaceholder.typicode.com/posts/1", function(data){
        $("#result").text(JSON.stringify(data));
    });
});
</script>

5.2 发送 POST 请求

<button id="postData">提交数据</button>
<script>
$("#postData").click(function(){
    $.post("https://jsonplaceholder.typicode.com/posts",
        {title: "Hello", body: "jQuery Ajax", userId: 1},
        function(data){
            alert("数据提交成功！ID: " + data.id);
        }
    );
});
</script>