jQuery基礎(chǔ)學(xué)習(xí)筆記_第1頁
jQuery基礎(chǔ)學(xué)習(xí)筆記_第2頁
jQuery基礎(chǔ)學(xué)習(xí)筆記_第3頁
jQuery基礎(chǔ)學(xué)習(xí)筆記_第4頁
jQuery基礎(chǔ)學(xué)習(xí)筆記_第5頁
已閱讀5頁，還剩27頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、1. jquery 基礎(chǔ)1.1如果你了解javascript語言，那將對你掌握jquery如虎添翼，因為jquery本 身就是javascript,只不過是把javascript代碼包裝成拿過來就能實現(xiàn)特定功 能的代碼庫！例如，我們想改變頁而屮所冇段落標(biāo)簽屮的文本內(nèi)容：javascript 代碼:var page_ps = documentgetelementsbytagname(; for(var i - 0; i < page_ps.length; i+)page_psiinnerhtml - "hello imooci°jquery 代碼:$ (f,pn)htm

2、l(nhello imooc! n);以上兩段代碼完成的功能是一樣的。由此可以看出，jquery史加的簡潔方便， 我們在處理dom時不必關(guān)心功能的實現(xiàn)細(xì)節(jié)。$ 0就是jquery中的函數(shù)，它的功能是獲得()小指定的標(biāo)簽元素。如示例屮$( “p”)會得到一組p標(biāo)簽兀素, 其中“p”表示css中的標(biāo)簽選擇器。$()屮的()不一定是指定元索，也可能是函 數(shù)。在jquery中$()方法等價于jquery0方法，前者比較常用，是后者的簡寫。一 般只有在$ ()與其它語言沖突時才會使用jquery()方法。2. jquery基礎(chǔ)選擇器2.1 #id選擇器(使用身份證號來找人)jqucry能使用css選擇器

3、來操作網(wǎng)頁中的標(biāo)簽元素。如杲你想耍通過一個id號 去杳找一個元素，就可以使用如下格式的選擇器：其屮#my_id表示根據(jù)id選擇器獲取頁而屮指定的標(biāo)簽元素，且返回唯一一個元 素。例如:<body><div id=rr divt est" ></div></body><script typerext/javascript">$ c#divt est*). html c 設(shè) s div的內(nèi)容“); </ script >嘿，jquery,我想找到上面那個divl在瀏覽器屮顯示的效果:=回 n / d #id選

4、擇器x .c d file:/e:/slnopjquery/l-l.html芒三設(shè)萱div的內(nèi)容從圖屮可以看出，通過#id選擇器的方式獲取元素，并在元素屮調(diào)html ()方法 為id二"divtest"的div元索設(shè)置了文字顯示在頁面中。此外，htmlo方法的功能是設(shè)置或獲取元素中顯示的內(nèi)容，針對該方法我們在后 而的章節(jié)屮會冇詳細(xì)介紹。2.2 element選擇器(尋找鉛筆)在文具盒中，有鉛筆、鋼筆和水彩筆，類似于頁面中的div. span各個元索， 雖然同屬于一個容器，但有各自的功能，jquery中可以根據(jù)元索名查找元索， 格式如b ：$( "element”

5、)其中element就是元素的名稱，也就是工具盒中的筆的名稱，找到水彩筆，我們 就可畫iffljt,通過元索名找到元索就可以對它進行操作了。如下圖所示：在頁而屮，根據(jù)元素名找到了一個元素，并將它顯示的字體加粗。<body>< div i d= “ divt e st" > 我變胖 了 </ div> </body><script type=" t ext/j avascript，v>$ (" div") css (" f ont-weight", " bold&qu

6、ot;); </script>在瀏覽器屮顯示的效果:從上面圖中可以看出，根據(jù)元素的名稱可以查找到該元素，并調(diào)用css()方法將 設(shè)置該元索內(nèi)容中文字顯示的樣式。此外，csso方法的功能是設(shè)置或獲取元索的某項樣式屬性，它的更多功能我們 將在后續(xù)的章節(jié)中有詳細(xì)的介紹。$(,button,).attr(,disabled,'z,truen); attr()方法的功能是設(shè)置或獲取元素的某項屬性值。2.3 class選擇器(尋找紅色鉛筆)我們在上一小節(jié)介紹了通過使用元素名稱查詢元素的方法，其實，述可以通過元 素的類別屈性杳找元素，就好比在文具盒中要找一個“紅色”鉛筆一樣，根據(jù)元 素的

7、某個特征進行查找，它的調(diào)用格式如下：$( “.class” )其屮.class參數(shù)表示元素的css類別(類選擇器)名稱。例如，在頁面中，通過class選擇器獲取某個元索，并顯示該元索的class類別 名稱，如卜圖所示：<style tyfie="text/css"> red color:red;</style></head> <body>通過癸送援眾名找刊忻青:<div id=*' divtest" class=6 red" >我穿紅衣了 </div> </body&g

8、t;<script type=，vt ext/javascrijft，v>var sclassname = $ c*. red"). att r (" class*1);$(" red") html(sclassname):</script>在瀏覽器小顯示的效果:從圖中可以看出，通過class選擇器的方式獲取元素，并調(diào)用元素的attr()方 法獲取元素的類別名稱，并將名稱顯示在頁而屮。2.4 *選擇器(取走全部鉛筆)有一個非常“?！钡倪x擇器，號選擇器，它的功能是獲取頁面中的全部元 素,“全部”啊!包括headbody、script

