鼠标事件练习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. Java基础语法(一)<注释，关键字，常量，变量，数据类型，标识符，数据类型转换>

    从今天开始,记录学习Java的过程.要学习Java首先得有环境,至于环境的安装我就不说了,百度有很多教程,比如:http://jingyan.baidu.com/article/20095761904 ...

  2. Hush Framework框架配置

    在写这篇文章的时候,楼主已经饿的不行了,因为我从3点开始就在折腾Hush Framework,走了很多弯路,打铁要趁热,先把基本的过程记录下来,留待以后翻阅,同时记录其中容易走弯路的地方,特别是对于一 ...

  3. HotSpot的算法实现

    1.枚举根节点 可达性分析中从GC Roots节点找引用,可作为GC Roots的节点主要是全局性的引用与执行上下文中,如果要逐个检查引用,必然消耗时间.另外可达性分析对执行时间的敏感还体现在GC停顿 ...

  4. 在web项目启动时,使用监听器来执行某个方法

    在web项目中有很多时候需要在项目启动时就执行一些方法,而且只需要执行一次,比如:加载解析自定义的配置文件.初始化数据库信息等等,在项目启动时就直接执行一些方法,可以减少很多繁琐的操作. 这里写了个简 ...

  5. Spring Boot 整合 Elasticsearch，实现 function score query 权重分查询

    摘要: 原创出处 www.bysocket.com 「泥瓦匠BYSocket 」欢迎转载,保留摘要,谢谢! 『 预见未来最好的方式就是亲手创造未来 – <史蒂夫·乔布斯传> 』 运行环境: ...

  6. js事件小结

    首先事件绑定分为2种方法 一种为"DOM0级"方法,这里我理解为事件指定 var oDiv = document.getElementById("div1"); ...

  7. 【Javascript语言精粹】笔记摘要

    现在大部分编译语言中都流行要求强类型.其原理在于强类型允许编译器在编译时检测错误.我们能越早检测和修复错误,付出的代价越小.Javascript是一门弱类型的语言,所以Javascript编译器不能检 ...

  8. 简单RPC框架-基于Consul的服务注册与发现

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  9. .Net程序员学用Oracle系列(30)：零碎补充、最后总结(The End)

    1.同义词 2.Flashback 技术 3.连接字符串的写法 4.转义字符 & 特殊运算符 5.文件类型 6.查看参数 & 修改参数 7.AWR 工具 8.学习方法 & 学习 ...

  10. ftp服务器可以连接但不能传输数据（proftpd）

    问题:在客户端连接FTP服务器(proftpd)时可以正常连接,但是无法正常传输数据 ftp> ls530 Please login with USER and PASSPassive mode ...