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”) 选取所有被选中的元素选项

四：表单选择器

来源：https://www.cnblogs.com/ilooking/p/4155775.html

标签

test

jquery选择器

索引

jquery