(1)mouse；
click与dbclick事件：jQuery提供了两个方法一个是click方法用于监听用户单击操作，另一个方法是dblclick方法用于监听用户双击操作，dblclick的用法和click的用法是类似。click事件其实是由mousedown与mouseup 2个动作构成，所以点击的动作只有在松手后才触发；dblclick又是由2个click叠加而来的。
注意：在同一元素上同时绑定 click 和 dblclick 事件是不可取的。各个浏览器事件触发的顺序是不同的，一些浏览器在dblclick之前接受两个 click 事件 ，而一些浏览器只接受一个 click 事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度
- 方法一：$ele.click()：绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少
- 方法二：$ele.click( handler(eventObject) )：绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了
- 方法三：$ele.click( [eventData ], handler(eventObject) )：使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
mousedown与mouseup事件：mousedown强调是按下触发，mouseup强调是松手触发，mouseup与mousedown组合起来就是click事件，所以点击的动作只有在松手后才触发。如果在一个元素按住了鼠标不放，并且拖动鼠标离开这个元素，并释放鼠标键，这仍然是算作mousedown事件；如果用户在一个元素上按下鼠标按键，并且拖动鼠标离开这个元素，然后释放鼠标键，这个事件就不触发。任何鼠标按钮被按下时都能触发mousedown事件（左右键和滚轮键等），用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3，
alert(e.which);。
- 方法一：$ele.mousedown()：绑定$ele元素，不带任何参数一般是用来指定触发一个事件，可能一般用的比较少
- 方法二：$ele.mousedown( handler(eventObject) )，绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
- 方法三：$ele.mousedown( [eventData ], handler(eventObject) )，使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
mousemove事件：基于移动的机制可以做出拖动、拖拽一系列的效果出来。mousemove事件是当鼠标指针移动时触发的，即使是一个像素。如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题
- 方法一：$ele.mousemove()，绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少
- 方法二：$ele.mousemove( handler(eventObject) )，绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
- 方法三：$ele.mousemove( [eventData ], handler(eventObject) )，使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
mouseover与mouseout事件：与原生JS的 onmouseover() 与 onmouseout() 事件相似
- 方法一：$ele.mouseover()，绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少
- 方法二：$ele.mouseover( handler(eventObject) )，绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
- 方法三：$ele.mouseover( [eventData ], handler(eventObject) )，使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
mouseenter与mouseleave事件：用交互操作中，经常需要知道用户操作鼠标是否有移到元素内部或是元素外部，因此jQuery提供了一个mouseenter和mouseleave的快捷方法可以监听用户移动到内部的操作。使用上非常简单，三种参数传递方式与mouseover和mouseout是一模一样的，所以这里不再重复，主要讲讲区别，下面以mouseenter为例：
- mouseenter 的 JavaScript事件是Internet Explorer专有的。由于该事件在平时很有用，jQuery模拟这一事件，以便它可用于所有浏览器。该事件在鼠标移入到元素上时被触发。任何HTML元素都可以接受此事件。
- mouseenter事件和mouseover的区别，关键点就是：mouseenter不会冒泡，mouseover会冒泡
- mouseenter事件只会在绑定它的元素上被调用，而不会在父代节点上被触发，这个就相当于在封装的时候对onmouseover进行阻止冒泡
- mouseover事件既会在绑定它的元素上被调用，也会在父代节点上被触发
hover事件：在元素上
移进移出切换其颜色，一般通过2个事件 mouseenter 与 mouseleave 配合就可以达到。
实际上，hover()这个方法就是封装了 mouseenter() 和 mouseleave() 两个方法, 可以阻止冒泡问题. 这个方法可以用来改变样式, 比如鼠标移入div变色, 移出回到以前的颜色. 相当于css中的div:hover, 但是:hover很多的浏览器对a:hover支持还不错, 对div:hover, ul:hover支持有点差, 特别是ie6,ie7这些较低的版本. 用jquery可以解决兼容性,代码量比js要少很多, 可以专注在逻辑业务上。
只需要在hover方法中传递2个回调函数就可以了，不需要显示的绑定2个事件
$(selector).hover(handlerIn, handlerOut)
handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数
focusin与focusout事件：当一个元素，或者其内部任何一个元素
获得焦点/失去焦点的时候，例如：input元素，用户在点击聚焦的时候
方法一：
$ele.focusin() / $ele.focusout()，绑定$ele元素，不带任何参数一般是用来指定触发一个事件，一般用的比较少
方法二：
$ele.focusin( handler ) / $ele.focusout( handler )，绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
方法三：
$ele.focusin( [eventData ], handler ) / $ele.focusout( [eventData ], handler )，使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<!DOCTYPE html >
<html >
<head>
<meta charset=utf-8 />
<!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -->
<title>显示链接</title>
<style type="text/css">
.Body {
text-align: center;
}
.Divshowlink {
position: relative;
left: 37%;
/*text-align: center;*/
width: 500px;
height: 300px;
background-color: yellow;
}
.Divhidelink {
position: relative;
left: 37%;
/*text-align: center;*/
width: 500px;
height: 300px;
background-color: red;
}
.checkbox-control-input {
/*position: relative;
left: 37%;*/
/*text-align: center;*/
width: 50px;
height: 30px;
background-color: blue;
}
</style>
<script src="jquery_last.js" type="text/javascript"></script>
<script type="text/javascript">
function show(){
$("#divObj").show();//显示,参数说明同上
}
function hide(){
$("#divObj").hide();
}
$(document).ready( function(){
//initate of show
$("#Showlink").hide();
$("#Linkid").hide();
$("#Noteid").hide();
$(function(){
//the first test show and hide
$('#Checkboxid').click(function () {
// $("#Showlink").hide();
if($('#Checkboxid').prop("checked"))
{
// alert("选中");
//add your function here
$("#Showlink").show();
}
else
{
// alert('未选中');
$("#Showlink").hide();
}
});
//the second ,show all the time
$('#show_link_all').click(function () {
// $("#Showlink").hide();
if($('#show_link_all').prop("checked"))
{
$("#Linkid").show();
}
else
{
$("#Linkid").hide();
}
});
//the third ,show notes when mouseover
$('#show_note_over').click(function () {
// $("#Showlink").hide();
if($('#show_note_over').prop("checked"))
{
$("#Noteid").show();
}
else
{
$("#Noteid").hide();
}
});
});
});
</script>
</head>
<body >
<div class="Body">
<h3>this a test of show link in all situations</h3>
<input type="button" value="hide" οnclick="hide()"/>
<input type="button" value="show" οnclick="show()"/>
<input type="button" value="balala" οnclick="slide()"/>
<input type="button" value="lababa" οnclick="slideToggle()"/>
<input type="button" value="babala" οnclick="toggle()"/>
<div id="divObj" style="display:none">
<div > 1.show the link all the time
<input type="checkbox" id="show_link_all">
</div>
<br/>
<div > 2.show the link when mouse over </div>
<br/>
<div > 3.show the note all the time </div>
<br/>
<div > 4.show the notes when mouse over
<input type="checkbox" id="show_note_over">
</div>
<br/>
<div > 5.a joking </div>
</div>
<div class="Divshowlink" id = "Showlink">
i need to show this link when i check the check box.
</div>
<br> <br>
<div class="Divshowlink" id = "Linkid">
this is a link
</div>
<br> <br>
<div class="Divshowlink" id = "Noteid">
this is a note:
<br>
good good study ,day day up seemed nice!
</div>
<input class="checkbox-control-input" id="Checkboxid" value="what" type="checkbox">
</div>
</body>
</html>
1120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
