JQ-属性选择器
2018-03-25 本文已影响0人
挥剑斩浮云
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<script type="text/javascript" src="../../jquery.min.js"></script>
<style type="text/css">
body{
background-color: #e6fbff;
color: #000;
font-size: 20px;
padding: 0 30px;
}
li{
list-style: none;
}
a{
color: red;
text-decoration: none;
}
.red{
color: red;
}
.pink{
background-color: #20ce7d;
padding: 3px;
color: #fff;
}
.box{
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="box">
<p>在jQuery中，常见的属性选择器如下：</p>
<p class="red">$("selector[attr]") ------ 选择包含给定属性的元素</p>
<p class="red">$("selector[attr='value']") ------ 选择给定的属性是某个特定值的元素</p>
<p class="red">$("selector[attr != 'value']") ------ 选择所有含有指定的属性，但属性不等于特定值的元素</p>
<p class="red">$("selector[attr *= 'value']") ------ 选择给定的属性是以包含某些值的元素</p>
<p class="red">$("selector[attr ^= 'value']") ------ 选择给定的属性是以某些值开始的元素（比较少用）</p>
<p class="red">$("selector[attr $= 'value']") ------ 选择给定的属性是以某些值结尾的元素（比较少用）</p>
<p class="red">$("selector[selector1][selector2]…[selectorN]") ------ 复合属性选择器，需要同时满足多个条件时使用</p>
<p class="red">selector指的是选择器，attr指的是属性（attribute），value指的是属性值。</p>
<p>（1）选择含有class属性的div元素。</p>
<p class="red">$("div[class]")</p>
<p>（2）选择type属性值为checkbox的input元素（也就是选择所有复选框元素）：</p>
<p class="red">$("input[type = 'checkbox']")</p>
<p>（3）选择type属性值不是checkbox的input元素：</p>
<p class="red">$("input[type != 'checkbox']")</p>
<p>（4）选择class属性包含nav的div元素（因为class属性可以包含多个值）：</p>
<p class="red">$("div[class *= 'nav']")</p>
<p>（5）选择name属性以group开始的input元素，例如input type="radio" name="group-fruit"/>：</p>
<p class="red">$("input[name ^= 'group']")</p>
<p>（6）选择name属性以group结尾的input元素，例如input type="radio" name="fruit-group"/>：</p>
<p class="red">$("input[name $= 'group']")</p>
<p>（7）选择具有id属性并且class属性是以nav开头的div元素，例如div id="div1" class="lvye-div">绿叶学习网</div：</p>
<p class="red">$("div[id][class ^='lvye']")</p>
</div>
</body>
</html>
