JQuery常用方法一览.docx

JQuery常用方法一览.docx

《JQuery常用方法一览.docx》由会员分享，可在线阅读，更多相关《JQuery常用方法一览.docx（37页珍藏版）》请在冰豆网上搜索。

JQuery常用方法一览

JQuery：

常用方法一览

Attribute：

$（”p”）.addClass（css中定义的样式类型）;给某个元素添加样式

$（”img”）.attr（{src:

”test.jpg”,alt:

”testImage”}）;给某个元素添加属性/值，参数是map

$（”img”）.attr（”src”,”test.jpg”）;给某个元素添加属性/值

$（”img”）.attr（”title”,function（）{returnthis.src}）;给某个元素添加属性/值

$（”元素名称”）.html（）;获得该元素内的内容（元素，文本等）

$（”元素名称”）.html（”newstuff”）;给某元素设置内容

$（”元素名称”）.removeAttr（”属性名称”）给某元素删除指定的属性以及该属性的值

$（”元素名称”）.removeClass（”class”）给某元素删除指定的样式

$（”元素名称”）.text（）;获得该元素的文本

$（”元素名称”）.text（value）;设置该元素的文本值为value

$（”元素名称”）.toggleClass（class）当元素存在参数中的样式的时候取消,如果不存在就设置此样式

$（”input元素名称”）.val（）;获取input元素的值

$（”input元素名称”）.val（value）;设置input元素的值为value

Manipulation：

$（”元素名称”）.after（content）;在匹配元素后面添加内容

$（”元素名称”）.append（content）;将content作为元素的内容插入到该元素的后面

$（”元素名称”）.appendTo（content）;在content后接元素

$（”元素名称”）.before（content）;与after方法相反

$（”元素名称”）.clone（布尔表达式）当布尔表达式为真时，克隆元素（无参时，当作true处理）

$（”元素名称”）.empty（）将该元素的内容设置为空

$（”元素名称”）.insertAfter（content）;将该元素插入到content之后

$（”元素名称”）.insertBefore（content）;将该元素插入到content之前

$（”元素”）.prepend（content）;将content作为该元素的一部分，放到该元素的最前面

$（”元素”）.prependTo（content）;将该元素作为content的一部分，放content的最前面

$（”元素”）.remove（）;删除所有的指定元素

$（”元素”）.remove（”exp”）;删除所有含有exp的元素

$（”元素”）.wrap（”html”）;用html来包围该元素

$（”元素”）.wrap（element）;用element来包围该元素

Traversing：

add（expr）

add（html）

add（elements）

children（expr）

contains（str）

end（）

filter（expression_r_r）

filter（filter）

find（expr）

is（expr）

next（expr）

not（el）

not（expr）

not（elems）

parent（expr）

parents（expr）

prev（expr）

siblings（expr）

Core：

$（html）.appendTo（”body”）相当于在body中写了一段html代码

$（elems）获得DOM上的某个元素

$（function（）{……..}）;执行一个函数

$（”div>p”）.css（”border”,“1pxsolidgray”）;查找所有div的子节点p，添加样式

$（”input:

radio”,document.forms[0]）在当前页面的第一个表单中查找所有的单选按钮

$.extend（prop）prop是一个jquery对象，

举例：

jQuery.extend（{

min:

function（a,b）{returna

a:

b;},

max:

function（a,b）{returna>b?

a:

b;}

}）;

jQuery（expression_r_r,[context]）—$（expression_r_r,[context]）;在默认情况下，$（）查询的是当前HTML文档中的DOM元素。

each（callback）以每一个匹配的元素作为上下文来执行一个函数

举例：

1

$（”span”）.click（function）{

$（”li”）.each（function（）{

$（this）.toggleClass（”example”）;

}）;

}）;

举例：

2

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

$（”div”）.each（function（index,domEle）{

//domEle==this

$（domEle）.css（”backgroundColor”,“yellow”）;

if（$（this）.is（”#stop”））{

$（”span”）.text（”Stoppedatdivindex#”+index）;

returnfalse;

}

}）;

}）;

jQueryEvent:

ready（fn）;$（document）.ready（）注意在body中没有onload事件，否则该函数不能执行。

在每个页面中可以

有很多个函数被加载执行，按照fn的顺序来执行。

bind（type,[data],fn）为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。

可能的事件属性有：

blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,

mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,

keyup,error

one（type,[data],fn）为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。

在每个对

象上，这个事件处理函数只会被执行一次。

其他规则与bind（）函数相同。

trigger（type,[data]）在每一个匹配的元素上触发某类事件。

triggerHandler（type,[data]）这一特定方法会触发一个元素上特定的事件（指定一个事件类型），同时取消浏览器对此事件的默认行动

unbind（[type],[data]）反绑定，从每一个匹配的元素中删除绑定的事件。

$（”p”）.unbind（）移除所有段落上的所有绑定的事件

