鼠标事件练习1

当鼠标点击网页某个单元格的时候，其他的单元格颜色不变，只有被点击的单元格颜色发生变化

<style type="text/css">

*{ margin:0;}

#xuankuang{ width:1200px;float:left}

.xuanxiang{ width:290px; height:200px; float:left; background-color:#0F3; margin-bottom:10px; margin-right:10px; margin-left:10px}

</style>

</head>

<body>

<div id="xuankuang">

   <div class="xuanxiang" onclick="dianJi(this)"></div>   //this代表调用自身。

   <div class="xuanxiang" onclick="dianJi(this)"></div>

   <div class="xuanxiang" onclick="dianJi(this)"></div>

   <div class="xuanxiang" onclick="dianJi(this)"></div>

   <div class="xuanxiang" onclick="dianJi(this)"></div>

   <div class="xuanxiang" onclick="dianJi(this)"></div>

   <div class="xuanxiang" onclick="dianJi(this)"></div>

   <div class="xuanxiang" onclick="dianJi(this)"></div>

   <div class="xuanxiang" onclick="dianJi(this)"></div>

</div>

</body>

<script>

 function dianJi(m){   //这个m是一个形式参数

	var b=document.getElementsByClassName("xuanxiang")  用b接收获取的元素数组

	 for(var i=0;i<b.length;i++){

		 b[i].style.backgroundColor="blue";} //通过循环让每一次鼠标放在某个位置的时候所有位置的颜色都变成蓝色。

     m.style.backgroundColor="red"} //鼠标放在的地方变为红色

</script>

这个鼠标事件练习使用到了数组，用数组通过循环的方式使在每次鼠标点击单元格的时候其他的单元格不变色，只有被点击的发生颜色的变化，定义方法的时候方法名后边的形参要注意。　　

鼠标事件练习2

这个练习是做的一个下拉菜单，下拉菜单带有背景色，选项框的背景色会随着鼠标的移动（不点击选项框）变色，当选中其中一个选项框的时候，所有选项框隐藏，被选中的选项框的内容进到空白的选框内。

<body>

<div id="xxkuang" onclick="dianJi(this)"></div>

<div id="list" style="display:none">

   <div class="xuanxiangka" onmouseover="fangshang(this)" onclick="dj(this)">qingdao</div>

   <div class="xuanxiangka" onmouseover="fangshang(this)" onclick="dj(this)">jinan</div>

   <div class="xuanxiangka" onmouseover="fangshang(this)" onclick="dj(this)">zibo</div>

   <div class="xuanxiangka" onmouseover="fangshang(this)" onclick="dj(this)">binzhou</div>

   <div class="xuanxiangka" onmouseover="fangshang(this)" onclick="dj(this)">linzi</div>

</div>

</body>

<script>

function fangshang(n){

	var b=document.getElementsByClassName("xuanxiangka")//括号里的classname要加引号

	for(var i=0;i<b.length;i++){

		b[i].style.backgroundColor="white"

		b[i].style.color="black"}

		n.style.backgroundColor="red"

		n.style.color="white"}

function dianJi(m){

	var l=document.getElementById("list")

	if(l.style.display=="none"){  //隐藏后边的内容要带上引号，切记！！！

		l.style.display="block"}

		else{l.style.display="none"}}

function dj(p){

	document.getElementById("list").style.display="none"; //选中后所有的选项框隐藏

	document.getElementById("xxkuang").innerText=p.innerText  //选中后被选中的选项框的内容进到空白的选项框内

	}

</script>

　　点击空白单元格的时候下拉菜单的显示与隐藏需要用到判断。

小试牛刀JavaScript鼠标事件的更多相关文章

  1. JavaScript 鼠标事件

    鼠标事件是Web开发中最常用的一类事件. DOM3级事件中定义了9个鼠标事件,分别如下: click.dbclick.mousedown.mouseenter.mouseleave.mousemove ...

  2. JavaScript鼠标事件

    mousedown 鼠标被按下. mouseup 鼠标按钮被释放(抬起). click 鼠标左键(或中建)被单击. 事件触发顺序:mousedown>mouseup>click>db ...

  3. JavaScript鼠标事件，点击鼠标右键，弹出div

    document.oncontextmenu = function(){return false}; //禁止鼠标右键菜单显示 var res = document.getElementById('b ...

  4. Javascript鼠标事件大全

    事件 浏览器支持 描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N ...

  5. js 鼠标事件的抓取代码

    js 鼠标事件的抓取代码,分享给大家. 1.通过ele.setCapture();设置鼠标事件的抓取. 2,应用可以通过单.双击文字来获取时间. <html> <head> & ...

  6. javaScript事件（五）事件类型之鼠标事件

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...

  7. JavaScript进阶系列07,鼠标事件

    鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...

  8. JavaScript的事件对象中的特殊属性和方法（鼠标，键盘）

    鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...

  9. JavaScript的事件的处理函数（鼠标，键盘，HTML）

    事件处理函数概述 JavaScript 可以处理的事件类型为:鼠标事件.键盘事件.HTML 事件 所有的事件处理函数都会都有两个部分组成,on + 事件名称,例如 click 事件的事件处理函数就是: ...

随机推荐

  1. 通过 jdbc 分析数据库中的表结构和主键外键

    文章转自:http://ivan4126.blog.163.com/blog/static/20949109220137753214811/ 在某项目中用到了 hibernate ,大家都知道 hib ...

  2. hadoop集群搭建--CentOS部署Hadoop服务

    在了解了Hadoop的相关知识后,接下来就是Hadoop环境的搭建,搭建Hadoop环境是正式学习大数据的开始,接下来就开始搭建环境!我们用到环境为:VMware 12+CentOS6.4 hadoo ...

  3. String转int数字格式异常问题

     写在前面的话 差不多一年前就计划写博客,可因为种种原因一直没有写,反而我身边的一些同学在我建议他们写博客不久之后就写了,比如张博同学,基本每次总结一个知识点就写一篇,这样不但方便自己以后查看翻阅,也 ...

  4. Python基本语法--语句

    # -*- coding: utf-8 -*- #条件语句 ''' if 判断条件: 执行语句…… else: 执行语句…… ''' flag = False name = 'python' if n ...

  5. hdu4597 Play Game DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4597 感觉很不错的区间DP,又做了一遍,感觉自己对边界的处理还是很欠缺 代码: #include< ...

  6. 面向切面编程(Aop)

    AOP中的概念 AOP(Aspect Orient Programming),也就是面向切面编程.可以这样理解,面向对象编程(OOP)是从静态角度考虑程序结构,面向切面编程(AOP)是从动态角度考虑程 ...

  7. photo

    我们在android开发过程中 经常有做到发图片或修改上传头像的功能 即要调用系统相册 如何调用系统相册并处理返回的数据呢?因为随着android手机系统的提高 不同系统的手机对调用相册并处理相册不同 ...

  8. CSS3如何实现超出指定文本以省略号显示效果

    不做前端很久了,今天从重构师那里了解到CSS3已经可以实现很多以往必须通过JS才能实现的效果,如渐变,阴影,自动截断文本展示省略号等等强大效果,而且这些功能日渐成熟,已经大量用于生产环境.H5真的日渐 ...

  9. 14、Iterator跟ListIterator的区别

    14.Iterator与ListIterator的区别 在使用List,Set的时候,为了实现对其数据的遍历,会经常使用到Iterator(跌代器).使用跌代器,不需要干涉其遍历的过程,只需要每次取出 ...

  10. swift学习 - 计时器

    swift学习之计时器 这个demo主要学习在swift中如何操作计时器(Timer),按钮(UIButton),文本(Label) 效果图: 代码 import UIKit class ViewCo ...