99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

jQuery的元素選擇器學(xué)習(xí)教程

發(fā)布時(shí)間：2016-09-05 21:48  回復(fù):0  查看:2060   最后回復(fù)：2016-09-05 21:48  

本篇jQuery學(xué)習(xí)教程開(kāi)始介紹過(guò)濾選擇器。過(guò)濾選擇器是jQuery選擇器中最為龐大也是最為出彩的一部分。以CSS結(jié)構(gòu)偽類選擇器為基礎(chǔ)，jQuery過(guò)濾選擇器增加了很多擴(kuò)展功能。本文先從與CSS選擇器最相近的子元素過(guò)濾選擇器開(kāi)始說(shuō)起


通用形式

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

$(':nth-child(index)')選擇每個(gè)父元素的第index個(gè)子元素(index從1算起)，返回集合元素

$(':nth-child(1)')  每個(gè)父元素下第1個(gè)子元素

$('span:nth-child(1)')  每個(gè)父元素下第1個(gè)子元素，且該子元素為span元素


$('div span:nth-child(1)')    每個(gè)為div元素的父元素下第1個(gè)子元素，且該子元素為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();}

//匹配每個(gè)父元素的第1個(gè)子元素，結(jié)果是1.1、2.1和3.1

//[注意實(shí)際上，<head>元素作為<html>元素的第1個(gè)子元素，也被設(shè)置為color:red

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


//匹配每個(gè)父元素的第1個(gè)子元素，且該子元素是span元素，結(jié)果是2.1和3.1

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


//匹配每個(gè)div元素為父元素的第1個(gè)子元素，且該子元素是span元素，結(jié)果是3.1

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

</script>


對(duì)應(yīng)于CSS的結(jié)構(gòu)偽類選擇器nth-child(n)

nth-child(n)選擇器用于選擇每個(gè)父元素下的第n個(gè)子元素(n從1開(kāi)始)

如果要完成同樣的上面三個(gè)功能，選擇器格式分別為：

:nth-child(1){color:red;}


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


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

如果上面的第三個(gè)功能要使用javascript實(shí)現(xiàn)，則表現(xiàn)如下：

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

        }

}


參數(shù)

當(dāng)然$(':nth-child(index)')選擇器作為通用的子元素過(guò)濾選擇器，可以有多種參數(shù)選擇

【1】$(':nth-child(even)') 選取每個(gè)父元素下的索引值為偶數(shù)的元素

【2】$(':nth-child(odd)') 選取每個(gè)父元素下的索引值為奇數(shù)的元素

【3】$(':nth-child(3n+1)') 選取每個(gè)父元素下的索引值為(3n+1)的元素

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

<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();}

//匹配每個(gè)父元素為ul的偶數(shù)個(gè)元素，結(jié)果是2、4

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


//匹配每個(gè)父元素為ul的奇數(shù)個(gè)元素，結(jié)果是1、3、5

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


//匹配每個(gè)父元素為ul的(3n+1)個(gè)元素，結(jié)果是1、4

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

</script>


反向形式

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

$(':nth-last-child(index)')選擇器選擇每個(gè)父元素的反向第index個(gè)子元素(index從最后一個(gè)元素計(jì)數(shù)到第一個(gè)元素為止)，返回集合元素

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

<button id="reset">還原</button>

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

</ul>

<script src="jquery-3.1.0.js"></script>

<script>

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

//匹配每個(gè)父元素為ul的偶數(shù)個(gè)元素(從后往前數(shù))，所以結(jié)果為5(倒數(shù)第2個(gè))、3(倒數(shù)第4個(gè))、1(倒數(shù)第6個(gè))

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


//匹配每個(gè)父元素為ul的奇數(shù)個(gè)元素(從后往前數(shù))，所以結(jié)果為6(倒數(shù)第1個(gè))、4(倒數(shù)第3個(gè))、2(倒數(shù)第5個(gè))

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


//匹配每個(gè)父元素為ul的反向的(3n+1)個(gè)元素，即1、4，所以結(jié)果是6(倒數(shù)第1個(gè))、3(倒數(shù)第4個(gè))

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

</script>


首尾子元素

為了方便，jQuery還定義了第一個(gè)子元素和最后一個(gè)子元素的獲取方式

$(':first-child')

:first-child選擇器是:nth-child(1)選擇器的簡(jiǎn)寫形式，選取每個(gè)父元素的第1個(gè)子元素

$(':last-child')

類似地，$(':last-child')選擇器選取每個(gè)父元素的最后1個(gè)子元素

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

<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();}

//匹配每個(gè)div元素為父元素的第1個(gè)子元素，結(jié)果是1.1和3.1

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


//匹配每個(gè)div元素為父元素的最后1個(gè)子元素，結(jié)果是1.2和3.2

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


//匹配每個(gè)div元素為父元素的第1個(gè)子元素，且該子元素是span元素，結(jié)果是3.1

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


//匹配每個(gè)div元素為父元素的最后1個(gè)子元素，且該子元素是span元素，結(jié)果是1.2

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

</script>


首尾子元素選擇器分別對(duì)應(yīng)于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選擇器要完成上面的最后一個(gè)功能，則如下所示

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')選擇器的匹配規(guī)則為：如果某個(gè)元素是它父元素中的唯一的子元素，才會(huì)被匹配

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

對(duì)應(yīng)于CSS的:only-child選擇器

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

如果使用javascript實(shí)現(xiàn)，則如下所示

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>

<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個(gè)div中只存在一個(gè)<span>元素，但由于它并不是唯一的子元素，所以無(wú)法被匹配

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

</script>


最后

在CSS結(jié)構(gòu)偽類選擇器中，nth-child(n)和nth-of-type(n)選擇器經(jīng)常容易混淆，需要小心區(qū)分才能避免出錯(cuò)。類似地，在jQuery過(guò)濾選擇器中，子元素選擇器和索引選擇器也是非常相近，容易混淆。




文章來(lái)自：博客園/小火柴的藍(lán)色理想

您還未登錄，請(qǐng)先登錄

熱門帖子

最新帖子

?