jQuery 常用方法详解及示例

jQuery 常用方法详解及示例

jQuery 是一个轻量级、功能强大的 JavaScript 库，简化了 DOM 操作、事件处理、动画以及 Ajax 请求。本文将介绍 jQuery 的常用方法，并附带示例代码，帮助你快速掌握 jQuery 的核心功能。

---

1. jQuery 选择器

1.1 基本选择器

$("#id") // 通过 id 选择元素
$(".class") // 通过类名选择元素
$("tag") // 通过标签名选择元素

1.2 层级选择器

$("div p") // 选择 div 内所有 p 标签
$("div > p") // 选择 div 直接子元素 p
$("div + p") // 选择紧邻 div 之后的 p

1.3 过滤选择器

$("p:first") // 选择第一个 p
$("p:last") // 选择最后一个 p
$("p:even") // 选择索引为偶数的 p
$("p:odd") // 选择索引为奇数的 p

---

2. jQuery 操作 DOM

2.1 获取和修改内容

$("#element").text("新文本") // 修改文本内容
$("#element").html("<b>加粗文本</b>") // 修改 HTML 内容
$("#input").val("新值") // 修改输入框的值

2.2 插入元素

$("#container").append("<p>追加元素</p>") // 在容器内追加元素
$("#container").prepend("<p>前置元素</p>") // 在容器内前面插入元素
$("#target").after("<p>后插元素</p>") // 在目标元素后插入
$("#target").before("<p>前插元素</p>") // 在目标元素前插入

2.3 删除元素

$("#element").remove() // 删除元素及子元素
$("#element").empty() // 清空元素内部内容

---

3. jQuery 事件处理

3.1 绑定事件

$("#button").click(function() {
    alert("按钮被点击！");
});

3.2 事件委托

$("#list").on("click", "li", function() {
    alert("列表项被点击！");
});

3.3 移除事件

$("#button").off("click");

---

4. jQuery CSS 操作

4.1 获取和设置样式

$("#element").css("color", "red"); // 修改颜色
var color = $("#element").css("color"); // 获取颜色

4.2 添加、删除、切换类

$("#element").addClass("new-class"); // 添加类
$("#element").removeClass("old-class"); // 移除类
$("#element").toggleClass("active"); // 切换类

---

5. jQuery 动画效果

5.1 显示和隐藏

$("#box").show(); // 显示元素
$("#box").hide(); // 隐藏元素
$("#box").toggle(); // 切换显示状态

5.2 滑动效果

$("#panel").slideDown(); // 向下滑动
$("#panel").slideUp(); // 向上滑动
$("#panel").slideToggle(); // 切换滑动状态

5.3 淡入淡出

$("#message").fadeIn(); // 淡入
$("#message").fadeOut(); // 淡出
$("#message").fadeToggle(); // 切换淡入淡出

---

6. jQuery Ajax

6.1 GET 请求

$.get("data.json", function(response) {
    console.log(response);
});

6.2 POST 请求

$.post("submit.php", {name: "张三"}, function(response) {
    console.log(response);
});

6.3 $.ajax 方法

$.ajax({
    url: "data.json",
    type: "GET",
    success: function(response) {
        console.log(response);
    },
    error: function(error) {
        console.log("请求失败", error);
    }
});

---

7. jQuery 实用方法

7.1 遍历元素

$("li").each(function(index, element) {
    console.log(index, $(element).text());
});

7.2 获取和设置属性

$("#link").attr("href", "https://example.com");
var href = $("#link").attr("href");

7.3 数据存取

$("#element").data("key", "value"); // 设置数据
var value = $("#element").data("key"); // 获取数据

---

8. 结论

本文介绍了 jQuery 的核心方法，包括选择器、DOM 操作、事件处理、CSS 操作、动画效果、Ajax 及实用工具方法。希望这些示例能帮助你更好地掌握 jQuery，在实际项目中灵活应用！