資訊專欄INFORMATION COLUMN
摘要：此時(shí)，點(diǎn)擊新建的將會(huì)觸發(fā)。設(shè)置元素內(nèi)容的方法則使用上述兩種方法，將新內(nèi)容作為參數(shù)傳遞即可，例如修改上例中的文本內(nèi)容方法同理。
我們知道通過 $() 函數(shù)可以訪問文檔中的元素，并返回一個(gè) jQuery 對(duì)象，并且通過一系列方法，我們可以修改元素的樣式和內(nèi)容，實(shí)際上，我們還可以通過該函數(shù)做更多的事情，例如添加、刪除、復(fù)制等操作來改變 DOM 樹的結(jié)構(gòu)。
創(chuàng)建元素我們可以通過 $() 函數(shù)來直接創(chuàng)建元素，例如
$("new");
但僅僅創(chuàng)建了元素，還沒有插入到頁面中來，接下來介紹插入方法。
插入元素最基本的四種插入方法如下：
1.insertBefore 指定元素外部，前面
2.insertAfter 指定元素外部，后面
3.prependTo 指定元素內(nèi)部，前面
4.appendTo 指定元素內(nèi)部，后面
假設(shè)現(xiàn)有元素為一個(gè) div，如下：
origin
將上例中的 span 插入到 div 內(nèi)部的前面，可以這樣操作：
$("new").prependTo("div");
結(jié)果為：
反向插入元素neworigin
我們也可以反向插入元素，對(duì)應(yīng)的方法為：
1.insertBefore - before
2.insertAfter - after
3.prependTo - prepend
4.appendTo - append
對(duì)于上例，使用反向插入元素的方法為：
$("div").prepend("new");
結(jié)果是一致的。
移動(dòng)元素對(duì)于已經(jīng)存在的元素使用上述的四類方法，則起到移動(dòng)元素的效果，假設(shè) span 元素已經(jīng)存在在 div 內(nèi)部如下：
neworigin
我們嘗試將 span 移至 div 外部的后面，如下：
$("span").insertAfter("div");
移動(dòng)后的效果為：
包裹元素包裹元素即給元素添加一個(gè)外層元素，假設(shè)現(xiàn)在有兩個(gè) span 如下：
A B
我們希望給每個(gè) span 都包裹一個(gè) li，從而實(shí)現(xiàn)列表化，此時(shí)我們可以使用 wrap 方法:
$("span").wrap("");
結(jié)果為：
如果我們希望用一個(gè) ul 包裹所有 span 元素，那么可以使用 wrapAll 方法：
$("span").wrapAll("克隆元素的方法為 clone，使用起來很簡(jiǎn)單，但是這里有一點(diǎn)需要注意，克隆元素時(shí)，綁定在該元素極其后代元素的事件是否也會(huì)被克隆呢，默認(rèn)情況下是不會(huì)的，但是我們可以將其設(shè)置為同時(shí)克隆。舉例如下：
clone
綁定點(diǎn)擊事件給 span：
$("span").click(function() {
alert("hello");//
});
克隆 span 并插入到 div 內(nèi)部：
$("span").clone().appendTo("div");
但此時(shí)點(diǎn)擊新建的 span 并不能觸發(fā) alert，因?yàn)?clone 方法默認(rèn)未將綁定的事件克隆，為了達(dá)到事件克隆的效果，只需要將參數(shù)設(shè)置為 true 即可。
$("span").clone(true).appendTo("div");
此時(shí)，點(diǎn)擊新建的 span 將會(huì)觸發(fā) alert。
獲取、設(shè)置元素內(nèi)容假設(shè)有 div 如下：
content
我們希望獲取 div 元素的內(nèi)容，可以使用 html 方法。
$("div").html()
返回結(jié)果為："content"。
我們也可以使用 text 方法：
$("div").text()
返回結(jié)果為："content"。
所以很明顯，html 方法和 text 方法的區(qū)別在于 text 方法只獲取純文本內(nèi)容，所以 HTML 標(biāo)簽都將被忽略。
設(shè)置元素內(nèi)容的方法則使用上述兩種方法，將新內(nèi)容作為參數(shù)傳遞即可，例如修改上例中的文本內(nèi)容：
$("div").text("new content")
html 方法同理。
參考http://book.douban.com/subject/24669823/
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/87542.html
摘要：最強(qiáng)大的特性之一就是簡(jiǎn)化了對(duì)元素的操作。從圖中，我們可以看出元素中父元素子元素之間的關(guān)系。被封裝到對(duì)象中的元素會(huì)被自動(dòng)地，隱式地循環(huán)遍歷。訪問從上可知，返回的是對(duì)象，但是我們有時(shí)也希望直接對(duì)元素進(jìn)行操作。 DOM - Document Object Model，即文檔對(duì)象模型，它通過對(duì)象樹來展示 HTML 代碼。jQuery 最強(qiáng)大的特性之一就是簡(jiǎn)化了對(duì) DOM 元素的操作。 DOM...
摘要：為了更方便對(duì)元素操作，提供了完整的選擇符體系，可以分為選擇符屬性選擇符以及自定選擇符。選擇符幾乎支持到規(guī)范中的所有選擇符。介紹個(gè)比較有用的自定義選擇符選擇符。 為了更方便對(duì) DOM 元素操作，jQuery 提供了完整的選擇符體系，可以分為 CSS 選擇符、屬性選擇符以及自定選擇符。 CSS 選擇符 jQuery 幾乎支持 CSS1 到 CSS3 規(guī)范中的所有選擇符。舉例如下： ...
摘要：我們可以利用可以對(duì)用戶發(fā)起的事件進(jìn)行處理，這里以樣式轉(zhuǎn)換為例來說明。其他類似的操作事件都可以通過這個(gè)方法，將處理事件的程序綁定到同名事件上面。 我們可以利用 jQuery 可以對(duì)用戶發(fā)起的事件進(jìn)行處理，這里以樣式轉(zhuǎn)換為例來說明。 增添樣式 基于用戶的事件，對(duì)特定的 DOM 元素樣式進(jìn)行轉(zhuǎn)換是 jQuery 處理事件中比較常見的情形，舉例說明，當(dāng)用戶點(diǎn)擊輸入框后，會(huì)增添 highli...
摘要：之前已經(jīng)知道可以使用和等方法來修改類屬性，今天來具體討論下各種屬性的操作。非類屬性有時(shí)候，我們還需要對(duì)一些其他的屬性進(jìn)行操作，例如，，等等。例如單選按鈕的屬性。 之前已經(jīng)知道可以使用 addClass 和 removeClass 等方法來修改類屬性，今天來具體討論下各種屬性的操作。 非類屬性 有時(shí)候，我們還需要對(duì)一些其他的屬性進(jìn)行操作，例如 href，title，id 等等。這里，...
摘要：將匹配元素集合的父級(jí)元素刪除，保留自身和兄弟元素，如果存在在原來的位置。方法查找指定元素集合中每一個(gè)元素的同輩元素。每次回調(diào)函數(shù)執(zhí)行時(shí)，會(huì)傳遞當(dāng)前循環(huán)次數(shù)作為參數(shù)從開始計(jì)數(shù)。 DOM節(jié)點(diǎn)的創(chuàng)建 先介紹下需要用到的瀏覽器提供的一些原生的方法（這里不處理低版本的IE兼容問題）創(chuàng)建流程比較簡(jiǎn)單，大體如下： 創(chuàng)建節(jié)點(diǎn)(常見的：元素、屬性和文本) 添加節(jié)點(diǎn)的一些屬性 加入到文檔中流程中涉及的一...
閱讀 1675·2019-08-30 12:51
閱讀 662·2019-08-29 17:30
閱讀 3700·2019-08-29 15:17
閱讀 859·2019-08-28 18:10
閱讀 1365·2019-08-26 17:08
閱讀 2175·2019-08-26 12:16
閱讀 3439·2019-08-26 11:47
閱讀 3506·2019-08-23 16:18
