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

最新推荐文章于 2025-03-10 22:43:12 发布

2401_83817392

最新推荐文章于 2025-03-10 22:43:12 发布

阅读量356

点赞数 3

分类专栏：程序员文章标签： javascript 笔记开发语言

本文链接：https://blog.csdn.net/2401_83817392/article/details/137466547

版权

本文详细描述了如何使用JavaScript和DOM操作在网页上创建一个动态图片库，通过事件处理函数阻止链接跳转，显示对应图片，并在点击时显示图片描述。涉及了占位符、事件监听（如onclick）、阻止默认行为以及扩展功能如文本描述的添加。

摘要由CSDN通过智能技术生成

    <li><a href="image/whiteSnake/whiteSnake.webp" title="White Snake">White Snake</a></li>
    <li><a href="image/whiteSnake/doctor.webp" title="Doctor">Doctor</a></li>
    <li><a href="image/whiteSnake/greenSnake.webp" title="Green Snake">Green Snake</a></li>
</ui>


下面需要改进


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; 键盘松开 onkeyu

最低0.47元/天解锁文章

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

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