JQUERY基礎(chǔ)教程筆記1_第1頁(yè)
JQUERY基礎(chǔ)教程筆記1_第2頁(yè)
JQUERY基礎(chǔ)教程筆記1_第3頁(yè)
JQUERY基礎(chǔ)教程筆記1_第4頁(yè)
JQUERY基礎(chǔ)教程筆記1_第5頁(yè)
已閱讀5頁(yè)，還剩12頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、jquery基礎(chǔ)教程筆記1看完jquery基礎(chǔ)教程做的笙記，筆記并不適合所有人，覺得好，可以看，覺得不好， 可以不看。1, : eq()和 nthchild()看下面代碼：vscript language="javascripf,>$(function()$("#selected-plays > li:eq( 1 )").addclass("a");/等價(jià)于 $("#sclcctcd-plays > li:nth-child(2)").addclass("a");注意：js數(shù)組是從0開始

2、的，所以eq (1)是取第二個(gè)元素。而css選擇器:nth-child ()是從1開始的，所以要選擇第二個(gè)元素，得使 用:nth-child(2),而不是:nth-child(l)o)</script>2, :odd 和 :even:odd:奇數(shù)行:even:偶數(shù)行新手經(jīng)常會(huì)說，好像跟我們做的相反？其實(shí)與:eq()選擇器-樣，下標(biāo)都是從0開始的, 也就是 表格的第一行編號(hào)是0 (偶數(shù))； 第二行編號(hào)是1(奇數(shù))；以此類推。3, $(htr:oddm).addclass()可以寫成 $(”tr”).fnter(”:odd").addclass()4, $('td:c

3、ontaiiis(''cssi*aiir')')取得 包含 字符串 cssrain 的所有 td5, jquery 轉(zhuǎn) dom :$(,td").get(o).tagname 或 $("td”)o.tagname6, load():jquery中的load ()有2層意思,第一層意思可以等價(jià)于dom中window.on load第二層 意思 可以load (url )。7: ready 簡(jiǎn)寫:1;$(document).ready(function() /do something)2;$().rcady(function()/do somet

4、hing)3；$(function()/do something)8,事件冒泡：正常的來說：點(diǎn)擊b會(huì)觸發(fā)a的clicko如果我們不想觸發(fā)a,可以用stoppropagationo阻止冒泡.具體例子：<div id=man>aaaaaaa<div id="b,'>bbbbbbbb</div>aaaaaa</div><script src=,jquery.js,1 type=htext/javascript,></script>vscript language="javascript,>$(f

5、unction()$(,#a,).click(function() alcrt("a")$('#b').click(function(e) alertcb")e.stoppropagation();/阻止冒泡，從來不輸出。iij以去掉,試試對(duì)比效果。aep/>ea=三caj2dsphqbs .ellp- >kv£lhus/>(-( 5p0s二 e_dshy二(¥oqs.(-q*)s qu二u=a£dsnv=(¥ovs.(«£souoem二 5posf 存一 drp 迂總

6、quou 二 £d£pmoqps(q*)s q.ec一 只 存一 dyp 芒去 ococ 二 £ds-p=()op£(e*)s)()u.2§ry0&od0-0s3井)4 ouo£unj)sa=esbabr=advfldnvj jxhwusv <3duos/>a=dposeaesxe 二 hod.0%rajonbllo.is -duosv 磁冬 ae-s.2-pg總t 迢盡毬(yoqsoasq 06ahdeusv(亠(-( 亠。0 三 a£ds.p=aos¥oqs.(-qes quh.s二 eks

7、-p、二(oos¥oqs.(«es ouowun二 uuou - a£drp=(oos)qp-q(q*)s quou 二e-ds一pm(oos)qpm(-e#-)s 5u.2ounjm%2os2 芒 g )()u.2ounj)s ajdws0aer=hdvddnvuidgsv d 匸。s/>ak匸。茍*."。?-:?二 sr?qnbllosr=josv a乏u上 z.fmuernyqziiknqllux=leqx/666wmoeavmma<>d=qllsuhux 一 e=va.p 一 pobs 丄一unqx'cllci、二 um

8、x/hf/oeavmaxav'clxr nh'gbs 0- jwfhx qfq 一一 g乏一 jyjhnd 一em hdyvluoqv 報(bào)做冋te慝(vovs (rphrs<7 js3二 uqnwa jsqrup 一 .cohnq 二 hqda】三 du-v c>p/>qahooqa£d£pllqbs -qllp- >sv)</script><div id="ah style="display:inline;">a</div> <div id="b&qu

9、ot; style="display:block;">b</div> <input lype="bullon" id="lesl" value="test" />11, 效果：show(), hide()會(huì)同時(shí)修改多個(gè)樣式屬性：高度，寬度和不透明度。fadeln() fadeout():不透明度fadeto():不透明度slidedown(), slideupo :高度如果都不能滿意,只能用animate () tanimateo提供了更為強(qiáng)人的，復(fù)雜的效果。12, animateo

10、:之_前.showcsiow'); / slow代表的是0.6秒內(nèi)同時(shí)改變窩度，寬度和透明度。如果用 時(shí)間農(nóng)示是 600 ； = .show(600);那么我們?cè)賮砜纯碼nimateoanimate(heigth : 'slow',width : 'slow' , 'slow')這里之所以可以height : 'slow'其實(shí)就跟.showcslow')類似，當(dāng)然他前面規(guī)定了 height 。13, 做動(dòng)畫之前先確定位置。<!doctype html public "-/w3c/dtd xhtml

11、1.() sbicm/en"mhttp:/www. /tr/xhtml 1/dtd/xhtml 1 -strict.dtdh><html xmlns="/1999/xhtmt xml:lang=nzh-cnm lang=,zh-cnn><scip( src=njqueryjsn type=mtext/javascripth></script><script language="javascript">$(function()$('#a').c

12、ss("position",''absolute");/如果把這句去掉,動(dòng)畫就沒了。/*在使用.animate 2,前，請(qǐng)先把位置確定，不管你是用的absolute還是relative總之耍設(shè)置其中的一種，因?yàn)樗械膲K級(jí)元素默認(rèn)是statico其實(shí)是跟css有關(guān)。x “mos “xd(x)£“ : doj 加uilup- (“mos“ ' .xdoo£. : u5l)wuiiire (.b#,)$ )()uopounj)oip(js0j#,)$ )()uoipunj)$ <iijdij3spaef11=a0vnon

13、vi jl<iihds> <)dlj3s/><u)du3srabt7)x3ju=9dxj=3js )dlj3s><.n3-mz.=i “nd7z“=su引:凹x juijqx/6661/5jo £m mmm/:dnq1(=suiuix unq> <tlpjppujs-i iiujqx/q 丄 g/【iun|x/h“jo£mmmm:dhq“ .n3/ppis 01 1w1hx ci1ci/oeav/-. oiiaod 凹州 sda100ai> 。當(dāng)繃站馬璋h!修:st</ js0i,=9n|va js3j,=p

14、i huonnq(=qdk)ndui> <atp/>b<xd00z：屮p!m“m佝s nu,=p! aio> <jldlh3s/> ( ( 妙由辭立 '00t/ (cl)iupsjud )uoie 毋由曲 'xd00c/z ( cj )w9lv 砂肉鉛土 ' 00/ ( l】)jj0【c 乂屮p!mjssm(h#js = v：()屮pim(.b#,)$= il jva)()uopounj)oip(js0j#,)$ )()uoipunj)$ <iijdij3spaef11=a0vnonvi jl<iihds> &

15、lt;)dlj3s/><u)du3srabt7)x3ju=9dxj spajonb =3js )dlj3s>(.ipp!mjss3 吐()叩"m '計(jì)</ jssj.sniua ”so)“=p! uonnq,=9dxj jndui> va!p/>ev (tb.=pi aia> <ldihos/> ( ( (,mos, ' .00£.:滬i )91bunuu-(u#,)$ouoipunj)>oip(3s0j#t)$) )</script><div id="a" s

16、tyle="position:absolute;width: iopx;height:lopx;n>a</div><input type=nbultonh id=hlestn vakie=ntestn />發(fā)生上面是按照順序來執(zhí)行的。先改變left,然后再改變top對(duì)比：<!doctype html public "-/w3c/dtd xhtml 1.0 strict/en"mhttp:/wvvvv. /tr/xhtml 1/dtd/xhtml 1 -strict.dtdn><html xmlns=hht

17、tp://1999/xhtml" xml:lang=,zh-cnh lang="zh-cnn><scriptsrc=h 1 21 .pack.js"type=,text/javascripthx/script><script language="javascript">$(function()$(*#tesf ).cl ick(function() $c#a').animate(left: ”300px” , top : "300px") , ”slow”)</

18、script><div id=hah stylc=hposition:absolutc;width: iopx;hcight: 1 opx;h>a</div><input type=hbuttonm id=htestn value=htestm />發(fā)生上面是起執(zhí)行的，也就是lef【和(op -起改變。區(qū)別知道了吧。16, 同理，我們?cè)倏匆粋€(gè)例子：<!d0ctype html public h-/w3c/dtd xhtml 1.0 strict/enmhhttp:/www. /tr/xhtml 1/dtd/xhtml 1 -stric

19、t.dtdh><html xmlns二"/1999/xhtml" xml:lang=nzh-cn" lang=mzh-cnn><script src=”jqucyjs” typc=htcxt/javascripth></script><script language=,javascript">$(function()$('#lesf).click(function()$('#a')animate(left: n300pxh , "slo

20、w")fadctocslow；()2).animatc( top : m300pxh ) , "slow").fadelb(*slowl);排隊(duì)效果會(huì)一個(gè)個(gè)執(zhí)行。)</script><divid=”a”style="position:absolute;width:40px:height:40px;top:100px;background:red;">a</div><input lype="button" id="tesl" value="lest&quo

21、t; />當(dāng)anirnateom其他動(dòng)畫效果執(zhí)行的時(shí)候，也是排隊(duì)執(zhí)行的。也就是一個(gè)個(gè)來。對(duì)比：css()<!doctype html public "-/w3c/dtd xhtml 1.0 strict/en*'"/tr/xhtml 1/dtd/xhtml i -strict.dtd"><html xmlns="/1999/xhtml" xml:lang="zh-cn,' lang="zh-cn"><

22、script src="jqucry.js" typc="tcxt/javascript"></script><script language=,javascript">$(function()($('#lesf).click(function()$('#a').animate(left: "300px, , "slow”).fadcto('slow0.2).animated top : ”300px” ) , “slow”).fadeto('slowl)

23、.css(” backgroundcolor", ”#000”)；址然css寫在最后，但點(diǎn)擊一開始就會(huì)執(zhí)行。排隊(duì)效果并不適介.css()</script><divid="a”style="position:absolute;width:40px;height:40px;top: 100px;background:red;">a</div><input typc="button" id="tcst" valuc="tcst" />解決：<!do

24、ctype html public "-/w3c/dtd xhtml 1.() sect/en"mhttp:/wvvvv. /tr/xhtml 1/dtd/xhtml 1 -strict.dtdn><html xmlns=h/1999/xhtml" xml:lang=mzh-cnn lang="zh-cnn><script src=mjquei7.js,1 type=htext/javascript,></script>vscript language="ja

25、vascripf,>$(function()$(*#tesf ).click(function() $c#a').animatc(lcft: "300pxh ) , ”slow”)fadeto('slow；02).animated top : ”300px" ) , "slow").fadeto(*slowl ,function()$(this).css(”backgroundcolor“,”#000");)我們可以把他寫在最后一個(gè)效果的冋調(diào)兩數(shù)里。)</script><divid=“a”style=&q

26、uot;position:absolute;width:40px;height:40px;top:100px;background:red;">a</div> <input type="button,' id="test" value=ntest" />總結(jié)：半在animate中以多個(gè)屬性的方式應(yīng)用時(shí)，效果是同時(shí)發(fā)生的。當(dāng)以連續(xù)方式 應(yīng)用時(shí)，是按順序來的。非效果方法，比如.css()方式不是按照順序來的，解決方法是放在回調(diào)函數(shù)里。17, 做一個(gè)實(shí)例:段落v!doctype html public ”/w3c

27、/dtd xhtml 1.0 strict/en"h/tr/xhtmll/i)td/xhtmll-strict.dtdm><html xmlns=m/1999/xhtmln xml:lang=nenh lang="enu><head><meta http-equiv=ncontent-typen content=mtext/html; charset=gbkn /><titlc>dom manipulation</titlc><scri

28、pt src=mjquei7.js,1 type=htext/javascript,></script>vscript language="javascripf,>$(function()/ $('va href=n#topm>冋到頂部</a>*).insertafte'div.chapter p');毎個(gè)段落后面添加 超鏈接$('<a hrcf="#top">|,l到頂部</a>').insertafter('div.chapter p:gt(2)&

29、#39;);/ (除掉前 3 個(gè))每個(gè) 段落后面添加超鏈接$('va name=',top"x/a>,).prependto(,body,);/在 body 厲的開始位置 添加 超鏈接。)</script></hcad><body><hl id=mexcerptm>demo</h 1 ><div class二"chapter"vp>段落 1 段落 1 段落 1 段落 l<br/><br/><br/><br/><br/&

30、gt;<br/x/p>vp>段落 2 段落 2 段落 2 段落 2<br/xbr/><br/><br/><br/><br/x/p>vp>段落 3 段落 3 段落 3 段落 3<bi7>vbr/xbi7xbr/xbi7xbi7xbi7></p>vp>段落 4 段落 4 段落 4 段落 4vbr/>vbi7xbi7>vbr/>vbi7xbr/>vbi7></p>vp>段落 5 段落 5 段落 5 段落 5<br/><

31、;br/><br/><br/><br/><br/xbr/></p>vp>段落 6 段落 6 段落 6 段落 6<br/><br/><br/><bi7><br/><br/xbr/></p>vp>段落 7 段落 7 段落 7 段落 7<br/xbr/><br/><br/><br/><br/xbr/></p></body></hlml>改進(jìn)：&l

32、t;!doctype html public ”-/w3c/dtd xhtml 1.0 strict/en"hhttp:/www. /tr/xhtml 1 /dtd/xhtml 1 -strict.dtdm><html xmlns=”hup://1999/xhlml” xml:lang=r,enh lang=menh><head><mcta http-cquiv=hcontcnt-typch content=htext/html; charsct=gbkm /><title>dom manipulat

33、ion</title><scriptsrc=hh(tp:/ j.2.pack.js”type=mtext/javascript,></script><script languages javascript$(function()/ $(*<a hrcf="#top">|u|到頂部</a>').inscrtaftcr('div.chaptcr p');每個(gè)段落后血添 加超鏈接$('<a href="#top">回到頂部</a>'

34、).insertafter(,div.chapter p:gt(2)*);/ (除掉前 3 個(gè))每個(gè)段落后面添加超鏈接$('<a name="top,x/a>').prependto('body');/在 body 后的開始位置添加超鏈 接。$('div.chapter p').each(function(index)$(lhis).attr(,id,；,node_,+(index+1);/瞄點(diǎn):在標(biāo)簽a上可以用name/在標(biāo)簽p上 我用name不可以,只能用id)var k =$('div.chapter p

35、9;).each(function(index)k += "<a hrcf='#nodc_,+(indcx+l )+'">段落"+(indcx+l)+"</a> &nbsp;")$(k).insertbefore('.chapter');/在 body 后的開始位置 添加 超鏈接。用prependto ()的時(shí)候，發(fā)現(xiàn)k的內(nèi)容 被倒置了。我暈。所以改用 insertbefore ()、)</script></head><body><hl i

36、d="excerpt">demo</h 1 ><div class="chaptcr">vp>段落 1 段落 1 段落 1 段落 l<hr/><br/><br/><hr/><br/><br/x/p>vp>段落 2 段落 2 段落 2 段落 2<br/><br/><br/><br/><br/><br/x/p>vp>段落 3 段落 3 段落 3 段落 3<br/&

37、gt;<br/><br/><bi7><br/><br/xbr/></p>vp>段落 4 段落 4 段落 4 段落 4vbr/>vbr/>vbi7>vbr/>vbi7>vbr/>vbi7></p>vp>段落 5 段落 5 段落 5 段落 5<br/><br/><br/><br/><br/><br/><br/></p>vp>段落 6 段落 6 段落 6 段落 6

38、<bi7xbr/><br/><bi7><br/><br/xbr/></p>vp>段落 7 段落 7 段落 7 段落 7<br/xbr/><br/><br/><br/><br/xbr/></p> </body></hlml>18, 包裝元素：wrap():v!doctype html public ”/w3c/dtd xhtml 1.0 strict/en"h/tr/xhtmll

39、/i)td/xhtmll-strict.dtdm><html xmlns=m/1999/xhtmln xml:lang=nenh lang="enu> <head><meta http-equiv=ncontent-typen content=mtext/html; charset=gbkn /><titlc>dom manipulation</titlc><script src=mjqurey.js,1 type=htext/javascript,></script&

40、gt;vscript language="javascripf,>$(function()$(hph).wrap("<div class=,chapter'></div>h);)</script></head><body>vp>段落l段落l段落l段落l</p>vp>段落2段落2段落2段落2</p></body></hlml><!-結(jié)果為：<div class 二"chapter"<p>段落1段落1段落1段落1</p></div><div class二"chapter"<p>段落2段落2段落2段落2</p></div>而不是：<

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論