这里介绍一些jQuery常用的事件
jQuery事件是对JavaScript事件的封装，常用事件如：鼠标事件，键盘事件，表单事件，绑定事件，复合事件等等
1.鼠标事件
方法如下
- click() :单击事件、触发或将函数绑定到指定元素的click事件
- mouseover(): 触发或将函数绑定到指定元素的mouseover事件
- mouseout() ：触发或将函数绑定到指定元素的mouseout的事件
代码示例：
$(function () {
$("input").click(function () {
$("li").mouseover(function () {
$(this).css("background", "green");
}).mouseout(function () {
//this.style.background = "";
this.style.cssText = "background:";
});
});
});
2.键盘事件：
方法如下：
- keydown(): 按下按键时、触发或将函数绑定到指定元素的keydown事件
- keyup(): 释放按键时、触发或将函数绑定到指定元素的keyup事件
- keypress(): 产生可打印的字符时、触发或将函数绑定到指定元素的keypress事件
代码示例：
$(function () {
$("p input").keyup(function () {
$("#events").append("keyup");
}).keydown(function () {
$("#events").append("keydown");
}).keypress(function () {
$("#events").append("keypress");
});
$(document).keydown(function (event) {
if (event.keyCode == "13") {
//按enter键
alert("确认要提交么?");
}
});
});
3.表单事件：
方法如下：
- focus() : 获得焦点、触发或将函数绑定到指定元素的focus事件
- blur() : 失去焦点、触发或将函数绑定到指定元素的blur事件
代码示例：
1、
// 查询输入框
$("input[name='search']").focus(function(){
$(this).val("");
});
$("input[name='search']").blur(function(){
$(this).val("请输入要查询的问题");
});
2、
$(function () {
//给文本框添加边框样式
$("input").focus(function() {
$(this).addClass("myclass");
}).blur(function() {
$(this).removeClass("myclass");
});
});
4、绑定事件：
语法解析：
- bind(type,[data],fn),其中data不是必需的
- type:事件类型、主要包括blur、focus、click、mouseout等基础事件，此外也还可以是自定义事件
- fn : 用来绑定的处理函数
代码示例：
绑定一个、
$("input[name=event_1]").bind("click",function() {
$("p").css("background-color","#F30");
});
绑定多个、
$("input[name=event_1]").bind({
mouseover: function () {
$("ul").css("display", "none");
},
mouseout: function () {
$("ul").css("display", "block");
}
});
移除方法：
- unbind([type],[fn]) 与绑定事件刚好相反,如果方法没有参数则表示移除全部的事件
- unbind如果要移除多个只需在两两之间添加一个空格即可
代码示例：
$(function () {
$("li").unbind("click");
$("li").unbind("mouseover mouseout");
});
注意：当unbind()不带参数时，表示移除所绑定的全部事件
5、复合事件
一、 hover()方法
语法：hover(enter,leave);
该方法相当于mouseover与mouseout事件的组合
代码示例：
$("li").hover(function() {
$("li").css("background", "gray");
}, function() {
$("li").css("background", "green");
});
二、.toggle()方法
toggle()方法用于模拟鼠标连续click事件
代码示例：
$("body").toggle(
function () {
}, //第一次点击触发
function () {
}, //第二次点击触发
function () {
} //第三次点击触发
... //...
);
同时toggle()方法还有一个作用：切换元素可见状态
$('input').toggle(
function () {
$('ul').toggle(); //是显示的则隐藏，是隐藏的则显示
},
function () {
$('ul').toggle(); //是显示的则隐藏，是隐藏的则显示
}
);