




版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第三章jQuery中的DOM操作回顧選擇器簡(jiǎn)介層次選擇器過(guò)濾選擇器表單選擇器目標(biāo)節(jié)點(diǎn)操作屬性操作樣式操作設(shè)置元素內(nèi)容處理表單元素值創(chuàng)建節(jié)點(diǎn)在函數(shù)$()中,傳入你想要生成的字符串形式的HTML代碼片段,該片段可以是一個(gè)簡(jiǎn)單的節(jié)點(diǎn),也可以是復(fù)雜的HTML代碼片段語(yǔ)法:$(html)
插入節(jié)點(diǎn)方法說(shuō)明append()向每個(gè)匹配的元素內(nèi)部追加內(nèi)容appendTo()將所有匹配的元素追加到指定的元素中prepend()向每個(gè)匹配的元素內(nèi)部前置內(nèi)容prependTo()將所有匹配的元素前置到指定的元素中after()在每個(gè)匹配的元素之后插入內(nèi)容insertAfter()將所有匹配的元素插入到指定元素的后面before()在每個(gè)匹配的元素之前插入內(nèi)容insertBefore()將所有匹配的元素插入到指定的元素的前面插入節(jié)點(diǎn)示例頁(yè)面JavaScript代碼片段<scripttype="text/javascript"> $(function(){ $("div").append(document.getElementById("txt")); $("div").append($("input:button")); $("div").append("<b>新加的b標(biāo)簽</b>"); });</script><inputid="txt"/><inputtype="button"value="button1"/><inputtype="button"value="button2"/><divstyle="border:1pxsolidblack;">這里是一個(gè)div</div>包裹節(jié)點(diǎn)wrap(html)用指定結(jié)構(gòu)的元素包含元素使用wrap()方法wrapAll(html)wrapAll()方法用指定結(jié)構(gòu)的元素包含多個(gè)元素wrapInner(html)使用wrapInner()方法可以用指定的標(biāo)簽包含子元素wrap()方法示例頁(yè)面JavaScript代碼片段<scripttype="text/javascript"> $(function(){
$("label").wrap("<b></b>"); });</script><div> <label>這里是標(biāo)簽1</label><label>這里是標(biāo)簽2</label> <label>這里是標(biāo)簽3</label></div>
運(yùn)行后的HTML結(jié)構(gòu)<div> <b><label>這里是標(biāo)簽1</label></b> <b><label>這里是標(biāo)簽2</label></b> <b><label>這里是標(biāo)簽3</label></b></div>
wrapAll()方法示例頁(yè)面JavaScript代碼片段<scripttype="text/javascript"> $(function(){ $("label").wrapAll("<b></b>"); });</script><div> <label>這里是標(biāo)簽1</label><label>這里是標(biāo)簽2</label> <label>這里是標(biāo)簽3</label></div>運(yùn)行后的HTML結(jié)構(gòu)<div> <b> <label>這里是標(biāo)簽1</label><label>這里是標(biāo)簽2</label> <label>這里是標(biāo)簽3</label> </b></div>wrapInner()方法示例頁(yè)面JavaScript代碼片段<scripttype="text/javascript"> $(function(){ $("div").wrapInner("<b></b>"); });</script><div> <label>這里是標(biāo)簽1</label><label>這里是標(biāo)簽2</label></div>運(yùn)行后的HTML結(jié)構(gòu)<div> <b> <label>這里是標(biāo)簽1</label><label>這里是標(biāo)簽2</label> </b></div>
替換節(jié)點(diǎn)replaceWith(content)使用replaceWith()方法替換指定的元素replaceAll(selector)replaceAll()方法也用于元素的替換操作,其作用和replaceWith()相同,不同的是方法的語(yǔ)法風(fēng)格不一樣替換節(jié)點(diǎn)示例replaceWith()代碼示例<scripttype="text/javascript"> $(function(){
$("label").replaceWith("<b>這里是B標(biāo)記</b>"); });</script><label>這里是標(biāo)簽</label>
replaceAll()代碼示例<scripttype="text/javascript"> $(function(){
$("<b>這里是B標(biāo)記</b>").replaceAll("label"); });</script><label>這里是標(biāo)簽</label>
復(fù)制節(jié)點(diǎn)語(yǔ)法:clone() clone(true)在jQuery中分別管理DOM與事件屬性,如果需要復(fù)制設(shè)定的事件,則必須在參數(shù)中指定true;另外clone方法只完成復(fù)制,插入到指定位置必須使用appendTo()或者prependTo()等方法。刪除節(jié)點(diǎn)empty()此方法用于刪除指定元素的子元素,等同于將元素標(biāo)簽內(nèi)的所有內(nèi)容清空。remove()remove()方法用于從DOM里刪除包裝集里所有元素。刪除節(jié)點(diǎn)示例頁(yè)面JavaScript代碼片段<scripttype="text/javascript"> functiondoMove(){
$("#div1b").remove().appendTo("#div2"); }</script><divid="div1"style="width:150px;height:30px;;border:1pxsolidblack"> <b>文本內(nèi)容</b></div><inputtype="button"value="move"onclick="doMove()"/><divid="div2"style="width:150px;height:30px;;border:1pxsolidblack"></div>屬性操作attr(name)此方法用于獲取指派到包裝集里第一個(gè)元素指定屬性的值。attr(name,value)此方法為包裝集里所有元素的name屬性設(shè)置傳遞進(jìn)來(lái)的值。attr(attributes)此方法依然是用于屬性的設(shè)定,不同的是允許一次性設(shè)置多個(gè)屬性。removeAttr(name)從DOM中刪除元素對(duì)應(yīng)的屬性。屬性操作示例頁(yè)面JavaScript代碼片段<scripttype="text/javascript"> $(function(){
$("font").attr({size:5,face:"黑體"}); });</script><font>這里是font標(biāo)簽1</font><font>這里是font標(biāo)簽2</font><span>這里是span</span>添加和刪除類名稱addClass(class)此方法用于添加指定的一個(gè)或多個(gè)類名稱到包裝集的所有元素。removeClass(class)在class屬性中刪除指定的類時(shí)使用removeClass()方法。toggleClass(name)當(dāng)我們想要快速簡(jiǎn)便地在元素之間切換視覺(jué)呈現(xiàn)時(shí),toggleClass()方法最有用。toggleClass()示例頁(yè)面JavaScript代碼片段<styletype="text/css"> .show{display:none;}</style><scripttype="text/javascript"> functionshowOrHidden(){
$("div").toggleClass("show"); }</script><div>這里是div1</div><inputtype="button"value="隱藏/顯示"onclick="showOrHidden()"/>
上述代碼通過(guò)添加和刪除類樣式,能夠簡(jiǎn)單實(shí)現(xiàn)隱藏和顯示切換效果獲取和設(shè)置樣式css(name,value)設(shè)置指定的值到每個(gè)已匹配的元素的指定的CSS樣式屬性。css(properties)此方法為所有已匹配元素設(shè)置已傳遞對(duì)象里多個(gè)鍵所指定的CSS屬性為相關(guān)的值。css(name)此方法用于獲取包裝集里第一個(gè)元素name所指定CSS屬性的已計(jì)算樣式值。設(shè)置樣式示例一次設(shè)置一個(gè)樣式屬性<scripttype="text/javascript"> $(function(){ $("div").css("color","red"); });</script><div>這里是div1</div>一次設(shè)置多個(gè)樣式屬性$("div").css({color:"red","width":"500px"});設(shè)置元素內(nèi)容html()和html(text)首先是簡(jiǎn)單的html()方法。如果不帶參數(shù)進(jìn)行調(diào)用,就返回元素的HTML內(nèi)容;如果帶著參數(shù)進(jìn)行調(diào)用,就像其他jQuery函數(shù)那樣,設(shè)置元素的HTML內(nèi)容。text()和text(content)想要獲取或設(shè)置元素的文本內(nèi)容可以使用text()方法。不帶參數(shù)調(diào)用text()方法,返回所有文本連接而成的字符串。處理表單元素值val()此方法不帶參數(shù),用于返回匹配集里第一個(gè)元素的value屬性值。val(value)另一個(gè)我們將會(huì)執(zhí)行的常見(jiàn)操作是設(shè)置表單元素的值。val(values)此方法導(dǎo)致包裝集里任何復(fù)選框、單選按鈕或<select>元素的選項(xiàng)變?yōu)橐堰x中(checked)或者已選擇(selected)狀態(tài),只要它們的值和已傳遞值數(shù)組的任何一個(gè)值相匹配。元素選中狀態(tài)綁定關(guān)于多選下拉框的例子:<scripttype="text/javascript"> $(function(){ $("select").val(["bbb","ccc-val"]); });</script><selectsize="5"multiple="multiple"> <option>aaa</option> <option>bbb</option> <optionvalue="ccc-
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝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ù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 二零二五藝人與經(jīng)紀(jì)公司的簽約合同
- 二零二五版電影融資居間合同
- 二零二五版兒童收養(yǎng)協(xié)議書(shū)
- 墊資合作協(xié)議合同范例
- 房產(chǎn)的抵押合同范文二零二五年
- 小區(qū)廣告轉(zhuǎn)包協(xié)議書(shū)
- 辦公樓租賃協(xié)議合同書(shū)
- 2025公共衛(wèi)生基礎(chǔ)知識(shí)書(shū)
- 2025年北京市企業(yè)辦公租賃合同
- 2025建筑施工合同:城市改造建設(shè)項(xiàng)目房屋征收補(bǔ)償合同
- 《智能家居系統(tǒng)》課件
- 廣東省廣州市2024年中考數(shù)學(xué)真題試卷(含答案)
- TC04墻材《固體廢棄物再生高強(qiáng)輕骨料》-編制說(shuō)明(征求意見(jiàn)稿)
- 零星維修工程投標(biāo)方案(技術(shù)方案)
- 人教版(PEP)英語(yǔ)2023年小升初模擬卷(含答案)
- 尾貨銷售合同范本
- 佛山市2023-2024學(xué)年高二下學(xué)期7月期末英語(yǔ)試題(解析版)
- GB 31825-2024制漿造紙單位產(chǎn)品能源消耗限額
- 情感糾紛案件調(diào)解協(xié)議書(shū)
- 《車間主任培訓(xùn)》課件
- 西南師大版四年級(jí)下冊(cè)數(shù)學(xué)全冊(cè)教案(2024年春季版)
評(píng)論
0/150
提交評(píng)論