9、這些元素,相當(dāng)于可以取走你 文貝盒中的所有鉛筆，格式為：$( “*” )選擇器中的參數(shù)就一個“*”，既沒有號，也沒有“”號。由于該選擇器 的特殊性，它常與其他元索組合使用，表示獲取其他元索中的全部子元索。如下圖所示：使用*選擇器，獲取div中的所冇子元索并設(shè)置三個子元索顯示相 同的內(nèi)容。<body><div><span></ span<p></p><label></label></div></body><script type="t ext/javascript&q

10、uot;> $cdiv *").htmir我們是一家人");</script>在瀏覽器小顯示的效果:廠口 回n/ d國器xjvc file:/e:/slnopjquery/4-l.html!=我們是一家人我們是一家人我們是一家人 丄由于三個元素都包含在div元素屮，因此，它們都是div元素的子元素，那么， 就可以使用$( “div*”)的方式獲取&iv元素中的這三個子元素，并使用html () 方法來設(shè)置它們顯示的內(nèi)容。實踐證明，由于使用*選擇器獲取的是全部元素，因此，有些瀏覽器將會比較緩 慢，這個選擇器也需要謹(jǐn)慎使用。2.5 selebsele2

11、*selen 選擇器有時需耍精確的選擇任意多個指定的元素，類似于從文具盒中挑選出多根自已喜 歡的筆，就需要調(diào)用selel,sele2,selen選擇器，它的調(diào)用格式如下：$ ( "selel, sele2, selen” )其中參數(shù)sclck sclc2到sclcn為有效選擇器，每個選擇器z間用“，”號隔 開,它們可以是之前提及的各種類型選擇器,如$(“#id”)、$( “.class”)、 $( "selector")選擇器等。例如，通過選擇器獲取其屮的任意兩個元素，并將它們顯示的內(nèi)容設(shè)為相同，如 圖所示：<body><div></

12、div><span></span><p></p></body><script type=rrt ext/javascript ">scdip.htmir我們的身份很特殊");</script>在瀏覽器中顯示的效果:=:selel,sele2,selen®b§ x ,. i <- - c d file:/e:/slnopjquery/5-l.html =我們的身份很特殊我們的身份很特殊雖然頁面中添加了三個元索，但是通過使用$( “div,p”)選擇器方式獲取了其

