JavaScript事件与例子(三)
两个例子,好友选中效果和左侧右侧子菜单
一、好友选中效果
可以通过设置属性的方式判断当前是否被选中,也可以通过获取当前元素的颜色从而得知当前元素状态是否被选中,从而进行操作
1.通过设置属性的方式判断选中的元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>好友选中</title> <style> *{ margin:0px auto; padding:0px; } #wai{ height:400px; width:200px; margin-top:100px; margin-left:100px; } .li{ height:30px; width:200px; background-color:blue; border:1px solid white; text-align:center; line-height:30px; vertical-align:middle;} </style> </head> <body> <div id="wai"> <div class="li" ys="0" onmouseover="bian(this)" onclick="xuan(this)" onmouseout="li(this)">风吹柳叶遮黄雀</div> <div class="li" ys="0" onmouseover="bian(this)" onclick="xuan(this)" onmouseout="li(this)">薄翅不觉已落蝉</div> <div class="li" ys="0" onmouseover="bian(this)" onclick="xuan(this)" onmouseout="li(this)">谁将新樽辞旧月</div> <div class="li" ys="0" onmouseover="bian(this)" onclick="xuan(this)" onmouseout="li(this)">今月曾今朝故人</div> </div> </body> </html> <script> //首先获取到所有好友列表 var l=document.getElementsByClassName("li"); //鼠标单击事件 function xuan(b){ //遍历数组,设置属性ys的值为0,颜色为蓝 for(var i=0;i<l.length;i++){ l[i].setAttribute("ys","0"); l[i].style.backgroundColor="blue"; } //当前元素ys属性值为1,颜色为红 b.setAttribute("ys","1"); b.style.backgroundColor="red"; } //鼠标移上的效果 function bian(a){ //遍历数组内容,只要ys属性的值是0,颜色变为蓝色 for(var i=0;i<l.length;i++){ if(l[i].getAttribute("ys")=="0"){ l[i].style.backgroundColor="blue"; } } //获取当前元素ys属性值如为0,则颜色变为绿 if(a.getAttribute("ys")=="0"){ a.style.backgroundColor="green"; } } //鼠标离开事件 function li(c){ //如果当前元素ys值为0,颜色设为蓝色 if(c.getAttribute("ys")=="0"){ c.style.backgroundColor="blue"; } } </script>
2.通过获取当前元素颜色的方式判断
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>好友选中</title> <style> *{ margin:0px auto; } #wai{ margin-top:100px; margin-left:100px; width:300px; height:300px;} .li{ margin:1px; background-color:white; font-family:微软雅黑; font-size:16px; text-align:center; width:300px; height:50px; line-height:50px; vertical-align:middle; float:left;} </style> </head> <body> <div id="wai"> <div class="li" onmouseover="yishang(this)" onclick="dianJi(this)" onmouseout="zou(this)">风吹柳叶遮黄雀</div> <div class="li" onmouseover="yishang(this)" onclick="dianJi(this)" onmouseout="zou(this)">薄翅不觉已落蝉</div> <div class="li" onmouseover="yishang(this)" onclick="dianJi(this)" onmouseout="zou(this)">谁将新樽辞旧月</div> <div class="li" onmouseover="yishang(this)" onclick="dianJi(this)" onmouseout="zou(this)">今月曾经照古人</div> </div> </body> </html> <script> //之前曾经用给每个div加id,然后函数传回id的方式,错误,因为这样函数写在div传回自己的用this,如果函数传回的是下面的div的改变,可以尝试用加div //获取所有列表好友到数组 var z=document.getElementsByClassName('li'); //鼠标移上的效果 function yishang(s){ //遍历数组,判断每个颜色是绿色即移上状态,则颜色设为白色即初始颜色,如果颜色是蓝色即选中状态,则跳出本次循环颜色依旧为蓝色 for(i=0;i<z.length;i++){ if(z[i].style.backgroundColor=="green"){ z[i].style.backgroundColor="white"; }else if(z[i].style.backgroundColor=="blue"){ //跳出本次循环 continue; } //在判断当前元素颜色是否是蓝色即被选中状态,是则跳出即状态不变,否则颜色设为绿色即鼠标移上的效果 if(s.style.backgroundColor=="blue"){ continue; }else{ s.style.backgroundColor="green"; } /* 此方法原本作为对上面方法的优化,可以直接判断现在的颜色如果是白色,则变为绿色,该方法的漏洞在于,当前没有颜色可以获取 如果使用该方法,应当在元素中内联颜色 if(s.style.backgroundColor=="white"){ s.style.backgroundColor="green"; }e*/ } } //鼠标单击事件,鼠标单击首先将所有元素设置为初始白色,然后当前颜色设为蓝色 function dianJi(y){ for(i=0;i<z.length;i++){ z[i].style.backgroundColor="white"; } y.style.backgroundColor="blue"; } //鼠标离开事件,鼠标离开如果颜色是绿色即未被选中,则变为白色 function zou(z){ if(z.style.backgroundColor=="green"){ z.style.backgroundColor="white"; } } </script>
使用这种方法,为何能够获取到当前元素颜色进行判断?首先鼠标移上,执行函数 yishang(),然后进for循环遍历进行判断,不符合判断任何一种情况,则无操作,进行下一个判断,如果当前元素颜色是被选中状态则跳出,如果不是则设为绿色,第一个颜色就这样赋值上了
这个问题我出错的几点需要注意:
1.在函数中,什么时候用数组元素的样式,什么时候用当前元素的样式多次搞错
2.判断中判断样式是否是该颜色,一定要用==
二、左侧右侧子菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>子菜单</title> <style> *{ margin:0px auto; padding:0px;} #wai{ margin-top:150px; margin-left:200px; height:300px; width:100px;} .li{ height:30px; width:100px; background-color:#0FF; line-height:30px; vertical-align:middle; text-align:center; border:1px solid white; } .li1{ height:30px; width:100px; background-color:#0F0; line-height:30px; vertical-align:middle; text-align:center; border:1px solid white; } .li:hover{ background-color:#FF3; } .li1:hover{ background-color:#FF3; } </style> </head> <body> <div id="wai"> <div class="li" onclick="show('cp')">产品中心</div> <div class="liw" id="cp" style="display:none"> <div class="li1">休闲</div> <div class="li1">百货</div> </div> <div class="li" onclick="show('dt')">最新动态</div> <div class="liw" id="dt" style="display:none"> <div class="li1">公司动态</div> <div class="li1">业界新闻</div> </div> <div class="li">关于我们</div> <div class="li">联系我们</div> </div> </body> </html> <script> //单击事件 function show(id){ //获取所有子菜单到数组,获取当前元素 var s=document.getElementsByClassName("liw"); var a=document.getElementById(id); //判断里注意用== //如果当前元素隐藏则显示,否则隐藏 if(a.style.display=="none"){ a.style.display="block"; }else{ a.style.display="none"; } } </script>
JavaScript事件与例子(三)的更多相关文章
- Javascript事件模型(三):JavaScript事件绑定方法总结(及Jquery)
JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...
- JavaScript事件绑定的三种方式
(一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...
- JavaScript事件与例子
事件,就是预先设置好的一段代码,等到用户触发的时候执行. 一:常见的事件: 1.关于鼠标的事件 onclick 鼠标单击触发 ondblclick 鼠标双击触发 onmouseover 鼠标移上触发 ...
- Javascript 事件对象(三)事件冒泡
事件流---事件冒泡取消冒泡:ev.cancelBubble=true ---事件捕获Ie下是没有的,在绑定事件中,标准下是有的 <!DOCTYPE HTML> <html> ...
- JavaScript事件详解-jQuery的事件实现(三)
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- Javascript事件模型系列(一)事件及事件的三种模型
一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
- javascript系列之DOM(三)---事件
原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...
- c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合,找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理(完全指北)
c#封装DBHelper类 public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...
- javaScript事件(三)事件对象
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 1.认识事件对象 事 ...
随机推荐
- Bash 的若干基本问题
Bash 的若干基本问题 这里介绍一些bash启动前.后的问题,以及一些使用bash需要注意的基本问题. 1.Bash的介绍 Bash是一种Shell程序,它是一般的Linux系统中的 ...
- 【Android Widget】2.ImageView
1.属性详解 1.1 ScaleType属性详解 ImageView的Scaletype决定了图片在View上显示时的样子,如进行何种比例的缩放,及显示图片的整体还是部分,等等. 设置的方式包括: 1 ...
- 利用PHPExcel读取Excel的数据和导出数据到Excel
PHPExcel是一个PHP类库,用来帮助我们简单.高效实现从Excel读取Excel的数据和导出数据到Excel.也是我们日常开发中,经常会遇到的使用场景.比如有个客户信息表,要批量导出发给同事,我 ...
- Android 真机无线调试
有很多人在学Android的时候最开始接触的都是模拟机的测试,如果像好的模拟机比如genimotion,次一点的蓝手指,测试都还比较可以.有的也不缺乏是用真机测试.本人开始用华为真机测试,也是一直连线 ...
- z-Tree-checkbox
引入z-Tree css/js/不要忘记excheck.js //html部分 <div> <input type="text" v-model="b ...
- javaWeb基础核心之一Servlet
既然是做JAVA开发的,先从一些基本的整理起来,算是知识回顾,加深记忆. 第一篇想到那理到哪,可能有点乱,不是太会排版,见谅,估计可能也就我自己看的懂. servlet在百度百科上的定义是这样的: S ...
- ng-option
select 是 AngularJS 预设的一组directive.下面是其官网api doc给出的用法:AngularJS:select 大意是,select中的ngOption可以采用和ngRep ...
- 文本主题模型之LDA(二) LDA求解之Gibbs采样算法
文本主题模型之LDA(一) LDA基础 文本主题模型之LDA(二) LDA求解之Gibbs采样算法 文本主题模型之LDA(三) LDA求解之变分推断EM算法(TODO) 本文是LDA主题模型的第二篇, ...
- 刑天DDOS攻击器下一版本即将使用NTP放大功能
刑天DDOS攻击器下一版本即将使用NTP放大功能 在一次无语实验中无意发现NTP方法后的攻击流量相当可观,Linux实测G口高达30G,也就是说最大可以放大30倍的攻击流量是何等的威武.而 ...
- 如何使用Handler
什么是Handler? Handler可以发送和处理消息对象或Runnable对象,这些消息对象和Runnable对象与一个线程相关联.每个Handler的实例都关联了一个线程和线程的消息队列.当创建 ...