jQuery的元素选择器学习教程_H5之家 - 中国HTML5教程资源分享第一站

jQuery

通用形式

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

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

$('span:nth-child(1)')

$('div span:nth-child(1)')

<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>

</div>

</p>

</div>

reset.onclick = function(){history.go();}

//[

btn1.onclick = function(){$(':nth-child(1)').css('color','red');}

btn2.onclick = function(){$('span:nth-child(1)').css('color','blue');}

btn3.onclick = function(){$('div span:nth-child(1)').css('color','green');}

</script>

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

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

: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.firstElementChild;

if(firstChild.nodeName == 'SPAN'){

firstChild.style.color = 'green';

}

参数

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

<button id="btn1" style="color: red;">$(':nth-child(even)')</button>

<button id="btn2" style="color: blue;">$(':nth-child(odd)')</button>

<button id="btn3" style="color: green;">$(':nth-child(3n+1)')</button>

<ul>

</ul>

reset.onclick = function(){history.go();}

btn1.onclick = function(){$('ul :nth-child(even)').css('color','red');}

btn2.onclick = function(){$('ul :nth-child(odd)').css('color','blue');}

btn3.onclick = function(){$('ul :nth-child(3n+1)').css('color','green');}

</script>

反向形式

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

<button id="btn1" style="color: red;">$(':nth-last-child(even)')</button>

<button id="btn2" style="color: blue;">$(':nth-last-child(odd)')</button>

<button id="btn3" style="color: green;">$(':nth-last-child(3n+1)')</button>

<ul>

</ul>

reset.onclick = function(){history.go();}

btn1.onclick = function(){$('ul :nth-last-child(even)').css('color','red');}

btn2.onclick = function(){$('ul :nth-last-child(odd)').css('color','blue');}

btn3.onclick = function(){$('ul :nth-last-child(3n+1)').css('color','green');}

</script>

首尾子元素

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

$(':first-child')

$(':last-child')

<button id="btn1" style="color: red;">$('div :first-child')</button>

<button id="btn2" style="color: blue;">$('div :last-child')</button>

<button id="btn3" style="color: green;">$('div span:first-child')</button>

<button id="btn4" style="color: pink;">$('div span:last-child')</button>

</div>

</p>

</div>

reset.onclick = function(){history.go();}

btn1.onclick = function(){$('div :first-child').css('color','red');}

btn2.onclick = function(){$('div :last-child').css('color','blue');}

btn3.onclick = function(){$('div span:first-child').css('color','green');}

btn4.onclick = function(){$('div span:last-child').css('color','pink');}

</script>

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

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.lastElementChild;

if(lastChild.nodeName == 'SPAN'){

lastChild.style.color = 'pink';

}

唯一子元素

$(':only-child')

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

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

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

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

var divs = document.getElementsByTagName('div');

for(var i = 0; i < divs.length; i++){

var children = divs.children;

if(children.length == 1 && children[0].nodeName == 'SPAN'){

children[0].style.color = 'green';

}

<button id="btn1" style="color: green;">$('div span:only-child')</button>

<div>

</div>

<div>

</div>

reset.onclick = function(){history.go();}

btn1.onclick = function(){$('div span:only-child').css('color','green');}

</script>

最后

文章来自：博客园/小火柴的蓝色理想