<!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>
JQ-属性选择器
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- jquery:库,框架 js,别人封装成的js 官网:http://jquery.com/ 1.7 jq 1...
- 键盘事件 键盘按下事件 onkeydown 键盘抬起事件 onkeyup ...
- jQuery框架使用准备 jQuery框架和JavaScript加载模式对比window.onload执行时机: ...