jQuery笔记Word格式文档下载.docx

jQuery笔记Word格式文档下载.docx

《jQuery笔记Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《jQuery笔记Word格式文档下载.docx（18页珍藏版）》请在冰豆网上搜索。

Findsalldescendantelementsthatarecontainedwithinelementsoftypeancestor

prev+next

Findsallnextelementsthatarenexttoaprevelement

prev~siblings

Findsallsiblingelementsthatcomeafterprevandmatchthesiblingsselector

2.FILTERS

USINGBASICJQUERYFILTERS

:

first

Selectsonlythefirstinstanceoftheselector'

sreturnedset

last:

even:

odd

eq（n）

Filtersoutelementsthatarenotpositionedatthegivenindex

gt（n）

Includeselementsthatarepastthegivenindex从零开始编号

lt（n）

Includeselementsthatarebeforethegivenindex

header

Selectsallheaderelements（H1,H2,H3,etc）

animated

Selectsallelementsthatarecurrentlybeinganimatedinsomeway

not（selector）

Includeselementsthatdonotmatchthegivenselector

用法举例：

p:

first"

//第一个p段落被修饰

gt

（1）"

）…//大于1，从第三个p段落开始

.a:

odd"

）…//奇数

not（p:

eq

（2））"

）…//去掉第三个p段落

ATTRIBUTESFILTERS

[attribute]

Includeselementsintheresultsetiftheyhavethespecifiedattribute

[attribute=value]

Includeselementsintheresultsetiftheyhavethespecifiedattributeandithasthegivenvalue

[attribute!

=value]

……doesn'

thavethegivenvalue

[attribute^=value]

……anditstartswiththespecifiedvalue

[attribute$=value]

……anditendswiththespecifiedvalue

[attribute*=value]

……anditcontainswiththespecifiedvalue

[attrFilter1][attrFilterN]

matchall

CONTENTFILTERS

contains（text）

Filterstheselectiontoonlyincludeelementsthatcontainthetextstring

empty

Filterstheselectiontoonlyincludeemptyelements

has（selector）

ul:

has（li[class=a]）"

）

parent

Matchesallelementsthatareparents$（"

parent"

VISIBILITYFILTERS

visible

Filterstheselectiontoonlyincludevisibleelements

hidden

Filterstheselectiontoonlyincludehiddenelements

hidden"

）<

p>

/p>

CHILDFILTERS

nth-child（index）$（"

ulli:

nth-child（3）"

nth-child（even）

nth-child（odd）

nth-child（equation）

i.e.2nor3n+1$（"

nth-child（2n）"

first-child

last-child

only-child

FORMSELECTORS

input:

text:

password:

radio:

checkbox:

submit:

reset:

image

button:

file:

enabled:

disabled:

checked:

selected

form:

text:

enabled"

3.TRAVERSINGDOCUMENTINFOMATION

size（）,length

ThenumberofelementsinthejQueryresultset

get（）

ReturnsanarrayofallmatchedDOMelements.UsefulifyouneedtooperateontheDOMelementsthemselvesinsteadofusingbuilt-injQueryfunctions

get（index）

AccessasinglematchedDOMelementataspecifiedindexinthematchedset

find（expression）

Searchesfordescendentelementsthatmatchthespecifiedexpression

ul"

）.find（"

li.b"

）.css……

each（fn）Executeafunctionwithinthecontextofeverymatchedelement

//each（fn）的用法

varleftmargin=0;

varborder=3;

p"

