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

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

jQuery 笔记

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

该用户的其他资源 更多>>

• 广东省普通高中学业水平考试数学科考试大纲Word文档下载推荐.docx

• 计算题测试文档格式.docx

• 会计年终总结范文精选10篇Word文件下载.docx

• 基坑支护及降排水方案Word格式文档下载.docx

• 古代诗歌鉴赏一剪梅学案Word文档格式.docx

• 国标舞考级Word文件下载.docx

• 机电工程质量验收规范是什么Word文档下载推荐.docx

• 技术员工作自我评价文档格式.docx

• 交警支队车棚改造工程施工合同文档格式.docx

• 护士变更注册申请审核表与示范文本Word文档下载推荐.docx

• 最新学校新冠肺炎疫情防控应急预案Word文件下载.docx

• GB50204钢筋规范之欧阳总创编Word格式文档下载.docx

• 《半期整改措施》Word格式.docx

• 诊断 症状学腰背痛关节痛汇总.docx

• 英美文学欣赏The Analysis of Shelleys Ode to the West Wind.docx

• 增值税营改增所得税消费税车购税测试题.docx

• 整理二级建造师管理真题.docx

• 英语三级重点高频词汇导入背单词APP使用.docx

• 浙教版学年九年级数学上册第2章测试题及答案.docx

• 证件照教学设计方案.docx

• 优品课件之《从锁国走向开国的日本》教案.docx

• 整理北京交通大学万用表组装实验报告.docx

• 质量管理计划.docx

• 有机化学鉴别.docx

• 整理照明灯饰灯具行业分类英语词汇.docx

• 濉溪县城市总体规划公示.docx

• 智能化工程质量验收记录表.docx

• 学生会纪检部工作总结.docx

• 幼儿园保教主任发言稿.docx

• 跆拳道协会工作总结.docx

• 中国茶叶店连锁市场竞争分析与竞争战略研究报告.docx

• 学宪法讲宪法主题演讲稿800字精选5篇弘扬宪法精神演讲稿5篇.docx

猜你喜欢

• 3000字电子厂实习总结.docx

• 智能抢答器的设计与实现.docx

• 房屋买卖三方合同002.docx

• 高层住宅悬挑式卸料平台施工方案#山东#防火一级.docx

• 版IgG4相关性疾病诊治中国专家共识最全版.docx

• 高考100个文言实词辨析.docx

• 北京市人大附中届高三考前复习资料 化学 扫描版含.docx

• 幼儿教师三年规划具体计划和措施doc.docx

• 中国现代诗三首.docx

• 幼儿园保教计划五篇精选.docx

• 分管副县长分管工作半年工作总结和下半年工作计划同名69832.docx

• 电力系统毕业设计题目.docx

• 第7章 三角形学案.docx

• 北语19春《中国法制史》作业1234满分答案.docx

• 志愿者活动记录.docx

• 幼儿园教师第一学期个人工作总结精选多篇.docx

• 电子维修考试试题.docx

• 幼儿园一日生活活动方案.docx

• 东方文博城一期文化设施建设项目可行性研究报告书.docx

关于本文

本文标题：jQuery笔记.docx
链接地址：https://www.bdocx.com/doc/9019526.html