基础选择器

1)#id 通过元素的id属性获取,返回单个元素的集合,多个相同id只取第一个

<div id='dv1'>第一个div元素</div> <div id='dv2'>第二个div元素</div>用法 $('#id') 举例:$('#dv1');// #dv1

2)class 通过元素的class属性获取,返回多个元素的集合

<div class='dv1'>这是一个div元素</div>用法 $('点+类名') 举例:$('.dv1')

3)Element 通过元素的标签名称获取,返回多个元素的集合

<p>这是一个p标签元素</p>用法 $('标签名称') 举例:$('p')

4) ,(逗号)获取带有任意一个类型选择器的所有元素,返回多个元素的集合

<div class="c1">c1</div>   <div class="c2">c2</div><div id="dv1" class="c1">dv1 c1</div><div id="dv2" class="c1">dv2 c1</div>用法 $('id,class,element,...') 举例:$('#dv1,.c1,span');//div.c1, div#dv1.c1, div#dv2.c1, span 四个全部选中

5)* 获取页面的所有标签元素,返回多个元素的集合

用法 $('*') 举例:$('*')  //当前页面下的所有元素

1)ancestor 空格 descendant 获取当前元素下指定的所有后代元素,返回多个元素的集合

<div id="t0">    <p>子级p元素</p>    <div id="t1">            <div id="tn">深度为n层次的元素</div>            <p>孙子级p元素</p>    </div></div>用法 $('当前元素 指定的后代元素') 举例:$('#t0 p')//结果为 子级p元素与孙子级p元素 

2)parent > child 获取父元素下的所有子级元素,返回多个元素的集合

<div id="dv1">    <p>子级p元素</p>    <div id="dv2">            <div id="dv3">深度为n层次的元素</div>            <p>孙子级p元素</p>    </div></div>用法 $('父元素>子元素') 举例:$('#dv1 p')//结果为 子级p元素

3)prev + next 获取当前元素指定紧挨的兄弟元素,返回单个元素的集合

 <div id="dv1"></div> <p id="p1"></p> <div id="dv2"></div> 用法 $('当前元素+指定紧挨的兄弟元素') 举例:$('#dv1+p')//结果为 p元素   $('#dv1+div')//结果为空 

4)prev ~ siblings 获取当前元素后面的所有兄弟元素,返回多个元素的集合

<div id="dv1">dv1</div><div id="dv2">dv2</div><div id="dv3">dv3</div>用法 $('当前元素~后面的兄弟元素') 举例:$('#dv1~div')//结果为 dv2  dv3  $('#dv2~div')//结果为 dv3 

1 基本选择器

1.1 :first/:last 获取首个/最后一个元素,返回单个元素的集合

<div class="dvs">    <div id="dv1">dv1</div>     <div id="dv2">dv2</div>     <div id="dv3">dv3</div></div>用法:$('div:fist')/$('div:last') 举例:$('div:first');//dvs  $('div:last');//dvs  $('.dvs div:first');//dv1  $('.dvs div:last');//dv3

1.2 :odd/:even 获取索引为奇/偶数的元素,返回多个元素的集合

<div class="dvs">    <div id="dv1">dv1</div>     <div id="dv2">dv2</div>    <div id="dv3">dv3</div></div>用法:$('div:odd')/$('div:even') 举例:$('div:odd');//dvs dv2  $('div:even');//dv1 dv3 加入层次选择器: $('.dvs div:odd');//dv2   $('.dvs div:even');//dv1  dv3     

1.3 :not(条件) 获取未满足条件的元素,返回多个元素的集合

<div id="dv1">dv1</div> <div id="dv2">dv2</div> <div id="dv3">dv3</div>用法:$('div:not(id/class/ele)') 举例: $('div:not(#dv1)')//dv2 dv3

1.4 :eq(索引)/:gt(索引)/:lt(索引) 获取索引等于/大于/小于某值的元素,返回多个元素的集合

<div id="dv1">dv1</div>  <div id="dv2">dv2</div>  <div id="dv3">dv3</div>用法:$('div:eq(索引)/div:gt(索引)/div:lt(索引)/') 举例: $('div:eq(0)')//dv1   $('div:gt(0)')//dv2 dv3  $('div:lt(1)')//dv1   

1.5 :header(固定写法) 获取h1-h6的标签,专门获取h1,h2的标题元素,返回多个元素的集合

<h1></h1><h2></h2><h3></h3>用法:$(':header') 举例:$(':header') //h1 h2 h3

2 属性过滤选择器

2.1 [attribute] 获取带有指定属性的元素,返回多个元素的集合

<p id="p1">p1</p>   <p class="c1">c1</p>   <p id="p2">p2</p>用法:$('p[attribute]') 举例:$('p[id]'); //p1 p2    $('p[class]'); //c1

2.2 [attribute=value] 获取等于属性值的元素,返回多个元素的集合

[attribute!=value] 获取不等于指定属性值的元素,返回多个元素的集合

<p id="p1">p1</p>   <p class="c1">c1</p>  <p id="p2">p2</p>用法:$('p[attribute=value]') 举例:$('p[id="p1"]'); //p1    $("p[class='c1']"); //c1//======== [attribute!=value] ===============<p id="p1">p1</p>  <p class="c1">c1</p>   <p id="p2">p2</p>用法:$('p[attribute=value]') 举例:$('p[id!="p1"]'); //c1 p2   

