jquery属性选择器
jQuery 属性选择器
jQuery 属性选择器允许根据 HTML 元素的属性及其值来选取元素。以下是常见的 jQuery 属性选择器及其用法：
基本属性选择器
[attribute]：选择带有指定属性的元素。
$("[href]") // 选择所有带有 href 属性的元素[attribute=value]：选择属性值等于指定值的元素。
$("[type='text']") // 选择所有 type 属性为 "text" 的元素[attribute!=value]：选择属性值不等于指定值的元素。
$("[type!='submit']") // 选择所有 type 属性不为 "submit" 的元素包含匹配选择器
[attribute*=value]：选择属性值包含指定字符串的元素。
$("[href*='google']") // 选择 href 属性中包含 "google" 的元素[attribute~=value]：选择属性值包含指定单词（以空格分隔）的元素。
$("[class~='active']") // 选择 class 属性中包含单词 "active" 的元素前缀和后缀匹配选择器
[attribute^=value]：选择属性值以指定字符串开头的元素。
$("[href^='https']") // 选择 href 属性以 "https" 开头的元素[attribute$=value]：选择属性值以指定字符串结尾的元素。
$("[src$='.png']") // 选择 src 属性以 ".png" 结尾的元素复合属性选择器
多个属性选择器可以组合使用，以进一步筛选元素。
$("input[type='text'][name^='user']") // 选择 type 为 "text" 且 name 以 "user" 开头的 input 元素示例代码
以下是一个完整的示例，展示如何使用 jQuery 属性选择器：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 属性选择器示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="https://google.com">Google</a>
<a href="https://example.com">Example</a>
<input type="text" name="username" value="John">
<input type="password" name="password" value="123456">
<script>
$(document).ready(function() {
// 选择所有 href 属性包含 "google" 的链接
$("[href*='google']").css("color", "red");
// 选择所有 type 为 "text" 的 input 元素
$("input[type='text']").val("Enter your name");
});
</script>
</body>
</html>注意事项
- 属性选择器对大小写敏感，需确保匹配的字符串大小写一致。
- 如果属性值包含特殊字符（如
[,],"），需使用转义符或双引号包裹。 - 属性选择器的性能可能低于其他选择器（如 ID 或类选择器），在大型 DOM 中需谨慎使用。
