jquery选择器之属性选择器
Posted 孔扎根
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery选择器之属性选择器相关的知识，希望对你有一定的参考价值。
[attribute] 匹配指定属性名的所有元素
[attribute=value] 匹配给定的属性名是某个特定值的属性
[attribute!=value] 匹配给定的属性名不是某个特定值的属性
[attribute^=value] 以开头
[attribute$=value] 以结尾
[attribue*=value] 给定的属性包含某些值的元素
[selector1][selector2][selectorN] 复合选择器，需要同是满足所有条件
html示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--HTML区域-->
<h1>第一个标题</h1>
<div class="nav-2014">
<div class="w">
<div class="w-spacer"></div>
<div class="categorys">
<div class="dt">家用电器分类</div>
<div class="dp">家用电器价格</div>
</div>
<span class="hr"></span>
<div class="navitems-2014">
<div id="treasure"></div>
<span class="clr"></span>
<span class="chr"></span>
男：<input type="checkbox" checked="checked" value="nan">
女:<input type="checkbox" value="nv">
</div>
</div>
</div>
<h2>第二个标题</h2>
<div id="electronic">
<div id="firstScreen">1
<div class="w">2</div>
</div>
<ul>
<li class="ui-switch-curr">第一</li>
<li class="ui-switch-item"></li>
<li class="ui-switch-next">第三</li>
<li class="ui-switch-sub">第四</li>
</ul>
<ul>
<li class="lizi_ws_fruit" name="zhuang_guo">梨</li>
<li class="ws_pingguo_fruit" name="zhuan_wang">苹果</li>
<li id="elpsq" name="zhuang_dang"></li>
</ul>
<div class="secord_screen">
<div></div>
</div>
<div class="third_screen"></div>
</div>
</body>
</html>
jquery代码
<script src="jquery-3.1.0.js"></script>
<script>
// 匹配所有包含id属性的div标签
$("div[id]")
// 在所有div标签中查找id属性为electronic的元素
$("div[id=electronic]")
$("div[id!=electronic]")
// 查找所有li标签中属性class值以ui-swithc开头的元素
$("li[class^=ui-switch]")
// 查找所有li标签中属性class的值以fruit结尾的元素
$("li[class$=fruit]")
// 查找所有li标签中属性class的值包含ws的元素
$("li[class*=ws]")
// 查找所有li标签中属性中有id且有name，且name的值以guo结尾的元素
$("li[class][name$=guo]")
console.log(objs)
</script>
以上是关于jquery选择器之属性选择器的主要内容，如果未能解决你的问题，请参考以下文章