鼠标事件练习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. Spring+SpringMvc+Mybatis 框架的搭建（一）

    本文是因为实习结束后学习到了新的技术,想写下来和更多人交流.开发中遇到的问题我也会一一说明,希望有更多人可以互相探讨,加入到一起来. 1. Spring+SpringMvc +Mybatis 的作用有 ...

  2. [UWP]了解模板化控件(9)：UI指南

    1. 使用TemplateSettings统一外观 TemplateSettings提供一组只读属性,用于在新建ControlTemplate时使用这些约定的属性. 譬如,修改HeaderedCont ...

  3. UI-UIwindow

    1.什么是UI? UI  (User Interface) : 用户界面,用户看到的各种各样的页面元素: 2.什么是UIWindow ? UIWindow : 一个基础容器,往窗口上放不同的东西,每个 ...

  4. Linux五种IO模型性能分析

    1. 概念理解 在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式: 同步:       所谓同步,就是在发出一个功能调用时, ...

  5. MVC中的Ajax与增删改查

    自入手新项目以来,一直处于加班状态,博客也有两周没更,刚刚完成项目的两个模组,稍有喘息之机,写写关于项目中 的增删改查,这算是一个老生常谈的问题了,就连基本的教材书上都有.刚看书的时候,以为 没什么可 ...

  6. Visual Studio Package 插件开发之自动生成实体工具

    前言 这一篇是VS插件基于Visual Studio SDK扩展开发的,可能有些朋友看到[生成实体]心里可能会暗想,T4模板都可以做了.动软不是已经做了么.不就是读库保存文件到指定路径么…… 我希望做 ...

  7. maven 热部署至tomcat

    1.配置tomcat的界面访问账号和权限./tomcat/conf目录下tomcat-users.xml添加 这里是根据自己的需求添加的一个角色权限 <role rolename="a ...

  8. bash下. : () {} [] [[]] (())的解释 (非原创，侵删)

    Copy from http://blog.chinaunix.net/uid-20380484-id-1692999.html bash下有很多像{}.[]等一些符号命令,下面是我对一些常用的符号命 ...

  9. Python下划线的使用

    References: [1]. http://python.jobbole.com/81129/ 本文将讨论Python中下划线(_)字符的使用方法.我们将会看到,正如Python中的很多事情,下划 ...

  10. DIV上下居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...