这个知识点其实也简单，（当然是在理清思路的情况下），在没预习的情况下听的还真是艰难，上课以来唯一的一次懵逼了一天，感觉乱乱的，全是新属性，所以今晚的我破天荒的熬夜敲代码，一定要弄懂！

现在就来梳理下头绪：

1、body里面的元素或者图片先构建好，在我们需要对其进行加一些特效的时候，这时候我们就需要用到js中的DOM对象模型；

先获取页面上需要加特效的元素,这里有三种方式,分别是:id(document.getElementById() )  标签 (  document.getElementByTagName())   类名 ( document.getElementByClassName())   .不过类名有浏览器兼容问题,一般不用,除非标签样式需要特殊处理.

2   事件处理

这一步对上一部获取的元素进行特效处理,这时候就需要用到函数了; 注册事件有行内式和内嵌式两种,行内式感觉属性会有点乱,(个人感觉),内嵌式的话简洁明了,一看就懂. 这里举个例子:

内嵌式 :

<body>

<a href="images/1.jpg"><img src="data:images/1-small.jpg"></a>
<a href="images/2.jpg"><img src="data:images/2-small.jpg"></a>
<a href="images/3.jpg"><img src="data:images/3-small.jpg"></a>
<a href="images/4.jpg"><img src="data:images/4-small.jpg"></a>
<a href="images/5.jpg"><img src="data:images/5-small.jpg"></a>

<script>

var img=document.getElementById("img";);
var links=document.getElementsByTagName("a";
for((var i=0;i<links.length;i++){){
    var link=links[i];
    link.onclick=function(){(){
        img.src=this.href;
        return false;
     }
};
    }
}</script>

</body>

行内式:

</head>
<body>
<a href="images/1.jpg" onclick="turn(this);return false;" id="a1"><img src="data:images/1-small.jpg"></a>
<a href="images/2.jpg" onclick="turn(this);return false;" id="a2"><img src="data:images/2-small.jpg"></a>
<a href="images/3.jpg" onclick="turn(this);return false;" id="a3"><img src="data:images/3-small.jpg"></a>
<a href="images/4.jpg" onclick="turn(this);return false;" id="a4"><img src="data:images/4-small.jpg"></a>
<a href="images/5.jpg" onclick="turn(this);return false;" id="a5"><img src="data:images/5-small.jpg"></a>

<img src="data:images/placeholder.png" id="img" width="600">

<script>
    var img= document.getElementById("img");

    function turn(link){){
        img.src=link.href;
    };
    }

</script>

以上就是今天学的重点,多敲了几遍,慢慢补充吧!晚安 .

js中元素（图片）切换和隐藏显示问题的更多相关文章

  1. vue.js中引入图片

    vue中引入图片 前言:vue中引入图片时,会显示不出来,除非在css中引入.而在template中或者js动态引入时,会显示不出图片. 解决一 图片通过后端返回引入网络图片路径即可. <div ...

  2. 在WPF中实现图片一边下载一边显示

    原文 在WPF中实现图片一边下载一边显示 当我们上网查看一个较大的图片时,浏览器能一边下载一边显示,这样用户体验是比较好的,但在WPF程序中,当我们通过如下方式显示一幅图片时: img.Source ...

  3. Android 使用ContentProvider扫描手机中的图片，仿微信显示本地图片效果

    版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/1873 ...

  4. HTML中动态图片切换JQuery实现

    相信很多同学都注意到了,各大新闻或者娱乐网站都含有动态图片切换,那个漂亮的感觉让刚刚学习html的人,都非常好奇和心动.那下面就让我们看一下到底如何实现动态图片切换呢?看一下百度贴吧的效果图吧~ // ...

  5. Vue.js中的图片引用路径问题

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一: 在data里面定义好图片路径: /*错误写法*/ imgUrl:'../assets/logo.png' 在templat ...

  6. 从零开始学习Node.js例子三 图片上传和显示

    index.js var server = require("./server"); var router = require("./router"); var ...

  7. JS检查当图片不存在时显示默认图片和键盘大小写键状态

    当图片不存在时显示默认图片 <script type="text/javascript"> var imgs = document.images; for(var i ...

  8. js中元素更新value页面体现不出来的原因

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JS组件系列——图片切换特效：简易抽奖系统

    前言:前两天在网上找组件,无意中发现了我们儿时游戏机效果的“SlotMachine组件”,浏览一遍下来,勾起了博主小时候满满的回忆.于是下定决定要研究下这么一个东西,不得不再次叹息开源社区的强大,原来 ...

随机推荐

  1. dfs算法

    一般bfs算法都是使用递归 //下面简单的代码 visited[Max]; dfs(_graph g,int vo){ print(vo); visited[vo]=1 for(int i=0;i&l ...

  2. cookie 详解 与 封装 实用的cookie

    在WEB前端开发中,cookie是必不可少的,网上也有很多开源的库可以使用,不过我还是想自己总结一下,做个笔记并封装一个实用的库.(1)什么是cookie? 从web 角度 cookie是用于存储信息 ...

  3. Linked List Cycle && Linked List Cycle II

    Given a linked list, return the node where the cycle begins. If there is no cycle, return null. Note ...

  4. 基于 Koa平台Node.js开发的KoaHub.js的控制器，模型，帮助方法自动加载

    koahub-loader koahub-loader是基于 Koa平台Node.js开发的KoaHub.js的koahub-loader控制器,模型,帮助方法自动加载 koahub loader I ...

  5. H5 Video + DOM

    HTML 5 Video + DOM HTML5 视频 HTML5 音频 HTML5 <video> - 使用 DOM 进行控制 HTML5 <video> 元素同样拥有方法. ...

  6. linux版powershell安装教程(.net core版)

    powershell 传教士 原创文章 始于2016-12-20,2017-03-15改.文章版本目前博客园为最新版. 允许转载,但必须保留名字和出处,否则追究法律责任 问:powershell二进制 ...

  7. BFS－基础简单的算法

    前言 有时候,当你并不了解很多高级算法的时候,搜索不失为一种解决问题的好方法,而且很多高级算法有或多或少的会用到搜索或者搜索的思想.可见,搜索是一个基础并且必须要掌握的算法. 在这篇文章中,会对BFS ...

  8. 文件上传组件FileUpload 以及邮箱搭建JavaMail

     文件上传与下载 1.1 文件上传 案例: 注册表单/保存商品等相关模块! --à 注册选择头像 / 商品图片 (数据库:存储图片路径 / 图片保存到服务器中指定的目录) 文件上传,要点: 前台: 1 ...

  9. Hibernate的映射文件中基于主键的双向1对1的关联

    1.Hibernate中采用基于主键的映射策略是,有一端(任意一端)的主键生成策略要是foreign,根据对方的主键来生成自己的主键,它的实体不能拥有自己的主键生成策略,如我的配置文件: <?x ...

  10. malloc函数及用法

    动态存储分配在数组一章中,曾介绍过数组的长度是预先定义好的,在整个程序中固定不变.C语言中不允许动态数组类型.例如:int n;scanf("%d",&n);int a[n ...