JS作業(yè)：簡(jiǎn)易輪播圖個(gè)人圖析讓你徹底弄懂各種節(jié)點(diǎn)的定義
案例1：獲取div下的所有子節(jié)點(diǎn)，并設(shè)置背景顏色為紅色，如果是p標(biāo)簽，設(shè)置p標(biāo)簽的內(nèi)容為“我愛(ài)中國(guó)”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
a{text-decoration: none;}
</style>
<script>
window. onload=function(){
//用getElementsByTagName標(biāo)簽選擇器獲取div下的所有的元素節(jié)點(diǎn)
var ziJieDianDivShuZu =document . getElementsByTagName("div")[0].children;
//用for of遍歷元素節(jié)點(diǎn)，用.style.backgroundcolor將每個(gè)節(jié)點(diǎn)的背景顏色修改為紅色
for(var i of ziJieDianDivShuZu){
i.style. backgroundColor="red";}
//標(biāo)簽選擇器可以獲取div下的所有的標(biāo)簽，所以用標(biāo)簽選擇器去獲取div下的所有的p標(biāo)簽
var jieDianPShuZu=document. getElementsByTagName("div")[0].getElementsByTagName("p");
//遍歷得到的p數(shù)組，讓每個(gè)p內(nèi)容修改為我愛(ài)中國(guó)
for(var i of jieDianPShuZu){
i.innerHTML="我愛(ài)中國(guó)";
}
}
</script>
</head>
<body>
<div>
<img src="./img/1.jpg" width="100px" height="100px">
<a href="#">a href詩(shī)書(shū)畫(huà)唱超鏈接</a>
<p>P點(diǎn)贊</p>
<ul>
<li>li投幣</li>
</ul>
<p>p大家好</p>
</div>
</body>
</html>
案例2:獲取ul下的所有子節(jié)點(diǎn)，設(shè)置li的的背景顏色隔行換色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul{
list-style:
none;width: 666px; height: 23px; margin: 0px auto;
text-align: center;}
ul li{
float: left;width:100px ;background-color: yellow;
}
ul li a{
text-decoration: none;}
</style>
<script>
window. onload=function(){
//用標(biāo)簽選擇器把ul等標(biāo)簽看作重上到下排序的數(shù)組，獲取ul的下標(biāo)為0的第一個(gè)的內(nèi)容
var ulFirstNeiRong=document . getElementsByTagName("ul")[0];
//用.children獲取所有的li：
//var liShuZu=ull.children;
//用for of等給每個(gè)li添加鼠標(biāo)移入事件
var jiShuZu=ulFirstNeiRong. getElementsByClassName("jiID");
var ouShuZu=ulFirstNeiRong. getElementsByClassName("ouID");
for(var i of jiShuZu){
i.onmouseover=function(){
this. style. backgroundColor="red";}
i.onmouseout =function(){
this. style. backgroundColor="yellow";
}}
for(var i of ouShuZu){
i.onmouseover=function(){
this.style .backgroundColor="green";
}
i.onmouseout =function(){
this. style. backgroundColor="yellow";
}
}}
</script>
</head>
<body>
<ul>
<!--jiID:奇ID，ouID:偶ID-->
<li class="jiID"><a href="#">詩(shī)書(shū)畫(huà)唱</a></li>
<li class="ouID"><a href="#"> UP主</a></li>
<li class="jiID"><a href="#">三連</a></li>
<li class="ouID"><a href="#">關(guān)注</a></li>
</ul>
</body>
</html>
案例3:制作一個(gè)一級(jí)菜單，聲明1個(gè)div，鼠標(biāo)移動(dòng)到每個(gè)ul時(shí)給div賦值，有多少子節(jié)點(diǎn)、元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul {
list-style: none;
width: 666px;
height: 23px;
margin: 0px auto;
text-align: center;
}
ul li {
float: left;
width: 100px;
background-color: yellow;
}
ul li a {
text-decoration: none;
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 0px auto;
}
</style>
<script>
window.onload = function() {
// ulFirstNeiRong: ul第一個(gè)內(nèi)容
var ulFirstNeiRong = document.getElementsByTagName("ul")[0];
// divAllNeiRong: div所有內(nèi)容
var divAllNeiRong = ulFirstNeiRong.nextElementSibling;
ulFirstNeiRong.onmouseover = function() {
//用.childNodes.length獲取子節(jié)點(diǎn)數(shù)組總長(zhǎng)度，1個(gè)長(zhǎng)度代表1個(gè)
var ziJieDanShuZuZongChangDu = ulFirstNeiRong.childNodes.length;
//用.children.length獲取元素節(jié)點(diǎn)數(shù)組總長(zhǎng)度，1個(gè)長(zhǎng)度代表1個(gè)
var yuanSuJieDianShuZuZongChangDu = ulFirstNeiRong.children.length;
//用.attributes.length獲取屬性節(jié)點(diǎn)數(shù)組總長(zhǎng)度，1個(gè)長(zhǎng)度代表1個(gè)
var shuXingJieDianShuZuZongChangDu = ulFirstNeiRong.attributes.length;
//用.childNodes獲取文本節(jié)點(diǎn)數(shù)組總長(zhǎng)度，1個(gè)長(zhǎng)度代表1個(gè)
var wenBenJieDianShuZuZongChangDu = 0;
//先用..childNodes獲取它所有的節(jié)點(diǎn)內(nèi)容，
// 在用nodeType判斷它所有節(jié)點(diǎn)的類(lèi)型，如果是3就是文本節(jié)點(diǎn)
var allJieDianShuZu = ulFirstNeiRong.childNodes;
for(var i of allJieDianShuZu) {
if(i.nodeType == 3) {
wenBenJieDianShuZuZongChangDu++;
}
}
divAllNeiRong.innerHTML = "子節(jié)點(diǎn)" + ziJieDanShuZuZongChangDu?
+ "個(gè)<br>元素節(jié)點(diǎn)"
+ yuanSuJieDianShuZuZongChangDu +
"個(gè)<br>屬性節(jié)點(diǎn)" + shuXingJieDianShuZuZongChangDu + "個(gè)<br>文本節(jié)點(diǎn)"?
+ wenBenJieDianShuZuZongChangDu + "個(gè)";
}
}
</script>
</head>
<body>
<!--若注釋在ul里面也會(huì)被算入子節(jié)點(diǎn)，文本節(jié)點(diǎn)-->
<ul>
<li>
<a href="#">詩(shī)書(shū)畫(huà)唱</a>
</li>
<li>
<a href="#">UP主</a>
</li>
<li>
<a href="#">三連</a>
</li>
<li>
<a href="#">關(guān)注</a>
</li>
</ul>
<div></div>
</body>
</html>
這里是只算ul以?xún)?nèi)的節(jié)點(diǎn)：
方法二：
案例4:輪播圖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//用window.寫(xiě)一個(gè)圖片的路徑的數(shù)組imgShuZu
window. onload=function(){
//使用window. 這個(gè)聲明表示是全局變量
window. imgShuZu=[" ./img/1.jpg","./img/2.jpg","./img/3.jpg"];
//使用window. 寫(xiě)一個(gè)全局變量用來(lái)控制圖片的下標(biāo)。indexXiaBiao：索引下標(biāo)
window. indexXiaBiao=0;
window. img=document. getElementsByTagName("img")[0];
window. start=null;
//因?yàn)槭髽?biāo)移入的時(shí)候應(yīng)該停止輪播，所以用上clearInterval，來(lái)清除
//clearInterval() 方法可取消由 setInterval() 函數(shù)設(shè)定的定時(shí)執(zhí)行操作。
//
//clearInterval() 方法的參數(shù)必須是由 setInterval() 返回的 ID 值。
//
//注意: 要使用 clearInterval() 方法, 在創(chuàng)建執(zhí)行定時(shí)操作時(shí)要使用全局變量：
window.img.onmouseover=function(){
clearInterval(window. start);}
//因?yàn)橐瞥龅臅r(shí)侯要繼續(xù)輪播，所以用setInterval
//setInterval() 方法可按照指定的周期（以毫秒計(jì)）
//來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。
//setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval()?
//被調(diào)用或窗口被關(guān)閉。
//由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。
//
//提示： 1000 毫秒= 1 秒。
//
//提示： 如果你只想執(zhí)行一次可以使用 setTimeout() 方法。
window. img . onmouseout=function(){
//setInterval會(huì)一直執(zhí)行某個(gè)內(nèi)容，它有2個(gè)參數(shù)，
//第一個(gè)參數(shù)執(zhí)行的是函數(shù)，第二個(gè)執(zhí)行的是參數(shù)時(shí)間
window. start=setInterval(gaiBianFunction,666);
}
}
//用if判斷寫(xiě)一個(gè)改變圖片背景的函數(shù)，gaiBianFunction：改變函數(shù)。
function gaiBianFunction(){
//用indexXiaBiao用來(lái)控制數(shù)組的下標(biāo)， 如果大于2，下標(biāo)賦值為0，達(dá)到循環(huán)的效果
if (window. indexXiaBiao<=2){
indexXiaBiao++;
}
//下面用的是if不是else if，因?yàn)橛昧薳lse后第一個(gè)if中的內(nèi)容
//會(huì)在下標(biāo)大于2時(shí)不執(zhí)行，但為了循環(huán)而兩個(gè)if并列用，
//第二個(gè)下標(biāo)為0后又會(huì)回到第一個(gè)if，
//第一個(gè)if下標(biāo)大于2時(shí)會(huì)到第二個(gè)if中去
?if(window. indexXiaBiao>2){
indexXiaBiao=0;
}
window. img. src=window. imgShuZu [window. indexXiaBiao];
}
</script>
</head>
<body>
<img src="./img/1.jpg" width="666px" height="666px" />
</body>
</html>
我寫(xiě)的注釋幾乎都有我自己嘗試，思考，總結(jié)的助于理解的內(nèi)容：
擴(kuò)展：
