主页 > 专题教程 > javascript > jquery >
来源:自学PHP网 时间:2018-02-08 10:13 作者: 阅读:次
[导读] 本文介绍jquery中常用的一些事件,包括ready(),hover(),toggle(),click(),keypress(),mousedown()等jquery事件。...
|
jQuery为我们提供了非常多的事件处理方法。其中有一组按事件名称命名的事件处理方法,它们是:
hover([over,]out) 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测,如果是则会继续保持“悬停”状态,而不触发移出事件。 参数:
例如制作表格的鼠标滑过斑马线效果:
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
toggle([speed],[easing],[fn]) 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 参数:
例如下面的代码可以用于切换列表元素的可见性。
$("li").toggle(
function () {
$(this).addClass("visibled");
},
function () {
$(this).removeClass("visibled");
}
);
blur([[data],fn]) 这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的。 参数:
例如下面的代码:
<button class="btn1">按钮1</button>
<button class="btn2">按钮2</button>
<button class="btn3">按钮3</button>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".btn1").blur({name:"tom"},function(event){
alert(event.data.name);
})
});
</script>
上面的代码中,传入 change([[data],fn]) 当元素的值发生改变时,会发生 该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时, 参数:
例如下面的代码会触发被选元素的change事件。
$(selector).change();
click([[data],fn]) 触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。 参数:
例如下面的代码会触发列表元素的点击事件。
$("li").click();
dblclick([[data],fn]) 当双击元素时,会发生 当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 参数:
例如下面的代码会在鼠标双击时为每一个列表元素的绑定一个回调函数。
$("li").dblclick( function () { alert("Hello World!"); });
keydown([[data],fn]) 当键盘或按钮被按下时,发生 参数:
例如下面的代码可以对页面中的键盘按键做出响应。
$(window).keydown(function(event){
switch(event.keyCode) {
// ......
}
});
关于keyCode的详细详细可以参看:。 keypress([[data],fn])
参数:
例如下面的代码计算在输入域中的按键次数。
$("input").keydown(function(){ $("span").text(i+=1);});
keyup([[data],fn]) 当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。 参数:
例如下面的代码当按下按键时,改变文本域的颜色。
$("input").keyup(function(){
$("input").css("background-color","#ffaaaa");
});
mousedown([[data],fn]) 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 参数:
示例代码:
$("button").mousedown(function(){
......
});
mouseenter([[data],fn]) 当鼠标指针穿过元素时,会发生 参数:
例如下面的代码在鼠标进入列表元素时,修改列表项的背景颜色。
$("li").mouseenter(function(){
$(this).css("background-color","yellow");
});
mouseleave([[data],fn]) 当鼠标指针离开元素时,会发生 与 参数:
例如当鼠标指针离开元素时,改变元素的背景色:
$("li").mouseleave(function(){
$(this).css("background-color","#ffaaaa");
});
mousemove([[data],fn]) 当鼠标指针在指定的元素中移动时,就会发生
参数:
例如下面的代码可以获得鼠标指针在页面中的位置。
$(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});
mouseout([[data],fn]) 当鼠标指针从元素上移开时,发生 与 参数:
例如下面的代码当鼠标从元素上移开时,改变元素的背景色。
$("li").mouseout(function(){
$(this).css("background-color","#ffaaaa");
});
mouseover([[data],fn]) 当鼠标指针位于元素上方时,会发生 与 参数:
例如下面的代码当鼠标指针位于元素上方时时,改变元素的背景色。
$("li").mouseover(function(){
$(this).css("background-color","yellow");
});
mouseup([[data],fn]) 当在元素上放松鼠标按钮时,会发生 与 参数:
例如下面的代码当松开鼠标按钮时,隐藏或显示元素。
$("button").mouseup(function(){
$("p").slideToggle();
});
resize([[data],fn]) 当调整浏览器窗口的大小时,发生 参数:
例如下面的代码会在每次浏览器窗口尺寸改变时都被触发。
$(window).resize(function(){
alert("window resized!");
});
select([[data],fn]) 当textarea或文本类型的input元素中的文本被选择时,会发生 参数:
例如下面的代码是当文本框中文本被选中时执行的函数。
$(":text").select( function () { /* ...do something... */ } );
select([[data],fn]) 当提交表单时,会发生 submit 事件。该事件只适用于表单元素。 参数:
例如下面的代码会阻止表单提交。
$("form").submit( function () {
return false;
} );
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com