首页 > 代码库 > jQuery之选择器
jQuery之选择器
一：基本选择器
1. #id:根据给定的id选择元素,返回单个元素，例如$(“#test”),选取id为test的元素
2. .class：根据给定的类名匹配元素，返回集合元素,$(“.test”),选取所有class为test的元素
3. element:更加给定的元素名匹配元素，返回集合元素,$(“p”),选取所有的p元素
4. *：匹配所有元素，$(“*”),选取所有元素
5. selector1,selector2…selectorN,将每一个选择器匹配到的元素合并后一起返回$(“div,span,p.myclass”)选取所有<div>,<span>和拥有class为myclass的<p>的一组元素
二：层次选择器
返回的都是集合元素
<body> <div class="one" id="one"> id为one，class为one的div </div> <div class="one" id="two" title="test"> id为one，class为two，title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class 为mini</div> <div class="mini">class 为mini</div> <div class="mini">class 为mini</div> <div class="mini" title="tesst">class 为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为none的div</div> <div class="hide">class为"hide"的div</div> <div>包含input的type为"hide"的div<input type="hidden" size="8"/></div> <span id="mover">正在持行动画的span元素</span></body>
1. $(“ancestor descendant”),选取ancestor元素里所有descendant(后代)元素 $(“div span”)选取<div>里所有的<span>元素
$("body div").css("background", "#bbffaa");
2. $(“parent>child”)选取parent元素下的child(子)元素，与$(“ancestor descendant”)有区别，$(“ancestor descendant”)选择的是后代元素
$(“div>span”选取<div>元素下元素名是<span>的子元素)
$("body >div").css("background", "#bbffaa");
可见$(“parent>child”)是选择parent下child第一级的子元素
3.$(‘prev+next’)选取紧跟在prev元素后的next元素$(‘.one+div’)选取class为one的下一个<div>元素
next（）方法来代替$(‘prev+next’)选择器
$(“.one+div”)==$(“.one”).next(“div”)
4.$(‘prev~siblings’)选取prev元素之后的所有siblings元素 $(‘#two~div’)选取id为two的元素后面的<div>兄弟元素---选取的是同辈元素
nextAll()方法来代替$(’prev~siblings’)
$(“#prev~div”)==$(“#prev”).nextAll(“div”)
3和4用的较少
三：过滤选择器
过滤选择器：主要是通过特定的过滤选择器规则来筛选所需的DOM的元素
1. ：first 选取第一个元素 $(“div:first”)选取所有div中的第一个元素
2. :last 选取最后一个元素$(“div:last”) 选取所有div中的最后一个元素
3. :not(selector) 去除所有与给定选择器匹配的元素 $(“input:not(.myclass)”) 选取class不是myclass的<input>元素
4. :even 选取索引是偶数的所有元素，索引从0开始 $(“input:even”)选取索引是偶数的<input>
5. :odd 选取索引是奇数的所有元素，索引从0开始 $(“input:odd”)选取索引奇数的<input>
内容过滤选择器
1. :contains(text) 选取含有文本内容为“text”的元素 $(“div:contains(‘test’)”) 选取含有文本test的<div>元素
2. :empty 选取不包含子元素或者文本的空元素 $(“div:empty”)----不理解
可见性过滤选择器
1. :hidden 选取所有不可见元素 $(“:hidden”)选取所有不可见元素
2. ：visible 选取所有可见元素 $(“div:visable”) 选取所有可见的<div>元素
注意：选择器(“:hidden)它不仅包含样式属性display为”none”的元素，也包括文本隐藏域<input type=”hidden”>
属性过滤选择器
属性过滤选择器是通过元素的属性来获取相应的元素
1.[attribute] 选择拥有此属性的元素 $(“div[“id”]”)选择拥有属性Id的元素
2.[attribute=value]选择属性值为value的元素 $(“div[titile=test]“)选择属性title为test的div元素
2.[attribute！=value]选择属性值不为value的元素 $(“div[titile！=test]“)选择属性title不为test的div元素
表单对象属性过滤选择器
1. :enable 选取所有可用元素 $(“#form1:enable”) 选取id为”form1”的表单内所有可用元素
2. :disable 选取所有不可用元素 $(“#form1:disable ”) 选取id为”form1”的表单内所有不可用元素
3. :checked选取所有复选框被选中的元素 $(“input:checked”) 选取input内所有被选中的元素
4. :selected选取所有下拉列表被选中的元素 $(“select:selected”) 选取所有被选中的元素选项
四：表单选择器
jQuery之选择器