jQuery簡介之dom操作

標籤：jquery

本文dom

擷取標籤 $(選取器)；

建立標籤對象 $("標籤")； 因為返回的都是jQuery對象，所以可以鏈式調用（任何的jQuery API 返回的都是jQuery對象）

插入標籤內部插入
1.append(content|fn)

概述
向每個匹配的元素內部追加內容。

這個操作與對指定的元素執行appendChild方法，將它們添加到文檔中的情況類似。

參數
contentString, Element, jQueryV1.0

要追加到目標中的內容

function(index, html)FunctionV1.4

返回一個HTML字串，用於追加到每一個匹配元素的裡邊。接受兩個參數，index參數為對象在這個集合中的索引值，html參數為這個對象原先的html值。

樣本

描述：向所有段落中追加一些HTML標記。

HTML 程式碼:
<p>I would like to say: </p>
jQuery 代碼:
$("p").append("<b>Hello</b>");
結果:
[ <p>I would like to say: <b>Hello</b></p> ]

2.appendTo(content) 返回值:jQuery  把所有匹配的元素追加到另一個指定的元素元素集合中。

實際上，使用這個方法是顛倒了常規的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll這個幾個方法成為一個破壞性操作，返回值是所有被追加的內容，而不僅僅是先前所選中的元素。所以，要選擇先前選中的元素，需要使用end()方法，參見例二。

參數
contentString

用於被追加的內容

樣本

描述:把所有段落追加到ID值為foo的元素中。

HTML 程式碼:
<p>I would like to say: </p>
<div></div><div></div>
jQuery 代碼:
$("p").appendTo("div");
結果:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

描述:建立段落追加div中並加上一個class

 

HTML 程式碼:
<div></div><div></div>
jQuery 代碼:
$("<p/>")
   .appendTo("div")
   .addClass("test")
   .end()
   .addClass("test2");
結果:
<div><p class="test test2"></p></div>
<div><p class="test"></p></div>

 

3.prepend(content|fn)

prepend(content)
向每個匹配的元素內部前置內容。

這是向所有匹配元素內部的開始處插入內容的最佳方式。

參數
contentString, Element, jQueryV1.0

要插入到目標元素內部前端的內容

function(index, html)FunctionV1.4

返回一個HTML字串，用於追加到每一個匹配元素的裡邊。接受兩個參數，index參數為對象在這個集合中的索引值，html參數為這個對象原先的html值。

樣本描述:向所有段落中前置一些HTML標記代碼。

HTML 程式碼:
<p>I would like to say: </p>
jQuery 代碼:
$("p").prepend("<b>Hello</b>");
結果:
[ <p><b>Hello</b>I would like to say: </p> ]

描述:將一個DOM元素前置入所有段落

HTML 程式碼:
<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
jQuery 代碼:
$("p").prepend( $(".foo")[0] );
結果:
<p><b class="foo">Hello</b>I would like to say: </p>
<p><b class="foo">Hello</b>I would like to say: </p>
<b class="foo">Good Bye</b>

描述:向所有段落中前置一個jQuery對象(類似於一個DOM元素數組)。

HTML 程式碼:
<p>I would like to say: </p><b>Hello</b>
jQuery 代碼:
$("p").prepend( $("b") );
結果:
<p><b>Hello</b>I would like to say: </p>

4.prependTo(content)

返回值:jQueryprependTo(content)

概述
把所有匹配的元素前置到另一個、指定的元素元素集合中。

實際上，使用這個方法是顛倒了常規的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll這個幾個方法成為一個破壞性操作，要選擇先前選中的元素，需要使用end()方法，參見 appendTo 方法的例二。

參數
contentString

用於匹配元素的jQuery運算式

樣本描述:把所有段落追加到ID值為foo的元素中。

HTML 程式碼:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代碼:
$("p").prependTo("#foo");
結果:
<div id="foo"><p>I would like to say: </p></div>

外部插入
1..after(content|fn)

after(content|fn)

在每個匹配的元素之後插入內容。

參數
contentString, Element, jQueryV1.0

插入到每個目標後的內容

functionFunctionV1.4

函數必須返回一個html字串。

樣本描述:在所有段落之後插入一些HTML標記代碼。

HTML 程式碼:
<p>I would like to say: </p>
jQuery 代碼:
$("p").after("<b>Hello</b>");
結果:
<p>I would like to say: </p><b>Hello</b>

描述:在所有段落之後插入一個DOM元素。

HTML 程式碼:
<b id="foo">Hello</b><p>I would like to say: </p>
jQuery 代碼:
$("p").after( $("#foo")[0] );
結果:
<p>I would like to say: </p><b id="foo">Hello</b>

描述:在所有段落中後插入一個jQuery對象(類似於一個DOM元素數組)。

HTML 程式碼:
<b>Hello</b><p>I would like to say: </p>
jQuery 代碼:
$("p").after( $("b") );
結果:
<p>I would like to say: </p><b>Hello</b>

 

