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.认识事件对象事 ...

随机推荐

基于jQuery的自定义插件：实现整屏分页转换的功能
动态创建jQuery插件一.实现功能: 1.基本功能:自适应式整屏分页功能的实现 2.通过鼠标点击标签页转换分页,支持键盘上下左右键的转换分页,同样支持鼠标滚轮上下滑动转换分页 3.切屏时的动画效 ...
js中面向对象编程
一.理解对象: 第一种:基于Object对象 var person = new Object(); person.name = 'My Name'; person.age = 18; person.g ...
Play再识 - 不放弃的执着
从写Play初识时,前面各种称赞play如何如何解放java web开发,最后因为网络被墙而无法正常编译,从而想到放弃.从来都有成为web开发高手的想法,今天又再一次进行尝试,惊喜的是有新的进展. 首 ...
django restframework serializer 增加自定义字段
在使用django restframework serializer 序列化在django中定义的model时,有时候我们需要额外在serializer中增加一些model中没有的字段.有两种方法实现 ...
shop_list
#!/usr/bin/env python # -*- coding: utf-8 -*- #输出商品列表,用户输入序号,显示用户选中的商品 li = ["手机", "电 ...
【Android Widget】2.ImageView
1.属性详解 1.1 ScaleType属性详解 ImageView的Scaletype决定了图片在View上显示时的样子,如进行何种比例的缩放,及显示图片的整体还是部分,等等. 设置的方式包括: 1 ...
Haoop基本操作
一．HDFS的常用操作 (一).HDFS文件的权限与Linux文件权限类似 r: read; w:write; x:execute,权限x对于文件忽略,对于文件夹表示是否允许访问其内容. 如果Lin ...
解决xmapp中Apache端口号占用问题
[原]解决 "安装xmapp后Apache不能正常启动" 问题小伙伴们安装xmapp后发现Apache不能正常开启,下面给出了不同情况的解决办法,可以分为以下几种情况分析问题: ...
Linux下Samba服务器的安装和配置
第一步:sudo apt-get install samba smbclient 安装samba服务器. 第二步:打开/etc/samba/smb.conf文件,在末尾添加下面的字段: [用户名] c ...
grunt基础配置
grunt基础配置要使用grunt来管理项目,一般需要如下的几个步骤: 安装grunt命令行工具grunt-cli 在项目中安装grunt 安装grunt插件建立并配置Gruntfile.js 安 ...

JavaScript事件与例子（三）

一、好友选中效果

二、左侧右侧子菜单

JavaScript事件与例子（三）的更多相关文章

随机推荐

热门专题