使用的编辑器是 Hbuilder, 浏览器是 Chrome.
html 和 JavaScript 代码分离, 会使得修改网页功能和代码的阅读与维护会轻松的许多, 不用在 DOM 中阅读大量的 JavaScript 代码.
文中主要是一个图片库的实现, 是在学习 JavaScript DOM 编程艺术一书时的随笔, 如有理解不对, 或是有明显错误的地方还请指出.
HTML 的代码部分:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- Image Gallery
- </title>
- <link rel="stylesheet" type="text/CSS" href="layout.css" />
- </head>
- <body>
- <h1>
- Snapshots
- </h1>
- <ul id="imagegallery">
- <li>
- <a href="images/1.png" title="shi lai mu">
- 史莱姆
- </a>
- </li>
- <li>
- <a href="images/2.png" title="long wang">
- 龙王
- </a>
- </li>
- <li>
- <a href="images/3.png" title="qi mu nan xiong">
- 齐木楠雄
- </a>
- </li>
- <li>
- <a href="images/4.png" title="1988">
- 1988
- </a>
- </li>
- </ul>
- <!-- <img id="placeholder" src="images/6.png" alt="my image gallery">
- <p id="description">Choose an image</p> -->
- <script src="showPic.js" type="text/javascript" charset="utf-8">
- </script>
- </body>
- </HTML>
JavaScript 代码部分:
- //DOM 读取完即加载
- addLoadEvent(preparePlaceholder);
- addLoadEvent(prepareGallery);
- // 增加多个 Windows.onload
- function addLoadEvent(func) {
- var oldonload = Windows.onload;// 将 Windows.onload 中的函数赋给 oldonload
- if (typeof Windows.onload != 'function') {
- // 如果 Windows.onload 不是函数类型, 即其中没有函数则将需要 onload 的函数赋值给它
- Windows.onload = func;
- } else {
- // 否则将两个函数合并
- Windows.onload = function() {
- oldonload();
- func();
- }
- }
- }
- // 插入到目标元素后面
- function insertAfter(newElement, targetElement) {
- var parent = targetElement.parentNode;// 获取目标元素的父节点
- if (targetElement == parent.lastChild) {
- // 如果父节点的最后一个子节点是目标节点, 则直接添加新元素节点
- parent.appendChild(newElement);
- } else {
- // 否则将新节点加在目标元素的后一个节点之前, 即放在目标元素之后
- parent.insertBefore(newElement, targetElement.nextSibling);
- }
- }
- // 预加载 imagegallery 中的属性元素
- function prepareGallery() {
- if (!document.getElementsByTagName) {
- return false;
- } // 验证 getElementsByTagName 是否可以使用
- if (!document.getElementById) {
- return false;
- } // 验证 getElementByID 是否可以使用
- if (!document.getElementById("imagegallery")) {
- return false;
- } // 验证 "imagegallery"id 是否存在
- var gallery = document.getElementById("imagegallery"); // 获取 id 名为 "imagegallery" 的数组
- var links = gallery.getElementsByTagName("a"); // 获取数组里的 "a" 标签数组
- for (var i = 0; i < links.length; i++) {
- // 对 "a" 数组遍历并逐个操作
- links[i].onclick = function() {
- return !showPic(this); // 平稳退化
- }
- //links[i].onkeypress = links[i].onclick; // 没有也行...
- }
- }
- // 初始化占位符的相关属性
- function preparePlaceholder(){
- if(!document.getElementById) return false;
- if(!document.createElement) return false;
- if(!document.createTextNode) return false;
- if(!document.getElementById("imagegallery")) return false; // 判断是否可以使用这些函数以及 ID
- // 新建占位图片 设置占位图片的属性节点
- var placeholder = document.createElement("img");
- placeholder.setAttribute("id", "placeholder");
- placeholder.setAttribute("src", "images/6.png");
- placeholder.setAttribute("alt", "my image gallery");
- // 新建占位字符 设置占位字符的属性节点和文字节点
- var description = document.createElement("p");
- description.setAttribute("id", "description");
- var txt = document.createTextNode("Choose an image");
- description.appendChild(txt);
- // 找到图片列表并将占位图片, 占位文字依次放在后面
- var gallery = document.getElementById("imagegallery");
- insertAfter(placeholder, gallery);
- insertAfter(description, placeholder);
- }
- // 主要体现平稳退化思想
- function showPic(whichpic) {
- if (!document.getElementById("placeholder")) {
- return false;
- } // 验证 "placeholder"id 是否存在
- var source = whichpic.getAttribute("href"); // 获取被点击的链接的目标地址
- var placeholder = document.getElementById("placeholder"); // 获取占位图片的元素 ID 待操作
- placeholder.setAttribute("src", source); // 将获取到的被点击的链接地址赋值给占位图片的链接地址
- if (document.getElementById("description")) {
- // 判断 "description"id 是否存在, 不存在则不做操作, 存在则修改, 属于锦上添花, 代码不执行无较大影响
- var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; // 确定被点击链接的 title 值, 没有则赋为空字符
- var description = document.getElementById("description"); // 获取字符占位符
- if (description.firstChild.nodeType == 3) {
- // 判断子节点的类型是否为字符节点
- description.firstChild.nodeValue = text; // 将被点击链接的 title 值赋值给占位符的字符节点
- }
- }
- return true;
- }
CSS 代码部分:
body{ font-family: "helvetica", "Arial", serif; color:#333; background-color: #ccc; margin: 1em; } h1{ color: #333; background-color: transparent; } a{ color: #c60; background-color: transparent; font-weight: bold; text-decoration: none ; } ul{ padding: 0; } img{ display: block; clear: both; }
复制到编译器需要整理代码格式.
来源: https://www.cnblogs.com/sakuraneo/p/10898785.html