2.before(content|fn) 返回值:jQuery   在每個匹配的元素之前插入內容。

參數
contentString, Element, jQueryV1.0

插入到每個目標後的內容

functionFunctionV1.4

函數必須返回一個html字串。

樣本描述:在所有段落之前插入一些HTML標記代碼。

HTML 程式碼:
<p>I would like to say: </p>
jQuery 代碼:
$("p").before("<b>Hello</b>");
結果:
[ <b>Hello</b><p>I would like to say: </p> ]

描述:在所有段落之前插入一個元素。

HTML 程式碼:
<p>I would like to say: </p><b id="foo">Hello</b>
jQuery 代碼:
$("p").before( $("#foo")[0] );
結果:
<b id="foo">Hello</b><p>I would like to say: </p>

描述:在所有段落中前插入一個jQuery對象(類似於一個DOM元素數組)。

HTML 程式碼:
<p>I would like to say: </p><b>Hello</b>
jQuery 代碼:
$("p").before( $("b") );
結果:
<b>Hello</b><p>I would like to say: </p>

3.insertAfter(content) 返回值:jQuery 把所有匹配的元素插入到另一個、指定的元素元素集合的後面。

實際上，使用這個方法是顛倒了常規的$(A).after(B)的操作，即不是把B插入到A後面，而是把A插入到B後面。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll這個幾個方法成為一個破壞性操作，要選擇先前選中的元素，需要使用end()方法，參見 appendTo 方法的例二。

參數
contentStringV1.0

用於匹配元素的jQuery運算式

樣本描述:把所有段落插入到一個元素之後。與 $("#foo").after("p")相同

HTML 程式碼:
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery 代碼:
$("p").insertAfter("#foo");
結果:
<div id="foo">Hello</div><p>I would like to say: </p>

4.insertBefore(content) 返回值:jQuery   把所有匹配的元素插入到另一個、指定的元素元素集合的前面。

實際上，使用這個方法是顛倒了常規的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll這個幾個方法成為一個破壞性操作，要選擇先前選中的元素，需要使用end()方法，參見 appendTo 方法的例二。

參數
contentStringV1.0

用於匹配元素的jQuery運算式

樣本描述:把所有段落插入到一個元素之前。與 $("#foo").before("p")相同。

HTML 程式碼:
<div id="foo">Hello</div><p>I would like to say: </p>
jQuery 代碼:
$("p").insertBefore("#foo");
結果:
<p>I would like to say: </p><div id="foo">Hello</div>

刪除標籤
1.empty() 返回值:jQuery 刪除匹配的元素集合中所有的子節點。

樣本描述:把所有段落的子項目（包括文本節點）刪除

HTML 程式碼:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代碼:
$("p").empty();
結果:
<p></p>

 

2.remove([expr])

從DOM中刪除所有匹配的元素。

這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外，其他的比如綁定的事件，附加的資料等都會被移除。

參數expr  String       

用於篩選元素的jQuery運算式

樣本描述:從DOM中把所有段落刪除

HTML 程式碼:
<p>Hello</p> how are <p>you?</p>
jQuery 代碼:
$("p").remove();
結果:
how are

描述:從DOM中把帶有hello類的段落刪除

HTML 程式碼:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代碼:
$("p").remove(".hello");
結果:
how are <p>you?</p>

3.detach([expr]) 返回值:jQuery     detach([expr])

從DOM中刪除所有匹配的元素。

這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的資料等都會保留下來。

參數
expr  String    用於篩選元素的jQuery運算式

樣本描述:從DOM中把所有段落刪除

HTML 程式碼:
<p>Hello</p> how are <p>you?</p>
jQuery 代碼:
$("p").detach();
結果:
how are

描述:從DOM中把帶有hello類的段落刪除

HTML 程式碼:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代碼:
$("p").detach(".hello");
結果:
how are <p>you?</p>

 

獲得和添加標籤

attr(name|properties|key,value|fn)

設定或返回被選元素的屬性值。

參數
name  String     屬性名稱

properties Map   作為屬性的“名/值對”對象

key,value String, Object      屬性名稱，屬性值

key,function(index, attr) String,Function

1:屬性名稱。

2:返回屬性值的函數,第一個參數為當前元素的索引值，第二個參數為原先的屬性值。

樣本

參數name

描述:返迴文檔中所有映像的src屬性值。

jQuery 代碼:
$("img").attr("src");

參數properties

描述:為所有映像設定src和alt屬性。

jQuery 代碼:
$("img").attr({ src: "test.jpg", alt: "Test Image" });

參數key,value 描述:

為所有映像設定src屬性。

jQuery 代碼:
$("img").attr("src","test.jpg");

參數key,回呼函數 描述:

把src屬性的值設定為title屬性的值。

jQuery 代碼:
$("img").attr("title", function() { return this.src });