jQuery方法.docx

添加事件$（'div'）.mouseover（）;：

移入div会触发，移入p再触发：

$（'div'）.mouseenter（）;：

穿过div或者p，在这个区域只触发一次

focus（）当前绑定的input元素触发（只能是input绑定该事件才有效）

blur（）当前绑定的input元素触发

focusin（）如果绑定的是input元素的父节点，也可以触发其子元素input（如div绑定该事件）

focusout（）如果绑定的是input元素的父节点，也可以触发其子元素input

hover（F1，F2）:

鼠标移入时执行F1函数，移出时执行F2函数

toggle（）已经废弃

自己构造toggle方法：

varflag=1;

$（"#toggle"）.click（function（）{

if（flag==1）{

$（this）.css（"background","black"）;

flag=2;

}elseif（flag==2）{

$（this）.css（"background","green"）;

flag=3;

}elseif（flag==3）{

$（this）.css（"background","blue"）;

flag=1;

}

}）;

事件对象：

Function（e）{

returne.target;

}

属性

type

target是获取触发元素的DOM，触发元素，就是你点了哪个就是哪个

data获取事件调用的额外数据

$（'input'）.click（{user:

'Lee',age:

100},function（e）{

alert（e.data.user）;//Lee

}）;

relatedTarget获取移入移出目标点离开或进入的那个DOM元素（绑定在mouseover事件）

currentTarget得到的是监听元素的DOM，你绑定的哪个就是哪个

pageX/pageY

screen/screen

clientX/clientY

timeStamp

which获取鼠标的左中右键（1,2,3）或获取键盘按键（绑定在click事件）

altKey/shiftKey/ctrlKey是否按下alt,shift,ctrl

方法：

同时阻止事件冒泡和默认行为

$（“a”）.click（function（）{

returnfalse;

}）

event.stopPropagation（）：

阻止事件冒泡

event.preventDefault（）:

阻止默认行为

isDefaultPrevented（）判断是否调用了preventDefault（）方法

isPropagationStopped（）判断是否调用了stopPropagation（）方法

stopImmediatePropagation（）取消事件冒泡，并取消该事件的后续事件处理函数

isImmediatePropagationStopped（）判断是否调用了stopImmediatePropagation（）方法

triggler（）：

$（":

button"）.trigger（"click"）;

例：

$（":

button"）.click（function（e,data1,data2）{

alert（data1+":

"+data2）;

}）.trigger（"click",["123","asd"]）;

trigglerHandler（）与trigger（）区别：

（1）..triggerHandler（）方法不会触发事件的默认行为

（2）triggerHandler（）方法会返回当前事件执行的返回值，trigger（）则返回当前包含事件触发元素的jQuery对象（3）triggerHandler（）方法只会影响第一个匹配到的元素，而.trigger（）会影响所有（4）triggerHandler（）不会冒泡

命名空间：

$（":

button"）.bind（"click.aa",function（）{

alert（"aaa"）;

}）;

click（）

事件委托：

动态绑定功能（可以为新添加的元素绑定事件，bind不能实现）

on（）：

将div1子元素下button的事件都委托给父亲div1（可以动态增加button）

例：

$（".div1"）.on（"click",":

button",function（）{

$（this）.clone（）.appendTo（".div1"）;

}）

但本事div1是没有事件的，点击div1本身没有事件发生

如果clone（true）的话是事件绑定不是事件委托

off（）：

移除事件委托例：

$（".div1"）.off（"click",":

button"）;

one（）：

只触发一次事件

动画效果：

show（）：

显示（有回调函数）

例：

$（'#box'）.show（'slow',function（）{

alert（'动画持续完毕后，执行我！

'）;

}）;

列队动画：

$（'div'）.first（）.show（'fast',functionshowSpan（）{显示完一个再显示另一个

$（this）.next（）.show（'fast',showSpan）;

}）;

hide（）：

隐藏

toggle（）:

结合show（）和hide（）

slideDown（）:

向上滑动

slideUp（）:

向下滑动

slideToggle（）：

结合slideDown（）和slideUp（）

fadeIn（）:

淡入

fadeout（）:

淡出

fadeToggle（）:

结合fadeIn（）和fadeOut（）

fadeTo（）:

例：

$（".div1"）.fadeTo（1000,0.33）

自定义动画：

animate（）里面可以放CSS样式，回调函数例：

$（'#box'）.animate（{

'margin-top':

'300px',

'height':

'200px'

},1000,function（）{

alert（'动画执行完毕执行我！

'）;

}）;

自定义动画的累加、累减功能：

$（'#box'）.animate（{

'margin-left':

'+=100px',

}）;

//通过连缀实现列队动画

$（'.animate'）.click（function（）{

$（'#box'）.animate（{

'left':

'100px'

}）.animate（{

'top':

'100px'

}）.animate（{

'width':

'300px'

}）;

}）;

//通过回调函数实现列队动画

$（'.animate'）.click（function（）{

$（'#box'）.animate（{

'left':

'100px'

},function（）{

$（'#box'）.animate（{

'top':

'100px'

},function（）{

$（'#box'）.animate（{

'width':

'300px'

}）;

}）;

}）;

}）;

