了解了这些才能开始发挥jQuery的威力.docx

了解了这些才能开始发挥jQuery的威力.docx

《了解了这些才能开始发挥jQuery的威力.docx》由会员分享，可在线阅读，更多相关《了解了这些才能开始发挥jQuery的威力.docx（18页珍藏版）》请在冰点文库上搜索。

了解了这些才能开始发挥jQuery的威力

了解了这些才能开始发挥jQuery的威力

由于当前jQuery如此的如雷贯耳，相信不用介绍什么是jQuery了，公司代码中广泛应用了jQuery，但我在看一些小朋友的代码时发现一个问题，小朋友们使用的仅仅是jQuery的皮毛，只是使用id选择器与attr方法，还有几个动画，如果只是如此，相比于其带来的开销，其实还不如不使用，下面介绍几个jQuery常用的方法，来让jQuery的威力发挥出来，否则只用有限的几个方法，相对于运行速度问题，真不如不用jQuery。

jQuery如此之好用，和其在获取对象时使用与CSS选择器兼容的语法有很大关系，毕竟CSS选择器大家都很熟悉（关于CSS选择器可以看看十分钟搞定CSS选择器），但其强大在兼容了CSS3的选择器，甚至多出了很多。

选择器

有了CSS选择器基础后，看jQuery的选择器就很简单了，不再详细一一说明

基本选择器

$（‘*’）

匹配页面所有元素

$（‘#id’）

id选择器

$（‘.class’）

类选择器

$（‘element’）

标签选择器

组合/层次选择器

$（‘E,F’）

多元素选择器，用”,分隔，同时匹配元素E或元素F

$（‘EF’）

后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F

$（E>F）

子元素选择器，用”>”分隔，匹配E元素的所有直接子元素

$（‘E+F’）

直接相邻选择器，匹配E元素之后的相邻的同级元素F

$（‘E~F’）

普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）

$（‘.class1.class2’）

匹配类名中既包含class1又包含class2的元素

基本过滤选择器

$（"E:

first"）

所有E中的第一个

$（"E:

last"）

所有E中的最后一个

$（"E:

not（selector）"）

按照selector过滤E

$（"E:

even"）            

所有E中index是偶数

$（"E:

odd"）             

所有E中index是奇数

$（"E:

eq（n）"）          

所有E中index为n的元素

$（"E:

gt（n）"）          

所有E中index大于n的元素

$（"E:

ll（n）"）           

所有E中index小于n的元素

$（":

header"）

选择h1~h7元素

$（"div:

animated"）

选择正在执行动画效果的元素

内容过滤器

$（‘E:

contains（value）’）

内容中包含value值的元素

$（‘E:

empty’）

内容为空的元素

$（‘E:

has（F）’）

子元素中有F的元素，$（‘div:

has（a）’）:

包含a标签的div

$（‘E:

parent’）

父元素是E的元素，$（‘td:

parent’）:

父元素是td的元素

可视化选择器

$（‘E:

hidden’）

所有被隐藏的E

$（‘E:

visible’）

所有可见的E

属性过滤选择器

$（‘E[attr]’）

含有属性attr的E

$（‘E[attr=value]’）

属性attr=value的E

$（‘E[attr!

=value]’）

属性attr！

=value的E

$（‘E[attr^=value]’）

属性attr以value开头的E

$（‘E[attr$=value]’）

属性attr以value结尾的E

$（‘E[attr*=value]’）

属性attr包含value的E

$（‘E[attr][attr*=value]’）

可以连用

子元素过滤器

$（‘E:

nth-child（n）’）

E的第n个子节点

$（‘E:

nth-child（3n+1）’）

E的index符合3n+1表达式的子节点

$（‘E:

nth-child（even）’）

E的index为偶数的子节点

$（‘E:

nth-child（odd）’）

E的index为奇数的子节点

$（‘E:

first-clild’）

所有E的第一个子节点

$（‘E:

last-clild’）

所有E的最后一个子节点

$（‘E:

only-clild’）

只有唯一子节点的E的子节点

表单元素选择器

$（‘E:

type’）

特定类型的input

$（‘:

checked’）

被选中的checkbox或radio

$（‘option:

selected’）

被选中的option

筛选方法

.find（selector） 查找集合每个元素的子节点

Get the descendants（子节点） ofeachelementinthecurrentsetofmatchedelements,filteredbyaselector,jQueryobject,orelement.

$（'li.item-ii'）.find（'li'）.css（'background-color','red'）;

.filter（selector） 过滤当前集合内元素

Reduce（减少） thesetof matched elements to thosethatmatchtheselectororpassthefunction'stest.

$（'li'）.filter（':

even'）.css（'background-color','red'）;

基本方法

.ready（handler） 文档加载完成后执行的方法，区别于window.onload

SpecifyafunctiontoexecutewhentheDOMisfullyloaded.

$（document）.ready（function（）{

//Handlerfor.ready（）called.

}）;

.each（function（index,element）） 遍历集合内每个元素

IterateoverajQueryobject,executingafunctionforeachmatchedelement.

$（"li"）.each（function（index）{

console.log（index+":

"+$（this）.text（））;

}）;

jQuery.extend（target[,object1][,objectN]） 合并对象

