笔记5，jQuery中的事件

jQuery的事件是对JavaScript事件的封装，常用的事件分类如下

基础事件
window事件
鼠标事件
键盘事件
表单事件

复合事件是多个事件的组合
鼠标光标悬停
鼠标连续点击

1，基础事件

鼠标事件



<script type="text/javascript">
$(document).ready(function() {
$("#nav li").mouseover(function() { //当鼠标移过#nav li元素时
$(this). addClass("heightlight"); //为鼠标所在li元素添加样式
});
$("#nav li").mouseout(function() { //当鼠标移出#nav li元素时
$(this).removeClass(); //移除鼠标所在li元素的全部样式
});
});
</script>

键盘事件



<script type="text/javascript">
$(document).ready(function () {
$("[type=password]").keyup(function () {
$("#events").append(" keyup");
}).keydown(function (e) {
$("#events").append(" keydown");
}).keypress(function () {
$("#events").append(" keypress");
});

$(document).keydown(function (event) {
if (event.keyCode == "13") {//按回车键
alert("确认要提交么？");
}
});
});
</script>

表单事件



<script type="text/javascript">
$(document).ready(function () {
$("[name=member]").focus(function(){
$(this).addClass("input_focus");
});
$("[name=member]").blur(function(){
$(this).removeClass("input_focus");
});
});
</script>

2，绑定事件
除了使用事件名绑定事件外，还可以使用bind()方法
$("input[name=event_1]").bind("click",function() {
$("p").css("background-color","#F30"); }
);
bind()方法还可以同时绑定多个事件
$("input[name=event_1]").bind({
mouseover: function () {
$("ul").css("display", "none");
},
mouseout: function () {
$("ul").css("display", "block");
}
});

移除绑定事件
函数： unbind([type],[fn]) type事件类型，如：blur、click等基础事件还可以自定义事件 fn处理函数
当unbind()不带参数时，表示移除所绑定的全部事件

鼠标光标悬停事件
hover()方法相当于mouseover与mouseout事件的组合
$("#myaccound").hover(function(){
$("#menu_1").css("display","block");
},
function(){
$("#menu_1").css("display","none");
}
);

鼠标连续点击事件
toggle()方法用于模拟鼠标连续click事件
$("body").toggle(
function () { }, //第一次点击
function () { }, //第二次点击
function () { } //第三次点击
);

显示隐藏元素
$(".tipsbox").show("slow"); 以较慢的速度显示元素
显示速度可以取如下值：毫秒（如1000）、slow、normal、fast

切换元素可见状态
toggle()除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态
$("li:gt(5):not(:last)").toggle();

淡入淡出效果
fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
$("input[name=fadein_btn]").click(function(){
$("img").fadeIn("slow"); }以较慢的速度淡入
);
$("input[name=fadeout_btn]").click(function(){
$("img").fadeOut(1000); }以1000毫秒的速度淡出
);

改变元素的高度
slideDown() 可以使元素逐步延伸显示，slideUp()则使元素逐步缩短直至隐藏
$("h2").click(function(){
$(".txt").slideUp("slow");
$(".txt").slideDown("slow");
});



tab切换

<script type="text/javascript">
$(document).ready(function(){
$("#tabs .tabs-top ul li").click(function(){ //点击事件
$(this).addClass("choosed"); //给本次点击的加一个显示的样式
$(this).siblings("li").removeClass("choosed"); //除了本次点击的其他里面的li移除显示样式
$("#tabs .tabs-body .content").hide(); //隐藏所以的内容
$("#tabs .tabs-body .content").eq($(this).index()).show();
//显示本次点击第几个内容($(this).index()这个事点击的序号，内容也是显示第几个)
});
});
</script>