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.认识事件对象 事 ...
随机推荐
- cctype学习
#include <cctype>(转,归纳很好) 头文件描述: 这是一个拥有许多字符串处理函数声明的头文件,这些函数可以用来对单独字符串进行分类和转换: 其中的函数描述: 这些函数传入一 ...
- 窝上课不听，how to learn C language easily(1)
C language 学习心得 附:为啥起这么霸气侧漏,招大神们鄙视的标题,正如我在<C language>随笔的介绍中写的,这是一个写个妹纸们看的C language的文章.没错!!写这 ...
- 倒计时（距离活动结束还有X天X小时X分X秒）
一个简单的倒计时,可以设定结束时间,然后自动计算出距离活动结束还有X天X小时X分X秒. 废话不多说,上代码,挺简单的,代码里有注释: // 活动倒计时 var time_end = new Date( ...
- jQuery选择器---基本选择器总结
今天要跟大家分享一下jQuery选择器的使用方法,它的选择器分为四大类 如图: 基本选择器的使用: 1.id选择器 案例: <div id="notMe"><p& ...
- spoj 694. Distinct Substrings 后缀数组求不同子串的个数
题目链接:http://www.spoj.com/problems/DISUBSTR/ 思路: 每个子串一定是某个后缀的前缀,那么原问题等价于求所有后缀之间的不相同的前缀的个数.如果所有的后缀按照su ...
- redis连接池的使用方法
所需jar:jedis-2.8.0.jar和commons-pool-2-2.3jar Jedis操作步骤如下:1->获取Jedis实例需要从JedisPool中获取:2->用完Jedis ...
- javascript 面向对象基础 （1）
常见的创建对象的方式有3种: ① 声明变量的方式 var obj1 = { key1: "val1", key1: "val2", show: function ...
- Day2-文件操作
文件操作流程: 1.打开文件,得到文件句柄并赋值给一个变量: 2.通过句柄对文件进行操作: 3.关闭文件 ################################33 1.打开文件方法: a. ...
- 【JAVAWEB学习笔记】27_Redis：在Linux上的安装、Jedis和常用命令
一.Redis简介 1．关于关系型数据库和nosql数据库 关系型数据库是基于关系表的数据库,最终会将数据持久化到磁盘上,而nosql数据 库是基于特殊的结构,并将数据存储到内存的数据库.从性 ...
- phpmyadmin上传sql文件大小限制问题解决方案
近几天在学生做项目时,需要使用phpmyadmin把本地数据库导入到线上数据库,有许多学生遇到了因为文件过大而上传失败的问题.今天给大家整理一下使用phpmyadmin遇到因为文件过大而导致上传失败问 ...