JQuery節點遍歷演示
阿新 • • 發佈：2018-11-07
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery節點遍歷演示</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background-color: yellow;
float: left;
margin: 20px;
}
.c1{
border: 2px solid;
}
</style>
<!-- 引入Jquery庫 -->
<script type="text/javascript" src="jquery/jquery-1.7.2.js"></script>
<script type="text/javascript">
//根據節點次層關係遍歷
function func01(){
//返回全部的，選擇第幾個
$("div[id=d3]").eq(1).find("span").css("backgroundColor","red");
}
//修改節點的樣式
function func02(){
//修改透明度
$("#d3").css("opacity",0.2);
}
</script>
</head>
<body>
<input type="button" value="提交一" onclick="func01();">
<input type="button" value="提交二" onclick="func02();">
<hr>
<div></div>
<div class="c1"></div>
<div id="d3">
<span>子元素一</span>
<p>
子元素二<span>孫元素一</span>
</p>
<span>子元素三</span>
</div>
<div class="c1"></div>
<div></div>
<div id="d3">
<span>子元素一</span>
<p>
子元素二<span>孫元素一</span>
</p>
<span>子元素三</span>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery節點遍歷演示</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background-color: yellow;
float: left;
margin: 20px;
}
.c1{
border: 2px solid;
}
</style>
<!-- 引入Jquery庫 -->
<script type="text/javascript" src="jquery/jquery-1.7.2.js"></script>
<script type="text/javascript">
//根據節點次層關係遍歷
function func01(){
//返回全部的，選擇第幾個
$("div[id=d3]").eq(1).find("span").css("backgroundColor","red");
}
//修改節點的樣式
function func02(){
//修改透明度
$("#d3").css("opacity",0.2);
}
</script>
</head>
<body>
<input type="button" value="提交一" onclick="func01();">
<input type="button" value="提交二" onclick="func02();">
<hr>
<div></div>
<div class="c1"></div>
<div id="d3">
<span>子元素一</span>
<p>
子元素二<span>孫元素一</span>
</p>
<span>子元素三</span>
</div>
<div class="c1"></div>
<div></div>
<div id="d3">
<span>子元素一</span>
<p>
子元素二<span>孫元素一</span>
</p>
<span>子元素三</span>
</div>
</body>
</html>