网站建设数据收集方法,互动网页设计,化妆品购物网站开发的意义,wordpress 分类目录代码主要内容#xff1a;编写一个优秀的标记文件编写一个JavaScript函数以显示用户想要查看的内容由标记出发函数调用使用几个新方法扩展这个JavaScript函数
学习过DOM#xff0c;我们用JavaScript和DOM去建立一个图片库。最好的办法是什么呢#xff1f;
利用JavaScript来建立图…主要内容编写一个优秀的标记文件编写一个JavaScript函数以显示用户想要查看的内容由标记出发函数调用使用几个新方法扩展这个JavaScript函数
学习过DOM我们用JavaScript和DOM去建立一个图片库。最好的办法是什么呢
利用JavaScript来建立图片库是最佳的选择把整个图片库的浏览链接集中安排在图片库主页里只在用户点击了这个主页里的某个图片链接时才把相应的图片传送给他。首先找到四张图片把它们修正成最适合于用浏览器来查看的图片就是400像素宽*300像素高。
4.1、标记
第一项工作是为一些图片创建一个链接清单。可以让这些图片按照特定顺序排列使用无序清单列表ul来列出那些链接。图片也可以事先排好序那就使用一个有序清单元素ol来标记这些图片链接。
代码:
!DOCTYPE html
html langen
headmeta charsetutf-8/metatitle Image Gallery/title
/head
bodyh1Snapshots/h1ullia href images/fireworks.jpg title “ A fireworks display”Fireworks/a/lilia href images/coffee.jpg title “ A cup of black coffee”Coffee/a/lilia href images/rose.jpg title “ A redred rose”Rose/a/lilia href images/bigben.jpg title “ The famous clock”Big Ben/a/li/ul
/body
我们把这些标记保存到gallery.html文件并把图片集中到目录images里。我的images目录和gallery.html文件位于同一目录。
当然这并不是一个令人满意的网页。尤其是它的默认行为还不太理想。我们提出几点需要改进的地方。当点击某个链接时我希望能留在这个网页而不是转到另一个窗口。当点击某个链接时我希望能在这个网页上同时看到那张图片以及原有的图片清单。
为了实现我们提出的几点改进我们要进行哪些步骤呢通过增加一个“占位符”图片的方法在这个主页上位图片预留一个浏览区域。在点击某个链接时拦截这个网页的默认行为。在点击某个拦截时把”占位符“替换为与那个链接相对应的图片。
我们先来解决”占位符“图片的问题。选用了一个类似于名片的图片。
把下列代码添加到图片清单的末尾
img id placeholder src images/placeholder.gif alt my image gallery/如上图所示那么“占位符图片”我们已经搞好了。
下面开始编写JavaScrpit代码。
4.2 JavaScript为了把“占位符”图片替换为想要查看的图片需要改变它的src属性。setAttribute是完成这项工作的最佳选择而我将利用这个方法写一个函数。这个函数只有一个参数就是一个图片链接。它通过改变“占位符图片”的src属性的办法将其替换为参数照片。
1、首先需要给函数起一个名字简明扼要。我们将其命名为showPic。还需要给这个函数参数起一个名字。命名为whichpic
function showPic(whichpic)
whichpic 代表着一个元素节点具体的说那是一个指向某个图片的a元素。我需要分解出图片的文件路径这可以通过在whichpic元素上调用getAttribute得到。只要把href作为参数传递给getAttribute就行了whichpic.getAttribute(href)
我们把这个路径存入变量source:var source whichpic.getAttribute(href);
2、获取“占位符”图片这对getElementById来说很容易
document.getElementById(placeholder)
我们可以把获得的这个元素赋给变量placeholder:
var placeholder document.getElementById(placeholder)
我们声明了两个变量 placeholder和 source。这可以让脚本简明易读。
3、我将使用setAttribute对placeholder元素的src属性进行刷新。setAttribute函数有两个参数一个是属性名一个是属性的值。具体到这个例子我想对src属性进行设置所以第一个参数是src第二个参数是src属性的值我们已经把它保存到source变量里了。
placeholder.setAttribute(src,source)setAttribute方法是“第1级DOM”DOM的组成部分它可以设置任意元素节点的任意属性。
第1级DOM的优势是可移植性好。DOM是一种适用于多种环境和多种应用程序设计语言的通用型API。
4.3应用这个JavaScript函数
我们来总结一下这个函数
function showPic(whichpic){var source whichpic.getAttribute(href);var placeholder document.getElementById(placeholder);placeholder.setAttribute(src,source);
}
下面我们在图片库中使用它。我们将其保存为扩展名为showPic.js的文本文件。
我们把所有的图片集中放在一个images子目录里把所有的JavaScript脚本文件集中放在一个子目录srcipts里。
现在我们需要在图片库文档里插入一个链接来引用这个JavaScript脚本文件。我们将下面这行代码插入到HTML文档的/body标签之前
script type text/javascript src scripts/showPic.js/script
此外我们还需要为图片列表的链接添加行为了也就是事件处理函数event handler才能达成目标。
事件处理函数
事件处理函数的作用是在特定事件发生时调用特定的JavaScript代码。例如想在鼠标指针悬停在某个元素上时触发一个动作就需要使用onmouseover事件处理函数如果想在鼠标指针离开某个元素时触发一个动作就需要使用onmouseout事件处理函数。我们想在用于点击某个链接时触发一个动作所以需要onclick事件处理函数。
showPic函数需要一个参数一个带有href属性的元素节点参数。当我们把Onclick事件处理函数嵌入到一个链接时需要把这个链接本身用作showPic函数的参数。
我们可以使用this关键字。大概意思就是这个对象。在这里this就表示“这个a元素节点”:showPicthis;
综上所述我们使用onclick事件处理函数来给链接添加行为。添加事件处理函数的语法如下所示
event JavaScript statement(s)请注意JavaScript代码包含在一对引号之间。我们可以把任意数量的JavaScript语句放在这对引号之间只要把各语句用分号隔开就行。onclick()事件就可以调用showPic方法了onclick showPic(this);
不过仅仅把事件处理函数放到一个图片列表中还会遇到一个问题点击链接时不仅showPic函数会被调用链接被点击的默认行为也会被调用。这意味着用户还是会被带到图片查看窗口。因此我们要阻止这个默认行为。我们来了解一下事件处理函数的工作机制。在给某个元素添加了事件处理函数后一旦事件发生相应的JavaScript代码就会得到执行。被调用的JavaScript代码可以返回一个值这个值将被传递给事件处理函数。例如当我们给某个链接添加一个onclick事件处理函数并让这个处理函数所触发的JavaScript代码返回布尔值true或false。这样一来当这个链接被点击时如果那段JavaScript代码返回的是trueonclick事件处理函数就认为“这个链接被点击了”就会跳转。相反如果返回的值是falseonclick事件处理函数就认为“这个链接没有被点击”不会跳转。我们可以验证一下添加一行代码a href https://www.baidu.com onclick return false;Click me/a
当点击这个链接时因为onclick事件处理函数所触发的JavaScript代码返回给它的值是false,所以这个链接的默认行为没有被触发就是不会跳转到百度。
同样我们在onclick事件处理函数所触发的JavaScript代码里增加一条return false语句就可以防止用户被带到目标链接窗口
onclick showPic(this);return false;下面是完整的代码
!DOCTYPE html
html langen
headmeta charsetutf-8/metatitle Image Gallery/title
/headbodyh1Snapshots/h1ullia href images/fireworks.jpg onclick showPic(this);return false; title “ A fireworks display”Fireworks/a/lilia href images/coffee.jpg onclick showPic(this);return false; title “ A cup of black coffee”Coffee/a/lilia href images/rose.jpg onclick showPic(this);return false; title “ A redred rose”Rose/a/lilia href images/bigben.jpg onclick showPic(this);return false; title “ The famous clock”Big Ben/a/lia href https://www.baidu.comοnclickreturn false;Click me/a/ulimg idplaceholder srcimages/placeholder.gif altmy image gallery/script typetext/javascript srcscripts/showPic.js/script
/body
如点击Big Ben4.4对这个函数进行扩展
在同一个网页上切换显示不同的文本。
图片库文档里的每个图片链接都有一个title属性。可以把这个属性取出来并让它和相应的图片一同显示在网页上。title属性的值可以通过getAttribute轻而易举的得到。
var text whichpic.getAttribute(title)
下面是DOM提供的几个新属性
childNodes属性在一个节点树上childNodes属性可以用来获取任何一个元素的所有子元素它是一个包含这个元素全部子元素的数组element.childNodes。
nodeType属性每个节点都有一个nodeType属性。元素节点的nodeType属性是1属性节点的nodeType属性是2文本节点的nodeType属性是3
nodeValue属性可以改变一个文本节点的值。
firstChild和lastChild属性。
下面是我们的一个小实例Html:
!DOCTYPE html
html langen
headmeta charsetutf-8/metatitle Image Gallery/titlelink relstylesheet typetext/css hrefcss/layout.css
/headbodyh1Snapshots/h1ullia href images/fireworks.jpg onclick showPic(this);return false;title “ A fireworks display”Fireworks/a/lilia href images/coffee.jpg onclick showPic(this);return false; title “ A cup of black coffee”Coffee/a/lilia href images/rose.jpg onclick showPic(this);return false; title “ A redred rose”Rose/a/lilia href images/bigben.jpg onclick showPic(this);return false; title “ The famous clock”Big Ben/a/lilia href https://www.baidu.com οnclickreturn true;Click me (baidu)/a/li/ulimg idplaceholder srcimages/placeholder.gif altmy image gallery/p id descriptionChoose an image. /pscript typetext/javascript srcscripts/showPic.js/script/body
JavaScript:
function showPic(whichpic){var source whichpic.getAttribute(href);var placeholder document.getElementById(placeholder);placeholder.setAttribute(src,source);var text whichpic.getAttribute(title);//当图片库页面的某个图片链接被点击时这个链接的title属性值将被提取并保存到text变量中var description document.getElementById(description);//得到id是description的p元素并把它保存到变量description里description.firstChild.nodeValue text;//把description对象的第一个节点的nodeValue属性值设置为变量text的值。alert(description.firstChild.nodeValue);}
function countBodyChildren(){var body_element document.getElementsByTagName(body)[0];//alert(body_element.nodeType);
}window.onload countBodyChildren;
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:blod;text-decoration:none;
}
ul{padding:0;
}
li{float:left;padding:1em;list-style:none;
}
img{display:block;clear:both;
}
主要内容是
1、如何利用DOM所提供的方法去编写图片库脚本。
2、如何利用事件处理函数把JavaScript代码与网页集成在一起。
