JQuery选择器(9子元素过滤选择器)

 

子元素过滤选择器
选择器	描述	返回	示例
:nth-child (index/even odd/equation)	选取每个父元素下的第index 个子元素或奇偶元素(index从1开始)	集合元素	:eq(index)只匹配一个元素，而:nth-child 将为每一个父元素匹配子元素，并且:nth-child(index) 的index是从第1位开始的，而:eq(index)的index是 从第0位开始的
:first-child	选取每个父元素下的第一个子元素	集合元素	:first只返回单个元素，而:first-child选择器将为每个父元素 匹配第一个子元素。 例如：$("ul li:first-child") ;选取每个<ul>中的第一个 <li>元素
:last-child	选取每个父元素下的最后一个子元素	集合元素	同上，last表示为最后一个
:only-child	如果某个元素是他父元素中唯一的子元素 ，那么将会被匹配。如果父元素中含有其他元素 ，则不会被匹配	集合元素	$("ul li:only-child")在<ul>中选取时唯一子元素的<li>元素

:nth-child()选择器是很常用的子元素选择器，其详细功能如下:

1. :nth-child(2)能选取每个父元素下的索引值等于2的子元素。
2. :nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素.(n从0开始)
3. :nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素。(n从0开始)

---

子元素过滤选择器示例
功能	代码	图片
改变每个class为one的<div>父元素下的第2个子元素的背景色	$("div.one :nth_child(2)").css("background","red");
改变每个class为one的<div>父元素下的第一个子元素的背景色	$("div.one :first-child").css("background","red");
改变每个class为one的<div>父元素下的最后一个子元素的背景色	$("div.one :last-child").css("background","red");
如果class为one的<div>父元素下只有一个子元素，那么则改变它的背景色	$("div.one :only-child").css("background","red");

 

转载于:https://my.oschina.net/u/580135/blog/612355