1:鼠标移入移出显示另一张图片  

  var yuanquan_1 = document.getElementById("yuanquan_1" ); 
  yuanquan_1. onmouseover = function () {
                     yuanquan_1.src = "img/youhuigoujiu-2.png";
                }
                yuanquan_1. onmouseout = function () {
                     yuanquan_1.src = "img/youhuigoujiu.png";
                }
 
2:点击元素显示内容,在点击该元素隐藏内容
  var tu_add_icon=document.getElementById("tu-add-icon");

  var tu_ul = document.getElementById("tu-ul" );
            tu_add_icon.addEventListener( "click",function () {
                   if (tu_ul.style .display=='none' ) {
                        tu_ul. style.display = 'block';
                  } else{
                        tu_ul. style.display = 'none';
                  }
            })
 
3:单选框radio切换
  var man = document .getElementById("man");
   var woman = document .getElementById("woman");
              man. onclick = function () {
                        man.checked = true;
                        woman.checked = false;
              }
              
              woman. onclick = function () {
                        woman.checked = true;
                        man.checked = false;
              }
 
 注:把input的type和name属性都设置为radio的时候可以直接有切换的效果
 

4:循环添加移入移出事件 

  var zizhi = document.getElementsByClassName("zizhi" );
; i<zizhi.length;i ++){
       zizhi[i].addEventListener( "mouseover",function (){
             this.style.width = "600px";
          this.style .height = "600px" ;
             this.style. position = "absolute" ;
;
       })
    }
 
; i<zizhi.length;i ++){
       zizhi[i].addEventListener( "mouseout",function (){
             this.style.width = "200px";
          this.style .height = "200px" ;
             this.style. position = "static" ;
       })
   }
 

5:点击选框全选  

function quanXuan() {
          var tu_li_quanxuan = document.getElementById("checkAll" );
          var duo_xuan = document.getElementsByClassName("tu-input" );
          var type = tu_li_quanxuan.checked;
                 if(type==true) {
; i < duo_xuan.length; i ++) {
                            if(duo_xuan[i].type == 'checkbox') {
                                duo_xuan[i].checked = true;
                           }
                     }
                } else {
; i < duo_xuan.length; i ++) {
                            if(duo_xuan[i].type == 'checkbox') {
                                duo_xuan[i].checked = false;
                           }
                     }
                }
           }
            
 
全选也可以这样写
    function quanXuan() {
           var tu_li_quanxuan = document.getElementById("checkAll" );
              var duo_xuan = document.getElementsByClassName("tu-input" );
              var type = tu_li_quanxuan.checked;
; i < duo_xuan.length; i ++) {
                           duo_xuan[i].checked = type;
                }
           }
 
有一个单选框没有选中,全选也不选中
    var tu_li_quanxuan = document.getElementById("checkAll" );
        var duo_xuan = document.getElementsByClassName("tu-input" );
; i < duo_xuan.length; i ++) {
                     duo_xuan[i].addEventListener( "click",function (){
                            if (this.checked== false) {
                                tu_li_quanxuan.checked =false;
                           }
                     })
                }
 
 
 
  
  

 
 

实际项目中积累的一些关于事件的简单应用JS代码段(能力有限,不喜轻喷,23333)的更多相关文章

  1. IE6中让png的icon图标也透明的完整代码段

    一个引用了在IE6中让img图标也可引用png图片的js插件代码的html是这样写的,兼容IE6: <a class="btn btn-select" href=" ...

  2. 解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号

    解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号 在设置中把"vetur.format.defaultFormatter.js": " ...

  3. vue项目中解决type=”file“ change事件只执行一次的问题

    问题描述 在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件 <template> <div class="h ...

  4. maven多module项目中千万不要引入其它模块的单元測试代码

    本文出处:http://blog.csdn.net/chaijunkun/article/details/35796335,转载请注明. 因为本人不定期会整理相关博文,会对对应内容作出完好. 因此强烈 ...

  5. 再eclipse的javaweb项目中添加JQuery文件时jquery-2.1.4.min.js报错

    解决方法: eclipse导入jquery包后报错,下面有个不错的解决方法,需要的朋友可以参考下 eclipse导入jquery包后报错,处理步骤如下: 1.打开项目.project文件,去掉如下内容 ...

  6. vue 项目中 自定义 webpack 的 配置文件(webpack.config.babel.js)

    webpack.config.babel.js,这样命名是想让webpack在编译的时候自动识别es6的语法,现在貌似不需要这样命名了,之前用webpack1.x的时候貌似是需要的 let path ...

  7. form表单的action提交写到js中来,同时onclick事件也写在js中来。其action也可以通过ajax来提交的。

    1,html脚本 <body> <div style="display: none;"> <form id="submitForm" ...

  8. unigui 在单据中,某输入为必填项的 JS代码

     给大家分享下在单据中,某输入为必填项,用红框标示的简单处理方法:UniSession.AddJS(UniEdit1.JSName+ '.el.setStyle({"border" ...

  9. 如何最快速的找到页面某一元素所绑定的点击事件,并查看js代码

    https://blog.csdn.net/jmd88888888/article/details/70919378

随机推荐

  1. 关于file的上传文件

    http://blog.csdn.net/wclxyn/article/details/7090575/

  2. centos minimal 开启无线网卡 & 查看IP

    minimal版本默认不启动网络,所以要自己配置. 配置过程很简单,编辑配置文件 vi /etc/sysconfig/network-script/ifcfg-eth0 需要更改两项 NM_CONTR ...

  3. HDU 5832 A water problem(某水题)

    p.MsoNormal { margin: 0pt; margin-bottom: .0001pt; text-align: justify; font-family: Calibri; font-s ...

  4. Export Data from mysql Workbench 6.0

    原文地址:export-data-from-mysql-workbench-6-0 问题描述 I'm trying to export my database, using MySQL Workben ...

  5. 焦点问题onfocus=”this.blur()”代替方法(转)

    为了去除链接的虚线框,网上搜索到最常见的方法是onfocus=“this.blur()”,不过同时搜索到的是这会不利于盲人浏览使用页面 在淘宝ued官方博客上详细说明了解决方法,这里转了部分,完整版: ...

  6. 如何让一个DIV浮动在另一个DIV上面

      直接上DEMO了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3 ...

  7. iOS FMDB的使用

    简介: SQLite (http://www.sqlite.org/docs.html) 是一个轻量级的关系数据库.iOS SDK 很早就支持了 SQLite,在使用时,只需要加入 libsqlite ...

  8. poj1625Censored!(AC自动机+dp)

    链接 第一次做这种题目,参考了下题解,相当于把树扯直了做DP,估计这一类题都是这个套路吧. 状态方程dp[i][next] = dp[i][next]+dp[i][j] ;dp[i][j]表示长度为i ...

  9. datatables设置解析

    条信息" "sSearch":"搜索" 基本的命令 aaSorting:参数是个数组  [[],[]]单独定义每一列的排序方式 aaSortingFi ...

  10. h.APR通道是个怎么回事

    APR通道是Tomcat比较有特色的通道,在早期的JDK的NIO框架不成熟的时候,因为java的网络包的低效,Tomcat使用APR开源项目做网络IO,这样有效的缓解了java语言的不足,提供了一个高 ...