jQuery如何在元素上获取数据？-编程学习网

这篇文章将为大家详细讲解有关jQuery如何在元素上获取数据？，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

jQuery 获取元素数据

简介

jQuery 提供了多种方法来获取元素上的数据，这些数据可以是自定义属性、HTML5 数据属性或与该元素关联的其他信息。

获取自定义属性

自定义属性以 data- 前缀开头，例如：

<input type="text" data-name="John Doe">

要获取自定义属性的值，可以使用 data() 方法：

var name = $("input").data("name"); // "John Doe"

获取 HTML5 数据属性

HTML5 数据属性遵循与自定义属性类似的约定，但以 data- 开头，例如：

<div data-role="admin"></div>

要获取 HTML5 数据属性的值，可以使用 data() 方法：

var role = $("div").data("role"); // "admin"

获取其他元素信息

除了自定义和 HTML5 数据属性外，jQuery 还允许获取其他元素信息，例如：

val(): 获取或设置元素的值（对于输入元素）或文本内容（对于其他元素）
text(): 获取或设置元素的文本内容
html(): 获取或设置元素的 HTML 内容
attr(): 获取或设置元素的属性值
prop(): 获取或设置元素的属性或特性

示例

以下示例展示了如何使用 data(), val(), text(), html(), attr() 和 prop() 方法获取元素数据：

// 自定义属性
var name = $("input").data("name");

// HTML5 数据属性
var role = $("div").data("role");

// 元素值
var value = $("input").val();

// 元素文本内容
var text = $("p").text();

// 元素 HTML 内容
var html = $("div").html();

// 元素属性值
var href = $("a").attr("href");

// 元素特性
var checked = $("input").prop("checked");

结论

jQuery 提供了丰富的选择器和方法，允许开发人员灵活地获取元素上的数据。这些数据可以用于各种目的，例如：