首先说jQuery的事件。
<input type="button" id="btn" value="张三"/>
<p id="p1"><font color="red"></font></p>
<input type="text" id="txt"/>
1.文档加载事件:$(document).ready()
$(document).ready(function(){
}
当文档加载后执行的。
2.鼠标点击事件:.click() 单击; dblclick() 双击
//鼠标点击事件
//1.单击事件
$("#btn").click(function(){
$("#p1").html("<font color=red>张三被单击了</font>");
});
//2.双击事件
$("#btn").dblclick(function(){
$("#p1").html("<font color=red>张三被双击了</font>");
});
3.获得焦点与失去焦点:.focus() 获得焦点;.blur() 失去焦点
//获得焦点与失去焦点
//1.获得焦点
$("#txt").focus(function(){
$("#txt").val("获得焦点");
});
//2.失去焦点
$("#txt").blur(function(){
$("#txt").val("失去焦点");
});
4.鼠标移入和移出事件:.mouseover() 鼠标移入;.mouseout() 鼠标移出
//1.鼠标移入
$("#txt").mouseover(function(){
$("#txt").val("鼠标移入");
});
//1.鼠标移出
$("#txt").mouseout(function(){
$("#txt").val("鼠标移出");
});
再说jQuery的动画:
1.隐藏与显示DOM: .show() 显示; .hide()隐藏
$("#b1").click(function(){
$("#p1").show();
});
$("#b2").click(function(){
$("#p1").hide();
});
2.淡入淡出效果
fadeIn():淡入,括号里可以加修饰,"slow","fast",10000
fadeOut():淡出.括号里可以加修饰,"slow","fast",10000
fadeTaggle():淡入淡出开关:淡入变淡出,淡出变淡入,同样可以加参数
$("#b3").click(function(){
$("#d1").fadeIn();
});
$("#b4").click(function(){
$("#d1").fadeOut();
});
$("#b5").click(function(){
//$("#d1").fadeToggle();
//$("#d1").fadeToggle("slow");
//$("#d1").fadeToggle("fast");
$("#d1").fadeToggle(5000);
});
3.透明度效果:
dadeTo( , ):第一个参数负责变化的快慢,第二个参数表示透明程度,范围是0--1,数值越大,透明度越不好。越小越透明。
$("#b6").click(function(){
$("#d1").fadeTo("slow",0.1);
$("#d2").fadeTo("slow",0.5);
$("#d3").fadeTo("slow",0.9);
});
4.滑动效果:
slideDown(" "):向下滑动效果,参数为变化的快慢
slideUp(""):向上滑动效果。参数为变化的快慢
$("#b7").click(function(){
$("#d4").slideDown("slow");
});
$("#b8").click(function(){
$("#d4").slideUp("slow");
});
5.移动效果
animate({
方向:,
opacity:透明度
height:'150px', ----> +=是逐渐变化,每次加1
width:'150px'
})
$("#b9").click(function(){
$("#d5").animate({
left:'500px',
},"slow");
});
$("#b10").click(function(){
$("#d5").animate({
left:'500px',
opacity:0.5,//透明度
height:'150px',
width:'150px'
},"slow");
});
$("#b11").click(function(){
$("#d5").animate({
left:'500px',
opacity:0.5,//透明度
height:'+=150px',
width:'+=150px'
},"slow");
});
6,暂停动画:
随时暂停正在动画的DOM,再次执行动画继续。
$("#b14").click(function(){
$("#d6").stop();
});
最后说一下,jquery的回调方法:
当执行完方法后的方法,下面的例子就是,当执行完show方法后,执行的方法。这就称为回调方法。
$("#b12").click(function(){
$("#p2").show(function(){
alert("傻逼出来了");
});
});