jQuery笔记.docx

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

jQuery笔记

一、RetrievingPageContent

1.SELECTORS

$（"document"）.ready（function（）{

//选择器

$（"ul.a"）.css（"border","1pxsolidred"）;

$（"#list1~p"）.css（"border","1pxsolidred"）;

$（"div>.a"）.css（"border","1pxsolidred"）;

}）;

选择器的用法$（""）.引号内容

selector,selector……

Findsallofthespecifiedselectors

.calss1.calss2

Findsallelementswithboth.class1and.class2parent>childFindsallchildelementsthataredirectchildrenofelementsoftypeparent

ancestordescendant

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"）.css（"border","1pxsolidred"）;//第一个p段落被修饰

$（"p:

gt

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

$（".a:

odd"）…//奇数

$（"p:

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$（"p:

parent"）

VISIBILITYFILTERS

:

visible

Filterstheselectiontoonlyincludevisibleelements

:

hidden

Filterstheselectiontoonlyincludehiddenelements

$（"p:

hidden"）

CHILDFILTERS

:

nth-child（index）$（"ulli:

nth-child（3）"）

:

nth-child（even）

:

nth-child（odd）

:

nth-child（equation）

i.e.2nor3n+1$（"ulli:

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

$（"document"）.ready（function（）{

//each（fn）的用法

varleftmargin=0;

varborder=3;

$（"p"）.each（function（）{

$（this）.css（"border",border+"pxsolidred"）;

$（this）.css（"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=$（"

MyNewHeader

"）;

varmyStr="

MyNewHeader

";

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:

"images/Leaf.jpg",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"）.after（"1"）;

$（"p.a"）.prepend（"appended"）;

$（"p:

last"）.prependTo（"p:

first"）;

（"p:

last"）.insertAfter（"p:

first"）;

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

$（"p"）.wrap（"

1pxsolidred'/>"）;

$（"p"）.wrapAll（"

1pxsolidred'/>"）;

$（"p"）.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

$（"#theDiv"）.outerHeight（true）

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

展开阅读全文