五、Jquery的子元素选择器
- :first-child :匹配每个父元素的第一个子元素,相当于E:nth-child(0),例如:$(“ul li:first-child”);
- :last-child :匹配每个父元素的最后一个子元素,例如:$(“ul li: last -child”);
- :nth-child(index/even/odd/equation):匹配每一个父元素的第N个子或奇偶元素,例如:$(“ul li:nth-child(2)”);
- :only-child :如果某个元素是父元素中唯一的子元素,那将会被匹配$(“ul li:only-child”);
六、子元素选择器和过滤性选择器的一些区别
:first-child和:first:
:first只匹配一个元素,而:first-child将为每个父元素匹配一个子元素,所以:first-child匹配出来的是一个集合当然也有可能只匹配一个元素,而:first永远只能匹配到一个元素。
:last-child和:last的区别道理也是一样的;
看示例:
[code=”html”]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我正在学习并且应用的技术
- javascript
- css2.1
- html4
- MXML
我想学习的技术
- actionscript
- css 3
- html 5
- PHP
我精通的技术
- 群里吹水
- 忽悠新人
[/code]
:nth-child(index/even/odd/equation)和:eq(index)
:eq(index) 只匹配一个元素,索引值从0开始;
:nth-child(index/even/odd/equation) 匹配每一个父元素的第N个子或奇偶元素, 索引值从1开始,并且提供更丰富的参数及表达式;
:nth-child(even)// 匹配每一个父元素的偶数元素;
:nth-child(odd) // 匹配每一个父元素的奇数元素;
:nth-child(3n) // 匹配每一个父元素的索引值能被3整除的元素;
:nth-child(2) // 匹配每一个父元素的第2个元素;
:nth-child(3n+1) // 匹配每一个父元素的索引值被3整除后余1的元素
:nth-child(3n+2) // 匹配每一个父元素的索引值被3整除后余2的元素
所以:nth-child(index/even/odd/equation)匹配出来的是一个集合当然也有可能只匹配一个元素,而:eq(index)永远只能匹配到一个元素。
看示例(顺带:only-child也在这里测试一下):
[code=”html”]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我正在学习并且应用的技术
- javascript
- css2.1
- html4
- MXML
我想学习的技术
- actionscript
- css 3
- html 5
- PHP
我精通的技术
- 群里吹水
[/code]
投更新票+1
最后一个匹配错了
ul li:only-child应该是匹配群里吹水
讲解的很详细呀~~让我明白了子元素选择器和过滤性选择器的一些区别
嘿嘿~~