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

现在就来梳理下头绪：

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. 向上管理(manage up)的的五条原则

    绝大多数的工程师很可能很少关注代码之外的能力,摸爬滚打了将近10年后,我才领悟到除了技术之外还有一项最重要的修炼,那就是"领导与被领导"学(其中包含了换位思考,但不局限于换位思考) ...

  2. oracle查看用户所占用的表空间

    select * from (select owner || '.' || tablespace_name name, sum(b) g from (select owner, t.segment_n ...

  3. spl之文件处理

    spl是php标准库的缩写 spl文件处理类库: SplFileInfo  //是一个类用以获取文件的各种信息SplFileInfo的所有方法如下 方法名            - ---   说明2 ...

  4. 偶尔发生File has been moved - cannot be read again,其实是个误解

    使用poi上传.xlsx文件时,出现如下错误 Exception in thread "pool-3-thread-2" java.lang.IllegalStateExcepti ...

  5. Lowest Common Ancestor of a Binary Tree leetcode

    Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...

  6. swift -- 单例

    方式一: (类似OC) class SingletonDispatch{ class var shareInstance : SingletonDispatch { //结构体 struct Stat ...

  7. ３－１４　JS基础知识01

    JavaScript的组成: JS特点:JS是一门 脚本语言:不需要编译编译:把代码转化成计算机所认知的二进制语言.JS是一门弱类型语言:声明变量都用varJS是一种动态语言:认知当前的着这个变量到底 ...

  8. 关于html中利用jQuery选择子节点方法总结——待续

    好几次碰到类似的要求,每次用的都不一样,在之前的面试的时候就被问到,突然觉得虽然自己做过但是说不出头绪,只能回答什么parent(),next()等等.所以想整理一下. 1.需求一:同页面有两个表格, ...

  9. android学习——环境的搭建

    1.安装JDK(java开发工具箱) 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html(根据自己需要下载) ...

  10. eclipse中以debug方式启动tomcat报错

    在eclipse中debug  Tomcat报错,错误如下: FATAL ERROR in native method: JDWP No transports initialized, jvmtiEr ...