资源描述
jQuery方法.docx
《jQuery方法.docx》由会员分享，可在线阅读，更多相关《jQuery方法.docx（24页珍藏版）》请在冰豆网上搜索。
jQuery方法
向下兼容的插件：
jquery-migrate-1.2.1.js
子元素过滤器：
:
nth-child（index）$（".1li:
nth-child
（2）"）找到.1类下的第二个li元素（li要指明出来）与:
eq（index）类似，eq从0开始，nth-child从1开始
setInterval（"startRequest（）",1000）;
get（）:
get（0）获得元旦DOM元素
prop（“checked”）:
返回布尔值，判断checkbox是否被选中
size（）
find（）：
父元素中寻找子元素
children（）
css（）
next（）
nextall（）
prev（）
prevAll（）
siblings（）:
同级上下所有指定元素
prevUntil（）:
遇到指定元素停止选定
nextUntil（）
first（）
last（）
not（）:
not（“:
checked”）
eq（）：
$（".1li"）.eq
（2）.html（）同过滤器一样要加上筛选元素li
has（）：
选择子类有指定类型的指定标签$（"ul"）.has（"[title=one]"）;$（"ul"）.has（".red"）
parent（）：
选择包含有指定元素的元素
paretnsUntil（）:
遇到指定父节点然后停止
attr（）
removeAttr（）
is（）例1：
$（‘.red’）.is（$（‘li’）.get
（2））;判断$（‘.red’）是否$（‘li’）.get
（2）元素判断是否为同一元素
例2：
alert（$（“.red”）.is（function（）{
return$（this）.attr（‘title’）==”列表3”;
}））;注意，必须使用$（this）来表示要判断的元素，否则，不管function里面是否反回true，false都和调用的元素无关
hasClass（）返回true和false
slice（start,end）:
选择从start到end位置的元素，如果是负数，则从后开始
end（）:
找到前一个状态（在链式方法中）
例：
$（"li"）.slice（1,-1）.first（）.end（）相当于$（"li"）.slice（1,-1）
contents（）:
获得某元素下面所有的元素节点，包括文本节点
filter（）灵活性高例1：
$（“li”）.filter（“.red,:
first,:
last”）.css（“background”,”#ccc”）;选择li的class为red的元素，加上首位li元素
例2：
$（“li”）.filter（function（）{
return$（this）.attr（‘class’）==’red’&&$（this）.attr（‘title’）==’列表3’;
}）.css（“background”,”#ccc”）;
选择出class为red并且title属性为列表3的li元素
html（）:
例：
$（‘div’）.html（$（‘div’）.html（）+”Text”）;内容追加
例:
以函数形式追加$（‘div’）.html（function（index,value）{
returnvalue+’Text’;
}）;
text（）
val（）:
设置获取表单内容
each（）
addClass（）
removeClass（）
toggleClass（）默认样式和指定样式的切换
width（）：
已经转化为number，可以直接运算
height（）:
offset（）：
获取某个元素相对于视口的偏移位置，返回的对象有两个属性left和top
position（）：
获取某个元素相对于父元素的偏移位置
scrollTop（）获取垂直滚动条的值$（window）.
scrollTop（value）设置垂直滚动条的值$（window）.
scrollLeft（）获取水平滚动条的值$（window）.
scrollLeft（value）设置水平滚动条的值$（window）.
append（）:
向指定元素内部的后面插入
appendTo（）:
插入到指定元素内部的后面
prepend（）:
向指定元素内部的前面插入
prependTo（）：
插入到指定元素内部的前面
after（）:
在后面插入
before（）:
在前面插入
insertafter（）:
移到指定元素后面
insertbefore（）:
移到指定元素前面
wrap（）:
包裹标签例：
$（“div“）.wrap（“”）;
unwrap（）:
例:
$（"strong"）.unwrap（$（"div"））;不要被某个元素包裹
wrapAll（）:
所有指定元素包裹在一个指定标签里面例:
$（"div"）.wrapAll（""）;
wrapInner（）:
包裹指定元素里面的子元素内容
clone（）:
参数true，false（深克隆，浅克隆）默认为false
remove（）:
移除节点（不保留事件）例：
$（“div”）.remove（“.box”）;删除.box样式的div
detach（）:
移除节点（保留事件）
empty（）:
清空里面内容
replaceWith（）取代
replaceAll（）取代
表单选择器:
:
input使用:
input可以选择全部的表单元素,而直接用input只能选择一部分
:
text
:
password
:
radio
:
checkbox
:
submit
:
reset
:
image
:
button
:
file
:
hidden
表单过滤器:
:
enable
:
disable
:
checked
:
selected
例:
$（":
input[name=select]:
selected"）.val（）选择器与过滤器直接要有空格隔开,否则选择不了
事件：
bind（）
unbind（）
click（）
dblclick（）
mousedown（）
mouseup（）
mouseover（）
mouseout（）
mousemove（）
mouseenter（）
mouseleave（）
keydown（）
keyup（）e.keyCode键码
keypress（）e.charCode字符编码
unload（）
resize（）$（window）.resize（）
scroll（）$（window）.scroll（）
select（）选取表单里面内容时发生
change（）元素内容改变时发生
submit（）
mouseenter（）enter会不触发子节点
mouseover（）over会触发子节点
mouseout（）out会触发子节点
mouseleave（）（）leave会不触发子节点
例：
200px;height:
200px;background:
green;">
100px;height:
100px;background:
red;">
添加事件$（'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'）
升级会员 