JavaScript DOM编程艺术第六章实例

最新推荐文章于 2022-11-15 23:21:14 发布

Cheecho

最新推荐文章于 2022-11-15 23:21:14 发布

阅读量411

点赞数

文章标签： js dom html

本文链接：https://blog.csdn.net/cheecho/article/details/106148165

版权

第六章实例和改进笔记

js1.js

//如果在HTML文档完成前加载执行脚本，此时DOM不完整，所以应该让函数在网页加载完毕后立即执行
//网页加载完会触发onload事件，让这个事件与window对象相关联
//如果使用window.onload = func 则只有最后一个绑定的函数会被实际执行
addLoadEvent(prepareGallery);
addLoadEvent(showPic);
//共享onload事件
function addLoadEvent(func) {
    var oldonload = window.onload;//现有的window.onload事件处理函数存入oldload
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            oldonload();
            func();//新函数追加到现有指令末尾
        }
    }
}

function prepareGallery() {
    if(!document.getElementById) return false;//检查点
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById("imagegallery")) return false;
    var gallery=document.getElementById("imagegallery");
    var link=gallery.getElementsByTagName("a");
    for(var i=0;i<link.length;i++){
        link[i].onclick=function () {
            return showPic(this)?false:true;//如果更换成功则返回false，防止用户被带到目标链接窗口;不成功则返回true，转跳链接窗口
        }
    }
}

function showPic(w) {
    if(!document.getElementById("placeholder")) return false;
    var source=w.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    if(placeholder.nodeName!="IMG") return false;//nodeName属性返回的是大写字母的值，元素节点返回标签名，属性节点返回属性名
    placeholder.setAttribute("src",source);
    if(document.getElementById("description")) {
        var text = w.getAttribute("title")?w.getAttribute("title") : "" ;
        var description=document.getElementById("description");
        if(description.firstChild.nodeType==3) {
            description.firstChild.nodeValue = text;//nodeValue文本节点返回文本，属性节点返回属性值
        }
    }
    return true;
}

html1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="styles/layout.css" media="screen" />
</head>
<body>
<h1>choose one to change</h1>
<ul id="imagegallery">
    <li>
        <a href="images/1.jpeg" title="pic1"><img src="images/1.jpeg" class="image" /></a>
    </li>
    <li>
        <a href="images/2.jpeg" title="pic2"><img src="images/2.jpeg" class="image"/></a>
    </li>
    <li>
        <a href="images/4.jpg" title="pic4"><img src="images/4.jpg" class="image"/></a>
    </li>
    <li>
        <a href="images/5.jpg" title="pic5"><img src="images/5.jpg" class="image"/></a>
    </li>
</ul>
<img id="placeholder" src="images/3.jpg" />
<p id="description">title change</p>
<script type="text/javascript" src="js1.js"></script>
</body>
</html>

layout.css （没怎么写…）

#imagegallery{
    list-style: none;
}
#imagegallery li{
    display: inline;
}
.image{
    height: 100px;
    width: 200px;
}
#placeholder{
    height: 450px;
    width: 720px;
}

Cheecho

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM编程艺术第六章实例

第六章实例和改进笔记js1.js//如果在HTML文档完成前加载执行脚本，此时DOM不完整，所以应该让函数在网页加载完毕后立即执行//网页加载完会触发onload事件，让这个事件与window对象相关联//如果使用window.onload = func 则只有最后一个绑定的函数会被实际执行addLoadEvent(prepareGallery);addLoadEvent(showPic);//共享onload事件function addLoadEvent(func) { var o
复制链接

扫一扫