主页/jQuery教程/参考手册/

jQuery教程

参考手册

jQuery 参考手册

本《jQuery参考手册》旨在为您提供一个系统、全面的核心API功能索引与简明指南。当您在日常开发中需要快速查询某个功能的具体用法或概念时，本章节将是一个高效的助手。我将会分门别类地介绍jQuery的核心模块，并通过代码示例和表格对比帮助您加深理解。

A.1 选择器

jQuery选择器是用于查找和选择DOM元素的强大工具，其语法类似于CSS选择器。它允许您通过元素名、ID、类、属性、状态等多种方式精确地定位页面上的元素。

1. 基本选择器
这是最常用的选择器类型，用于快速定位元素。

选择器示例描述返回
$("#zzw_id")选择ID为zzw_id的单个元素。jQuery对象
$(".zzw_class")选择所有类包含zzw_class的元素。jQuery对象
$("div")选择所有<div>元素。jQuery对象
$("*")选择所有元素。jQuery对象
$("div, p, .zzw_class")并集选择器，选择所有<div>、<p>和类为zzw_class的元素。jQuery对象

2. 层次选择器
基于元素之间的层次关系（父子、兄弟）进行选择。

// 选择 #zzw_container 下的所有直接子 <p> 元素
$("#zzw_container > p").css("color", "red");

// 选择 #zzw_container 内部的所有 <p> 元素（包括后代）
$("#zzw_container p").hide();

A.2 DOM操作

DOM操作模块提供了对网页内容进行增、删、改、查的方法。

1. 内容操作

方法描述示例
.html()获取或设置元素的HTML内容。$("#zzw_div").html(‘<b>新内容</b>’);
.text()获取或设置元素的文本内容（不解析HTML）。var zzw_text = $("#zzw_div").text();
.val()获取或设置表单元素的值。$("#zzw_input").val(‘默认值’);

2. 元素插入
提供了在指定位置插入新内容的不同方法。

// 在 #zzw_list 内部末尾追加新项
$("#zzw_list").append("<li>新项目</li>");

// 在 #zzw_target 前面插入新元素
$("#zzw_target").before("<div>前置内容</div>");

// 将 zzw_newElement 包裹在 #zzw_inner 外部
$("#zzw_inner").wrap("<div class='zzw_wrapper'></div>");

A.3 DOM遍历

在已选取的jQuery对象集合基础上，进一步查找其父、子、兄弟等元素。

// 查找 #zzw_child 的所有父级元素，直到 <body>
$("#zzw_child").parents();

// 查找 #zzw_parent 的直接子元素中类为 zzw_active 的
$("#zzw_parent").children(".zzw_active");

// 查找 #zzw_current 之后的所有同辈 <p> 元素
$("#zzw_current").nextAll("p");

// 过滤当前集合中索引大于2的元素
$("div").filter(":gt(2)").addClass("zzw_highlight");

A.4 DOM元素

此部分涉及原生DOM元素与jQuery对象之间的转换。

// 获取jQuery对象中第一个原生DOM元素
var zzw_domElement = $("#zzw_myDiv")[0]; // 或 .get(0)

// 将原生DOM元素封装为jQuery对象
var zzw_jqueryObject = $(zzw_domElement);

// 遍历jQuery对象中的每个元素并执行操作
$("div").each(function(index) {
    // `this` 指向当前遍历到的原生DOM元素
    console.log("第" + index + "个div的ID是：" + this.id);
});

A.5 事件

jQuery提供了简洁统一的方法来处理浏览器事件。

// 绑定点击事件
$("#zzw_button").click(function() {
    alert("按钮被点击了！");
});

// 使用 `.on()` 方法绑定事件（推荐，更灵活）
$("#zzw_list").on("click", ".zzw_item", function() {
    $(this).toggleClass("zzw_selected");
});

// 触发自定义事件
$("#zzw_trigger").on("zzw_customEvent", function() {
    console.log("自定义事件被触发");
}).trigger("zzw_customEvent");

A.6 效果

jQuery效果方法用于创建动画，可以隐藏、显示或切换元素的可见性。

方法描述
.hide() / .show()立即隐藏/显示元素。
.fadeIn() / .fadeOut()通过淡入淡出效果显示或隐藏元素。
.slideDown() / .slideUp()通过垂直滑动效果显示或隐藏元素。
.animate()创建自定义动画，改变CSS属性。
// 自定义动画：在1秒内将宽度变为200px，透明度变为0.5
$("#zzw_box").animate({
    width: "200px",
    opacity: 0.5
}, 1000);

A.7 Ajax

jQuery的Ajax模块简化了与服务器的异步数据交换。

// 发起一个简单的GET请求
$.ajax({
    url: "data.php",
    method: "GET",
    data: { zzw_action: "fetch", id: 123 },
    success: function(zzw_response) {
        $("#zzw_result").html(zzw_response);
    },
    error: function() {
        console.log("请求失败");
    }
});

// 快捷方法：加载远程HTML内容并插入
$("#zzw_content").load("fragment.html #zzw_section");

A.8 属性

用于获取或设置DOM元素的属性和属性值。

// 获取或设置元素的 `src` 属性
$("#zzw_image").attr("src", "new/path/to/image.jpg");

// 移除属性
$("#zzw_link").removeAttr("target");

// 获取或设置元素的 `checked` 属性（适用于复选框、单选按钮）
var isChecked = $("#zzw_checkbox").prop("checked");
$("#zzw_checkbox").prop("disabled", true);

A.9 CSS操作

动态地读取或修改元素的CSS样式。

// 获取单个CSS属性值
var zzw_color = $("#zzw_element").css("color");

// 设置单个或多个CSS属性
$("#zzw_element").css("background-color", "blue");
$("#zzw_element").css({
    "width": "100px",
    "height": "100px",
    "border": "1px solid black"
});

// 直接操作类
$("#zzw_element").addClass("zzw_active zzw_highlight");
$("#zzw_element").toggleClass("zzw_active"); // 切换类

A.10 数据

.data() 方法允许您安全地将任意数据与DOM元素关联，避免了内存泄漏或与属性冲突的风险。

// 将数据绑定到元素
$("#zzw_user").data("userInfo", {
    name: "找找网",
    id: "zzw_001",
    score: 95
});

// 获取绑定的数据
var zzw_info = $("#zzw_user").data("userInfo");
console.log(zzw_info.name); // 输出：找找网

// 移除特定的数据项
$("#zzw_user").removeData("userInfo");

本《jQuery参考手册》涵盖了jQuery库中最核心和常用的功能模块，是您进行高效开发的必备工具书。希望这份系统性的梳理能帮助您在日常工作中快速定位和理解所需API的用法，从而更加得心应手地使用jQuery。

最新发布