jQuery选择器
2013-05-21 09:17
363 查看
（4）jQuery选择器
1.标签选择器
$(“element”); 如:$(“div”);
2.ID选择器
$(“id”); 如: $(“#users”).val();
3.类选择器
$(“.t”).css(“border”,”2px solid blue”);
4.通用选择器
$(“*”); 如:$(“*”).css(“color”,”red”);
5.群组选择器
$(“div,span,p.styleClass”).css(“border”,”1px solid red”);
<style type="text/css">
.one{border:1px solid #03F;
float: left;
margin: 1em; padding: 1.5em; width: 106px;
}
.two{
background-color: #FC0;
}
.three{
background-color: #FCF;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("*").css("font-size","12px");
$("div").addClass("one");
$("#div1").addClass("two");
$("#div2,#div3").addClass("three");
$("h3,p").css("color","red").attr("align","center");
$("#span1").html("本页中同时应用one类的元素一共有"+$(".one").length+"个;同时应用one和three类的元素共有"+$(".one.three").length+"个。");
});
</script>
</head>
<body>
<h3>这是标题中的文本</h3>
<p><span id="span1"></span></p>
<div id="div1">div元素，id属性为div1</div>
<div id="div2">div元素，id属性为div2</div>
<div id="div3">div元素，id属性为div3</div>
</body>
6.层级选择器
（1）子元素选择器:用于在给定的父元素下查找这个父元素下面的所有子元素。
$(“parent>child”)
匹配表单中所有的子级input元素，： $(“form > input”);
(2) 后代元素选择器
$(“ancestor descendant”);
找到form元素的后代元素中为input的标记
$(“form input”);
(3)紧邻同辈元素选择器:用于匹配所有紧跟在prev元素后的next元素
$(“prev+next”); 如:$(“div+span”);匹配所有紧跟在div元素后的span元素。
（4）相邻同辈元素选择器:用于选择元素后面的所有同辈元素。
$(“perv~siblings”);
7.表单域选择器
(1) :input选择器:用于选择所有input、textarea、select和button元素
$(“:input”)
(2) :text选择器：用于选择所有的单行文本框
$(“:text”);
(3) ：password选择器:用于选择所有密码框（<input typ
ed9a
e=”password”>）
$(“:password”);
(4) :radio选择器用于选择所有单选按钮（<input type=”radio”>）.
$(“:radio”);
............还有的表单依次类推.
8.过滤选择器
A):first选择器：对当前jQuery集合进行过滤并选择出第一个匹配元素。
$(“select :frist”);
将第一列的边框颜色设置为blue
$(“td:first”).css(“border”,”2px solid blue”);
B):last选择器：对当前jQuery集合进行过滤并选择出最后一个匹配元素
C):odd选择器用于选择索引为奇数（从0开始计数）的所有元素
$(”selector:odd”);
$(“td:odd”).css(“background”,”red”);
D):even选择器:用于选择索引为偶数(从0开始计数)的所有元素。
E):eq()选择器：用于从匹配的集合中选择索引等于给定值的元素。
$(“selector:eq(index)”);
将列表中索引值为1的列字体颜色设置为蓝色
$(“li:eq(1)”);.css(“color”,”blue”);
F):gt()选择器：用于从匹配的集合中选择索引大于给定值的所有元素。
$(“li:gt(0)”).css(“border”,”green”);
G):lt()选择器：用于从匹配的集合中选择索引小于给定值的所有元素。
H):not()选择器：用于从匹配的集合中去除所有与给定选择器匹配的元素。
除了第一个单元格和最后一个单元格，其它单元格的背景颜色都设置为#FCF
$(“td:not(:first,:last)”).css(“backgroud”,”#FCF”);
I):header选择器:用于选择所有诸如h1,h2,h3之类的标题元素。
$(“:header”);
J):animated选择器:用于选择所有正在执行动画效果的元素。
9.内容过滤选择器
(1):contains()选择器:用于选择包含给定文本的所有元素.
$(“selector:contains(text)”);
如:$(“p:contains(‘laizhibing’)”).css(“background”,”#FCF”);
(2):has()选择器:用于选择含有给定子元素的元素.
$(“selecotor:has(selector2)”);
对包含p元素的列表项背景色设置为蓝色
$(“li:has(p)”).css(“backgroud”,”blue”);
(3):empty选择器:用于选择不包含子元素或文本的所有空元素。
$(“selector:empty”);
将所有的空白单元格的背景色设置为红色.
$(“td:empty”).css(“background”,”red”);
(4):parent选择器：用于选择包含子元素或文本的元素，与empty选择器的作用 相反。
10.属性过滤选择器
(1)包含属性选择器：用于选择包含给定属性的所有元素。
$(“selector]attribute]”);
$(“div[id]”);可以从文档中选择包含id属性的所有div元素.
(2)属性等于选择器:用于选择给定属性等于某特定值的所有元素。
$(“selector[attribute=value]”);
其中,参数attribue表示属性名,value表示属性值,当属性值包含“]”时，需要加引号。
$(“input[name=’accept’]”).attr(“checked”,”true”);
(3)属性包含选择器:用于选择指定属性值包含给定子字符串的所有元素.
$(“selector[attribute*=value]”);
给name中包含 “news”的文本框添加文本值
$(“input[name*=’news’]”).val(“name中包含news的元素”);
(4)属性包含单词选择器：用于选择指定属性值中包含给定单词的元素。
$(“selector[attribute~=value]”);
$(“input[name~=’news’]”).val(“name包含news单词的元素”);
(5)属性不等于选择器:用于选择不包含指定属性、或者包含指定属性但该属性不等于某个值的所有元素。
$(“selector[attribute!=value]”);
(6)属性开始选择器:用于选择给定属性是以某特定值开始的所有元素。
$(“selector[attribute^=value]”);
(7)属性结尾选择器:用于选择给定属性是以某特定值结束的所有元素。
$(“selector[attribute$=value]”);
(8)复合属性选择器:用于选择同时满足多个条件的所有元素。
$(“selector[selector1][selector2][selector3]”);
$(“input[id][name^=’news’]”).val(“符合条件”);
10子元素过滤选择器
子元素选择器必须与某个选择器一起使用。
(1) :first-child选择器用于选择其父级的第一个子元素的所有元素。
$(“selector:first-child”);
第一个列表的文本都添加了下划线
$(“ul:first-child”).css(“text-decoration”,”underline”).css(“color”,”blue”);
(2):last-child选择器用于选择其父级的最后一个子元素的所有元素。
$(“selector:last-child”);
最后列表的文本都添加了下划线
$(“ul:lat-child”).css(“text-decoration”,”underline”).css(“color”,”red”);
(3):nth-child选择器:用于选择父元素下的第N个元素或奇偶元素
$(“selector:nth-child(index/even/odd/equation)”);
$(“ul li:nth-child(4)”).css(“color”,”red”);
(4):only-child选择器:用于选择某元素的唯一选择器
$(“selector:only-child”);
11.表单域属性过滤选择器
1. :checked选择器:用于选择所有被选中的表单域.
$(“selector:checked”);
2. :enabled选择器：用于选择所有可用的选择器.
$（“selector:enabled”）；
3. :disabled选择器:用于选择所有禁用的表单域
$(“selector:disabled”);
4. :selected选择器:用于选择从列表框选择所有选中的option元素。
$(“selector:selected”);
12. 可见性过滤选择器
1. :hidden 选择器:用于选择所有的不可见的元素.
$(“selector:hidden”);
2. :visible选择器：用于选择所有可见的元素
$(“selector:visible”);
1.标签选择器
$(“element”); 如:$(“div”);
2.ID选择器
$(“id”); 如: $(“#users”).val();
3.类选择器
$(“.t”).css(“border”,”2px solid blue”);
4.通用选择器
$(“*”); 如:$(“*”).css(“color”,”red”);
5.群组选择器
$(“div,span,p.styleClass”).css(“border”,”1px solid red”);
<style type="text/css">
.one{border:1px solid #03F;
float: left;
margin: 1em; padding: 1.5em; width: 106px;
}
.two{
background-color: #FC0;
}
.three{
background-color: #FCF;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("*").css("font-size","12px");
$("div").addClass("one");
$("#div1").addClass("two");
$("#div2,#div3").addClass("three");
$("h3,p").css("color","red").attr("align","center");
$("#span1").html("本页中同时应用one类的元素一共有"+$(".one").length+"个;同时应用one和three类的元素共有"+$(".one.three").length+"个。");
});
</script>
</head>
<body>
<h3>这是标题中的文本</h3>
<p><span id="span1"></span></p>
<div id="div1">div元素，id属性为div1</div>
<div id="div2">div元素，id属性为div2</div>
<div id="div3">div元素，id属性为div3</div>
</body>
6.层级选择器
（1）子元素选择器:用于在给定的父元素下查找这个父元素下面的所有子元素。
$(“parent>child”)
匹配表单中所有的子级input元素，： $(“form > input”);
(2) 后代元素选择器
$(“ancestor descendant”);
找到form元素的后代元素中为input的标记
$(“form input”);
(3)紧邻同辈元素选择器:用于匹配所有紧跟在prev元素后的next元素
$(“prev+next”); 如:$(“div+span”);匹配所有紧跟在div元素后的span元素。
（4）相邻同辈元素选择器:用于选择元素后面的所有同辈元素。
$(“perv~siblings”);
7.表单域选择器
(1) :input选择器:用于选择所有input、textarea、select和button元素
$(“:input”)
(2) :text选择器：用于选择所有的单行文本框
$(“:text”);
(3) ：password选择器:用于选择所有密码框（<input typ
ed9a
e=”password”>）
$(“:password”);
(4) :radio选择器用于选择所有单选按钮（<input type=”radio”>）.
$(“:radio”);
............还有的表单依次类推.
8.过滤选择器
A):first选择器：对当前jQuery集合进行过滤并选择出第一个匹配元素。
$(“select :frist”);
将第一列的边框颜色设置为blue
$(“td:first”).css(“border”,”2px solid blue”);
B):last选择器：对当前jQuery集合进行过滤并选择出最后一个匹配元素
C):odd选择器用于选择索引为奇数（从0开始计数）的所有元素
$(”selector:odd”);
$(“td:odd”).css(“background”,”red”);
D):even选择器:用于选择索引为偶数(从0开始计数)的所有元素。
E):eq()选择器：用于从匹配的集合中选择索引等于给定值的元素。
$(“selector:eq(index)”);
将列表中索引值为1的列字体颜色设置为蓝色
$(“li:eq(1)”);.css(“color”,”blue”);
F):gt()选择器：用于从匹配的集合中选择索引大于给定值的所有元素。
$(“li:gt(0)”).css(“border”,”green”);
G):lt()选择器：用于从匹配的集合中选择索引小于给定值的所有元素。
H):not()选择器：用于从匹配的集合中去除所有与给定选择器匹配的元素。
除了第一个单元格和最后一个单元格，其它单元格的背景颜色都设置为#FCF
$(“td:not(:first,:last)”).css(“backgroud”,”#FCF”);
I):header选择器:用于选择所有诸如h1,h2,h3之类的标题元素。
$(“:header”);
J):animated选择器:用于选择所有正在执行动画效果的元素。
9.内容过滤选择器
(1):contains()选择器:用于选择包含给定文本的所有元素.
$(“selector:contains(text)”);
如:$(“p:contains(‘laizhibing’)”).css(“background”,”#FCF”);
(2):has()选择器:用于选择含有给定子元素的元素.
$(“selecotor:has(selector2)”);
对包含p元素的列表项背景色设置为蓝色
$(“li:has(p)”).css(“backgroud”,”blue”);
(3):empty选择器:用于选择不包含子元素或文本的所有空元素。
$(“selector:empty”);
将所有的空白单元格的背景色设置为红色.
$(“td:empty”).css(“background”,”red”);
(4):parent选择器：用于选择包含子元素或文本的元素，与empty选择器的作用 相反。
10.属性过滤选择器
(1)包含属性选择器：用于选择包含给定属性的所有元素。
$(“selector]attribute]”);
$(“div[id]”);可以从文档中选择包含id属性的所有div元素.
(2)属性等于选择器:用于选择给定属性等于某特定值的所有元素。
$(“selector[attribute=value]”);
其中,参数attribue表示属性名,value表示属性值,当属性值包含“]”时，需要加引号。
$(“input[name=’accept’]”).attr(“checked”,”true”);
(3)属性包含选择器:用于选择指定属性值包含给定子字符串的所有元素.
$(“selector[attribute*=value]”);
给name中包含 “news”的文本框添加文本值
$(“input[name*=’news’]”).val(“name中包含news的元素”);
(4)属性包含单词选择器：用于选择指定属性值中包含给定单词的元素。
$(“selector[attribute~=value]”);
$(“input[name~=’news’]”).val(“name包含news单词的元素”);
(5)属性不等于选择器:用于选择不包含指定属性、或者包含指定属性但该属性不等于某个值的所有元素。
$(“selector[attribute!=value]”);
(6)属性开始选择器:用于选择给定属性是以某特定值开始的所有元素。
$(“selector[attribute^=value]”);
(7)属性结尾选择器:用于选择给定属性是以某特定值结束的所有元素。
$(“selector[attribute$=value]”);
(8)复合属性选择器:用于选择同时满足多个条件的所有元素。
$(“selector[selector1][selector2][selector3]”);
$(“input[id][name^=’news’]”).val(“符合条件”);
10子元素过滤选择器
子元素选择器必须与某个选择器一起使用。
(1) :first-child选择器用于选择其父级的第一个子元素的所有元素。
$(“selector:first-child”);
第一个列表的文本都添加了下划线
$(“ul:first-child”).css(“text-decoration”,”underline”).css(“color”,”blue”);
(2):last-child选择器用于选择其父级的最后一个子元素的所有元素。
$(“selector:last-child”);
最后列表的文本都添加了下划线
$(“ul:lat-child”).css(“text-decoration”,”underline”).css(“color”,”red”);
(3):nth-child选择器:用于选择父元素下的第N个元素或奇偶元素
$(“selector:nth-child(index/even/odd/equation)”);
$(“ul li:nth-child(4)”).css(“color”,”red”);
(4):only-child选择器:用于选择某元素的唯一选择器
$(“selector:only-child”);
11.表单域属性过滤选择器
1. :checked选择器:用于选择所有被选中的表单域.
$(“selector:checked”);
2. :enabled选择器：用于选择所有可用的选择器.
$（“selector:enabled”）；
3. :disabled选择器:用于选择所有禁用的表单域
$(“selector:disabled”);
4. :selected选择器:用于选择从列表框选择所有选中的option元素。
$(“selector:selected”);
12. 可见性过滤选择器
1. :hidden 选择器:用于选择所有的不可见的元素.
$(“selector:hidden”);
2. :visible选择器：用于选择所有可见的元素
$(“selector:visible”);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery选择器实现传入变量
- jquery简单选择器
- jQuery选择器大全(48个代码片段+21幅图演示)
- jQuery 选择器和过滤器
- jQuery选择器之表单对象属性过滤选择器Demo
- Java乔晓松-jQuery过滤选择器
- jQuery选择器
- jQuery 选择器实例
- 【JQuery】:hidden过滤选择器
- jQuery 选择器
- jquery选择器属性和方法的操作
- jQuery中:last选择器用法实例
- boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
- jquery样式之选择器
- jQuery 组合选择器
- jQuery选择器的一些使用心得
- 2018/2/16 jquery 基本选择器
- jQuery 选择器
- Jquery选择器的基本筛选选择器
- jQuery选择器