一、事件

1、事件冒泡

  • stopPropagation()

    停止事件冒泡

$("span").click(function(event){
	var txt = $("#msg").html() +"<p>内层span元素被点击</p>";
	$("#msg").html(txt);
	event.stopPropagation();
});

  • preventDefault()

    阻止默认行为

$("#submit").bind("click",function(event){
	var username = $("#username").val();
	if(username == ""){
		$("#msg").html("<p>文本框的值不能为空!</p>");
		event.preventDefault();
	}
});

  • return false

    同时对事件对象停止冒泡和默认行为

2、事件对象的属性

  • event.type

    获取事件类型

  • event.target

    获取到触发事件的元素

  • currentTarget

    事件冒泡阶段内当前的DOM元素

  • event.relatedTarget

    事件涉及到的其它DOM元素

  • event.pageX和event.pageY

    获取光标相对于x坐标和y坐标`

  • event.which

    触发事件的键盘或鼠标按键

$("a").mousedown(function(e){
	alert(e.which); //1 = 鼠标左键 2=鼠标中键 3=鼠标右键
});

  • event.metaKey

    键盘事件中获取ctrl键

3、解绑事件

$("#btn").bind("click",myFun1 = function(){
	//….
}).bind("click",myFun2 = function(){
	//…
});
//删除 绑定函数2
$("#btn").unbind("click",myFun2);

4、模拟操作

  • 触发事件
//触发click事件
$("#btn").trigger("click");
  • 传递数据
$("#btn").bind("myClick",function(event,message1,messgae2){
	//…
});

$("#btn").trigger("myClick",["我的自定义","事件"]);

  • 执行默认操作

    trigger()方法触发后会执行浏览器的默认操作，例如：$(“input”).trigger(“focus”) 会在触发focus事件的同时执行浏览器的默认行为：聚焦;

    如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用triggerHandler();

5、命名空间

  • 可以给事件添加命名空间，便于管理。
$("div").bind("click.plugin",function(){ //… });
$("div").bind("mouseover.plugin",function(){ //… });
$("div").bind("dbclick",function(){ //… });
$("button").click(function(){
	//删除plugin的命名空间，不在plugin的命名空间的dbclick事件仍然存在
	$("div").unbind(".plugin"); 
});
  • 相同事件名称，不同命名空间执行方法
$("div").bind("click",function(){
	//…
});
$("div").bind("click.plugin",function(){
	//…
});
$("button").click(function(){
	//匹配所有不包含在命名空间中的click方法
	$("div").trigger("click!"); 

	//触发所有click事件
	$("div").trigger("click");
});

二、动画

1、常用方法

  • hide()和show()

    隐藏、显示选中的元素（同时改变宽度、高度和不透明度）

  • toggle()

    切换 显示/隐藏 的效果

  • fadeIn()和fadeout()

    淡入、淡出（改变元素的不透明度）

  • fadeToggle()

    切换 淡入/淡出 的效果

  • slideUp()和slideDown()

    向上滑动隐藏选中元素、向下滑动显示选中元素

  • slideToggle()

    切换 向上滑动隐藏元素/向下滑动显示元素 的效果

  • fadeTo()

    逐渐调整选中元素的不透明度到指定的值

  • animate()

    自定义动画效果

$("p").animate({height:"show",width:"show",opacity:"show"},400); 
//等价于 
$("p").show(400);

$("p").animate({opacity:"show"},400); 
//等价于 
$("p").fadeIn(400);

$("p").animate({height:"show"},400); 
//等价于 
$("p").slideDown(400);

$("p").animate({opacity:"0.6"},400); 
//等价于 
$("p").fadeTo(400,0.6);

2、动画队列

  • 一组元素上的动画队列

    • 当在一个animate()方法中应用多个属性时，动画是同时发生的
    • 当以链式的写法使用adimate()方法时，动画是按照顺序发生的

  • 多组元素上的动画效果

    • 默认情况下，动画都是同时发生的
    • 当以回调的形式应用动画方式时，动画是按照回调函数的顺序发生的

三、Ajax

  • $.get()

    $.get()方法中data参数不仅可以使用映射方式：

{
	username: $("#username").val(),
	content: $("#content").val()
}

还可以使用字符串方式：

"username="+encodeURIComponent($("#username").val())
+"&content="+encodeURIComponent($("#content").val())