华恩JAVA班第54天

最新推荐文章于 2022-10-28 18:18:53 发布

Amare丶

最新推荐文章于 2022-10-28 18:18:53 发布

阅读量212

点赞数

分类专栏：华恩JAVA班

本文链接：https://blog.csdn.net/u011623030/article/details/72911726

版权

华恩JAVA班专栏收录该内容

65 篇文章 0 订阅

订阅专栏

华恩JAVA班第54天

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用getAttribute读取节点的属性值</title>
<style type="text/css">
img{
border: 0px;
float: left;
padding:3px;
}
body{
margin:0px;
font-size:12px;
line-height:20px;
}
input{
margin-top: 5px;
}
</style>
<script type="text/javascript">
function hh(){
var hText=document.getElementByIdx_x("fruit").getAttribute("src");

alert("图片的路径是："+hText)
}
function check(){
var favor=document.getElementsByName("enjoy");
var like="你喜欢的水果是：";
for(var i=0;i<favor.length;i++){
  if(favor[i].checked==true){
   like+="\n"+favor[i].getAttribute("value");
   }
  }
alert(like);
}
function change(){
var imgs=document.getElementsByTagName_r("img");
imgs[0].setAttribute("src","images/grape.jpg");
}
</script>
</head>

<body>
<img src="images/fruit.jpg" alt="水果图片" id="fruit" />
<h1 id="love">选择你喜欢的水果：</h1>
<input name="enjoy" type="checkbox" value="apple" />苹果
<input name="enjoy" type="checkbox" value="banana" />香蕉
<input name="enjoy" type="checkbox" value="grape" />葡萄
<input name="enjoy" type="checkbox" value="pear" />梨
<input name="enjoy" type="checkbox" value="watermelon" />西瓜
<br />
<input name="btn" type="button" value="显示图片路径" οnclick="hh()" />
<br /><input name="btn" type="button" value="喜欢的水果" οnclick="check()" />
<br /><input name="btn" type="button" value="改变图片" οnclick="change()" />
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>根据层次关系查找节点</title>
<style type="text/css">
td{
font-size:14px;
width:80px;
height:30px;
text-align:center;
border-bottom:1px solid #666;
border-right:1px solid #666;
}
table{
border-left:1px solid #666;
border-top:1px solid #666;
}
body{text-align:center;}
input{margin-top:5px;}
</style>
<script type="text/javascript">
function checks(){
var tt=document.getElementByIdx_x("myTable");

var s=tt.lastChild.firstChild.firstChild.innerHTML;

alert(s);
}
</script>
</head>
<body><table border="0" cellspacing="0" cellpadding="0" id="myTable">
<thead>
    <td>姓名</td>
    <td>课程</td>
    <td>成绩</td>
</thead>
<tbody>
<tr>
    <td>欧阳兰</td>
    <td>语文</td>
    <td>88</td>
</tr>
<tr>
    <td>白杨</td>
    <td>数学</td>
    <td>96</td>
</tr>
</tbody>
</table>
<input name="btn" type="button" value="第二行第一个单元格内容" οnclick="checks()" />
</body>
</html>

document.body.insertBefore(image,oldNode);      //插入图片到sixty1前面
}
function copyNode(){
var image=document.getElementByIdx_x("sixty1"); //访问复制的节点
var copyImage=image.cloneNode(false);           //复制指定的节点
document.body.a(copyImage);      //在页面最后增加节点

}
</script>
</head>

<body>
<h2>喜欢的水果</h2>
<input id="b1" type="button" value="增加一幅图片" οnclick="newNode()" />
<input id="b2" type="button" value="复制原图" οnclick="copyNode()" /><br />
<img src="images/sixty1.jpg" id="sixty1" alt="水果" />
<img src="images/sixty2.jpg" id="sixty2" alt="果篮" />
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>删除节点</title>
<script type="text/javascript">
function delNode(){
var dNode=document.getElementByIdx_x("sixty1"); //访问被删除的节点
document.body.removeChild(dNode);      //删除图片
}
function repNode(){
var oldimage=document.getElementByIdx_x("sixty2"); //访问被替换的节点
var newimage=document_createElement_x("img");       //创建一个图片节点
newimage.setAttribute("src","images/repimg.jpg"); //设置图片路径
document.body.replaceChild(newimage,oldimage);      //替换原来的图片
}
</script>
</head>

<body>
<h2>喜欢的水果</h2>
<input id="b1" type="button" value="删除图片" οnclick="delNode()" />
<input id="b2" type="button" value="替换图片" οnclick="repNode()" /><br />
<img src="images/sixty1.jpg" id="sixty1" alt="水果" />
<img src="images/sixty2.jpg" id="sixty2" alt="果篮" />
</body>
</html>

更多信息可以参见同学富晓磊的博客:http://blog.sina.com.cn/u/1798827371

Amare丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
华恩JAVA班第54天

华恩JAVA班第54天 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type
复制链接

扫一扫