欢迎光临散文网 会员登陆 & 注册

JS作业:简易轮播图个人图析让你彻底弄懂各种节点的定义

2020-05-13 18:29 作者:诗书画唱  | 我要投稿

案例1:获取div下的所有子节点,并设置背景颜色为红色,如果是p标签,设置p标签的内容为“我爱中国”



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style>

a{text-decoration: none;}

</style>

<script>

window. onload=function(){

//用getElementsByTagName标签选择器获取div下的所有的元素节点

var ziJieDianDivShuZu =document . getElementsByTagName("div")[0].children;

//用for of遍历元素节点,用.style.backgroundcolor将每个节点的背景颜色修改为红色

for(var i of ziJieDianDivShuZu){

i.style. backgroundColor="red";}

//标签选择器可以获取div下的所有的标签,所以用标签选择器去获取div下的所有的p标签

var jieDianPShuZu=document. getElementsByTagName("div")[0].getElementsByTagName("p");

//遍历得到的p数组,让每个p内容修改为我爱中国

for(var i of jieDianPShuZu){

i.innerHTML="我爱中国";

}

}

</script>

</head>

<body>

<div>

<img src="./img/1.jpg" width="100px" height="100px">

<a href="#">a href诗书画唱超链接</a>

<p>P点赞</p>

<ul>

<li>li投币</li>

</ul>

<p>p大家好</p>

</div>

</body>

</html>



案例2:获取ul下的所有子节点,设置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(){

//用标签选择器把ul等标签看作重上到下排序的数组,获取ul的下标为0的第一个的内容

var ulFirstNeiRong=document . getElementsByTagName("ul")[0];

//用.children获取所有的li:

//var liShuZu=ull.children;

//用for of等给每个li添加鼠标移入事件

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="#">诗书画唱</a></li>

<li class="ouID"><a href="#"> UP主</a></li>

<li class="jiID"><a href="#">三连</a></li>

<li class="ouID"><a href="#">关注</a></li>

</ul>

</body>

</html>


案例3:制作一个一级菜单,声明1个div,鼠标移动到每个ul时给div赋值,有多少子节点、元素节点、属性节点和文本节点

方法一:

<!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第一个内容

var ulFirstNeiRong = document.getElementsByTagName("ul")[0];


// divAllNeiRong: div所有内容

var divAllNeiRong = ulFirstNeiRong.nextElementSibling;

ulFirstNeiRong.onmouseover = function() {


//用.childNodes.length获取子节点数组总长度,1个长度代表1个

var ziJieDanShuZuZongChangDu = ulFirstNeiRong.childNodes.length;

//用.children.length获取元素节点数组总长度,1个长度代表1个

var yuanSuJieDianShuZuZongChangDu = ulFirstNeiRong.children.length;

//用.attributes.length获取属性节点数组总长度,1个长度代表1个

var shuXingJieDianShuZuZongChangDu = ulFirstNeiRong.attributes.length;

//用.childNodes获取文本节点数组总长度,1个长度代表1个


var wenBenJieDianShuZuZongChangDu = 0;

//先用..childNodes获取它所有的节点内容,

// 在用nodeType判断它所有节点的类型,如果是3就是文本节点

var allJieDianShuZu = ulFirstNeiRong.childNodes;

for(var i of allJieDianShuZu) {

if(i.nodeType == 3) {

wenBenJieDianShuZuZongChangDu++;

}


}

divAllNeiRong.innerHTML = "子节点" + ziJieDanShuZuZongChangDu 

+ "个<br>元素节点"

+ yuanSuJieDianShuZuZongChangDu +

"个<br>属性节点" + shuXingJieDianShuZuZongChangDu + "个<br>文本节点" 

+ wenBenJieDianShuZuZongChangDu + "个";

}

}

</script>

</head>


<body>

<!--若注释在ul里面也会被算入子节点,文本节点-->

<ul>


<li>

<a href="#">诗书画唱</a>

</li>

<li>

<a href="#">UP主</a>

</li>

<li>

<a href="#">三连</a>

</li>

<li>

<a href="#">关注</a>

</li>

</ul>

<div></div>


</body>


</html>

这里是只算ul以内的节点:

方法二:


案例4:轮播图


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>


//用window.写一个图片的路径的数组imgShuZu

window. onload=function(){

//使用window. 这个声明表示是全局变量

window. imgShuZu=[" ./img/1.jpg","./img/2.jpg","./img/3.jpg"];

//使用window. 写一个全局变量用来控制图片的下标。indexXiaBiao:索引下标

window. indexXiaBiao=0;

window. img=document. getElementsByTagName("img")[0];

window. start=null;

//因为鼠标移入的时候应该停止轮播,所以用上clearInterval,来清除

//clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。

//

//clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

//

//注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量:

window.img.onmouseover=function(){

clearInterval(window. start);}

//因为移出的时侯要继续轮播,所以用setInterval

//setInterval() 方法可按照指定的周期(以毫秒计)

//来调用函数或计算表达式。

//setInterval() 方法会不停地调用函数,直到 clearInterval() 

//被调用或窗口被关闭。

//由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

//

//提示: 1000 毫秒= 1 秒。

//

//提示: 如果你只想执行一次可以使用 setTimeout() 方法。

window. img . onmouseout=function(){

//setInterval会一直执行某个内容,它有2个参数,

//第一个参数执行的是函数,第二个执行的是参数时间

window. start=setInterval(gaiBianFunction,666);

}

}

//用if判断写一个改变图片背景的函数,gaiBianFunction:改变函数。

function gaiBianFunction(){

//用indexXiaBiao用来控制数组的下标, 如果大于2,下标赋值为0,达到循环的效果

if (window. indexXiaBiao<=2){

indexXiaBiao++;

}

//下面用的是if不是else if,因为用了else后第一个if中的内容

//会在下标大于2时不执行,但为了循环而两个if并列用,

//第二个下标为0后又会回到第一个if,

//第一个if下标大于2时会到第二个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>

我写的注释几乎都有我自己尝试,思考,总结的助于理解的内容:


扩展:


JS作业:简易轮播图个人图析让你彻底弄懂各种节点的定义的评论 (共 条)

分享到微博请遵守国家法律