13、中 的div和p元素，并設(shè)置它們顯示的內(nèi)容。2.6 ance desc 選擇器本節(jié)開始，我們將介紹層次性選擇器。在實際應(yīng)用開發(fā)屮，常常是多個元素嵌套在一起，形成復(fù)雜的層次關(guān)系，通過層 次選擇器，可以快速定位某一層次的一個或多個元索，ance desc選擇器就是其 中z,它的調(diào)用格式如b ：$("ance desc)其中ance desc是使用空格隔開的兩個參數(shù)。ance參數(shù)(ancestor祖先的簡寫) 表示父元素；desc參數(shù)(descendant后代的簡寫)表示后代元素，即包括子元 索、孫元索等等。兩個參數(shù)都可以通過選擇器來獲取。比如家族姓氏“div”， 家族幾代人里，都有名字里

14、帶“spam”的，就可以用這個ance dcsc選擇器把 這幾個人給定位岀來。例如，使用層次選擇器，獲取div元素中的全部span元素，并設(shè)置它們顯示 的內(nèi)容，在如下圖所示：<body><div>碼農(nóng)家族<p><span></ span</p><span></span></div></body><scriptext/j avascript * >$cdiv spanw).htmlc我們是一個家族下的子孫")；</script>在瀏覽器小顯示的效果:

15、從圖屮可以看出，使用層次選擇器$(divspan)獲取了在div元素屮的兩個元 索，一個是5元索中的子元索，另一個是p元索外的同級元索，但它們都是在 一個div元索下，也就是說在一個“家族”下。2.7 parent > child 選擇器與上一節(jié)介紹的ance desc選擇器相比，parent child選擇器的范圍要小些， 它所選擇的口標(biāo)是子集元素，相當(dāng)于一個家庭屮的子輩們，但不包括孫輩，它的 調(diào)用格式如下：$( uparent child” )child參數(shù)獲取的元索都是parent選擇器的子元索，它們之間通過“”符號來 表示一種層次關(guān)系。如圖所示:<body><d

16、iv> 碼農(nóng)家族<p><span></span></p><span></span><span></span></div><span></span></body><script type=，vtext/j avascript>$cdiv>span.htmir我們是一個家庭下的子輩們")；</script>在瀏覽器中顯示的效果：| ”回 |£3>1,；pare nt > child: xc

