一，事件
1,加载事件
|
1
2
3
4
5
6
|
$(document).ready(function(){ //todo}); //dom准备就绪后执行ready里面的函数，此时dom对应的相关文件(比如图片)可能还未加载完毕，此时图片的height和width还不能访问。$img.load(function(){ //todo}); //图片加载完毕后执行里面的函数。 |
2，事件绑定：
1）
|
1
2
3
4
5
6
7
8
|
var $ul=$("#ulMain"); $ul.bind("click",{name:"zy",age:22},function(event){ alert(event.data.name); }); //绑定ul的click事件，并传递一个参数（参数类型为一个对象）。bind方法可以多次调用。简写方式如下：$ul.click({name:"zy",age:22},function(event){ alert(event.data.name); }); |
2）一次绑定多个事件：
|
1
2
3
|
$("#divMain").bind("mouseenter mouseleave",function(){ $(this).append($("<b>div append</b>")); }); |
3）添加事件命名空间：
|
1
2
3
4
5
6
7
8
9
10
11
|
$("#divMain").bind("mouseenter.divevent",function(){ $(this).append($("<b>div mouseenter</b><br/>")); }).bind("click.divevent",function(){ $(this).append($("<b>div click</b><br/>")); }).bind("dblclick.divevent",function(){ $(this).append($("<b>div dblclick</b><br/>")); }); $("#btnSubmit").bind("click",function(){ $("#divMain").unbind(".divevent"); //解除命名空间即可 }); |
4）相同事件名，不通命名空间：
|
1
2
3
4
5
6
7
8
9
10
|
$("#divMain").bind("click",function(){ $(this).append($("<b>div click</b><br/>")); }).bind("click.divevent",function(){ $(this).append($("<b>div click.divevent</b><br/>")); }); $("#btnSubmit").bind("click",function(){ $("#divMain").trigger("click!"); //感叹号表示仅触发没有命名空间的事件，这里仅会触发click事件，注意：1.9及以后版本移除了该功能！ $("#divMain").trigger("click"); //触发所有click事件，这里会触发click和click.divevent事件。 }); |
3，合成事件：
即绑定了2个事件：
1）hover事件：模拟光标移入移出事件，它是用来替代mouseenter, mouseleave事件的，而非mouseover, mouseout事件。
|
1
2
3
4
5
6
|
var $ul=$("#ulMain"); $ul.hover(function(){ $(this).css({backgroundColor:"red"});//光标移入该元素时修改背景色为红色 },function(){ $(this).css({backgroundColor:"white"});//光标移入该元素时修改背景色为白色 }); |
2）toggle事件：有两个功能：
2.1） 鼠标连续单击同一元素依次执行相应的处理函数：toggle(fn1, fn2, fn3, ... fnN); 但是该功能在1.9及以后版本移除了，请注意。
|
1
2
3
4
5
6
7
|
$("#btnMain").toggle(function(){ $ul.css("color","red"); },function(){ $ul.css("color","yellow"); },function(){ $ul.css("color","blue"); }); //依次单击按钮触发的事件。 |
2.2) 控制相应元素的显示和隐藏：
|
1
2
3
4
|
var $ul=$("#ulMain"); $("#btnMain").click(function(){ $ul.toggle(); }); // 单击按钮时，隐藏或显示ul |
3，事件冒泡：例如：如果span元素注册了click事件，span的父元素div也注册了click事件，div的父元素也注册了click事件，
那么单击span会依次触发这三个事件。
3.1） 阻止事件冒泡：
|
1
2
3
4
|
$("#spanMain").click(function(event){ $("#spanSpan").text("span click"); event.stopPropagation(); // 阻止事件冒泡，event为事件对象 }); |
3.2）阻止默认行为：
|
1
2
3
4
5
6
7
|
$("#btnSubmit").click(function(event){ if($("txtName")=="") { //todo,错误提示 event.preventDefault();//阻止submit的默认行为，即不提交表单。 } }); |
若要同时阻止事件冒泡和默认行为，可以在事件处理函数中返回 return false。
5，事件对象的属性：
1）type属性：
|
1
2
3
|
$("#btnPay").click(function( event ){ alert(event.type); //事件的类型，此处输出 click}); |
2) event.stopPropagation(); //阻止冒泡行为
3）event.preventDefault(); //阻止默认行为
4）target属性：
|
1
2
3
4
5
|
$("a").click(function(event){ var tg=event.target;//获取触发事件的元素，这里为<a/>，该对象是DOM对象 alert(tg.href); return false; }); |
5）relatedTarget属性：
|
1
2
3
4
5
6
7
8
|
$("a").mouseover(function(event){ var reltg=event.relatedTarget; //相当于IE中的event.fromElement，即光标是从哪个元素移入的 alert(reltg.toString()); // return false; }); //$("a").mouseout(function(event){ alert(event.relatedTarget.toString()); // 针对mouseout，相当于IE中的event.toElement，即光标移出后到哪个元素上了。 }); |
6) pageX，pageY属性：获取到光标相对于页面的x坐标和y坐标。
|
1
2
3
4
|
$("a").click(function(event){ alert(event.pageX+","+event.pageY); return false; }); |
7） which属性：鼠标单击事件中获取鼠标的左，中，右键对应的值，键盘事件中获取键盘的按键。
|
1
2
3
|
$("#txtMain").keyup(function(e){ alert(e.which); // 比如按键盘上的A，则返回65 }); |
8）特殊键属性：如ctrlKey, altKey, shiftKey，按了哪个键，就会返回true，否则返回false。
|
1
2
3
|
$("#txtMain").keydown(function(e){ alert(e.ctrlKey+"，"+e.shiftKey+"，"+e.altKey); }); |
6，移除事件：
1) unbind方法：
unbind(); //删除所有事件
unbind(eventTypeString); //只删除指定类型的事件，比如"click"
unbind(eventTypeString, funcName); //删除指定类型事件的指定处理函数。
下面是最后一个例子：
|
1
2
3
4
5
6
7
8
9
10
|
var $ul =$("#ulMain"); $("#btnMain").click(func1= function(e){ $ul.append($("<li>func1</li>")); }).click(func2=function(){ $ul.append($("<li>func2</li>")); }); $("#btnDel").click(function(){ $("#btnMain").unbind("click",func2); }); |
2）one方法：仅执行一次绑定的事件，用法同bind方法。
|
1
2
3
4
|
var $ul =$("#ulMain"); $("#btnMain").one("click",function(){ $ul.append($("<li>func1</li>")); }); //click事件仅会触发一次。 |
7，模拟操作：
1）trigger()方法： 该方法能触发相应事件，比如：
|
1
2
3
4
5
6
7
|
$("#btnMain").bind("click",function(e,name,age){$(function(){ var $ul =$("#ulMain"); $("#btnMain").bind("click",function(e,name,age){ alert(name+","+age); }).trigger("click",["zy",11]); // 页面加载后就会执行click事件处理函数。 }); |
另外还会执行浏览器默认操作：
$("#txtMain").trigger("focus"); //触发元素的focus事件，同时元素本身获得焦点。
下面的函数仅触发事件，不执行浏览器默认操作：
$("#txtMain").triggerHandler("focus"); //触发元素的focus事件，不执行默认操作。
二，动画
jquery动画要求在标准模式下，即文件头包含如下内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1， show() , hide(): 原理是修改元素的display样式。
|
1
2
3
4
5
6
|
$divMain =$("#divMain"); $("#btnSubmit").toggle(function(){ $divMain.hide(1000); //元素在1000毫秒内隐藏掉，不带参数会立即隐藏 },function(){ $divMain.show(1500); //元素在1500毫秒内显示出来 }); |
2，fadeIn() , fadeOut(): 原理：改变元素透明度。
fadeIn: 在一段时间内增加元素的不透明度，直到元素完全显示出来。
fadeOut: 在一段时间内降低元素的不透明度，直到元素完全显示消失。
3，slideUp(), slideDown(): 原理：改变元素高度。
slideUp: 元素由下到上缩短至隐藏。
slideDown: 元素由上到下延伸至显示。
|
1
2
3
4
5
6
|
$divMain =$("#divMain"); $("#btnSubmit").toggle(function(){ $divMain.slideUp(); },function(){ $divMain.slideDown(); }); |
4，自定义动画方法animate()
语法：animate(params, speed, callback);
1) 向右移动500px
样式：
|
1
2
3
4
5
6
7
8
|
#divMain{ position:relative; //或者是absolute，这样才可以影响元素的top, left, bottom, right属性。 width:300px; height:300px; border:1px solid #005000; background:#96E555; cursor:pointer; } |
JS脚本：
|
1
2
3
4
5
6
|
$(function(){ $divMain =$("#divMain"); $("#btnSubmit").click(function(){ $divMain.animate({left:"500px"}, 2000,null); }); }); |
2）累加，累减动画：
|
1
2
3
4
|
$divMain =$("#divMain"); $("#btnSubmit").click(function(){ $divMain.animate({left:"+=200px"}, 2000); //在当前位置累加200px }); |
3)多重动画：
|
1
2
3
4
|
$divMain =$("#divMain"); $("#btnSubmit").click(function(){ $divMain.animate({left:"+=200px",height:"-=50px"}, 2000); // 位置变化的同时，高度也在变化 }); |
4）顺序执行动画：
|
1
2
3
4
|
$("#btnSubmit").click(function(){ $divMain.animate({left:"+=100px"}, 1000) .animate({height:"-=50px"},1000); }); |
5，停止动画和判断是否处于动画状态：
1）停止动画：
|
1
2
3
4
5
|
stop(clearQueue, gotoEnd); // clearQueue表示是否清空未执行完的队列， gotoEnd表示是否将正在执行的动画跳转到末状态。$divMain =$("#divMain"); $("#btnSubmit").click(function(){ $divMain.stop().animate({left:"+=100px"}, 1000); // 停止当前正在执行的动画，立即执行向右移动100的动画。 }); |
2) 判断元素是否处在动画中：
|
1
2
3
4
5
6
7
|
$divMain =$("#divMain"); $("#btnSubmit").click(function(){ if(!$divMain.is(":animated")) //元素不处于动画中才执行下面的动画 { $divMain.animate({left:"+=100px"}, 1000); } }); |
3）延迟执行动画：delay()函数
|
1
2
3
4
5
6
7
|
$divMain =$("#divMain"); $("#btnSubmit").click(function(){ if(!$divMain.is(":animated")) { $divMain.delay(2000).animate({left:"+=100px"}, 1000); //推迟2秒后才执行动画 } }); |
6，其它动画函数：
1）slideToggle(): 改变元素高度来隐藏元素
|
1
2
3
4
|
$divMain =$("#divMain"); $("#btnSubmit").click(function(){ $divMain.slideToggle(); }); |
2）fadeTo() 调整元素的不透明度，不改变宽高：
|
1
2
3
4
|
$divMain =$("#divMain"); $("#btnSubmit").click(function(){ $divMain.fadeTo(1000,0.2); //用1000毫秒时间将不透明度调整到20% }); |
3）fadeToggle() 切换元素的不透明度：
|
1
2
3
4
|
$divMain =$("#divMain"); $("#btnSubmit").click(function(){ $divMain.fadeToggle(); }); |