jQuery 提供了几个选择器来进行我们要查找的查询。
开始于、结束于和 contains() 选择器也可用于选择指定的字符串。
让我们考虑一下 HTML 列表：
<ul data-group="Books"> <li data-book="JavaScript"></li> <li data-book="CSS"></li> <li data-book ="HTML"></li> </ul>
使用基本查询来获取“Books”下方带有 data-book="JavaScript" 的所有元素并获取“Books”下方带有 data-book!="JavaScript" 的所有元素，我们应该使用以下内容：
$("ul[data-group='Books'] li[data-book='JavaScript']")
$("ul[data-group='Books'] li:not([data-book='JavaScript'])")
我们还可以使用多个元选择器。
如果要做多个查询，建议缓存父选择：
let group = $('ul[data-group="Books"]');
然后你可以寻找以 C 开头的书籍：
let css = $('[data-book^="C"]', group).css('color', '#qc87c9');
或者包含文字脚本的书籍：
let javascript = $('[data-book*="Script"]', group).css('color', '#8ebf42');
我们还可以获取数据属性结尾匹配的元素：
let html = $('[data-book$="ML"]', group).css('color', '#ff0000');
这里是完整的例子。
尝试看看它是如何工作的：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<ul data-group="Books">
<li data-book="JavaScript">JavaScript</li>
<li data-book="CSS">CSS</li>
<li data-book="HTML">HTML</li>
</ul>
<script>
$(document).ready(function() {
//stored selector
let group = $('ul[data-group="Books"]');
//data-book starts with C
let css = $('[data-book^="C"]', group).css('color', '#qc87c9');
//data-book contains script
let javascript = $('[data-book*="Script"]', group).css('color', '#8ebf42');
//data-book ends with ML
let html = $('[data-book$="ML"]', group).css('color', '#ff0000');
});
</script>
</body>
</html>
jQuery 选择器
jQuery 提供了一组工具，用于匹配借用 CSS 1-3 形成的文档中的一组元素。
:contain() 选择包含给定字符串的所有元素。
开始选择器选择具有给定属性的元素，该属性的值恰好以指定的字符串开头。
结尾选择器选择具有给定属性且值恰好以指定字符串结尾的元素。
日期：2020-06-02 22:16:27 来源：oir作者：oir