Mergethecontentsoftwoormoreobjectstogetherintothefirstobject.

varobject=$.extend（{},object1,object2）;

获取元素

.eq（index） 按index获取jQuery对象集合中的某个特定jQuery对象

Reducethesetofmatchedelementstotheoneatthespecifiedindex.

.eq（-index） 按逆序index获取jQuery对象集合中的某个特定jQuery对象

∙Anintegerindicatingthepositionoftheelement,countingbackwardsfromthelastelementintheset.

$（"li"）.eq

（2）.css（"background-color","red"）;

.get（index） 获取jQuery集合对象中某个特定index的DOM对象（将jQuery对象自动转换为DOM对象）

Retrieveoneofthe DOM elementsmatchedbythejQueryobject.

console.log（$（"li"）.get（-1））;

.get（） 将jQuery集合对象转换为DOM集合对象并返回

RetrievetheDOMelementsmatchedbythejQueryobject.

console.log（$（"li"）.get（））;

.index（） / .index（selector）/ .index（element） 从给定集合中查找特定元素index

Searchforagivenelementfromamongthematchedelements.

1.没参数返回第一个元素index

2.如果参数是DOM对象或者jQuery对象，则返回参数在集合中的index

3.如果参数是选择器，返回第一个匹配元素index，没有找到返回-1

varlistItem=$（"#bar"）;

alert（"Index:

"+$（"li"）.index（listItem））;

.clone（[withDataAndEvents][,deepWithDataAndEvents]） 创建jQuery集合的一份deepcopy（子元素也会被复制），默认不copy对象的shuju和绑定事件

Createadeepcopyofthesetofmatchedelements.

$（".hello"）.clone（）.appendTo（".goodbye"）;

.parent（[selector]） 获取jQuery对象符合selector的父元素

Gettheparentofeachelementinthecurrentsetofmatchedelements,optionallyfilteredbyaselector.

$（"li.item-a"）.parent（'ul'）.css（"background-color","red"）;

.parents（[selector]） 获取jQuery对象符合选择器的祖先元素

Gettheancestorsofeachelementinthecurrentsetofmatchedelements,optionallyfilteredbyaselector.

$（"span.selected"）.parents（"div"）.css（"border","2pxredsolid"）

插入元素

.append（content[,content]）/.append（function（index,html）） 向对象尾部追加内容

Insertcontent,specifiedbytheparameter,totheendofeachelementinthesetofmatchedelements.

1.可以一次添加多个内容，内容可以是DOM对象、HTMLstring、jQuery对象

2.如果参数是function，function可以返回DOM对象、HTMLstring、jQuery对象，参数是集合中的元素位置与原来的html值

$（".inner"）.append（"

Test

$（"body"）.append（$newdiv1,[newdiv2,existingdiv1]）;

$（"p"）.append（"Hello"）;

$（"p"）.append（$（"strong"））;

$（"p"）.append（document.createTextNode（"Hello"））;

.appendTo（target） 把对象插入到目标元素尾部，目标元素可以是selector,DOM对象,HTMLstring,元素集合,jQuery对象;

Inserteveryelementinthesetofmatchedelementstotheendofthetarget.

$（"h2"）.appendTo（$（".container"））;

$（"

Test

.prepend（content[,content]）/.prepend（function（index,html）） 向对象头部追加内容，用法和append类似

Insertcontent,specifiedbytheparameter,tothebeginningofeachelementinthesetofmatchedelements.

$（".inner"）.prepend（"

Test

.prependTo（target） 把对象插入到目标元素头部，用法和prepend类似

Inserteveryelementinthesetofmatchedelementstothebeginningofthetarget.

$（"

Test

.before（[content][,content]）/.before（function） 在对象前面（不是头部，而是外面，和对象并列同级）插入内容，参数和append类似

Insertcontent,specifiedbytheparameter,beforeeachelementinthesetofmatchedelements.

$（".inner"）.before（"

Test

$（".container"）.before（$（"h2"））;

$（"p"）.first（）.before（newdiv1,[newdiv2,existingdiv1]）;

$（"p"）.before（"Hello"）;

$（"p"）.before（document.createTextNode（"Hello"））;

.insertBefore（target） 把对象插入到target之前（同样不是头部，是同级）

Inserteveryelementinthesetofmatchedelementsbeforethetarget.

$（"h2"）.insertBefore（$（".container"））;

.after（[content][,content]）/.after（function（index）） 和before相反，在对象后面（不是尾部，而是外面，和对象并列同级）插入内容，参数和append类似

Insertcontent,specifiedbytheparameter,aftereachelementinthesetofmatchedelements.

$（".inner"）.after（"

Test

$（"p"）.after（document.createTextNode（"Hello"））;

.insertAfter（target） 和insertBefore相反，把对象插入到target之后（同样不是尾部，是同级）

Inserteveryelementinthesetofmatchedelementsafterthetarget.

$（"

Test

$（"p"）.insertAfter（"#foo"）;

包裹元素

.wrap（wrappingElement）/.wrap（function（index）） 为每个对象包裹一层HTML结构，可以是selector,element,HTMLstring,jQueryobject

WrapanHTMLstructurearoundeachelementinthesetofmatchedelements.

Hello