2.3 [attribute^=value] 获取属性值以什么开头的元素,返回多个元素的集合

[attribute|=value] 获取属性值以什么/什么|开头的元素,返回多个元素的集合

[attribute$=value] 获取属性值以什么结尾的元素,返回多个元素的集合

[attribute*=value] 获取属性值以包含某值的元素,返回多个元素的集合

<p id="p1">p1</p>  <p id="p-1">p-1</p><p id="p_1">p_1</p>  <p id="p1a">p1a</p><p id="a p">a p</p>用法:$('p[attribute^/|/$/*=value]') 举例:$('p[id^="p"]');//p1 p-1 p_1 p1a      $('p[id|="p"]') p-1$('p[id$="a"]') //p1a        $('p[id*="p"]')  p1 p-1 p_1 p1a  a p

2.4 [attribute][attribute]...获取多个属性值等于某值的元素,返回多个元素的集合

<p id="p1" class="pc1">p1</p>用法:$('p[attribute][attribute]') 举例:$('p[id][class]');  $('p[id][class]');//p1

3 子元素过滤选择器

3.1 :first-child 获取每个父元素下的第一个子元素,返回多个元素的集合

:last-child 获取每个父元素下的最后一个子元素,返回多个元素的集合

<div class="dvs">        <div id="dv1">dv1</div> <div id="dv2">dv2</div> <div id="dv3">dv3</div></div>用法:$(':first-child')   $(':last-child')举例: $('div:first-child');// dvs  dv1     $('div:last-child);  //dv3

3.2 :nth-child(index/even/odd/equation) 获取每个父元素下指定索引/偶数/奇数/数学表达式的子元素,返回多个元素的集合(index 从1开始; even/odd 下标从0开始)

    <div class="dvs">        <div id="dv1">dv1</div> <div id="dv2">dv2</div> <div id="dv3">dv3</div>    </div>用法:$(':nth-child(index/even/odd/equation)')举例:$('div:nth-child(1)');// dvs  dv1   $('div:nth-child(even)');//  dv2   

3.3 : only-child 获取每个父元素下只有一个子元素的元素自身,返回多个元素的集合

    <div class="dvs">        <div id="dv1">dv1</div>        <div id="dv2">            <div id="dv5">dv5</div>        </div>        <div id="dv3">dv3</div>    </div>用法: $(":only-child")举例:$('div:only-child');//dv5

4 表单选择器

4.1 :input 获取所有的input元素,包括input, textarea, select 和 button

4.2 :text 获取所有单行文本框 4.3 :password 获取所有密码框

4.4 :radio 获取所有单选按钮 4.5:checkbox 获取所有复选框

4.6 :submit 获取所有提交按钮 4.7 :image 获取所有图片域

4.8 :reset 获取所有重置按钮 4.9 :button 获取所有按钮(包括写的元素button)

4.10 :file 获取所有文件域 4.11 :hidden 获取所有不可见元素,包括type为hidden的元素不限于表单元素,style设置为hidden的元素

用法:$(':input'); $(':text'); 其它类似不再赘述

5 表单对象属性过滤选择器

5.1 :enabled :disabled 获取表单中input标签可用/不可用的元素,返回多个元素的集合

<form action="#" method="post">    <input type="text" name="name" value="可用" />    <input type="text" disabled="disabled" name="name" value="不可用" /></form>用法:$("input:enabled") $("input:disabled") 举例:$("input:enabled");//value="可用"  $("input:disabled");  // value="不可用"

5.2 :selected 获取所有option被选中的select,返回单个元素的集合

<form action="#" method="post">   <select>                <option value="1">op1</option>        <option selected="selected" value="2">op2</option>           </select></form>用法:$('select option:selected');// op2 

5.3 :checked 获取被选中元素(复选框,单选框等,不包括select中的option)

<input type="checkbox" checked="checked" name="name" value="1" /><input type="checkbox" name="name" value="2" />用法:$("input:checked");// 第一个复选框

6 内容过滤选择器

6.1 :contains(text) 获取包含指定文本的元素,返回多个的集合

<span>我爱中国</span>  <span>中国文化</span>用法:$(':contains(text)') 举例:$('span:contains("中国")');//span span 

6.2 :empty 获取不包含子元素或文本的空元素

<ul>  <li>不是我</li>  <li></li> </ul>用法:$(":empty") 举例:$("ul li:empty");//得到 第二个li

6.3 :parent 获取包含有子元素或者文本的元素

<ul>  <li>是我!在这里</li>  <li></li> </ul>用法: $(":parent") 举例:$('ul li:parent');//得到第一个 li

6.4 :has(selector) 获取至少包含一个元素,返回多个元素的集合

 <div><p>p1</p></div>用法:$(':has(selector)') 举例:$(':has(p)'); //div

7 可见性过滤选择器

7.1 :hidden 获取所有的不可见元素(包括css的设置,input的hidden),返回多个的集合

<ul><li hidden="hidden">l1</li>  <li>l2</li></ul>用法: $(':hidden') 举例:$('ul li:hidden'); //得到 l1 元素

7.2 :visible 获取所有可见的元素

<ul><li hidden="hidden">l1</li><li>l2</li><li>l3</li></ul>用法: $(":visible")  举例: $("ul li:visible");// l2 l3