看《Javascript+DOM编程艺术》的第一篇

最新推荐文章于 2021-12-06 20:37:14 发布

zy1104560031

最新推荐文章于 2021-12-06 20:37:14 发布

阅读量734

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/zy1104560031/article/details/79038078

版权

<!DOCTYPE html>

<html>

<head>

<title>Javascript Gallery</title>

<!--

作者：offline

时间：2018-01-11

描述：

function showpic(whichpic){

var source=getAttribute("href");

//对src进行刷新，将它保存到source

alert(source)

var placeholder = document.getElementById("placeholder");

alert(placeholder)

placeholder.setAttribute("src";source);

}

</script>-->

</head>

<body>

<ul>

<!--<li><a href="images/GUG.jpg">GUG</a></li>

-->

<!--

作者：offline

时间：2018-01-11

描述：占位符

-->

</ul>

</body>

</html>

childnodes:返回一个数组，数组包含给定元素节点的全体元素：element.childnodes.

nodeType:区分文档里的个个节点。node.nodeType

function showpic(whichpic){
var source=whichpic.getAttribute("href");
//对src进行刷新，将它保存到source
//alert(source)
var placeholder = document.getElementById("placeholder");
//alert(placeholder)
placeholder.setAttribute("src",source);

//title属性值将被提取并保存到text中
var text=whichpic.getAttribute("title");
//找到id=“description”的<p>元素，并把这个对象保存到变量description去
var description = document.getElementById("description");
//alert(description.childNodes[0].nodeValue);
//将description对象的第一个子节点的nodeValue属性值设置为变量text的值
description.firstChild.nodeValue = text;

}
function countBodyChildren(){
var body_element = document.getElementsByTagName("body")[0];
//输出body元素的子元素的总数
alert(body_element.childNodes.length);
//页面加载是调用countBodyChildren
window.οnlοad=countBodyChildren;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript Gallery</title>

<style>
ul li{
margin-left: auto;
list-style: none;
}
</style>


<script type="text/javascript" src="script/showpic.js">
/*function showpic(whichpic){
var source=getAttribute("href");
//对src进行刷新，将它保存到source
alert(source)
var placeholder = document.getElementById("placeholder");
alert(placeholder)
placeholder.setAttribute("src";source);
}*/
</script>
</head>
<body>
<ul>


<li><a href="img/GUG.jpg" title="g" οnclick="showpic(this);return false;">GUG</a></li>
<li><a href="img/rgt.jpg" title="r" οnclick="showpic(this);return false;">RGT</a></li>
<li><a href="img/YHY.jpg" title="y" οnclick="showpic(this);return false;">YHY</a></li>
<li><a href="img/ZGL.jpg" title="z" οnclick="showpic(this);return false;">ZGL</a></li>

<p id="description">Please,choose an images.</p>

<img id="placeholder" src="img/123.jpg" alt="my gallery" width="400px" height="300px"/>
</ul>
</body>
</html>

比起看视频，看书能够让你知道更多，了解的更多，缺点学得就是慢。

书上说JavaScript因为有弹窗这个功能而让很多用户拒绝使用，因为它的麻烦>作用这点深表赞同。但是我依旧在学。