你的位置:首页 > Java教程

[Java教程]深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器


×
目录
[1]通用形式 [2]首尾元素 [3]唯一元素

前面的话

  在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器。过滤选择器是jQuery选择器中最为庞大也是最为出彩的一部分。以CSS结构伪类选择器为基础,jQuery过滤选择器增加了很多扩展功能。本文先从与CSS选择器最相近的子元素过滤选择器开始说起

 

通用形式

$(':nth-child(index)')

  $(':nth-child(index)')选择每个父元素的第index个子元素(index从1算起),返回集合元素

$(':nth-child(1)')        每个父元素下第1个子元素  $('span:nth-child(1)')     每个父元素下第1个子元素,且该子元素为span元素$('div span:nth-child(1)')  每个为div元素的父元素下第1个子元素,且该子元素为span元素

<button id="btn1" style="color: red;">$(':nth-child(1)')</button><button id="btn2" style="color: blue;">$('span:nth-child(1)')</button><button id="btn3" style="color: green;">$('div span:nth-child(1)')</button><button id="reset">还原</button><div id="t1">  <i>1.1</i>  <span>1.2</span></div><p id="t2">  <span>2.1</span>  <i>2.2</i></p><div id="t3">  <span>3.1</span>  <i>3.2</i></div><script src="jquery-3.1.0.js"></script><script>reset.onclick = function(){history.go();}//匹配每个父元素的第1个子元素,结果是1.1、2.1和3.1//[注意]实际上,<head>元素作为<html>元素的第1个子元素,也被设置为color:redbtn1.onclick = function(){$(':nth-child(1)').css('color','red');}//匹配每个父元素的第1个子元素,且该子元素是span元素,结果是2.1和3.1btn2.onclick = function(){$('span:nth-child(1)').css('color','blue');}//匹配每个为div元素的父元素的第1个子元素,且该子元素是span元素,结果是3.1btn3.onclick = function(){$('div span:nth-child(1)').css('color','green');}</script>

  对应于CSS的结构伪类选择器nth-child(n)

  nth-child(n)选择器用于选择每个父元素下的第n个子元素(n从1开始)

  如果要完成同样的上面三个功能,选择器格式分别为:

:nth-child(1){color:red;}span:nth-child(1){color:blue;}div span:nth-child(1){color:green;}

  如果上面的第三个功能要使用javascript实现,则表现如下:

var divs = document.getElementsByTagName('div');for(var i = 0; i < divs.length; i++){  var firstChild = divs[i].firstElementChild;    if(firstChild.nodeName == 'SPAN'){      firstChild.style.color = 'green';    }}

参数

  当然$(':nth-child(index)')选择器作为通用的子元素过滤选择器,可以有多种参数选择

  【1】$(':nth-child(even)') 选取每个父元素下的索引值为偶数的元素

  【2】$(':nth-child(odd)') 选取每个父元素下的索引值为奇数的元素

  【3】$(':nth-child(3n+1)') 选取每个父元素下的索引值为(3n+1)的元素

<button id="btn1" >$(':nth-child(even)')</button><button id="btn2" >$(':nth-child(odd)')</button><button id="btn3" >$(':nth-child(3n+1)')</button><button id="reset">还原</button><ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li></ul><script src="jquery-3.1.0.js"></script><script>reset.onclick = function(){history.go();}//匹配每个父元素为ul的偶数个元素,结果是2、4btn1.onclick = function(){$('ul :nth-child(even)').css('color','red');}//匹配每个父元素为ul的奇数个元素,结果是1、3、5btn2.onclick = function(){$('ul :nth-child(odd)').css('color','blue');}//匹配每个父元素为ul的(3n+1)个元素,结果是1、4btn3.onclick = function(){$('ul :nth-child(3n+1)').css('color','green');}</script>

首尾子元素

  为了方便,jQuery还定义了第一个子元素和最后一个子元素的获取方式

$(':first-child')

  $(':first-child')选择器是$(':nth-child(1)')选择器的简写形式,选取每个父元素的第1个子元素

$(':last-child')

  类似地,$(':last-child')选择器选取每个父元素的最后1个子元素

<button id="btn1" >$('div :first-child')</button><button id="btn2" >$('div :last-child')</button><button id="btn3" >$('div span:first-child')</button><button id="btn4" >$('div span:last-child')</button><button id="reset">还原</button><div id="t1">  <i>1.1</i>  <span>1.2</span></div><p id="t2">  <span>2.1</span>  <i>2.2</i></p><div id="t3">  <span>3.1</span>  <i>3.2</i></div><script src="jquery-3.1.0.js"></script><script>reset.onclick = function(){history.go();}//匹配每个为div元素的父元素的第1个子元素,结果是1.1和3.1btn1.onclick = function(){$('div :first-child').css('color','red');}//匹配每个为div元素的父元素的最后1个子元素,结果是1.2和3.2btn2.onclick = function(){$('div :last-child').css('color','blue');}//匹配每个为div元素的父元素的第1个子元素,且该子元素是span元素,结果是3.1btn3.onclick = function(){$('div span:first-child').css('color','green');}//匹配每个为div元素的父元素的最后1个子元素,且该子元素是span元素,结果是1.2btn4.onclick = function(){$('div span:last-child').css('color','pink');}</script>

  首尾子元素选择器分别对应于CSS中的:first-child和:last-child

  如果要完成同样的功能,选择器格式分别为:

div :first-child{color:red;}div :last-child{color:blue;}div span:first-child{color:green;}div span:last-child{color:pink;}

  如果使用javascript选择器要完成上面的最后一个功能,则如下所示

var divs = document.getElementsByTagName('div');for(var i = 0; i < divs.length; i++){  var lastChild = divs[i].lastElementChild;    if(lastChild.nodeName == 'SPAN'){      lastChild.style.color = 'pink';    }}

 

唯一子元素

$(':only-child')

  $(':only-child')选择器的匹配规则为:如果某个元素是它父元素中的唯一的子元素,才会被匹配

$('div span:only-child').css('color','green');

  对应于CSS的:only-child选择器

div span:only-child{color:green;}

  如果使用javascript实现,则如下所示

var divs = document.getElementsByTagName('div');for(var i = 0; i < divs.length; i++){  var children = divs[i].children;  if(children.length == 1 && children[0].nodeName == 'SPAN'){    children[0].style.color = 'green';  }}

<button id="btn1" >$('div span:only-child')</button><button id="reset">还原</button><div>  <span>1.1</span></div><div>  <span>2.1</span>  <i>2.2</i></div><script src="jquery-3.1.0.js"></script><script>reset.onclick = function(){history.go();}//虽然第2个div中只存在一个<span>元素,但由于它并不是唯一的子元素,所以无法被匹配btn1.onclick = function(){$('div span:only-child').css('color','green');}</script>

最后

  在CSS结构伪类选择器中,nth-child(n)和nth-of-type(n)选择器经常容易混淆,需要小心区分才能避免出错。类似地,在jQuery过滤选择器中,子元素选择器和索引选择器也是非常相近,容易混淆。在选择器系列下一篇中,将类比于本文的子元素选择器,详细介绍索引选择器

  欢迎交流