Javascript案例研究：Javascript图片库

超长待机。

已于 2023-09-14 23:11:14 修改

阅读量91

点赞数

分类专栏： web前端学习笔记文章标签： javascript 开发语言 ecmascript

于 2023-09-13 22:55:13 首次发布

本文链接：https://blog.csdn.net/qq_45070951/article/details/132856533

版权

web前端学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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事件，如有新增，在后面添加新的函数即可