- childNodes、nodeType、nodeValue、firstChild、lastChild (DOM属性)
- 如何利用DOM提供的方法编写图片库脚本?
- 如何利用事件处理函数把Javascript代码与网页集成在一起?
- 无序清单元素ul,有序清单元素ol
- onclick事件处理函数:当点击这个链接时,如果Javascript代码返回的值是true,onclick事件处理函数就认为”这个链接被点击了“,反之,如果返回的值是false,onclick事件处理函数就认为”这个链接没有被点击“。
- nodeValue属性
(1) 在用nodeValue属性获取description对象的值时,得到并不是包含在这个段落的文本 alert(description.nodeValue);这个调用将返回一个null值。
(2) 获取p元素所包含的文本的值,其实时它的第一个子节点的nodeValue属性值alert(description.childNodes[0].nodeValue); 或alert(description.firstChild.nodeValue);
(3) 获取childNodes数组的最后一个元素,node.childNode[node.childNodes.length-1]或node.lastChild
动手:
- gallay.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
<!-- 引用css文件 -->
<link rel = "stylesheet" href = "styles/layout.css" media = "screen">
</head>
<body>
<h1>Snpshots</h1>
<ul>
<li>
<!--
1.使用 onclick事件处理函数给链接添加行为,点击链接触发
2.防止点击后跳转到目标页面(return false)
-->
<a href = "images/1.jpg" onclick = "showPic(this);
return false;" title = "A fireworker display">Fireworks</a>
</li>
<li>
<a href = "images/2.jpg" onclick = "showPic(this);
return false;" title = "A cup of black coffee">Coffee</a>
</li>
<li>
<a href = "images/3.jpeg" onclick = "showPic(this);
return false;" title = "A red, red rose">Rose</a>
</li>
<li>
<a href = "images/4.jpeg" onclick = "showPic(this);
return false;" title = "The famous clock">Big Ben</a>
</li>
</ul>
<!--
1.添加一个占位符图片,为主页上的图片预留一个浏览区
2.为这个图片添加id属性,可以通过外部的样式表对图片的显示位置和显示效果加以控制
-->
<img id = "placeholder" src = "images/sun.gif" alt = "my image gallay" />
<p id = "description">Choose an image.</p>
<!-- 调用showPic方法,实现图片和文字的替换 -->
<script type = "text/javascript" src = "scripts/showPic.js"></script>
</body>
</html>
- layout.css
body{
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1{
color: #333;
background-color: transparent;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style: none;
}
img{
display: block;
clear: both;
}
- showPic.js
function showPic(whichpic) { //whichpic代表一个元素节点,代表指向某个图片的<a>元素
var source = whichpic.getAttribute("href") ; //获取图片的文件路径
var placeholder = document.getElementById("placeholder"); //获取placeholder的对象
placeholder.setAttribute("src",source); //改变placeholder的src属性的值
var text = whichpic.getAttribute("title"); //当图片库页面上的某个图片链接被点击时,这个链接的title属性值被提取并保存到text变量
~~var description = document.getElementById("description"); //得到id是description的<p>元素,并保存到变量~~description里
// alert(description.childNodes[0].nodeValue);
// alert(description.firstChild.nodeValue);
}~~~~
Q1:如果JavaScript功能被禁用,会怎样?(正常)
Q2:文档的结构与文档的行为分开了吗?(否)
Javascript图片改进方向
- Javascript与html标记分离
- 共享onload事件,adLoadEvent函数
function addLoadEvent(func) {
var oldonload = window.onload;//把现有的window.onload事件处理函数的值存入变量oldonload
if(typeof window.onload != "function"){//如果在这个处理函数上还没有绑定任何函数
window.onload = func; //把新函数添加给它
}else{//如果这个处理函数上已经绑定了一些函数,
window.onload = function () {//把新函数追加到现有的指令的末尾
oldonload();
func();
}
}
}
- 少假设(在进行操作前先判断)
- 键盘访问,onkeypress事件处理函数,按下任何一个按键都会触发onkeypress事件(如果绑定在onkeypress事件上的处理函数返回的是false,只使用键盘访问的用户将永远无法离开当前链接)
改进后的:
gallery.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
<!-- 引用css文件 -->
<link rel = "stylesheet" href = "styles/layout.css" media = "screen">
</head>
<body>
<h1>Snpshots</h1>
<ul id = "imagegallery"> <!-- 给清单设置一个独一无二的ID -->
<li>
<!--
1.使用 onclick事件处理函数给链接添加行为,点击链接触发
2.防止点击后跳转到目标页面(return false)
-->
<a href = "images/1.jpg" title = "A fireworker display">
<img src = "images/b.jpg" alt = "Fireworks"/> //用图片代替文字
</a>
</li>
<li>
<a href = "images/2.jpg" title = "A cup of black coffee">
<img src = "images/b.jpg" alt = "Coffee"/>
</a>
</li>
<li>
<a href = "images/3.jpeg" title = "A red, red rose">
<img src = "images/b.jpg" alt = "Rose"/>
</a>
</li>
<li>
<a href = "images/4.jpeg" title = "The famous clock">
<img src = "images/b.jpg" alt = "Big Ben"/>
</a>
</li>
</ul>
<!--
1.添加一个占位符图片,为主页上的图片预留一个浏览区
2.为这个图片添加id属性,可以通过外部的样式表对图片的显示位置和显示效果加以控制
-->
<img id = "placeholder" src = "images/1.jpg" alt = "my image gallay" />
<p id = "description">Choose an image.</p>
<!-- 调用showPic方法,实现图片和文字的替换 -->
<script type = "text/javascript" src = "scripts/showPic.js"></script>
</body>
</html>
layout.css
body{
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1{
color: #333;
background-color: transparent;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style: none;
}
#imgagegallery{
list-style: none;
}
#imgagegallery li a img{
border: 0;
}
#imgagegallery{
display: inline;
}
showPic.js
function showPic(whichpic) {
if(!document.getElementById("placeholder")) return false; //检查placeholder元素是否存在
var source = whichpic.getAttribute("href") ;
var placeholder = document.getElementById("placeholder");
if(placeholder.nodeName != "IMG") return false; //检查是否是一张图(nodeName总是返回大写字母)
placeholder.setAttribute("src",source);
if(document.getElementById("description")) {
//检查是否有title属性
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3){//检查节点的nodeType属性值
description.firstChild.nodeValue = text ;
}
}
return true;
}
function prepareGallery() {
if(!document.getElementsByTagName ){//检查当前浏览器是否支持getElementsByTagName
return false;
}
if(!document.getElementById) {//检查当前浏览器是否支持getElementById
return false;
}
if(!document.getElementById("imagegallery")){//检查当前网页是否存在一个id为imagegallery的元素
return false;
}
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for(var i = 0; i < links.length; i++){ //遍历imagegallery元素中的所有链接
links[i].onclick = function () {//定义一个匿名函数,设置onclick事件
//把这个链接作为参数传递给showPic,取消这个链接的默认行为,不让这个链接把访问者带离当前窗口
return showPic(this) ? false : true;//如果showPic返回true,那么更新;如果返回false,以默认行为发生
}
}
}
function addLoadEvent(func) {
var oldonload = window.onload;//把现有的window.onload事件处理函数的值存入变量oldonload
if(typeof window.onload != "function"){//如果在这个处理函数上还没有绑定任何函数
window.onload = func; //把新函数添加给它
}else{//如果这个处理函数上已经绑定了一些函数,
window.onload = function () {//把新函数追加到现有的指令的末尾
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery); //共享onload事件,如有新增,在后面添加新的函数即可