JavaScript DOM编程艺术 第四章 案例研究 笔记

Snapshot

• Monkey
• tulv
• Pig
• wujing
• White Snake
• Doctor
• Green Snake

• 
  下面需要改进
  
  
  1. 点击某个链接时，在界面展示，不跳转其他页面
  2. 点击某个链接时，显示对应的图片，以及原有的图片清单
  
  
  实现步骤：
  
  
  1. 增加占位符，用于显示图片，
  2. 点击链接时，拦截网页跳转
  3. 点击链接时，显示对应的图片，并隐藏原有的图片清单
  
  
  占位符代码
  
  
  
  

  

  
  ### 4.4. JavaScript函数
  
  
  对 placeholder 图片的src属性进行赋值，即显示对应的图片。
  
  
  
  

  function showPic(whichPic) {
  document.getElementById(“placeholder”).setAttribute(“src”, whichPic.getAttribute(“href”));
  }

  
  ### 4.5 应用JavaScript函数
  
  
  将javascript函数命名为showPic.js，并放在与html文件同一目录下的scripts文件夹中。  
   在html文件中body标签中,引用该js文件。
  
  
  
  

  
  #### 4.5.1 事件处理函数(event handler)
  
  
  作用：特定事件发生时，调用特定JavaScript函数。
  
  
  如 鼠标悬停 onmouserover; 鼠标离开 onmouseout; 单击 onclick; 键盘按下 onkeydown; 键盘松开 onkeyup; 页面加载完成 onload; 页面卸载 onunload; 等等。
  
  
  在showPic函数中，我们需要在每个图片链接上添加onclick事件，并设置为showPic的参数，一个带href属性的图片对象。这里使用this关键字，表示当前的图片对象。
  
  
  
  

  <li><a href="image/toWest/monkey.webp" title="Monkey" onclick="showPic(this)">Monkey</a></li>
  

  
  #### 4.5.2 阻止默认行为
  
  
  当用户点击某个链接时，默认行为是跳转到另一个页面。我们需要阻止这个默认行为，只显示图片。
  
  
  事件处理函数工作机制：当事件发生时，事件处理函数被调用，并返回一个布尔值。如果返回true，则继续执行默认行为；如果返回false，则阻止默认行为。
  
  
  为了阻止点击图片时默认行为，我们需要返回false。
  
  
  
  

  <li><a href="image/toWest/monkey.webp" title="Monkey" onclick="showPic(this); return false;">Monkey</a></li>
  

  
  ### 4.6 对这个函数进行扩展
  
  
  效果： 利用JavaScript和DOM，实现图片切换效果，显示不同文本
  
  
  实现思路：从图片库取到图片title属性，并在网页显示
  
  
  
  

  var text = this.getAttribute("title");
  

  
  #### 4.6.1 childNodes属性
  
  
  childNodes属性返回一个包含当前元素所有子节点的NodeList对象。  
   查看body元素的全体子元素的个数
  
  
  
  

  function countBodyChildren() {
  var body = document.getElementsByTagName(“body”)[0];
  var count = body.childNodes.length;
  alert(“body元素的子元素个数：” + count);
  }

  
  当界面加载时，调用countBodyChildren函数，显示body元素的子元素个数。
  
  
  
  

  window.onload = countBodyChildren();

  
  childNodes属性返回一个包含当前元素所有子节点, 包括文本节点。所以显示的子元素个数会比标签个数多。
  
  
  ### 4.7 nodeType属性
  
  
  nodeType属性返回一个整数，表示节点的类型。  
   nodeType常见的取值有：
  
  
  1. 1：元素节点
  2. 2：属性节点
  3. 3：文本节点
  
  
  这意味着，可以让函数只对特定类型的节点进行操作。
  
  
  ### 4.8 在文本中增加描述
  
  
  通过一个文本节点，维护图片库函数，将titlet属性的值显示在图片下方。,为了实现，在gallery.html文件中，增加描述
  
  
  
  

  <p id="description">选择一个图片</p>
  

  
  获取description
  
  
  
  

  var description = document.getElementById("description");
  

  
  #### 4.9.1 nodeValue属性
  
  
  nodeValue属性返回或设置当前节点的文本内容  
   但是，nodeValue属性获取description节点的文本内容时，会返回null。  
   因为标签p没有文本内容，所以返回null。
  
  
  而标签p的第一个子节点的nodeValue值才是其文本内容。
  
  
  
  

  var description = document.getElementById("description");
  var text = description.childNodes[0].nodeValue;
  alert(text);
  

  
  #### 4.8.2 firstChild属性和lastChild属性
  
  
  firstChild属性返回或设置当前元素的第一个子节点。  
   lastChild属性返回或设置当前元素的最后一个子节点。  
   那么，设置description节点的文本内容，可以用firstChild属性。
  
  
  最终可以得到showPic函数如下：
  
  
  
  

  function showPic(whichPic) {
  // 展示图片
  document.getElementById(“placeholder”).setAttribute(“src”, whichPic.getAttribute(“href”));
  // 显示描述
  var description = document.getElementById(“description”);
  var text = whichPic.getAttribute(“title”);
  description.firstChild.nodeValue = text;

  
  ### 4.9 总结
  
  
  本章介绍了JavaScript图片库的实现，包括标记、JavaScript函数、事件处理函数、阻止默认行为、扩展功能等。
  
  
  通过本章的学习，可以更好地理解JavaScript的DOM操作，以及事件处理函数的使用。
  
  
  DOM属性
  
  
  * childNodes：返回一个包含当前元素所有子节点的NodeList对象。
  * firstChild：返回或设置当前元素的第一个子节点。
  * lastChild：返回或设置当前元素的最后一个子节点。
  * nodeType：返回一个整数，表示节点的类型。
  * nodeValue：返回或设置当前节点的文本内容。
  
  
  ### 4.10 扩展阅读
  
  
  * [JavaScript DOM 事件]( )
  * [JavaScript DOM 节点类型]( )
  * [JavaScript DOM 节点操作]( )
  * [JavaScript DOM 节点属性]( )
  
  
  ### 4.11 参考
  
  
   **自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**
  
  **深知大多数Python工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**
  
  **因此收集整理了一份《2024年Python开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
  
  ![img](https://img-blog.csdnimg.cn/img_convert/b0efd422101ffa173c38fba0432ee07b.png)
  
  ![img](https://img-blog.csdnimg.cn/img_convert/f4ec32dfa618b4e01c92c72782ed5635.png)
  
  ![img](https://img-blog.csdnimg.cn/img_convert/61d1a60b6b96ba8c945c9d846fde0971.png)
  
  ![img](https://img-blog.csdnimg.cn/img_convert/956704bb0f005bc3767068ce13fc36ca.png)
  
  ![img](https://img-blog.csdnimg.cn/img_convert/6c361282296f86381401c05e862fe4e9.png)
  
  ![img](https://img-blog.csdnimg.cn/img_convert/9f49b566129f47b8a67243c1008edf79.png)
  
  **既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**
  
  **由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**
  
  **如果你觉得这些内容对你有帮助，可以扫码获取！！！（备注：Python）**
  
  
  ![img](https://img-blog.csdnimg.cn/img_convert/9f49b566129f47b8a67243c1008edf79.png)
  
  **既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**
  
  **由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**
  
  **如果你觉得这些内容对你有帮助，可以扫码获取！！！（备注：Python）**
  
  ![](https://img-blog.csdnimg.cn/img_convert/aa6b0eab88ebeceb8dcc318d0b7374ea.jpeg)