7.jQuery-动画和事件
1.jQuery事件
简介：jQuery有很多事件、鼠标、键盘、表单等等
1.1鼠标移进(mouseover)、移出事件(mouseout)
一、.绑定导航栏中li的鼠标移进移出事件
$(function(){
$("#nav li").mouseover(function(){
$(this).addClass("heightlight");
});
$("#nav li").mouseout(function(){
$(this).removeClass();
})
});二、键盘事件、
1.重新回顾一下之前写的jQuery的属性选择器
$("[href]") 选取所有带有href属性的元素
$("[href='#']")选取所有带href值等于'#'的元素
$("[href!='#']")选取所有带有href值不等于'#'的元素
$("[href$='.jpg']")选取所有href值以.jpg结尾的元素
2.$(function(){
$("[type=password]").keyup(function(){ //注意这里属性选择器必须加上[]否则是选不到密码框
$("#event").append("keyup ");
}).keydown(function(){
$("#event").append("keydown ");
}).keypress(function(){
$("#event").append("keypress ");
});
$(document).keydown(function(event){
if(event.code==13)
alert("确认提交");
});
})
三、焦点事件、得到焦点(focus)失去焦点(blur)
1.回顾一下元素选择器的用法。
$("p") 选取<p>元素
$("p.intro") 选取所有class="intro"的<p>元素
$("p#demo)选取所有id="demo"的<p>元素
四、绑定单个事件(事件绑定的另一种方式)
$(function(){
$("input[name=event_1]").bind("click",function(){
$("p").css("background-color","#F30");
});
});等价于
$(function(){
$("input[name=event_1]").click(function(){
$("p").css("background-color","#F30");
});
})
效果图片如下
五、绑定多个事件
1.$(function(){
$(“inout[name=event_1]”).bind(mouseover:function(){
$(“ul”).css(“display”,”none”);
},
mouseout:function(){
$(“ul”).css(“display”,”block”);
}
);
});
六、复合事件
示例1$(“p”).hover(function(){
$(“p”).css(“background-color”,”yellow”);
},
function(){
$(“p”).css(“background-color”,”pink”);
});
等价于：
$(“p”).mouseover(function(){
$(“p”).css(“background-color”,”yellow”);
}).mouseout(function(){
$(“p”).css(“background-color”,”pink”);
});
示例2.
$(function(){
$(“myccound”).hover(function(){
$(“menu_1”).css(“display”,”block”);
},
Function(){
$(“#menu_1”).css(“display”,”none”);
});
});
3.hover方法规定当鼠标悬停在被选元素上时要运行的两个函数。会触发mouseenter事件和mouseleave事件
注意：如果只指定一个函数、则mouseenter和mouseleave都执行它
2.jQuery动画
一、动画——显示和隐藏
1.$(“.btn2”).click(function(){
$(“p”).show()
});
show(speed,callback)
speed参数是”slow”,”normal”,”fast”或者1000等价于1秒
callback参数是:回调函数、除非设置了speed参数否则不能设置callback参数
2.示例1
说明：input type='hidden'且div style='display:none;'都视为隐藏元素
$(function(){
$(“#del”).click(function(){
$(“.tipsbox”).show(“slow”);
});
$(“input[name=cancel]”).click(function(){
$(“.tipsbox”).hide(“fast”);
});
});
二、动画-隐藏多个元素
1.toggle()可以用于绑定两个或多个事件处理器函数、以响应被选元素的轮流click事件
$(“p”).toggle( function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");});
2.toggle()方法可以用于切换被选元素的hide()和show()方法、也就是对被选元素执行取反操作
示例代码2
$(“input[name=more_btn]”).click(function(){
$(“li:gt(4):not(:last)”).toggle();
});
三、动画-淡入淡出
1.fadeIn(speed,callback)参数的意义和show、hide的参数意义一致
说明：如果元素已经显示那么、该效果不产生任何变化、该效果适用于通过jQuery隐藏的元素、
或在css中声明display:none的元素、（但不适用于visibility:hidden的元素）
$(function(){
$("input[name=fadein_btn]").click(function(){
$("img").fadeIn("slow");
});
})
2. fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。
$("input[name=fadeout_btn]").click(function(){
$("img").fadeOut(1000);
});
四、改变元素的高度
slideUp(speed,callback)和show fadeIn 等方法的参数意义一致
定义和用法：通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。
slideDown(speed,callback) 和show fadeIn 等方法的参数意义一致
定义和用法: 方法通过使用滑动效果，显示隐藏的被选元素。和fadeIn方法功能类似。
(不适用于visibility:hidden的元素）。