jQuery属性选择器（附有代码以及运行截图）

GodGump

已于 2022-06-30 13:59:00 修改

阅读量452

点赞数

分类专栏： html复习文章标签：前端 html

于 2021-02-28 21:51:36 首次发布

本文链接：https://blog.csdn.net/GodGump/article/details/114208305

版权

html复习专栏收录该内容

23 篇文章 0 订阅

订阅专栏

感谢阅读

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

XPath使用路径表达式来选取 XML 文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的。
说上面是为了理解下面几个常见的属性选择器
注意一下代码中：attribute表示一个属性名，value表示一个属性值

$(" [attribute] = 'value' ")

选择指定属性值等于给定字符串或改字符串为前缀（该字符串后跟一个连字符“-”）的元素。

$("[attribute*='value']")

选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）

$("[attribute~='value']")

选着指定属性用空格分隔的值中包含一个给定的元素。

$("[attribute$='value']")

选择指定属性是以给定元素结尾的元素。这个元素比较是区分大小写的。

$("[attribute!='value']")

选择指定属性不等于这个值的元素

$("[attribute^='value']")

选择指定属性就是以给定字符串开始的元素。

$("[attributeFilter1][attributeFilter2]......[attributeFiltern]")

选择匹配所有指定的属性筛选器的元素

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="testDiv">testText
</div>
<div id="testDiv2">testText2
</div>
<div id="testDiv3">testText3
</div>
</body>
<script type="text/javascript" src="../static/js/jquery-3.5.1.js">
</script>
<script>
    var $testDiv = $('div[id*="testDiv"]');
    for (var i = 0;i < $testDiv.length;i++){
        document.writeln($testDiv.get(i).innerHTML);
    }
</script>
</html>