[jQuery學習系列一]1-選擇器與DOM對象

阿新 • • 發佈：2018-02-07

還需直接 itl java date js代碼循環 ava 也會

前言:

好久沒有更新博客了, 最近想復習下之前學過的JS的相關內容, 也算是自己的一種總結. 知識長時間不用就會忘記, 多學多記多用!!

下面的程序都可以在下面的網站進行在線調試:
http://www.365mini.com/diy.php?f=jquery
使用時記得勾選JS庫文件,最上面空格寫入html代碼, 下面一個寫入JS代碼,右上格子添加css代碼, 如下圖:
技術分享圖片

如果感興趣的話這裏還有幾個比較好的在線編輯JS的網站: jsbin.com; jsfiddle.net; codepen.io; runjs

1, Jquery選擇器
1.1,JQuery有三種選擇器　
(1)元素選擇
$(‘p‘) --選擇html中所有p元素標簽
$(‘div‘) --選擇html中所有的div元素標簽

(2)id選擇器
$(‘#A‘) -- 選擇html文檔中所有id = A的元素

(3)class選擇器
$(‘.color‘) --選擇html文檔中所有class = color的元素

1.2,JavaScript的延遲加載

$().ready(function() {
　　$("p").addClass("aa");
})

通知我們文檔已經加載完畢的函數就是 $(document).ready(); 文檔加載完畢後，立即執行，且只執行一次.
延遲執行的幾種寫法:

//標準寫法

$(document).ready(function () {

});

//簡寫

$().ready(function() {

});

//簡寫

$(function() {

});

另查看$(document).ready()在html中的執行順序:

 1 <head>
 2     <title></title>
 3     <script type="text/javascript">
 4         $(document).ready(function () {
 5             alert("0");
 6         });        
 7     </script>
 8     <script src="Js/jquery.js" type="text/javascript"></script>
 9     <script type="text/javascript">
10         $(document).ready(function () {
11             alert("1");
12         });        
13     </script>
14     <script src="Js/JScript.js" type="text/javascript"></script> <!-- alert("2"); -->
15     <script src="Js/JScript1.js" type="text/javascript"></script> <!-- alert("3");-->
16     <script type="text/javascript">
17         $(document).ready(function () {
18             alert("4");
19         });        
20     </script>
21 </head>
22 
23 //JScript.js
24 $(document).ready(function () {
25     alert("2");
26 });
27 
28 //JScript1.js
29 $(document).ready(function () {
30     alert("3");
31 });

結果: 先後彈出的是 1，2，3，4。至於0 為什麽沒有彈出(這個例子用上面提到的在線網站無法驗證, 因為那個網站提前會將JS引入)，因為在alert("0")的時候，jquery庫還沒引入進來。

另外這裏還需說明的一點是與window.onload()的區別:
$(document).ready(function () {});是在頁面加載完所有DOM節點文檔結構後開始執行;
window.onload()則是在頁面加載完所有資源後才開始執行。
也就是說window.onload()要等到所有圖片，外鏈資源都加載完後才開始執行，也因此window.onload只允許定義一個（實際是可以定義多個，但只有最後一個有效，相當於前面會被覆蓋掉），
而 $(document).ready(function () {});可以允許定義多個，並且按照定義的先後順序先後執行。

1.3, 對css的操作
參考自: http://www.365mini.com/page/jquery-addclass.htm

(1)addClass()
addClass()會為當前jQuery對象所匹配的每一個元素添加指定的css類名。
如果我們需要刪除元素上的css類名，你可以使用removeClass()函數。
以下面這段html代碼為例:

<div id="n1">
    <p id="n2" class="demo test">CoddingMan</p>
    <p id="n3" class="foo">jQuery編程測試</p>
</div>

我們編寫如下jQuery代碼：

　function w( html ){
　　document.body.innerHTML += "<br/>" + html;
　}

var $n2 = $("#n2");
// 為n2添加一個css類名
$n2.addClass("newOne");
document.writeln( $n2.attr("class") );
var $n3 = $("#n3");
// 為n3添加3個css類名
$n3.addClass("test class1 class2");
document.writeln( $n3.attr("class") );

// 為所有p標簽添加css類名"item-index"，這裏的index表示當前元素在所有匹配元素中的索引
$("p").addClass( function(index){
    // 函數內的this表示當前DOM元素
    return "item-" + index;
} );

document.writeln( $("#n2").attr("class") ); 
document.writeln( $("#n3").attr("class") );

　.newOne {
　　color: blue;
　}

用在線編輯器運行一下代碼是否和你想象的一樣呢? 下面看下運行後的截圖:
技術分享圖片
(2) removeClass()
由於篇幅限制,下面開始代碼都會收縮處理.
removeClass()函數用於移除當前jQuery對象所匹配的每一個元素上指定的css類名。

<p id="n2" class="demo test item-1">CodePlayer</p>

var $n2 = $("#n2");
// 移除n2上的一個css類名
$n2.removeClass("demo");

(3) toggleClass()
toggleClass()函數用於切換當前jQuery對象所匹配的每一個元素上指定的css類名。
所謂"切換"，就是如果該元素上已存在指定的類名，則移除掉；如果不存在，則添加該類名。

<p id="n2" class="demo test">CodePlayer</p>

var $n2 = $("#n2");
// 切換n2上的一個css類名(當前有"demo"，切換後無"demo")
$n2.toggleClass("demo");

1.4, 多種html元素的選擇, 自定義選擇 (實用且重要)

(1) 選擇包含某段文字的元素
$("div:contains("text")")

(2) 選擇html文檔中的奇偶div元素
$("div:odd"); //奇數
$("div:even"); //偶數

(3)指定標簽第N個元素
$("div:eq(3)"); //第四個元素, 記住下標從0開始

(4)屬性選擇
$("input[id=xx]") //屬性id
$("input[name=xx]") //屬性name
$("input[type=xx]") //屬性type

以下面html代碼片段為例:

View Code

jQuery代碼:

View Code

結果如下:

張三 CodePlayer CodePlayer CodePlayer
n7 張三 補充: (updated in 2016/03/02)

(4)並列選擇器

// 將p元素和div元素的margin設為0
$(‘p, div‘).css(‘margin‘, ‘0‘);

(5)層次選擇器
(5.1) parent > child（直系子元素）
下面的代碼，只有第一個span會變色，第二個span不屬於div的一代子元素，顏色保持不變。

<div>
    <span>123</span>
    <p>
        <span>456</span>
    </p>
</div>

$(document).ready(function () {
// 選取div下的第一代span元素，將字體顏色設為紅色
$(‘div > span‘).css(‘color‘, ‘#FF0000‘);
});

(5.2) prev + next（下一個兄弟元素，等同於next()方法）
下面的代碼，只有123和789會變色

<p class="item"></p>
<div>123</div>
<div>456</div>
<span class="item"></span>
<div>789</div>

$(document).ready(function () {
// 選取class為item的下一個div兄弟元素
$(‘.item + div‘).css(‘color‘, ‘#FF0000‘);
// 等價代碼
//$(‘.item‘).next(‘div‘).css(‘color‘, ‘#FF0000‘);
});

(5.3) prev ~ siblings（prev元素的所有兄弟元素，等同於nextAll()方法）
下面的代碼，G2和G4會變色

<div class="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</div>

$(document).ready(function () {
// 選取class為inside之後的所有div兄弟元素
$(‘.inside ~ div‘).css(‘color‘, ‘#FF0000‘);
// 等價代碼
//$(‘.inside‘).nextAll(‘div‘).css(‘color‘, ‘#FF0000‘);
});

(6) 過濾選擇器
(6.1) :first和:last（取第一個元素或最後一個元素）
下面的代碼，G1（first元素）和G3（last元素）會變色

<span>G1</span>
<span>G2</span>
<span>G3</span>

$(document).ready(function () {
$(‘span:first‘).css(‘color‘, ‘#FF0000‘);
$(‘span:last‘).css(‘color‘, ‘#FF0000‘);
});

(6.3) :not（取非元素）
下面的代碼，G1會變色

<div>G1</div>
<div class="wrap">G2</div>

$(document).ready(function () {
$(‘div:not(.wrap)‘).css(‘color‘, ‘#FF0000‘);
});

//但是，請註意下面的代碼：
//當G1所在div和G2所在div是父子關系時，G1和G2都會變色。
<div>
    G1
    <div class="wrap">G2</div>
</div>

(6.4) :even和:odd（取偶數索引或奇數索引元素，索引從0開始，even表示偶數，odd表示奇數）

$("div:odd"); //奇數
$("div:even"); //偶數

(6.5) :eq(x) （取指定索引的元素）

$("div:eq(3)"); //div的第四個元素, 記住下標從0開始
$(‘tr:eq(2)‘).css(‘background‘, ‘#FF0000‘);

(6.6) :gt(x)和:lt(x)（取大於x索引或小於x索引的元素,下標從0開始）

$(‘ul li:gt(2)‘).css(‘color‘, ‘#FF0000‘);
$(‘ul li:lt(2)‘).css(‘color‘, ‘#0000FF‘);

(6.7) :header（取H1~H6標題元素）

$(‘:header‘).css(‘background‘, ‘#EFEFEF‘);

(7) 內容過濾器
(7.1) :contains(text)（取包含text文本的元素）
下面的代碼，第一個dd會變色

<dl>
<dt>技術</dt>
<dd>jQuery, .NET, CLR</dd>
<dt>SEO</dt>
<dd>關鍵字排名</dd>
<dt>其他</dt>
<dd></dd>
</dl>

$(document).ready(function () {
// dd元素中包含"jQuery"文本的會變色
$(‘dd:contains("jQuery")‘).css(‘color‘, ‘#FF0000‘);
});

(7.2) :empty（取不包含子元素或文本為空的元素）

$(‘dd:empty‘).html(‘沒有內容‘);

(7.3) :has(selector)（取選擇器匹配的元素）
即使span不是div的直系子元素，也會生效

<div>
    <h2>
        A
        <span>B</span>
    </h2>
</div>

$(document).ready(function () {
// 為包含span元素的div添加邊框
$(‘div:has(span)‘).css(‘border‘, ‘1px solid #000‘);
});

(7.3) :parent（取包含子元素或文本的元素）
下面的代碼，A和D所在的li會有邊框

<ol>
    <li></li>
    <li>A</li>
    <li></li>
    <li>D</li>
</ol>

$(document).ready(function () {
$(‘ol li:parent‘).css(‘border‘, ‘1px solid #000‘);
});

(8). 可見性過濾選擇器
(8.1) :hidden（取不可見的元素）
jQuery至1.3.2之後的:hidden選擇器僅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。這也意味著hidden只匹配那些“隱藏的”並且不占空間的元素，像visibility:hidden或opactity:0的元素占據了空間，會被排除在外。

(8.2) :visible（取可見的元素）
同上.

(9) 屬性過濾器
(9.1) [attribute]（取擁有attribute屬性的元素）
下面的代碼，最後一個a標簽沒有title屬性，所以它仍然會帶下劃線
代碼在9.2 中展示

(9.2) [attribute = value]和[attribute != value]（取attribute屬性值等於value或不等於value的元素）
下面代碼中a標簽 class 為item 的和class 不為item 的背景色不同。

<ul>
    <li><a href="#" title="DOM對象和jQuery對象" class="item">DOM對象和jQuery對象</a></li>
    <li><a href="#" title="jQuery選擇器大全" class="item-selected">jQuery選擇器大全</a></li>
    <li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>
    <li><a href="#" title="基於jQuery的插件開發" class="item">基於jQuery的插件開發</a></li>
    <li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>
    <li><a href="#" class="item">其他</a></li>
</ul>

//分別為class="item"和class!=item的a標簽指定文字顏色
$(document).ready(function() {
    $(‘a[title]‘).css(‘text-decoration‘, ‘none‘);
    
    //分別為class="item"和class!=item的a標簽指定文字顏色
    $(‘a[class = item]‘).css(‘background‘, ‘#EEADBB‘);
    $(‘a[class != item]‘).css(‘background‘, ‘#FF0000‘);
    
});

(10)指定標簽第N個元素

$("div:eq(3)"); //第四個元素, 記住下標從0開始

(11)屬性選擇

$("input[id=xx]") //屬性id
$("input[name=xx]") //屬性name
$("input[type=xx]") //屬性type

以下面html代碼片段為例:
Html代碼:

<div id="n1">
    <div id="n2">
        <span id="n3">張三</span>
        <span id="n4">CodePlayer</span>
    </div>
    <div id="n5">
        <span id="n6">CodePlayer</span>
    </div>
    <div id="n7">
        CodePlayer
    </div>
</div>

jQuery代碼:

// 選擇了id分別為n2、n4、n5、n6、n7的5個元素
// n5的子元素n6中包含"CodePlayer"，因此n5也會被計入在內
$("#n1 :contains(CodePlayer)");

//上面div元素共有4個, 索引從0開始, 最大索引為3, 如果超過索引則結果為: undefined
$n = $("div:eq(3)")
document.writeln( $n.attr("id") ); //輸出n7

//獲取id = n3的span元素
$n3 = $("span[id=n3]");
document.writeln( $n3.text() );

2, DOM的操作函數
2.1,children() 函數遍歷DOM樹，搜索指定元素的直接子節點。此方法僅在DOM樹中向下遍歷一層。
2.2, parent() 函數　向上遍歷DOM樹,用於搜索每個指定元素的直接親元素。這個和children()函數的遍歷範圍是一樣的，都是遍歷一層。

<div id="has">
    <div>1</div>
    <div>2</div>
    <div>3
        <div>3.1</div> 
    </div>        
    <div>4
        <div>4.1</div>
    </div>            
</div>

//children()
var node = $("#has").children();
alert(node.length);

註意：這裏的長度是4，而不是6.

2.3, each() 函數循環訪問集合中的每個元素

<div id="has">
    <div>1</div>
    <div>2</div>
    <div>3
        <div>3.1</div> 
    </div>        
    <div>4
        <div>4.1</div>
    </div>            
</div>

var text = "";
$("#has").children().each(function () {
    text += $(this).text();
});
document.writeln(text);// 123 3.1 4 4.1

//數組的遍歷
var arr = ["Test1", "Test2", "Test3"];
$.each(arr, function (i, item) {
    document.writeln(i);
    document.writeln(item);
});

結果如圖所示:
技術分享圖片

each使用示例:

/*********************************/
//二維數組的雙遍歷

var arr = [
　　["Test1", "Test2", "Test3"],
　　["Test4", "Test5", "Test6"],
　　["Test7", "Test8", "Test9"]
];

$.each(arr, function (i, item) {
　　$.each(item, function (i, itemCell) {
　　　　document.writeln(i);
　　　　document.writeln(itemCell);
　　});
});


/*結果:
0 Test1 1 Test2 2 Test3 0 Test4 1 Test5 2 Test6 0 Test7 1 Test8 2 Test9
*/

/*********************************/
//遍歷json數據
var obj = { "1": "Test1", "2": "Test2", "3": "Test3", "4": "Test4", "5": "Test5", "6": "Test6" };
$.each(obj, function (i, item) {
　　document.writeln(i);
　　document.writeln(item);
});

/* 結果:
1 Test1 2 Test2 3 Test3 4 Test4 5 Test5 6 Test6
*/
/*********************************/

2.4. text() 函數
text()是jquery對象的一個方法，用於訪問指定元素的文本內容。它合並指定元素的文本內容，並以字符串的形式返回。　　
alert($(‘p‘).text());//彈出p標簽對文本 “段落”

<div id="has">
　　<div>1</div>
　　<div>2</div>
　　<div>3
　　　　<div>3.1</div> 
　　</div> 
　　<div>4
　　　　<div>4.1</div>
　　</div> 
</div>

$(document).ready(function () {
　　$("div").children().each(function () {
　　　　alert($(this).text());
　　});
});

註意：這裏會彈出 1，2，3 3.1，3.1， 4 4.1， 4.1 ，有嵌套層的，父級所有子級的文本一起彈出，之後再遍歷子級。

text()函數還有另外一個用法，那就是給元素文本賦值。
$("#has").text("<h1>文本插入</h1>");

2.5.html()函數　　從指定元素中的第一個元素獲取html內容，以字符串的形式返回。
區別：text() 與 html() 函數的區別
區別一：text()函數可用於xml 文檔和 html 文檔，而 html() 只能用於html文檔。
區別二：html()函數不僅僅顯示文本，輸出的還包括標簽對和文本，而text()只有文本。

//html
<div id="div">1 
　　<span id="span">1.1</span> 
　　<span>1.2</span> 
　　<span>1.3</span> 
　　<div>1.4
　　　　<p id="p">1.4.1</p>
　　</div>
</div>

// js
alert($("#div").html());
alert($("#div").text());

打印結果:
第一個alert:
1
<span id="span">1.1</span>
<span>1.2</span>
<span>1.3</span>
<div>1.4
<p id="p">1.4.1</p>
</div>

第二個alert:
1 1.1 1.2 1.3 1.4 1.4.1

html()函數也還有另外一個用法，那就是給元素文本賦值，類似與text()，但有著明顯的區別，以上面為例子:
$("#div").html("<h1>文本插入html()</h1>");
$("#div").text("<h2>文本插入text()</h2>");
結果:
文本插入html()
<h2>文本插入text()</h2>

我們可以看到用html(string) 函數賦值的文本，解析了標簽對，這也是與text()函數不同的地方。

2.6,Val()函數
返回或設置被選元素的值, 元素的值是通過value屬性設置的, 該方法大多用於input元素.
如果該方法未設置參數, 則返回被選元素的當前值.

語法: $(selector).val(value)

<input id = "input" type = "text" value = "input"/>
alert($("#input").val()); //彈出文本框的值: input
$("#input").val("MyInput");// 為文本框賦值
alert($("#input").val()); // 彈出文本框的值: MyInput

2.7, next()函數獲得匹配元素集合中每個元素相鄰的同胞元素,如果提供選擇器，則取回匹配該選擇器的下一個同胞元素。

<body> 
　　<p>1</p>
　　<p>2</p>
　　<p>3</p>
　　<div id="div1">a</div>
　　<div>
　　　　<div id="div2">b</div>
　　　　<span>c</span>
　　</div>
　　<div id="div3">d</div>
</body>

$(document).ready(function () {
　    $("p").next().css("background", "yellow");
　　$("div").next("div").css("background", "red");
});

第一種情況說明:
結果是2,3,a的背景色變成黃色.
這裏是獲取p標簽的相鄰同胞元素:
<p>1</p> 相鄰同胞是<p>2</p>
<p>2</p> 相鄰同胞是<p>3</p>
<p>3</p> 相鄰同胞是<div ...>1</div>

第二種情況說明: 取回匹配該選擇器的下一個同胞元素。
結果是: b,c,d 背景色變成紅色
這裏只是限定了查找所有div標簽同級的div標簽.

總結: 這裏回到2.1,2.2, 看下和chilren()和parent()的區別.

3, 對DOM節點的操作
DOM分類：DOM Core(核心):用途廣泛支持多種編程語言、HTML DOM:代碼簡短只用於處理web文檔、CSS DOM:對樣式的操作

HTML DOM：操作DOM節點常用的函數有 prepend(), prependTo(), clone(), append(), appendTo(), before(), insertBefore(), after(), insertAfter(),
remove(), detach(), empty(), replaceWith(), replaceAll(), wrap(), wrapAll(), warpInner()

3.1,prepend 函數與 prependTo 函數
在指定的元素前面插入指定的內容，並返回一個JQuery對象，內容可以是文本、html元素或者jquery對象。
在這裏需要註意一點, 插入的元素會成為選擇元素的子級.
例子:

<div>
　　<p>12232</p>
　　<input id="input" type="text" value="input" />
</div>

$("p").prepend(‘<h2>插入元素h2</h2>‘);
$("#input").prepend(‘<div>插入元素div</div>‘);

//執行後的代碼片段:
<div>
　　<p>
　　　　<h2>插入元素h2</h2>
　　　　12232
　　</p>
　　<input id="input" type="text" value="input">
　　　　<div>插入元素div</div>
　　</input>
</div>

prepend() 和 prependTo() 方法作用相同。差異在於語法：內容和選擇器的位置，以及 prepend() 能夠使用函數來插入內容。

3.2,clone()函數　　復制指定元素並返回一個新的jquery對象。

<div>
　　<p>這是個段落。</p>
</div>

$("p").clone().prependTo("p");
$("p").prepend($("p").clone());

這兩個都是將整個<p>標簽的內容復制, 然後又添加到<p>標簽中

3.3. append()函數與 appendTo()函數　　在被選元素的結尾（仍然在內部）插入指定內容。與　　prepend 函數與 prependTo 函數相對的函數　

<div>
　　<p>這是個段落。</p>
</div>

$("p").append("<b>Hello world!</b>");
$("<b>Hello world!</b>").appendTo("p");

這裏使用了append後的代碼片段變為:

<div>
　　<p>
　　　　這是個段落。
　　　　<b>Hello world!</b>
　　</p>
</div>

這裏和prepend的區別就是一個在標簽內部的開頭添加元素, 而append是在結尾添加.

3.4. before()函數　　before() 方法在被選元素前插入指定的內容。這次不同與prepend() 函數的是被插入的元素並不在內部而是平級。
PS: 同樣的還有after() 函數

<div>
　　<p>這是個段落。</p>
</div>

$("p").before("<p>Hello world!</p>");

//執行後的代碼片段:
<div>
　　<p>Hello world!</p>
　　<p>這是個段落。</p>
</div>

3.5. insertBefore()　　在被選元素之前插入 HTML 標記或已有的元素。PS: 同樣的還有insertAfter()函數

<div>
　　<p id="1">這是段落1。</p>
　　<p>這是段落2。</p>
　　<p>這是段落3。</p>
　　<p>這是段落4。</p>
　　<p id="5">這是段落5。</p>
</div>

$("<span>Hello world!</span>").insertBefore("#5");

//執行後的代碼片段:
<div>
　　<p id="1">這是段落1。</p>
　　<p>這是段落2。</p>
　　<p>這是段落3。</p>
　　<p>這是段落4。</p>
　　<span>Hello world!</span>
　　<p id="5">這是段落5。</p>
</div>

3.6,remove()函數移除被選元素，包括所有文本和子節點。
該方法不會把匹配的元素從 jQuery 對象中刪除，因而可以在將來再使用這些匹配的元素。
但除了這個元素本身得以保留之外，remove() 不會保留元素的 jQuery 數據。其他的比如綁定的事件、附加的數據等都會被移除。這一點與 detach() 不同。

<p id="n1" class="mark">
    <span id="n2">[span#n2]</span>    
</p>
<p id="n3" class="mark">
    <label id="n4" class="move">[label#n4]</label>
</p>
<p id="n5">
    段落內容
    <span id="n6">[span#n6]<span id="n7">[span#n7]</span></span>
</p>


var $n6 = $("#n6");
// 移除n6元素
$n6.remove( );

var $p = $("p");
// 移除帶有類名"mark"的p元素
var $removedP = $p.remove( ".mark" ); // $removedP === $p


// 將移除了的n6追加到body元素內的起始位置
// 雖然在前面n6已經從文檔中被移除
// 但不會將其從jQuery對象中移除，因此我們還可以使用該jQuery對象，將n6再次放入文檔中
$n6.prependTo("body");

結果是:
[span#n6][span#n7]

段落內容

3.7,detach() 函數　　移除被選元素，包括所有文本和子節點。
與remove()相比，detach()函數不會移除與元素關聯綁定的附加數據( data()函數 )和事件處理器等(remove()會移除)。

3.8, empty() 函數　　從被選元素移除所有內容，包括所有文本和子節點。

3.9, replaceWith() 函數　　將指定的 HTML 內容或元素替換被選元素。

<div>
　　<p id="1">p1</p>
　　<p id="P1">p2</p>
　　<p id="P2">p3</p>
　　<p id="P3">p4</p>
　　<p id="P4">p5</p>
　　<p id="P5">p6</p>
</div>

$(document).ready(function () {
　　$("#P1").replaceWith("<div>變成div了！</div>"); 
});

//執行後的代碼片段:
<div>
　　<p id="1">p1</p>
　　<div>變成div了！</div>
　　<p id="P2">p3</p>
　　<p id="P3">p4</p>
　　<p id="P4">p5</p>
　　<p id="P5">p6</p>
</div>

3.10,replaceAll() 函數　　將指定的 HTML 內容或元素替換被選元素。
replaceAll() 與 replaceWith() 作用相同。差異在於語法：內容和選擇器的位置，以及 replaceWith() 能夠使用函數進行替換。

$(document).ready(function () {
　　$("#P1").replaceWith("<div>變成div了！</div>");
　　$("<div>我也變成div了！</div>").replaceAll("#P2");
});

replaceAll寫法上與replaceWith發生了改變.

3.11, wrap() 函數把每個被選元素放置在指定的 HTML 內容或元素中。unwrap() 解裹函數

<div>div
　　<p id="1">p1</p>
　　<div>
　　　　<p id="P1">p2</p>
　　</div>
</div>

$(document).ready(function () {
　　$("#1").wrap("<div>被div包裹了</div>");
　　$("#P1").unwrap().text("從父級div解脫了!");
});

//執行後的代碼片段: 
<div>div
　　<div>
　　　　被div包裹了
　　　　<p id="1">p1</p>
　　</div>
　　<p id="P1">p2</p>
</div>

3.12, wrapAll()函數　　將所有被選的元素放置在指定的 HTML 元素中

<p id="P1">p2</p>
<p id="P2">p3</p>
<p id="P3">p4</p>
<p id="P4">p5</p>
<p id="P5">p6</p>

$(document).ready(function () {
$("P").wrapAll("<div>用div包裹</div>");
});

//執行後的代碼片段:
<div>
　　用div包裹
　　<p id="P1">p2</p>
　　<p id="P2">p3</p>
　　<p id="P3">p4</p>
　　<p id="P4">p5</p>
　　<p id="P5">p6</p>
</div>

這裏如果換成wrap:
$(document).ready(function () {
　　$("P").wrap("<div>用div包裹</div>");
});
//執行後的代碼片段:
<div>
　　用div包裹
　　<p id="P1">p2</p>
　　</div>
<div>
　　用div包裹
　　<p id="P2">p3</p>
</div>
...

3.13, warpInner()函數　　使用指定的 HTML 內容或元素來包裹每個被選元素中的所有內容 (inner HTML)。

<p id="P1">p2</p>
<p id="P2">p3</p>
<p id="P3">p4</p>
<p id="P4">p5</p>
<p id="P5">p6</p>
$(document).ready(function () {
　　$("p").wrapInner("<b>加粗</b>");
});
//執行後的代碼片段:
<p id="P1">
　　<b>
　　　　加粗
　　　　p2
　　</b>
</p>
<p id="P2">
　　<b>加粗p3</b>
</p>
...
如果使用: $("#P1").wrapInner("加粗"); 對於代碼片段來說沒有改變

[jQuery學習系列一]1-選擇器與DOM對象

還需直接 itl java date js代碼循環 ava 也會前言: 好久沒有更新博客了, 最近想復習下之前學過的JS的相關內容, 也算是自己的一種總結. 知識長時間不用就會忘記, 多學多記多用!! 下面的程序都可以在下面的網站進行在線調試: http://ww

[jQuery學習系列一]1-選擇器與DOM對象

[jQuery學習系列一]1-選擇器與DOM對象

jquery系列教程1-選擇器全解

css基礎語法一（選擇器與css導入方式）

css系列教程1-選擇器全解

CSS基礎學習十一：選擇器的優先順序

jQuery 基本選擇器層次選擇器過濾選擇器內容過濾選擇器可見過濾選擇器屬性過濾選擇器表單對象屬性過濾選擇器

jquery對象與DOM對象

jquery對象與dom對象的轉換

js-jQuery對象與dom對象相互轉換

jquery學習之選擇器與過濾器

jquery過濾選擇器-----------（表單對象屬性過濾選擇器與表單選擇器）

JQuery :eq() 選擇器與 eq()遍歷方法

jQuery 選擇器與事件

jQuery選擇器與過濾器

CSS中奇數選擇器與偶數選擇器，一句程式碼怎麼實現？

[html5入門-14]一探究竟“後代選擇器與子選擇器的區別”

0016-jQuery選擇器與CSS選擇器

Jquery之選擇器與方法綜合練習

Jquery基本選擇器與層次選擇器

Jquery--1--選擇器分類

[jQuery學習系列一]1-選擇器與DOM對象

相關推薦