让元素隐藏出现
通过控制元素的宽高，来实现
hide(slow|normal|fast|num) //元素隐藏
show() //元素出现
toggle() //合成写法
让元素淡入淡出
通过控制元素的透明度来实现，出现隐藏
fadeIn(); //淡入
fadeOut(); //淡出
fadeToggle(); //合成
卷帘式
通过控制元素的高度来实现
slideUp();
slideDown();
slideToggle();
自定义动画
$("div").animate(最终状态,执行时间,回调函数);
$("div").animate({"top":"500px"},2000,function(){console.log("down");});
$("div").animate({"left":"500px","top":"500px"},2000);//同时执行
**延迟动画 **
$("div").delay(2000).animate({"left":"+=500"},2000);
stop(是否清空动画队列,是否显示最终效果)
$("div").hover(function(){
$(this).stop(true);
$(this).animate({"width":"400px"},1000)
.animate({"height":"400px"},1000)
},function(){
$(this).stop(true);//停止动画
$(this).animate({"width":"200px"},1000)
.animate({"height":"200px"},1000)
})
事件触发
jQuery中有两种事件触发
- $("button").click(); //只能用于官方定义的事件
- $(":text").trigger("focus");
自定义事件
注意：自定义事件 必须通过on bind绑定
$("button").on("myEvent",function(){alert("自定义事件");})
触发自定义的事件
$("button").trigger("myEvent");
给div自定义上滑下滑左滑右滑的事件
$("div").on("slideup",function(){$(this).html("上滑");})
.on("slidedown",function(){$(this).html("下滑");})
.on("slideleft",function(){$(this).html("左滑");})
.on("slideright",function(){$(this).html("右滑");});
var startX,startY;
$("div").mousedown(function(e){
startX = e.pageX;
startY = e.pageY;
}).mouseup(function(e){
var endX = e.pageX;
var endY = e.pageY;
if ( endY<startY-50&&Math.abs(endX-startX)<50 ) {
$(this).trigger("slideup");
}
if (endY>startY+50&&Math.abs(endX-startX)<50) {
$(this).trigger("slidedown");
}
if (endX<startX-50&&Math.abs(endY-startY)<50) {
$(this).trigger("slideleft");
}
if (endX>startX+50&&Math.abs(endY-startY)<50) {
$(this).trigger("slideright");
}
});
事件委托
事件委托，也叫事件代理。利用事件冒泡给父元素添加事件处理程序，从而使所有子元素都可以处理该事件。
优点：
减少DOM操作，提高交互效率。
-
新添加的子元素同样可以响应事件。
$("ul").click(function(e){
//e.target指的是li DOM节点
$(e.target).css("background-color","red");
});
练习：
$("table").click(function(e){
console.log(e.target);
// not("筛选条件") 去除指定筛选条件的元素
$(e.target).not("tbody,tr").css("background-color","red");
})