17、 d file:/e:/slnopj( =碼農(nóng)家族p標(biāo)簽無秦我們是一個家庭下的子輩們我們是一個家庭下的子輩們'u標(biāo)簽元養(yǎng)刁從圖中可以看出,使用$(divspa)選擇器代碼，獲取的是div “家庭中”全 部“子輩”span元素，不包括“孫輩” span元素和“家庭外”的span元素。2.8 prev + next 選擇器俗話說“遠(yuǎn)親不如近鄰”,而通prev + next選擇器就可以查找與“prev”元 素緊鄰的下一個“next”元素，格式如下：$( “prev + next” )其中參數(shù)prev為任何有效的選擇器，參數(shù)“nexl”為另外一個有效選擇器，它 們之間的“ + ”表示一種上下的

18、層次關(guān)系，也就是說，“prev”元素最緊鄰的下 一個元素由“next”選擇器返回的并且只返回唯的一個元素。例如，使用prev + next選擇器，獲取p>元素最近鄰的下一個元素，如下圖所 示：<div>碼農(nóng)家竦span我是 spanl </ spanp>我是e先生</p>span我是 span2</span< sp an> 我是 sp an3 </sp an></div><span></span></body>script type="text/javascript

19、'$ （vspanohtml （"我是p先生樓下緊鄰的碼友"）；</script>在瀏覽器中顯示的效果：2.9 prev siblings 選擇器與上一節(jié)屮介紹的prev + next層次選擇器相同，prev siblings選擇器也是 查找prev元素z后的相鄰元素，但前者只獲取第一個相鄰的元素，而后者則獲 取prev元素后面全部相鄰的元素，它的調(diào)用格式如下：$ ( "prev j siblings” ) 其屮參數(shù)prev與siblings兩者z間通過符號形成一種層次相鄰的關(guān)系, 表明siblings選擇器獲取的元素都是prev元素之后的同輩

20、元素。例如，使用prev nexl選擇器，獲取p>元素后面相鄰的全部元素，并設(shè)置它 們在頁面中顯示的內(nèi)容，如下圖所示：<body><div>碼農(nóng)家族<span></ span><p></p><span></span><span></span></div><span></span></body><script type=,vtex七門劉址匚上匚卩七"$（vspan"）.html（w我們是p先生樓下的

21、碼友j ;</script>在瀏覽器屮顯示的效果:可以看出，調(diào)用$ （pspan）選擇器代碼，獲取了p>元素下而兩個（全部）的<span> 元素，該元素不包含邙>元素上面的元素和不屬于同輩范圍的元素。3. jquery過濾性選擇器3.1:first過濾選擇器木章我們介紹過濾選擇器，該類型的選擇器是根據(jù)某過濾規(guī)則進行元素的匹配, 書寫時以“：”號開頭，通常用于杳找集合元素中的某一位置的單個元素。在jquery屮，如果想得到一組相同標(biāo)簽元素屮的第1個元素該怎樣做呢？在下面的示例代碼中你可能注意到我們會使用$( uli:first")注意：書寫時以號開頭

22、。<body><div>改變第一行"橘子"文字顏色：</div> <ul><li> 橘子 </li><li> 香蕉 </li><li> 葡萄 </li>蘋果 </li><li> 西瓜 </li></ul></body><script type=*text/javascript*>$(ti: first") css ("color", "red&q

23、uot;): </script>運行結(jié)果:-口 kj。:firsts-sfsx c d file:/e:/slnopjquery/ch2/l-l.html：j =改變第一行橘子"文字顏色：橘子 香蕉 葡萄4 4 e 平果 西瓜使用li:first過濾選擇器可以很方便地獲取ul列表中的第一個li元素.:first過濾選擇器的功能是獲取第一個元素，常常與其它選擇器一起使用，獲 取指定的一組元索中的第一個元索。:last3.2 :eq(index)過濾選擇器如果想從一組標(biāo)簽元素數(shù)組中，靈活選擇任意的一個標(biāo)簽元素，我們可以使用:eq (index)其中參數(shù)index表示索引號(b

24、p： 一個整數(shù))，它從0開始，如果index的值為 3,表示選擇的是第4個元素。例如：<body><div>改變中間行"蘋果"文寧顏色：</div><ul><li> 橘子 </li><li> 香 k/li>葡萄 </li><li> 蘋果 </li><li> 西瓜 </li></ul></body><script type=，vtext/javascript">$ (" l

25、i: eq(3)") css (" color", “ red");</script>在瀏覽器中顯示的效果:從圖小可以看出，通過調(diào)用$(li:cq(3)過濾選擇器代碼，獲取了第4個li> 元索，并使用css()方法設(shè)置了該元索在頁面屮顯示的文字樣式。3.3 :contains(text)過濾選擇器與上一節(jié)介紹的:eq (index)選擇器按索引查找元素相比，有時候我們可能希望按 照文本內(nèi)容來查找一個或多個元素，那么使用：contains (text)選擇器會更加方 便，它的功能是選擇包含指定字符串的全部元素，它通常與其他元素結(jié)合使用，

26、獲取包含“text”字符串內(nèi)容的全部元素對彖。其中參數(shù)text表示頁面中的文 字。例如：<body><div>改變包含"土聶"寧符內(nèi)容的顏色：</div> <ul><li>我是土聶一族</li><li>我是手機一族</li><h> 土聶就是我</li><h>我是奮斗一族</li><h> 土族我最愛</li></ul></body><script type="text/j

27、avascript">$ c' li: contains (? 土壽)") css ("color", "red"); </script>:contain s(text)qi®s x- c 0 file:/e:/slnopjquery/ch2/4-l.html三改變包含土豪"字符內(nèi)容的顏色：我是土豪一族我是手機一族 ' 土豪'就是我我是奮斗一族 土族我最愛從圖中可以看出，調(diào)用1 i: contains c±豪'）代碼，可以很方便地獲取li中包 含'

28、土豪'字符內(nèi)容的全部元素，并且只要與選擇的元素中或了元素中包含該字 符內(nèi)容，就可以被選中。注意：li:containsc±豪'）土豪為什么必須加單引號呢？因為它是一個字符串, 而不是一個變量，所以不加單或雙引號的話是會報錯的。5. jquery操作d0m元素5.1使用attr（）方法控制元素的屬性attr（）方法的作用是設(shè)置或者返回元素的屈性，其中attr（®性名）格式是獲取 元素屈性名的值，（屈性名，屈性值）格式則是設(shè)置元素屈性名的值。例如，使用attr（性名）的格式獲取頁而屮0元素的“href”屈性值，并將該 值的內(nèi)容顯示在span元素中，如下圖所示：&