如果动画方法，连缀可以实依次列队，而.css（）方法不是动画方法，会在一开始传入列队之前

queue（）里面放CSS样式实现列队动画方式（最好）：

$（'#box'）.slideUp（'slow'）.slideDown（'slow'）.queue（function（）{

$（this）.css（'background','orange'）;

}）;

如果queue后面好像增加动画需要queue里面函数需要next参数，调用next（）

$（'#box'）.slideUp（'slow'）.slideDown（'slow'）.queue（function（next）{

$（this）.css（'background','orange'）;

next（）;

}）.hide（'slow'）;

获取当前列队的长度，fx是默认列队的参数

$（"#box"）.queue（'fx'）.length;

stop（）:

停止动画，如果是列队动画停止的话那么会停止掉第一个动画，后面继续执行后面的动画

例：

$（'#box'）.stop（true,true）;

第一个参数为true的话，就是停止并且清除后面的列队动画，动画完全停止

第二个参数为true的话，就是停止后会跳转到末尾的位置上

delay（）：

延迟效果

一个过滤器:

animated，这个过滤器可以判断出当前运动的动画是哪个元素

//递归执行自我，无线循环播放

$（'#box'）.slideToggle（'slow',function（）{

$（this）.slideToggle（'slow',arguments.callee）;

}）;

//停止正在运动的动画，并且设置红色背景

$（'.button'）.click（function（）{

$（'div:

animated'）.stop（）.css（'background','red'）;

}）;

//设置运行帧数为1000毫秒

$.fx.interval=1000;//默认为13

//设置动画为关闭true

$.fx.off=true;//默认为false

swing（缓动）（两头慢中间快）、linear（匀速），默认为swing。

$（'#box'）.animate（{

left:

'800px'

},'slow','swing'）;

$（'#pox'）.animate（{

left:

'800px'

},'slow','linear'）;

Ajax异步：

load（）:

可以用于异步分页（需要服务器）将页面内容或服务器返回内容加载到元素上

例：

$（'input'）.click（function（）{

$（'#box'）.load（'test.html'）;将页面内容加载到box上

}）;

$（'#box'）.load（'test.html.my'）;可以加上选择器对test.html内容筛选

//get方式接受的PHP，默认是get

$（'input'）.click（function（）{

$（'#box'）.load（'test.php?

url=ycku'）;

}）;

//传递data，则为post方式post提交时用对象键值对{}

$（'input'）.click（function（）{

$（'#box'）.load（'test.php',{

url:

'ycku'

}）;

}）;

回调函数：

response是服务器返回的内容，status是返回的状态（成功：

status==”success”），

xhr.responseText等于response内容，xhr.status返回的是数字（成功200）

$（'input'）.click（function（）{

$（'#box'）.load（'test.php',{

url:

'ycku'

},function（response,status,xhr）{

alert（'返回的值为：

'+response+'，状态为：

'+status+'，

状态是：

'+xhr.statusText）;

}）;

}）;

$.get（）:

例：

$（'input'）.click（function（）{

$.get（'test.php?

url=ycku',function（response,status,xhr）{

if（status=='success'）{

$（'#box'）.html（response）;

}

}）

}）;

get提交参数还有其他两种：

{url:

ycku;}或者’url=ycku’

$.post（）:

例：

$.post（'test.php',{

url:

'ycku'

},function（response,status,xhr）{

$（'#box'）.html（response）;

}）;

post提交参数两种：

{url:

ycku;}或者’url=ycku’

get获取XML数据：

//使用$.get（）异步返回xmlresponse是XMLObject对象

$（'input'）.click（function（）{

$.get（'test.xml',function（response,status,xhr）{

$（'#box'）.html（$（response）.find（'root'）.find（'url'）.text（））;

}）;//type自动转为xml

}）;

test.xml内容：

xmlversion=”1.0”?

>

get获取JSON数据：

//使用$.get（）异步返回json

$.get（'test.json',function（response,status,xhr）{

alert（$（response）[0].url）;

}）;

test.json内容：

[

{“url”:

””}

]

$.getScript（）例：

$（'input'）.click（function（）{当点击按钮时test.js文件才被加载

$.getScript（'test.js'）;

}）;

$.getJSON（）例：

$（'input'）.click（function（）{

$.getJSON（'test.json',function（response,status,xhr）{

alert（response[0].url）;

}）;

}）;

也可以服务器返回json格式的字符串，再$.get（）方法后面添加”json”参数强制转换类型（xml也可以）

$（":

input"）.click（function（）{

$.get（"AjaxTest.php",function（response,stutas,xhr）{

alert（response）;

alert（$（response）[0].url）;

},"json"）;

}）;

AjaxTest.php内容：

php

echo'[{"url":

""}]';

?

>

$.ajax（）异步最底层方法：

$（'input'）.click（function（）{

$.ajax（{

type:

'POST',

url:

'test.php',

data:

{

url:

'ycku'

},

success:

function（response,stutas,xhr）{

$（'#box'）.html（response）;

}

}）;

}）;

Serialize（）表单序列化：

$（'forminput[type=button]'）.click（function（）{

$.ajax（{

type:

'POST',

url:

'test.php',

data:

$（'form'）