js学习笔记图片库实例

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js学习笔记图片库实例相关的知识，希望对你有一定的参考价值。

HTML结构如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Shopping list</title>
</head>
<script type="text/javascript" src="scripts/showPic.js"></script>
<link rel="stylesheet" href="scripts/style.css" media="screen">
<body>
<h1>Snapshots</h1>

<ul id="imagegallery">
  <li><a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a></li>
  <li><a href="images/coffee.jpg" title="A cup of black coffee">Coffee</a></li>
  <li><a href="images/rose.jpg" title="A red, red rose">Rose</a></li>
  <li><a href="images/bigben.jpg" title="The famous clock">Big Ben</a></li>
</ul>

<img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />
<p id="description">Choose an image.</p>

</body>
</html>

 

JS代码如下

function showPic(whichpic)  /*whichpic代表着一个元素节点，具体指向某个图片的<a>元素*/
 {
     if(!document.getElementById("placeholder")) return false;/*检查id为placeholder元素*/
     var source = whichpic.getAttribute("href"); /*获取a元素上的图片文件路径 将路径存入变量source*/
     var placeholder = document.getElementById("placeholder"); /*获取占位符图 存入变量placeholder*/
     if(placeholder.nodeName != "IMG") return false;/*检查变量placeholder的图片元素*/
     placeholder.setAttribute("src",source);  /*对占位符图片路径刷新*/
     
     if(document.getElementById("description")) /*检查id为description元素*/
     {
         var text = whichpic.getAttribute("title")?whichpic.getAttribute("title"):""; /*如果a元素上有title则赋值title元素，如果没有，则赋值空字符串*/
         var description = document.getElementById("description");
         if(description.firstChild.nodeType == 3)
         {
            description.firstChild.nodeValue = text;  /*把description对象的第一个子节点的nodeValue属性值设置为变量text的值。*/
         }
     }
     return true;
 }


function prepareGallery()
{
    if(!document.getElementsByTagName)return false;/*检查getElementsByTagName方法*/
    if(!document.getElementById)return false;/*检查getElementById方法*/
    if(!document.getElementById("imagegallery"))return false;/*检查imagegaller元素是否存在*/
    
    var gallery = document.getElementById("imagegallery"); /*获取imagegallery id赋值给gallery*/
    var links = gallery.getElementsByTagName("a");/*获取gallery的a链接元素赋值给links*/
    
    /*for循环遍历links数组*/
    for(var i=0; i<links.length; i++)
    {
        links[i].onclick = function()       /*每次点击执行showPic()函数*/
        {
            return showPic(this)?false:true; /*判断默认行为*/
        }
    }
}
 

/*
共享onlond事件，封装成一个函数,@func是页面加载时需要执行的那个函数。
如果window.onload在页面加载时还没有绑定任何函数，就把需要执行的函数添加给它、
如果这个处理函数已经绑定了函数，就把新函数追加到现有指令的末尾
*/
function addLoadEvent(func)
{
    var oldonload = window.onload; /*把window.onload事件处理函数存入变量oldonload*/
    if(typeof window.onload != ‘function‘)
    {
        window.onload = func;
    }else
     {
        window.onload = function()    
        {
            oldonload();
            func();
        }
     }
}
addLoadEvent(prepareGallery);

首先是showPic函数

定义source变量获取a元素的路径，再定义placeholder的元素获取id为placeholder的占位符图片。

if(!document.getElementById("placeholder")) return false;这段代码用于检查id为placeholder元素是否存在；

if(placeholder.nodeName != "IMG") return false;则检查变量placeholder的图片元素是否存在；

placeholder.setAttribute("src",source);  则对占位符图片路径刷新；

接下来if(document.getElementById("description")) 判断id为description元素是否存在，如果存在则修改图片文字；

var text = whichpic.getAttribute("title")?whichpic.getAttribute("title"):""; 定义变量text判断whichpic的a元素上有title则赋值title值，如果没有，则赋值空字符串；

var description = document.getElementById("description"); 获取id为description并赋值变量description；

if(description.firstChild.nodeType == 3)判断description元素的第一个子元素是否为一个文本节点。（nodeType是用来获得当前节点对象的类型。文本text=3 ）

description.firstChild.nodeValue = text;  把description对象的第一个子节点的nodeValue属性值设置为变量text的值。

 

然后是prepareGallery函数

if(!document.getElementsByTagName)return false;
if(!document.getElementById)return false;
if(!document.getElementById("imagegallery"))return false;

前两段代码分别检查getElementsByTagName和getElementById方法，第三段代码价差id为imagegallery元素是否存在。

var gallery = document.getElementById("imagegallery"); 获取imagegallery id赋值给gallery
var links = gallery.getElementsByTagName("a");获取gallery的a链接元素赋值给links

for循环遍历

return showPic(this)?false:true;判断浏览器的默认行为，showPic(this)里的this 指的是当前指定元素，也就是links[i]。

以上是关于js学习笔记图片库实例的主要内容，如果未能解决你的问题，请参考以下文章

学习笔记：python3，代码片段（2017）

Vue.js 源码学习笔记

AngularJS入门学习笔记一

Node.js学习笔记

Xitrum学习笔记08 - JavaScript and JSON

vue.js学习笔记1