鼠标事件练习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. Composer 常用命令总结（三）

    init(初始化) 该命令用于创建 composer.json 文件,并进行基础信息配置: $ composer init 可以配置Package name.Description.Author.Mi ...

  2. WPF 杂谈——资源文件

    编写一个应用难免要用到WPF本身的控件.不管是WinForm还是网页都会有自己的控件.只是在写法和用法上有所不同而以.而控件命名却离不开那几个单词.所以不用担心判断不出来哪个是按扭,哪个是文本框.举个 ...

  3. 『算法』Dinic求最大流

    作为一个[NOIP+,省选-]算法,这个算法真的很暴力.同样是最大流,跑得比EK不知快到哪里去了.首先是一个 广度优先搜索() { 按照可用路径上节点的访问顺序标号. 然后判断一下能否到汇点. 如果不 ...

  4. 使用命令行的方式操作hdfs

    必须要用打全路径,没有相对路径的概念,或者cd的概念 打印报告: 所有的命令显示出来: 以下的操作分别是创建创建文件夹,删除文件夹,显示文件夹,可见删除文件夹只能够使用-rmr . 从本地拷贝文件到h ...

  5. 谈谈RDD、DataFrame、Dataset的区别和各自的优势

    在spark中,RDD.DataFrame.Dataset是最常用的数据类型,本博文给出笔者在使用的过程中体会到的区别和各自的优势 共性: 1.RDD.DataFrame.Dataset全都是spar ...

  6. 超简单jQuary链式操作代码实现手风琴效果

    超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...

  7. VueJs开发笔记—IDE选择和WebStorm性能优化、框架特性和数据调用、路由选项以及使用

    一.IDE的选择: VsCode和WebStorm都是不错的选择,两者运行调试都非常的方便都可以使用快捷键运行和停止,就打开项目的速度和对电脑配置的要求来说,vscode要比webstorm要出色很多 ...

  8. Java内存使用量测试

    JVM内存使用量测试测试各种不同的数据结构在JVM中的内存使用量 import it.unimi.dsi.fastutil.ints.IntOpenHashSet; import java.lang. ...

  9. 为Android内核添加新驱动

    转载地址:http://blog.chinaunix.net/uid-16759545-id-4892379.html 1. 在drives目录下添加hello目录,内含hello.c Kconfig ...

  10. swift 可选类型（optional）

    可选类型定义 Swift 标准库中定义后缀  ?为可选类型 Optional<Wrapped> 的语法糖,这里语法糖可以简单理解为一种便捷的书写语法.也就是说,下面两个声明是等价的: va ...