【读书笔记】JavaScript图片库

来源：互联网发布：达梦数据库客户端工具编辑：程序博客网时间：2024/05/22 01:50

利用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]

0 0