jquery框架ajax技術(shù)第三章

第三章jQuery中的DOM操作回顧選擇器簡介層次選擇器過濾選擇器表單選擇器目標(biāo)節(jié)點操作屬性操作樣式操作設(shè)置元素內(nèi)容處理表單元素值創(chuàng)建節(jié)點在函數(shù)$()中，傳入你想要生成的字符串形式的HTML代碼片段，該片段可以是一個簡單的節(jié)點，也可以是復(fù)雜的HTML代碼片段語法：$(html)

插入節(jié)點方法說明append()向每個匹配的元素內(nèi)部追加內(nèi)容appendTo()將所有匹配的元素追加到指定的元素中prepend()向每個匹配的元素內(nèi)部前置內(nèi)容prependTo()將所有匹配的元素前置到指定的元素中after()在每個匹配的元素之后插入內(nèi)容insertAfter()將所有匹配的元素插入到指定元素的后面before()在每個匹配的元素之前插入內(nèi)容insertBefore()將所有匹配的元素插入到指定的元素的前面插入節(jié)點示例頁面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;">這里是一個div</div>包裹節(jié)點wrap(html)用指定結(jié)構(gòu)的元素包含元素使用wrap()方法wrapAll(html)wrapAll()方法用指定結(jié)構(gòu)的元素包含多個元素wrapInner(html)使用wrapInner()方法可以用指定的標(biāo)簽包含子元素wrap()方法示例頁面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>

運行后的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()方法示例頁面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>運行后的HTML結(jié)構(gòu)<div> <b> <label>這里是標(biāo)簽1</label><label>這里是標(biāo)簽2</label> <label>這里是標(biāo)簽3</label> </b></div>wrapInner()方法示例頁面JavaScript代碼片段<scripttype="text/javascript"> $(function(){ $("div").wrapInner("<b></b>"); });</script><div> <label>這里是標(biāo)簽1</label><label>這里是標(biāo)簽2</label></div>運行后的HTML結(jié)構(gòu)<div> <b> <label>這里是標(biāo)簽1</label><label>這里是標(biāo)簽2</label> </b></div>

替換節(jié)點replaceWith(content)使用replaceWith()方法替換指定的元素replaceAll(selector)replaceAll()方法也用于元素的替換操作，其作用和replaceWith()相同，不同的是方法的語法風(fēng)格不一樣替換節(jié)點示例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é)點語法：clone() clone(true)在jQuery中分別管理DOM與事件屬性，如果需要復(fù)制設(shè)定的事件，則必須在參數(shù)中指定true；另外clone方法只完成復(fù)制，插入到指定位置必須使用appendTo()或者prependTo()等方法。刪除節(jié)點empty()此方法用于刪除指定元素的子元素，等同于將元素標(biāo)簽內(nèi)的所有內(nèi)容清空。remove()remove()方法用于從DOM里刪除包裝集里所有元素。刪除節(jié)點示例頁面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)此方法用于獲取指派到包裝集里第一個元素指定屬性的值。attr(name,value)此方法為包裝集里所有元素的name屬性設(shè)置傳遞進來的值。attr(attributes)此方法依然是用于屬性的設(shè)定，不同的是允許一次性設(shè)置多個屬性。removeAttr(name)從DOM中刪除元素對應(yīng)的屬性。屬性操作示例頁面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)此方法用于添加指定的一個或多個類名稱到包裝集的所有元素。removeClass(class)在class屬性中刪除指定的類時使用removeClass()方法。toggleClass(name)當(dāng)我們想要快速簡便地在元素之間切換視覺呈現(xiàn)時，toggleClass()方法最有用。toggleClass()示例頁面JavaScript代碼片段<styletype="text/css"> .show{display:none;}</style><scripttype="text/javascript"> functionshowOrHidden(){

$("div").toggleClass("show"); }</script><div>這里是div1</div><inputtype="button"value="隱藏/顯示"onclick="showOrHidden()"/>

上述代碼通過添加和刪除類樣式，能夠簡單實現(xiàn)隱藏和顯示切換效果獲取和設(shè)置樣式css(name,value)設(shè)置指定的值到每個已匹配的元素的指定的CSS樣式屬性。css(properties)此方法為所有已匹配元素設(shè)置已傳遞對象里多個鍵所指定的CSS屬性為相關(guān)的值。css(name)此方法用于獲取包裝集里第一個元素name所指定CSS屬性的已計算樣式值。設(shè)置樣式示例一次設(shè)置一個樣式屬性<scripttype="text/javascript"> $(function(){ $("div").css("color","red"); });</script><div>這里是div1</div>一次設(shè)置多個樣式屬性$("div").css({color:"red","width":"500px"});設(shè)置元素內(nèi)容html()和html(text)首先是簡單的html()方法。如果不帶參數(shù)進行調(diào)用，就返回元素的HTML內(nèi)容；如果帶著參數(shù)進行調(diào)用，就像其他jQuery函數(shù)那樣，設(shè)置元素的HTML內(nèi)容。text()和text(content)想要獲取或設(shè)置元素的文本內(nèi)容可以使用text()方法。不帶參數(shù)調(diào)用text()方法,返回所有文本連接而成的字符串。處理表單元素值val()此方法不帶參數(shù)，用于返回匹配集里第一個元素的value屬性值。val(value)另一個我們將會執(zhí)行的常見操作是設(shè)置表單元素的值。val(values)此方法導(dǎo)致包裝集里任何復(fù)選框、單選按鈕或<select>元素的選項變?yōu)橐堰x中(checked)或者已選擇(selected)狀態(tài)，只要它們的值和已傳遞值數(shù)組的任何一個值相匹配。元素選中狀態(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-