29、lt;body><h3>attr ()方法獲取元素屬性</h3><a h"f二"hi:td：/127 0 0 1" id二"al">點我就走</a> <div>我要去的地方是：<span id=<*tip*></span></div> <script type="text/javascript"> var $url = $attr("href");$ (" #t ip"

30、;). html ($url):</script></body>從圖屮可以看岀，通過attr()方法可以方便地獲取元索屮指定屬性名稱的內(nèi)容, 并將獲取的內(nèi)容通過html()方法顯示在頁面中。5.2操作元素的內(nèi)容使用html ()和tcxt()方法操作元素的內(nèi)容，當(dāng)兩個方法的參數(shù)為空時，表示獲 取該元素的內(nèi)容，而如果方法中包含參數(shù)，則表示將參數(shù)值設(shè)置為元素內(nèi)容。例如，分別使用html ()和text()方法獲取一個元索的內(nèi)容，并將獲取的內(nèi)容顯 示在不同的div元素中，如下圖所示：<body><h3>html ()和text ()方法獲取元素內(nèi)容&l

31、t;/h3><div id=，v cont ent "><i> 我的身體有點歪哦 </i></div> < div i d= “ htmlx/ div><div id二氣 ext"x/div><script type="t ext/javascript">var $html = $ (，v#cont ent"). html (): var $t ext = $ (，v#cont ent"). t ext (): $c#htjnlw).html($

32、html): $ ("#t ext"). t ext ($t ext);</script></body>在瀏覽器屮顯示的效果:c d file:/e:/slnopjquery/ch4/2-l.html 三html ()和text ()方法獲取元素內(nèi)容卜這是原文內(nèi)咨我的身體有點歪哦 我的身體有點歪峨 我的身體有點歪哦從圖中可以看hl, htmlo方法可以獲取元素的html內(nèi)容，|大i此，原文中的格式 代碼也被一起獲取，rfo' tcxto方法只是獲取元素中的文本內(nèi)容，并不包含html 格式代碼，所以它顯示的內(nèi)容并沒有變“歪”。5.3操作元素的樣

33、式通過addclasso和css()方法叮以方便地操作元素中的樣式，前者括號中的參數(shù) 為壇加元索的樣式名稱，后者直接將樣式的屬性內(nèi)容寫在括號中。例如，使用addclasso方法，改變div>元素的背景色和文字顏色，如下圖所示：<style type二"teict/css"divpadding: 8px;width: 180px: bluebackground-color: blue; whitecolor: wliite;</style></head><body><h3>addclass ()方法設(shè)置元素樣式<

34、;/h3><div id二"cont ent" >我穿了 一件藍色外衣div><script type="text/javascript">$ c' #cont ent") addclass (" blue whit e"):</script></body>|在瀏覽器屮顯示的效果:從圖中可以看出，通過addclasso方法為div元素增加了兩個樣式名稱，從而 改變了div元素的背景和文字顏色，增加多個樣式名稱時，要用空格隔開。css()方法和addclass

