【读书笔记】JavaScript图片库

最新推荐文章于 2022-05-01 21:53:20 发布

hlinghoney

最新推荐文章于 2022-05-01 21:53:20 发布

阅读量504

点赞数

分类专栏： web前端开发

本文链接：https://blog.csdn.net/hlinghling/article/details/50781237

版权

web前端开发专栏收录该内容

35 篇文章 0 订阅

订阅专栏

利用JavaScript来创建图片库的最佳选择：把整个图片库的浏览链接集中安排在图片库主页里，只要用户点击主页的某个图片链接时才把相应的图片传送给他。

源码：
images.html

<!DOCtype html>
<html lang="en">
    <head>
        <meta charset="uft-8">
        <title>image gallery</title>
        <link rel="stylesheet" type="text/css" href="layout.css" media="screen" />

    </head>
        <body>
            <h1>Snapshots</h1>
            <ul>
                <li>
                    <a href="images/1.jpg" title="A fireworks display" onclick="showPic(this); return false;">firework</a>
                </li>
                <li>
                    <a href="images/2.jpg" title="A cup of black coffee " onclick="showPic(this); return false;">Coffee</a>
                </li>
                <li>
                    <a href="images/3.jpg" title="A red rose" onclick="showPic(this); return false;">Rose</a>
                </li>
                <li>
                    <a href="images/4.jpg" title="The famous clock" onclick="showPic(this); return false;">big ben</a>
                </li>
            </ul>
            <image id="placeholder" src="images/placeholder.jpg" alt="my image gallery"/>
            <p id="description">choose an image.</p>
            <script src="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){
    var source=whichpic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var text=whichpic.getAttribute("title");
    var description=document.getElementById("description");
    description.firstChild.nodeValue=text;

}

1.获取元素：

有三种DOM方法来获取元素节点，分别通过元素ID、通过标签名字和类名字来获取。

getElementById(id)：返回一个有着给定id属性值的元素节点对应的对象；

getElementByTagName(tag):返回一个对象数组，每个对象分别对应着文档里给定标签的一个元素，是只有一个参数的函数。参数是标签的名字。

getElementByClassName(class):通过class属性中的类名来访问元素。这是HTML5 DOM中新增的方法。

2.获取和设置属性：

object.getAttribute(attribute):getAttribute方法不属于document对象，智能通过元素节点对象调用。

object.setAttribute(attribute，value)：它允许我们对属性节点做出修改。

ps：通过setAttribute对文档做出修改后，在通过浏览器的view source（查看源代码）看到的认识改变前的属性值，setAttribute的修改不会反映在文档本身的源代码中。

DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文章的静态内容。（即对页面内容进行刷新时却不需要在浏览器里刷新页面）

3.事件处理函数及其扩展：

事件处理函数，在特定时刻发生时调用特定的JavaScript代码。

鼠标悬停在某个元素上时触发一个动作：onmouseover事件处理函数；
鼠标离开某个元素上时触发一个动作：onmouseout事件处理函数；
在用户点击某个链接时触发一个动作，使用onclick事件处理函数；

对这个函数进行扩展：

element.childNodes属性：获取任何一个元素的所有子元素。

function countBodyChildrem(){
    var body_element=document.getElementByTagName("body")[0];
    alert(body_element.childNodes.length);
}

nodeType属性
node.nodeType，nodeType的值为一个数字，nodeType属性共有12种可屈指，有三种具有实用价值。

元素节点的nodeType属性值是1；
属性节点的nodeType属性值为2；
文本节点的nodeType属性值为3；

nodeValue属性
node.nodeValue用来改变一个文本的节点的值。
firstChild和lastChild属性
firstChild是childNodes的第一个元素，lastChild是childNodes的最后一个元素。node.firstChild等价于node.nodeValue[0]