$（”p”）.unbind（“click”）移除所有段落上的click事件

hover（over,out）over,out都是方法,当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。

当鼠标移出这个元素时，会触发指定的第二个函数。

$（”p”）.hover（function（）{

$（this）.addClass（”over”）;},

function（）{

$（this）.addClass（”out”）;}）;

toggle（fn,fn）如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。

$（”p”）.toggle（function（）{

$（this）.addClass（”selected”）;},

function（）{

$（this）.removeClass（”selected”）;}）;

元素事件列表说明

注：

不带参数的函数，其参数为可选的fn。

jQuery不支持form元素的reset事件。

事件描述支持元素或对象

blur（）元素失去焦点a,input,textarea,button,select,label,map,area

change（）用户改变域的内容input,textarea,select

click（）鼠标点击某个对象几乎所有元素

dblclick（）鼠标双击某个对象几乎所有元素

error（）当加载文档或图像时发生某个错误window,img

focus（）元素获得焦点a,input,textarea,button,select,label,map,area

keydown（）某个键盘的键被按下几乎所有元素

keypress（）某个键盘的键被按下或按住几乎所有元素

keyup（）某个键盘的键被松开几乎所有元素

load（fn）某个页面或图像被完成加载window,img

mousedown（fn）某个鼠标按键被按下几乎所有元素

mousemove（fn）鼠标被移动几乎所有元素

mouseout（fn）鼠标从某元素移开几乎所有元素

mouseover（fn）鼠标被移到某元素之上几乎所有元素

mouseup（fn）某个鼠标按键被松开几乎所有元素

resize（fn）窗口或框架被调整尺寸window,iframe,frame

scroll（fn）滚动文档的可视部分时window

select（）文本被选定document,input,textarea

submit（）提交按钮被点击form

unload（fn）用户退出页面window

JQueryAjax方法说明:

load（url,[data],[callback]）装入一个远程HTML内容到一个DOM结点。

$（”#feeds”）.load（”feeds.html”）;将feeds.html文件载入到id为feeds的div中

$（”#feeds”）.load（”feeds.php”,{limit:

25},function（）{

alert（”Thelast25entriesinthefeedhavebeenloaded”）;

}）;

jQuery.get（url,[data],[callback]）使用GET请求一个页面。

$.get（”test.cgi”,{name:

“John”,time:

“2pm”},function（data）{

alert（”DataLoaded:

”+data）;

}）;

jQuery.getJSON（url,[data],[callback]）使用GET请求JSON数据。

$.getJSON（”test.js”,{name:

“John”,time:

“2pm”},function（json）{

alert（”JSONData:

”+json.users[3].name）;

}）;

jQuery.getScript（url,[callback]）使用GET请求javascript文件并执行。

$.getScript（”test.js”,function（）{

alert（”Scriptloadedandexecuted.”）;

}）;

jQuery.post（url,[data],[callback],[type]）使用POST请求一个页面。

ajaxComplete（callback）当一个AJAX请求结束后，执行一个函数。

这是一个Ajax事件

$（”#msg”）.ajaxComplete（function（request,settings）{

$（this）.append（”

}）;

ajaxError（callback）当一个AJAX请求失败后，执行一个函数。

这是一个Ajax事件

$（”#msg”）.ajaxError（function（request,settings）{

$（this）.append（”

}）;

代码

ajaxSend（callback）在一个AJAX请求发送时，执行一个函数。

这是一个Ajax事件

$（”#msg”）.ajaxSend（function（evt,request,settings）{

$（this）.append（”

+“

}）;

ajaxStart（callback）在一个AJAX请求开始但还没有激活时，执行一个函数。

这是一个Ajax事件

当AJAX请求开始（并还没有激活时）显示loading信息

$（”#loading”）.ajaxStart（function（）{

$（this）.show（）;

}）;

ajaxStop（callback）当所有的AJAX都停止时，执行一个函数。

这是一个Ajax事件

当所有AJAX请求都停止时，隐藏loading信息。

$（”#loading”）.ajaxStop（function（）{

$（this）.hide（）;

}）;

ajaxSuccess（callback）当一个AJAX请求成功完成后，执行一个函数。

这是一个Ajax事件

当AJAX请求成功完成时，显示信息。

$（”#msg”）.ajaxSuccess（function（evt,request,settings）{

$（this）.append（”

}）;

jQuery.ajaxSetup（options）为所有的AJAX请求进行全局设置。

查看$.ajax函数取得所有选项信息。

设置默认的全局AJAX请求选项。

$.ajaxSetup（{

url:

“/xmlhttp/”,

global:

false,

type:

“POST”

}）;

$.ajax（{data:

myData}）;

serialize（）以名称和值的方式连接一组input元素。

实现了正确表单元素序列

functionshowValues（）{

varstr=$（”form”）.serialize（）;

$（”#results”）.text（str）;

}

$（”:

checkbox,:

radio”）.click（showValues）;