35、方法用法類似，只是需要去設(shè)置具體樣式了。設(shè)置單個 css 樣式：$ (”#content") css ("background-color", "red");設(shè)置多個css樣式，設(shè)置方式為json格式。即strl：str2，"str3":"str4$ (#content). css (，zbackground-color" :red", "color" :#fff )5.4移除屬性和樣式使用removeattr (name)和removeclass (class)分別可以實現(xiàn)

36、移除元素的屬性和 樣式的功能，前者方法中參數(shù)表示移除屬性名，后者方法中參數(shù)則表示移除的樣 式名 例如，使用removeattr()方法移除o元索中的“href”屬性，如下圖所示:<body><h3 > remove at t r ()方法移除元素.屬性</h3><a h"f="httd：/127cici 1" id二"al">點我裁走</a> <div>我要去的地方是：<span id=" tip'' ></span><

37、;/div> <script type="text/javascript">$ (，v#arv) removeattr ("href");var $url = $(“#al") attr ("href"); $ c'#tip"). html ($url):</script></body>在瀏覽器中顯示的效果:從圖中口j以看出，使用removeattr()方法移除元索的“href”屬性后，再次顯 示元素的“href”屈性值時，則為空值，a元素中的文字也丟失可點擊的效杲

38、。5.5使用append()方法向元素內(nèi)追加內(nèi)容append (content)方法的功能是向指定的元素中追加內(nèi)容，被追加的content參 數(shù)，可以是字符、html元素標(biāo)記，還可以是一個返冋字符串內(nèi)容的函數(shù)。例如，在頁面的<body>元素中追加一個貝有“id”、“title”屈性和顯示內(nèi)容 的div>元素,如下圖所示:<body><h3>append ()方法追加內(nèi)咨</h3><script type=<vtext/j avascriptvar $html=rf<div id=? test? title=? hi? &g

39、t;我是動態(tài)創(chuàng)建的</div>"$("body") append ($html):</script></body>在瀏覽器中顯示的效果:& c d file:/e:/slnopjquery/ch4/5-2.html 三append ()方法追加內(nèi)容我是調(diào)用醪創(chuàng)建的i ib、一 從圖中可以看岀，rtt丁使用append()方法在body元素中追加了一些html元素 標(biāo)記，因此追加后，這些元素標(biāo)記直接生成對應(yīng)的元素和屬性顯示在頁面中。追加一個函數(shù)：<body><h3>append()方法追加內(nèi)容<

40、;/h3><script type=mtext/javascriptm>function rethtml() var $html = m<div id=,test, title=,hii>我是調(diào)用函數(shù)創(chuàng)建的</div>m return $html;$(” body m)append(rethtml();</script></body>56使用appendto()方法向被選元素內(nèi)插入內(nèi)容appendto()方法也可以向指定的元素內(nèi)插入內(nèi)容，它的使用格式是：$(content) appendto (selector)參數(shù)conten

41、t農(nóng)示需要插入的內(nèi)容，參數(shù)selector農(nóng)示被選的元素，即把 content內(nèi)容插入selector元素內(nèi)，默認(rèn)是在尾部。例如，使用appendto()方法，將div夕卜的span元素插入div內(nèi)，如下圖所<body><h3>appendto ()方法插入內(nèi)容</h3><div><span class="greens</span> </div><span class="red">小免子</span <script type二氣ext/javascript&quo

42、t; $ (" red") appendto ("div"):</script></body>在瀏覽器中顯示的效杲:appendtoo方法追加內(nèi)乏x c file:/e:/slnopjquery/ch4/6-l.html 三 iappendto ()方法插入內(nèi)容從圖小可以看出，使用appendto()方法將類別名為“red”的span元素插入到 div元索的尾部，相當(dāng)于追加的效果。調(diào)用appendto()方法將定義的字符串變量插入指定元素內(nèi)<body><h3>appendto()方法插入內(nèi)容 </h3

43、><div><span class=mgreenm>ds-j </span></div><script type=mtext/javascriptm>var $html = *'<span class=,red, >小青蛙</span> $($html). appendto( mdiv*');</script>|</bodv>5.7使用before()和after()在元素前后插入內(nèi)容使用before()和after()方法可以在元素的前后插入內(nèi)容，它們分別表示在整

44、個 元素的前面和后面插入指定的元素或內(nèi)容，調(diào)用格式分別為：$ (selec tor) before (co nt ent)和$ (selector) after (content)其中參數(shù)content表示插入的內(nèi)容，該內(nèi)容可以是元素或html字符吊。例如，調(diào)用before()方法在一個<span>元索插入另一個<span>元索，如下圖所 示：<body><h3>bef o"()方法在元素之前插入內(nèi)咨</h3><span class=" green">我們交個朋友吧！ </span>

45、;<script tyi：ie=rrt ext/javascript，v>var $html 二 *' <span class=red'>土聶，</span>a$(" green")before;</script></body>在瀏覽器中顯示的效杲:從圖中口j以看出，使用before ()方法將html格式的內(nèi)容插入到原有xspan>元索 內(nèi)容z前，而并不僅是它的內(nèi)部文木。5.8使用clone。方法復(fù)制元素調(diào)用clone()方法可以生成一個被選元素的副木，即復(fù)制了一個被選元素，包含 它的節(jié)點、

46、文本和屬性，它的調(diào)用格式為：$ (selector) clone ()其中參數(shù)selector可以是一個元素或html內(nèi)容。例如，使用clone()方法復(fù)制頁面屮的一個<span>元索，并將復(fù)制后的元素追加 到頁面的后面，如下圖所示：<body><h3>使用clone ()方法復(fù)制元素</h3><span class二"red" title二"hi"我是美猴王</span><script type=，yt ext/javascript >$ ("body")

47、 append($ (" red") clone ();</script></body>在瀏覽器屮顯示的效果:r d 映。2 一<-c _ file:/e:/slnopjquery/ch4/8-l.html=使用clone ()方法復(fù)制元素原有元素夏制后新追加的元素從圖中可以看出，使用clone()方法復(fù)制元素時，不僅復(fù)制了該元素的文本和節(jié) 點，還將它的“title”屈性也一起復(fù)制過來了。5.9替換內(nèi)容replacewi th()和replaceal 1 ()方法都町以用于替換元索或元索中的內(nèi)容，但它 們調(diào)用時，內(nèi)容和被替換元索所在的位置不同，

48、分別為如下所示：$ (selector) replacewith (content)和$ (content) replaceall (selector)參數(shù)selector為被替換的元索，content為替換的內(nèi)容。例如，調(diào)用replacewith()方法將頁面中<span>元素替換成一段html字符串， 如下圖所示：<body><h3>使用replacewith ()方法替換元素內(nèi)容</h3><span class=" green" title="hi，v>我是扁絲</span><sc

49、ript type="text/javascript">var $html = "<span class=? red" title=? hi? >我是土</span>" $(" green") replacewith($html);</script></body>在瀏覽器中顯示的效果:czjd，吏用替淇元素和內(nèi)容xc file:/e:/slnopjquery/ch4/9-l.html e使用replacewith ()方法替換元素內(nèi)容我是屬絲我是土豪替換后替換前從圖屮可以

50、看出，使用replacewitho方法替換類別名為“green”的span元 素，替換之后，舊元素完全由新替換的元素所取代。使用replaceallo方法替換元素<body>使用replaceall()方法昔換元素內(nèi)容</h3><span class="greenm title="hi">我是屬絲</span><script type=,text/javascript">var $html = m<span class='red' title= * hi1 >我是土豪

51、 </span>m;$($html) ,replaceall(n .green*');</script></body>5.10使用wrap()和wraplnner()方法包裹元素和內(nèi)容wrap()和wraplnncr ()方法都可以進彳亍元素的包裹，但前者用于包裹元素本身, 后者則用于包裹元素中的內(nèi)容，它們的調(diào)用格式分別為：$ (selector) wrap (wrapper)和$ (selector) wraplnner (wrapper) 參數(shù)selector為被包裹的元素，wrapper參數(shù)為包裹元素的格式。 例如，調(diào)用wrap。方法,將<

52、;span>用div>元素包裹起來,如下圖所示: <body><h$>使用wrap ()方法包裏元素</h3><span class=" red"' t itle="'hi" >我被綠絲帶包h 7 </span><script type=，ytext/javascript'v>$ (" red") wrap (，v<div></div>"):</script></body>

53、;在瀏覽器中顯示的效果:從圖中可以看出，紅色區(qū)域的span元素被藍色邊框的div元素通過wrap ()方 法包裹起來。5.11使用each()方法遍歷元素使用each()方法可以遍歷指定的元素集合，在遍歷時，通過冋調(diào)函數(shù)返冋遍歷 元素的序列號，它的調(diào)用格式為：$ (selector) each(function(index)參數(shù)function為遍歷時的冋調(diào)函數(shù)，index為遍歷元素的序列號，它從0開始。例如，遍歷頁血中的span元素，當(dāng)元素的序列號為2時，添加名為“focus” 的樣式，如下圖所示：<body><h3>使用each ()方法遍歷元素</h3>

54、;<span class=，v green" >§</span><span class=，v green" </span><span class=，v green" >ffl ® </span>span class=，v green"ft </span><script type=，vtext/javascript" >$ ("span") each(funct ion (index) if (index = 2) $

55、(this) addclass("focus"): )；</script></body>在瀏覽器中顯示的效果：亠i = i 回p 使用昂ch0方法遍萬元素 ；c d file:/e:/slnopjquery/ch4/ll-l.html 三使用each()方法遍歷元素香產(chǎn)桃子i葡萄荔枝從圖屮可以看岀，在使用each()方法遍歷span元素時，回調(diào)函數(shù)屮的“index” 參數(shù)為元素的序列號，它從0開始，當(dāng)為2時,表示第3個span元素增加樣式。5.12使用removeoo empty(防法刪除元素remove ()方法刪除所選元素木身和了元素，該方法可以

56、通過添加過濾參數(shù)指定需 要刪除的某些元素，而empty ()方法則只刪除所選元素的了元素。例如，調(diào)用remove()方法刪除span元素屮類別名為“red”的，如下圖所示:<body>使用remove ()方法刪除元素</h3> <span class=<，green'>§sb</span> <span class二"ted">桃子 </span> span class=，vgreen，v >ffi §</span> span class二"

57、red">荔枝</3戸曲 <script type='ftext/javascript ">$ (" span") remove (" red");</script></body>在瀏覽器屮顯示的效果:從圖中可以看出，使用remove（，z. red"）方法只是把span元素屮類別名為“red” 的這部分元素給刪除了。使用empty ()方法刪除全部<span>元素的子元素內(nèi)容。<body>使用empty ()方法刪|遠(yuǎn)；素</乜>

58、<span class=mgree香蕉</5pmn> <span class=r,greenm</span> <span class=mgreen*'></span> <span class=mgreenm></span><script type=mtext/javascriptn> $(mspanm).empty(h.green”)； </script></body>使用empty 0方法刪除元素6jquery事件與應(yīng)用6.1頁面加載時觸發(fā)ready()事件read

59、y ()事件類似于onload ()事件，但前者只要頁面的dom結(jié)構(gòu)加載后便觸發(fā), 而后者必須在頁面全部元素加載成功才觸發(fā),ready ()可以寫多個，按順序執(zhí)行。 此外，下列寫法是相等的：$ (document). ready (function () )等價于$ (function () );例如，當(dāng)觸發(fā)頁面的ready ()事件時，在<div>元素中顯示一句話。如下圖所示：<body><h3>頁面載入時觸發(fā)ready ()事件</h3><div id="tip"></div><script

60、type="t ext/javascript >$(document)ready(function () $r#tipw).htmir我被加載了!、)；</script>在瀏覽器中顯示的效果:從圖中可以看出，當(dāng)頁面的dom框架完成加載后，便觸發(fā)ready 0事件，在該事 件中，通過id號為“l(fā)ip”的元素，調(diào)用html ()方法在頁面中顯示一段字符。在ready ()事件屮，綁定一個按鈕的單擊事件。<body><h3>頁面載入時觸發(fā)ready ()事件</h3><div id=mtipmx/div><input

61、id="btntestm type=hbutton1' value=m點下我"/><script type=htext/javascripth> $(function() $(m#btntestm) bind( r,clickh，function $(m#tipm).html(-我被點擊了 ！ ”)； )；|)；</script></body>頁面載入時觸發(fā)readyo事件我被點擊了!i點下我6.2使用bind。方法綁定元素的事件bindo方法綁定元素的事件非常方便，綁定前，需要知道被綁定的元素名，綁定 的事件名稱，事件屮執(zhí)行的函數(shù)內(nèi)容就可以，它的綁定格式如下：$(selector)bind(event, data function) 參數(shù)event為事件名稱，多個事件名稱用空格隔開function為事件執(zhí)行的函 數(shù)。例如，綁定按鈕的單擊事件，單擊按鈕吋，該按鈕變?yōu)椴豢捎?。如下圖所示：<body&

溫馨提示

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

最新文檔

評論

0/150

提交評論