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

现在就来梳理下头绪：

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. 1821: [JSOI2010]Group 部落划分 Group

    1821: [JSOI2010]Group 部落划分 Group Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1308  Solved: 627[Su ...

  2. python + selenium <一>

    python 安装 python 下载地址: http://python.org/getit/ ez_setup.py 下载地址: https://pypi.python.org/packages/s ...

  3. Knockoutjs：Component and Custom Elements（翻译文章）

    Knockoutjs 的Components 是一种自定义的组件,它以一种强大.简介的方式将你自己的ui代码组织成一种单独的.可重用的模块,自定义的组件(Component)有以下特点: 1.可以替代 ...

  4. Win10上编译CoreCLR的Windows和Linux版本

    一.编译环境 首先,不管是Windows还是Linux版本CoreCLR的编译,都是在Windows10上进行的. 二.CoreCLR for Windows 在Windows上做编译怎么能少得了Vi ...

  5. PHP流程管理，堪比小小程序

    这个流程管理是从用户登录界面开始,然后提交申请,页面逐级审核通过.这个做起来其实挺简单,只是在某些逻辑方面需要 好好考虑一下. 登录页面就不再多说了,如果要存session的话,我们可以建一个假的登录 ...

  6. javaScript绑定事件委托 demo

    事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存, 而且不是每个事件都会被 点击执行. 由此 事件委托 可以优化事件绑定行为.. 事件逐层冒泡 ...

  7. yii2邮件配置教程，报Expected response code 250 but got code "553"原因

    main.php(或main-local.php)中的邮件配置如下: 'mailer' => [ 'class' => 'yii\swiftmailer\Mailer', 'viewPat ...

  8. python遍历一个目录，输出所有文件名

    python遍历一个目录,输出所有文件名 python os模块 os import os  def GetFileList(dir, fileList):  newDir = dir  if os. ...

  9. Spark2.1.0分布式集群安装

    一.依赖文件安装 1.1 JDK 参见博文:http://www.cnblogs.com/liugh/p/6623530.html 1.2 Hadoop 参见博文:http://www.cnblogs ...

  10. 【一通百通】c/php的printf用法

    1.先说说PHP printf()函数: printf()函数的调用格式为: printf("<格式化字符串>", <参量表>); %d 十进制有符号整数  ...