Jquery选择器汇总

一.基本选择器

1.id选择器

$("#id").css("background","#fffff");

2.class选择器,选中class=mini的元素

$(".mini").css("background","#fffff");

3.标签选择器,选中div标签的元素

$("div").css("background","#fffff");

4.所有选择器,选中所有选择元素

$("*").css("background","#fffff");

5.并列选择器,选中id=id和class=mini的两个元素

$("#id,.mini")("background","#fffff");

 

二.基本过滤选择器

1.获取table下面所有tr中的第一个子元素

$("table tr:first").css("background","#fffff");

2.获取table下面所有tr中的最后一个子元素

$("table tr:last").css("background","#fffff");

3.获取table下所有的tr索引大于3的子元素

$("table tr:gt(3)").css("background","#fffff");

4.获取table下所有的tr索引小于3的子元素

$("table tr:lt(3)").css("background","#fffff");

5.获取table下所有的tr索引等于于3的子元素

$("table tr:eq(3)").css("background","#fffff");

6.获取table下所有的tr索引等于偶数的子元素

$("table tr:even").css("background","#fffff");

7.获取table下所有的tr索引等于奇数的子元素

$("table tr:odd").css("background","#fffff");

8.获取table下所有的tr并且class!=one的所有子元素

$("table tr:not(.one)").css("background","#fffff");

9.获取标题标签的元素例如:h1,h2,h3

$(":header").css("background","#fffff");

10.获取当前正在执行动画的所有元素

$(":animalted").css("background","#fffff");

11.获取当前获取焦点的元素

$(":focus").css("background","#fffff");

 

三.层次选择器 siblings  prve  prveall  next nextAll  closet

1.获取body下所有的div元素

$("body div").css("background","#fffff");

2.获取body下第一代子节点

$("body > div").css("background","#fffff");

3.获取所有class=one紧挨的第一个div元素(同辈和子节点,选哪一个?)

$(".one + div").css("background","#fffff");

4.获取所有class=one后所有的div兄弟元素(包不包括子节点?)

$(".one ~ div").css("background","#fffff");

 

四.内容过滤选择器

1.所有div元素中标签内文本包含di的所有div元素

$("div:contains(di)").css("background","#fffff");

2.没有子元素的所有div元素

$("div:empty").css("background","#fffff");

3.class=mini的所有div元素

$("div:has(.mini)").css("background","#fffff");

4.所有包含子元素的div元素

$("div:parent").css("background","#fffff");

 

五.子元素过滤选择器

1.获取class=one的div的 第二个子元素

$("div.one :nth-child(2)").css("background","#fffff");

2.获取class=one的div的 第一个子元素

$("div.one :first-child").css("background","#fffff");

3.获取class=one的div的 最后一个子元素

$("div.one :last-child").css("background","#fffff");

3.获取class=one的div的 唯一一个子元素

$("div.one :only-child").css("background","#fffff");

 

六.属性过滤选择器

1.包含title属性的所有div元素

$("div[title]").css("background","#fffff");

2.id=one的所有div元素

$("div[id=one]").css("background","#fffff");

3.id!=one的所有div元素

$("div[id!=one]").css("background","#fffff");

4.id以one开头的所有div元素例如:id=oneCall

$("div[id^=one]").css("background","#fffff");

5.id以one结束的所有div元素例如:id=Callone

$("div[id$=one]").css("background","#fffff");

6.title中用空格分开的值当中包含uk的所有div元素 例如title='one uk'

$("div[title~=uk]").css("background","#fffff");

7.id属性中包含one的所有div元素

$("div[id*=one]").css("background","#fffff");

8.id属性以en为前缀(后面以'-'分开)的所有div元素 例如:id='en-uk'

$("div[id|=en]").css("background","#fffff");

9.组合选择器 包含id属性且title中包含one的所有div元素

$("div[id][title*=one]").css("background","#fffff");

 

 

七.可见性过滤选择器

1.所有可见的div元素

$("div:visible").css("background","#fffff");

2.所有隐藏的div元素

$("div:hidden").css("background","#fffff");

 

八.表单选择器

1.

$("form :image")  <img src='/11.png' />

$("form :button") <button ></button>和 <input type="button" /> 都可以被选择

$("form :riado")  <input type='radio'/>

$("form :reset")  <input type='reset'/>

$("form :hidden") <input type="hidden"/> 和 <div  style="display:none"></div> 都可以被选择

$("form :text")  <input type='text'/>

$("form :file")  <input type='file'/>

$("form select") <select><option></option></select>

$("form textera") <textera></textera>

 

九.表单属性过滤选择器

1.所有被选中的input元素

$("input:checked")

2.所有被禁用的input元素

$("input:disabled")

3.所有可用的input元素

$("input:enabled")

4.所有被选中的selected元素

$("select :selected")