6. Practical combat:
Write a javascript picture museum:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http:///TR/xhtml11/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<title>Image Gallery</title>
<script type="text/javascript" >
function showPic(whichpic) {
var source = ("href"); //Get the value of the attribute href of the element currently clicked
var placeholder = ("placeholder"); //Get the target
("src",source);
/*
Set the target's attribute src. This will achieve the change of pictures.
setAttribute completes two operations: first create attributes and then assign values. If the property exists, the value of the property is overwritten.
Of course we can use = source;
However, it is recommended that you use setAttribute(), which is a level 1 dom.
It can modify any attribute of any element in the document.
In addition, his transplantability is better.
*/
var text = ("title");
//Get the value of the attribute title of the element currently clicked
var description = ("description");//Get the target
= text;
/*
Or use
[0].nodeValue = text;
*/
}
</script>
</head>
<body>
<h1>javascript Picture Museum</h1>
<!--
We should pay attention to adding events to the tag a to avoid asking him to jump.
Solution: The function returns false; the event believes that the link has not been clicked.
Of course this case is when the value of href is useful.
If the value of href is javascript:void(0); it can also not jump.
-->
<ul>
<li>
<a href="images/" title="test1" onclick="showPic(this); return false;">test1</a>
</li>
<li>
<a href="images/" title="test2" onclick="showPic(this); return false;">test2</a>
</li>
<li>
<a href="images/" title="test3" onclick="showPic(this); return false;">test3</a>
</li>
<li>
<a href="images/" title="test3" onclick="showPic(this); return false;">test4</a>
</li>
</ul>
<img src="images/" alt="my image gallery" />
<p >Select picture.</p>
</body>
</html>
After reading this example, you may wonder, why can’t I understand it?
If so, then your doubts are correct. hehe.
If you can't understand, you can't understand. First, remember what you don’t understand. We will talk about learning DOM programming in the next few chapters.
At that time, everything you don’t understand will be resolved. . . . . .
Total Festival:
This chapter doesn't say anything important, it's a waste of everyone's time. Please forgive me. . .
However, I believe everyone is more interested in the next few chapters. . . Keep it confidential. ^_^.
If you still don’t understand, you can search for information on Google.
Previous page12Read the full text