使用jq获取拥有指定属性值的节点
秀秀 发布于 2024-6-7 16:13 23 次阅读
使用 jQuery 获取具有指定属性值的节点，可以使用属性选择器。这些选择器可以用来查找具有特定属性和值的 HTML 元素。以下是如何使用 jQuery 的属性选择器来获取具有指定属性值的节点的示例。
示例代码
假设我们有以下 HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribute Selector Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div data-role="admin">Admin 1</div>
<div data-role="user">User 1</div>
<div data-role="admin">Admin 2</div>
<div data-role="guest">Guest 1</div>
<script>
$(document).ready(function() {
// 选择所有具有 data-role="admin" 属性的元素
var admins = $('div[data-role="admin"]');
// 对这些元素执行一些操作，例如添加一个类
admins.addClass('highlight');
});
</script>
</body>
</html>解释
-
引入 jQuery：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>引入最新版本的 jQuery 库。
-
HTML 结构：
- 四个
div元素，每个元素具有一个data-role属性，不同的元素具有不同的属性值。
- 四个
-
jQuery 代码：
$(document).ready(function() { ... })确保在 DOM 完全加载后执行代码。$('div[data-role="admin"]')使用属性选择器选择所有data-role属性值为admin的div元素。admins.addClass('highlight')对选择的元素添加一个highlight类，以突出显示这些元素。
-
CSS：
.highlight类用黄色背景颜色突出显示元素。
通用属性选择器用法
-
[attribute=value]：选择具有特定属性值的元素。
$('div[data-role="admin"]') -
[attribute!=value]：选择不具有特定属性值的元素。
$('div[data-role!="admin"]') -
[attribute^=value]：选择属性值以特定值开头的元素。
$('div[data-role^="adm"]') // 选择 data-role 以 "adm" 开头的元素 -
[attribute$=value]：选择属性值以特定值结尾的元素。
$('div[data-role$="min"]') // 选择 data-role 以 "min" 结尾的元素 -
*[attribute=value]**：选择属性值包含特定值的元素。
$('div[data-role*="dmi"]') // 选择 data-role 包含 "dmi" 的元素
这些选择器使得你可以根据不同的属性值模式选择元素，并对其执行各种操作，如添加类、修改样式、绑定事件等。