JavaScript小白基础入门-js dom编程艺术3-进阶版图片库包含css、js文件源代码

本文链接：https://blog.csdn.net/qq_43618981/article/details/106434967

原来写JavaScript也是那么小心翼翼的，可能是因为问题太多了，然后就需要各种做好铺垫，为了优化性能还是挺值的，敲敲敲的同时也是要想想想的（锤脑门确实挺响的）。不同浏览器还有兼容问题，还好我出生在“和平”年代，以前那啥啥浏览器大战已经结束了，但是还是留下大大小小的问题。又会有一些因为文档修改，需要改动css和js代码，所以尽量分离，dei记住，连事件处理(onclick等)也得搬到外部文件里去。

在这里插入图片描述
这是基础图片库的进阶版，动手做做吧，按照书里划分的顺序解决问题，还是挺靠谱的。

平稳退化
分离JavaScript
向后兼容
性能考虑

在这里插入图片描述
js文件

function showPic(whichPic){
  //解决所有假设，尽量不用假设
  //假设replace元素存在；假设picName元素存在
  //假设title属性存在；假设replace元素是<img>；假设picName的子节点是文本节点
  if(!document.getElementById("replace")) return false;
  //更改图片
  var picSourse = whichPic.getAttribute("src");//获取图片链接
  var replace = document.getElementById("replace");//获取占位图片元素
  if(replace.nodeName != 'IMG') return false;//假设replace元素是<img>
  replace.setAttribute("src",picSourse);//修改占位图片的src为选择的图片链接
  //更改图片标题
  if(document.getElementById("picName")){
    var picName = document.getElementById("picName");//获取图片名称元素
    var text = whichPic.getAttribute("title") ? whichPic.getAttribute("title") : "";//假设title属性存在
    if(picName.firstChild.nodeType == 3){//假设picName的子节点是文本节点
      picName.firstChild.nodeValue = text;
    }
  }
  return true;
}

function addShowPic(){
  //向后兼容：开头检测浏览器是否支持DOM提供的一些方法和属性,不存在则退出；若不存在查询的元素，也退出
  if(!document.getElementsByTagName) return false;
  if(!document.getElementById) return false;
  if(!document.getElementById("content")) return false;
  var content = document.getElementById("content");
  var links = content.getElementsByTagName("img");
  for(var i = 0; i < links.length; i++){
    links[i].onclick = function(){//用匿名函数赋值给事件处理函数
      showPic(this);
      return !showPic(this);
    }
  }
}

/**
 * window.onload = firstFunction();
 * window.onload = secondFunction();//只会执行最后一个（这里是secondFunction()）
 * 
 * 若有多个函数要绑定在window.onload函数上时,可以用匿名函数容纳多个函数，
 * window.onload = function(){
 *  firstFunction();
 *  secondFunction();
 * }
*/

/**
 * 弹性最佳的解决方案：
 * function addLoadEvent(func){
 *  var oldonload = window.onload;
 *  if(typeof window.onload != 'function'){
 *    window.onload = func;//若window.onload事件还没添加函数，就直接添加函数
 *  }else{
 *    window.onload = function(){
 *      oldonload();
 *      func();
 *    }
 *  }
 * }
 * 调用时执行：
 * addLoadEvent(firstFunction);
 * addLoadEvent(secondFunction);
*/

css文件

h5{
  display:inline-block; 
  margin: 0;
  margin-bottom: 10px;
  padding: 6px 10px;
  background-color: orange;
}
#container{
  display: flex;
  flex-direction: wrap;
  justify-content: flex-start;
}
ul{
  /* width: 300px; */
  padding: 0;
  margin: 0;
  background: black;
}
li{
  position: relative;
  display: flex;
  justify-content: space-between;
  list-style: none;
}
li img{
  height: 50px;
  width: 100px;
}
.arrow{
  position: absolute;
  right: 0px;
  width: 12px;
  height: 12px;
  margin-top: 16px;
  margin-right: 10px;
  border-top: 3px white solid ;
  border-right: 3px white solid ;
  transform: rotate(45deg);
}
a{
  flex: 1;
  display: block;
  color: white;
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  padding-right: 50px;
  text-decoration: none;
  font-size: 16px;
}
li img:hover{
  height: 60px;
}
#showArea{
  position: relative;
  height: 250px;
}
#picName{
  position: absolute;
  top: 0;
  left: 10px;
  color: white;
}
#replace{
  height: 250px;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/showPic.css">
</head>
<body>
  <h5>基础图片库</h5>
<div id="container">
  <ul id="content">
    <li>
      <img src="image/111.gif" title="LOVE野良神" alt="LOVE野良神"></img>
      <span class="arrow"></span>
    </li>
    <li>
      <img src="image/222.jpg" title="野良神好帅鸭" alt="野良神好帅鸭"></img>
      <span class="arrow"></span>
    </li>
    <li>
      <img src="image/333.jpg" title="野良神，我是你的小迷妹" alt="野良神，我是你的小迷妹"></img>
      <span class="arrow"></span>
    </li>
    <li>
      <img src="image/444.jpg" title="野良神，你们怎么不在一起" alt="野良神，你们怎么不在一起"></img>
      <span class="arrow"></span>
    </li>
    <li>
      <img src="image/555.gif" title="野良神，你好逗哦" alt="野良神，你好逗哦"></img>
      <span class="arrow"></span>
    </li> 
  </ul>
  <div id="showArea">
    <p id="picName">点连接改变图片</p>
    <img id="replace" src="./image/repalce.gif" alt="小肥宅推荐">
  </div>
</div>
  <script src="./js/showPic.js"></script>
  <script>
    window.onload = addShowPic();
    // addLoadEvent(addShowPic);
  </script>
</body>
</html>