$（”select”）.change（showValues）;

showValues（）;

serializeArray（）连接所有的表单和表单元素（类似于.serialize（）方法），但是返回一个JSON数据格式。

从form中取得一组值，显示出来

functionshowValues（）{

varfields=$（”:

input”）.serializeArray（）;

alert（fields）;

$（”#results”）.empty（）;

jQuery.each（fields,function（i,field）{

$（”#results”）.append（field.value+”“）;

}）;

}

$（”:

checkbox,:

radio”）.click（showValues）;

$（”select”）.change（showValues）;

showValues（）;

JQueryEffects方法说明

show（）显示隐藏的匹配元素。

show（speed,[callback]）以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

hide（）隐藏所有的匹配元素。

hide（speed,[callback]）以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数

toggle（）切换元素的可见状态。

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，

切换为可见的。

slideDown（speed,[callback]）通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选

地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以

“滑动”的方式显示出来。

slideUp（speed,[callback]）通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地

触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以”滑动”

的方式隐藏起来。

slideToggle（speed,[callback]）通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回

调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以”滑动”的方式隐

藏或显示。

fadeIn（speed,[callback]）通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触

发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的

高度和宽度不会发生变化。

fadeOut（speed,[callback]）通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触

发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的

高度和宽度不会发生变化。

fadeTo（speed,opacity,[callback]）把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成

后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所

有匹配的元素的高度和宽度不会发生变化。

stop（）停止所有匹配元素当前正在运行的动画。

如果有动画处于队列当中，他们就会立即开始。

queue（）取得第一个匹配元素的动画序列的引用（返回一个内容为函数的数组）

queue（callback）在每一个匹配元素的事件序列的末尾添加一个可执行函数，作为此元素的事件函数

queue（queue）以一个新的动画序列代替所有匹配元素的原动画序列

dequeue（）执行并移除动画序列前端的动画

animate（params,[duration],[easing],[callback]）用于创建自定义动画的函数。

animate（params,options）创建自定义动画的另一个方法。

作用同上。

JQueryTraversing方法说明

eq（index）从匹配的元素集合中取得一个指定位置的元素，index从0开始

filter（expr）返回与指定表达式匹配的元素集合，可以使用”,”号分割多个expr，用于实现多个条件筛选

filter（fn）利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。

is（expr）用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的

表达式就返回true。

map（callback）将jQuery对象中的一组元素利用callback方法转换其值，然后添加到一个jQuery数组中。

not（expr）从匹配的元素集合中删除与指定的表达式匹配的元素。

slice（start,[end]）从匹配元素集合中取得一个子集，和内建的数组的slice方法相同。

add（expr）把与表达式匹配的元素添加到jQuery对象中。

children（[expr]）取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

可选的过滤器

将使这个方法只匹配符合的元素（只包括元素节点，不包括文本节点）。

contents（）取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合（只包括元素节点，不

包括文本节点），如果元素为iframe，则取得其中的文档元素

find（expr）搜索所有与指定表达式匹配的元素。

next（[expr]）取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

nextAll（[expr]）取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合

parent（[expr]）取得一个包含着所有匹配元素的唯一父元素的元素集合。

parents（[expr]）取得一个包含着所有匹配元素的唯一祖先元素的元素集合（不包含根元素）。

prev（[expr]）取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

prevAll（[expr]）取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。

siblings（[expr]）取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。

andSelf（）将前一个匹配的元素集合添加到当前的集合中

取得所有div元素和其中的p元素，添加border类属性。

取得所有div元素中的p元素，

添加background类属性

$（”div”）.find（”p”）.andSelf（）.addClass（”border”）;

$（”div”）.find（”p”）.addClass（”background”）;

end（）结束当前的操作，回到当前操作的前一个操作

找到所有p元素其中的span元素集合，然后返回p元素集合，添加css属性

$（”p”）.find（”span”）.end（）.css（”border”,“2pxredsolid”）;

JQuerySelectors方法说明

基本选择器

$（”#myDiv”）匹配唯一的具有此id值的元素

$（”div”）匹配指定名称的所有元素

$（”.myClass”）匹配具有此class样式值的所有元素

$（”*”）匹配所有元素

$（”div,span,p.myClass”）联合所有匹配的选择器

层叠选择器

$（”forminput”）后代选择器，选择ancestor的所有子孙节点

$（”#main>*”）子选择器，选择parent的所有子节点

$（”label+input”）临选择器，选择prev的下一个临节点

$（”#prev~div”）同胞选择器，选择prev的所有同胞节点

基本过滤选择器

$（”tr:

first”）匹配第一个选择的元素

$（”tr:

last”）匹配最后一个选择的元素

$（”input:

not（:

checked）+span”）从原元素集合中过滤掉匹配selector的所有元素（这里有是一个临选择器）

$（”tr:

even”）匹配集合中偶数位置的所有元素（从0开始）

$（”tr:

odd”）