JS：奇偶选择器，表格隔列换色，隔行换色，节点【诗书画唱】

2020-06-23 18:07 作者:诗书画唱 0人读过 | 我要投稿

设置一个表格，设置每个每个单元格的颜色隔列换色

CSS部分：

td{ width: 120px;height: 35px; background-color: #FFFF00;}

JS部分：

window.onload = function() {

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

var jiShuZu = ulFirstNeiRong.getElementsByClassName("ji");

var ouShuZu = ulFirstNeiRong.getElementsByClassName("ou");

ulFirstNeiRong.onmouseover=function(){

for(var i of ouShuZu){

i.style .backgroundColor="green";

}

for(var j of jiShuZu){

j.style .backgroundColor="red";

}

ulFirstNeiRong.onmouseout =function(){

for(var i of ouShuZu){

i.style .backgroundColor="yellow";

}

for(var j of jiShuZu){

j.style .backgroundColor="yellow";

}

HTML部分：

<table>

</table>

CSS部分：

td{ width: 120px;height: 35px; background-color: #FFFF00;}

JS部分：

window.onload = function() {

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

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

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

//var liShuZu=ull.children;

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

var jiShuZu = ulFirstNeiRong.getElementsByClassName("ji");

var ouShuZu = ulFirstNeiRong.getElementsByClassName("ou");

for(var i of jiShuZu) {

//i.onmouseover=function(){

i.style.backgroundColor = "red";

//}

//i.onmouseout =function(){

//this. style. backgroundColor="yellow";

//}

}

for(var i of ouShuZu){

//i.onmouseover=function(){

i.style .backgroundColor="green";

//}

//i.onmouseout =function(){

//this. style. backgroundColor="yellow";

//}

}}

HTML部分：

<table>

</table>

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

JS部分：

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 = "我爱中国";

}

CSS部分：

a {

text-decoration: none;

}

HTML部分：

<div>

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

<ul>

</ul>

</div>

案例2:获取ul下的所有子节点，设置li的的背景颜色隔行换色

<!DOCTYPE html>

<html>

<head>

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

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>

</ul>

</body>

</html>

标签：

JS：奇偶选择器，表格隔列换色，隔行换色，节点【诗书画唱】

CSS部分：

JS部分：

HTML部分：

CSS部分：

JS部分：

HTML部分：

JS部分：

CSS部分：

HTML部分：