）.each（function（）{

$（this）.css（"

border+"

pxsolidred"

margin-left"

leftmargin）;

border+=2;

leftmargin+=10;

4.JQUERYSTATEMENTCHAINING

OneofjQuery'

smostpowerfulfeaturesisitsabilitytochainmultiplefunctionstogethertoperformseveraloperationsinonelineofcode

$（selector）.fn1（）.fn2（）.fn3（）;

a[href$=.pdf]"

）.after（"

code"

）在href属性值以“.pdf”结束的a元素节点后插入HTML代码code

二、ManipulatingPageContent

1.CREATING,SETTING,ANDGETTINGCONTENT

varnewHeader=$（"

h1>

MyNewHeader<

"

varmyStr="

;

varnewHeader=$（myStr）;

html（）

ReturntheHTMLcontentofthefirstmatchedelement

html（newcontent）

SetstheHTMLcontentofeverymatchedelement

text（）

Returnsthetextcontentofthefirstmatchedelement

text（newtext）

Setsthetextcontentforallmatchedelements

2.MANOPULATINGATTRIBUTESattr

attr（name）

Accesspropertyonthefirstmatchedelement.Thismethodmakesiteasytoretieveapropertyvalueromthefirstmatchedelement.Iftheelementdoesnothaveanattributewithsuchaname,undefinedisreturned

attr（properties）

Setsaseriesofattributesonallmatchedelementsusinganobjectnotationsyntax.Thisisthebestusedforsettinglargenumbersofpropertiesatonce

attr（key,value）

Setsasinglepropetytoavalueonallmatchedelements

attr（key,fn）

Setsasinglepropertytoacomputedvalue,onallmatchedelement.Insteadofsupplyingastringvalue,afunctionisprovidedthatcomputesthevalueoftheattriute

removeAttr（name）

Removesthenamedattributefromallmatchedelements

a"

）.attr（{href:

images/Leaf.jpg"

}）;

img"

）.attr（{src:

alt:

Leaf"

3.INSERTINGCONTENT

append（content）

Appendscontenttotheinsideofeverymatchedelement后加

appendTo（selector）

Appendsallofthematchedelementstoanother,specified,setofelements

prepend（content）

Prependscontenttotheinsideofeverymatcheddlement前加

prependTo（selector）

Prependsallofthematchedelementstoanother,specified,setofelements

after（content）

Insertcontentaftereachofthematchedelements

before（content）

Insertcontentbeforeeachofthematchedelements

insertAfter（selector）

Insertsallofthematchedelementsafteranother,specified,setofelements

insertBefore（selector）

Insertsallofthematchedelementsbeforeanother,specified,setofelements

#list1"

a>

1<

/a>

p.a"

）.prepend（"

appended"

last"

）.prependTo（"

（"

）.insertAfter（"

4.WRAPPING,REPLACING,REMOVINGCONTENT

wrap（html）

WrapseachmatchedelementwiththespecifiedHTMLcontent

wrap（element）

Wrapseachmatchedelementwiththespecifiedelement

wrapAll（html）

WrapsalltheelementsinthematchedsetwiththespecifiedHTMLcontent

wrapAll（element）

]Wrapsalltheelementsinthematchedsetintoasinglewrapperelement

wrapInner（html）

Wrapstheinnerchildcontentsofeachmatchedelement（includingtextnodes）withanHTMLstructure

wrapInner（element）

Wrapstheinnerchildcontentsofeachmatchedelement（includingtexynodes）withanDOMstructure

replaceWith（content）

ReplacesallmatchedelementswiththespecifiedHTMLorDOMelements

replaceAll（selecctor）

Replacestheelementsmatchedbythespecifiedselectorwiththematchedelements

empty（）

Removesallchildnodesfromthesetofmatchedelements

remove（）

RemovesallmatchedelementsfromtheDOM

clone（）

ClonematchedDOMelementsandselectstheclones

clone（bool）

ClonematchedDOMelements,andalltheireventhandlers,andselecttheclones

）.wrap（"

divstyle='

border:

1pxsolidred'

/>

）.wrapAll（"

5.WORKINGWITHCSSINFORMATION

css（name）

ReturnsthevalueforthenamedCSSpropertyforthefirstmatchedelement

css（property）

SetstheCSSpropertiesofeverymatchedelementusinganobject-notationsyntax:

varcssObj={

'

background-color'

:

'

#ddd'

font-weight'

color'

rgb（0,40,244）'

}

$（this）.css（cssObj）;

css（property,value）

6.WORKINGWITHCSSCLASSES

addClass（class）

Addsthespecifiedclass（es）toeachofthesetofmatchedelements

hasClass（class）

Returnstureif...

removeClass（class）

Removesallthespecifiedclass（es）fromthesetofmatchedelements

toggleClass（class）

Addsthespecifiedclassifitisnotpresent,removesthespecifiedclassifitispresent

toggleClass（class,switch）

Addsthespecifiedclassiftheswitchidture,removesthespecifiedclassiftheswitchisfalse

7.WORKINGWITHCSSPOSITIONING

offset（）

Getsthecurrentoffsetofthefirstmatchedelement,inpixels,relativetothedocument

offsetParent（）

ReturnsajQuerycollectionwiththepositionedparentofthefirstmatchedelement

position（）

Getsthetopandleftpositionofanelementrelativetoitsoffsetparent

scrollTop（）

Getsthescrolltopoffsetofthefirstmatchedelement

scrollTop（val）

Setsthescrolltopoffsettothegivenvalueonallmatchedelements

scrollLeft（）

Getsthescrollleftoffsetofthefirstmatchedelement

scrollLeft（val）

Setsthescrollleftoffsettogivenvalueonallmatchedelements

8.WORKINGWITHCSSSIZINGINFORMATION

height（）

Getsthecurrentcoputed,pixel,heightofthefirstmatchedelement

height（val）

Sets

width（）

width（val）

innerHeight（）

Getstheinnerheight（excludingtheborderandincludingthepadding）forthefirstmatchedelement

innerWidth（）

outerHeight（margin）

Getstheouterheight（includestheborderandpaddingbydefault）forthefirstmatchedelement.Ifthemarginargumentidtrue,thenthemarginvaluesarealsoincluded

outerWidth（margin）

innerWidth（Height）=width（height）+padding

outerWidth（Height）=width（height）+padding+border（+margin）

div#theDiv{

width:

250px;

height:

180px;

margin:

10px;

padding:

20px;

background:

blue;

border:

1pxsolidblack;

cursor:

pointer;

}

#theDiv"

）.outerHeight（）

height（180px）+2*padding（20px）+2*border（2px）=224px

）.outerHeight（true）

height（180px）+2*padding（20px）+2*border（2px）+2*margin（10px）=2