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

现在就来梳理下头绪：

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. C#中static void Main(string[] args) 参数详解

    学习C#编程最常见的示例程序是在控制台应用程序中输出Hello World! using System; namespace DemoMainArgs { class Program { static ...

  2. Isomorphic Strings leetcode

    Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...

  3. 获取bing图片并自动设置为电脑桌面背景（C++完整开源程序）

    众所周知,bing搜索网站首页每日会更新一张图片,张张漂亮(额,也有一些不合我口味的),特别适合用来做电脑壁纸. 我们想要将bing网站背景图片设置为电脑桌面背景的通常做法是: 上网,搜索bing 找 ...

  4. jQuery获取Select选择的Text和Value

     jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code...});   //为S ...

  5. JQuery OOP 及 OOP思想的简易理解

    在项目维护的时候,看到通篇的function实际上是非常费(痛)劲(苦),个人对于前端也不是特别熟悉,就想着JQuery能否也建立OOP的写法? 目的便于日后代码维护管理,就算不为了自己,日后交接后也 ...

  6. Web API框架学习——路由（一）

    HttpConfiguration(ASP.NET Web API管道的配置是通过HttpConfiguration来完成) : 包括路由注册在内的对整个ASP.NET Web API管道的配置是通过 ...

  7. mui学习链接

    http://dev.dcloud.net.cn/mui/snippet/ http://www.bcty365.com/content-146-2453-1.html hbuilder转rem值: ...

  8. 解决mysql启动时报The server quit without updating PID file 的错误(转)

    1.一般是权限问题,把用户和组改为mysql就可以了. chown -R mysql:mysql  /var/lib/mysql 2.在启动mysql时报下列错误 [root@mysqld2 ~]#  ...

  9. mac下重启apach

    打开终端 重启apache:sudo /usr/sbin/apachectl restart 关闭apache:sudo /usr/sbin/apachectl stop 开启apache:sudo ...

  10. dubbo的简单实现

    一 是什么 一般网站架构随着业务的发展,逻辑越来越复杂,数据量越来越大,交互越来越多,dubbo使前后端分离,完成负载均衡. dubbo架构图 节点角色说明: Provider: 暴露服务的服务提供方 ...