jquery选择器

jquery选择器

(1)内容

1) :contains() - 匹配包含给定文本的元素

定位元素：$("#dev_contains div:contains('jie')")

2) :has() - 匹配含有选择器所匹配的元素的元素

定位元素: $("#dev_has div:hia('p')")

以上两个的区别：contains匹配的是文本的内容，has匹配元素

3) :empty - 匹配所有不包含子元素或者文本的空元素

定位元素：$("td:empty")    结果：[ <td></td>, <td></td> ]

4) :parent - 匹配所有包含子元素或者文本的元素

定位元素：$("td:parent")   结果：[ <td>Value 1</td>, <td>Value 1</td> ]

实例：

<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table> 

 

(2)可见性

1) :hidden - 匹配所有的不可见元素，input元素的type为"hidden"的话也会被匹配到，

input中style的disply:none，也会匹配到

定位元素: $("div:hidden")

2): visible - 匹配所有的可见元素

定位元素: $("div:visible")

 

(3)层级

1) 祖孙层级 - 在给定的祖先元素下匹配所有的后代元素

定位元素：$("div input")

2) 父子层级 - 在给定的元素下匹配所有的子元素

定位元素：$("div > input")  是直接子元素

3) 兄弟层级 - 匹配所有紧接在prev元素后的next(一个有效选择器并且紧接着第一个选择器)元素

定位元素：$("label + input")   结果：[ <input name="name" />, <input name="newsletter" /> ]

4) 同辈层级 - 匹配prev元素之火的所有siblings(一个选择器，并且作为第一个选择器的同辈)元素

定位元素：$("form ~ input")   结果：[ <input name="none" /> ]

以上两者，我都有调换着用实例，但是没有发现不同的地方。若有人知道，请告知，谢谢。

事例：

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" /> 

 

(4)属性

1) [attribute] - 包含给定属性的元素

定位元素：$("div[id]")

2) [attribute=value] - 匹配给定的属性是某个特定值的元素

定位元素：$("div[name='dev_name']")

3) [attribute*=value] - 匹配给定的属性包含某些特定值的元素

定位元素：$("div[name*='dev']")

4) [attribute^=value] - 匹配给定的属性包含某些特定值开始的元素

定位元素：$("div[name^='dev']")

5) [attribute$=value] - 匹配给定的属性包含某些特定值结束的元素

定位元素：$("div[name$='dev']")

6) [attribute1][attribute2]...  -  复合属性选择器，需要同时满足多个条件方可匹配

定位元素： $(div[id][name$='dev'])

 

(5)子元素

1):nth-child(index) - 匹配其父元素下的第N个子或奇偶元素

:eq(index) 只匹配一个元素，而这个将为每一个父元素匹配子元素

:nth-child()从1开始的，二eq()是从0算起的

可以有如下使用：

nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

2)only-child - 如果某个元素是父元素中唯一的子元素，就匹配

$("div:only-child")

3)first-child  last-child

匹配第一个子元素

':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

 

(6)基础的

1) :animated - 匹配所有正在执行动画效果的元素

事例：对不在执行动画效果的元素执行一个动画特效

$("div:not(:animated)").animate({left:"+=20"},1000);

2) :eq 匹配一个给定索引值的元素

3) :even 匹配所有索引值为偶数的元素，从0开始计数

4) :odd 奇数匹配，从0开始

5) :gt 匹配所有大于给定索引值的元素

6) :lt 匹配所有小于给定索引值的元素