第三章（jQuery中的DOM操作）
3.1 DOM 操作分類
①DOM Core
包括（getElementById() , getElementsByTagName() , getAttribute() , setAttribute() ）
//獲取表單對象 docuement.getElementsByTagName("form"); //獲取某元素的src屬性 element.getAttribute("src");
②HTML DOM
專屬HTML_DOM屬性，提供一些更簡明的記號來描述各種HTML元素屬性（只能用來處理web文檔）
//獲取表單 document.forms //HTML_DOM提供了一個forms對象//獲取元素的src屬性 element.src
③CSS_DOM
CSS_DOM是針對CSS的操作，該技術主要作用是獲取和設置 style 對象的各種屬性
element.style.color = "red";
3.2jQuery中的DOM操作
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p title="選擇你最喜歡的水果">你最喜歡的水果？</p> <ul> <li title="蘋果">蘋果</li> <li title="橘子">橘子</li> <li title="菠蘿">菠蘿</li> </ul> </body> </html>
3.2.1查找節點
1查找元素節點
var $li = $("ul li:eq(1)"); //獲取ul中的第二個li節點 var li_txt = $li.text(); //獲取第二個li元素節點的文本內容 alert(li_txt); //打印文本內容
2查找屬性節點
使用 attr() 方法來獲取各種屬性值
var $para = $("p") var p_txt = $para.attr("title"); alert(p_txt);
3.2.2 創建節點
1創建元素節點
例如創建2個<li>元素節點，並將其添加到<ul>中
使用 jQuery 的工廠函數 $() 完成
$( html ) //$(html) 方法會根據傳入的HTML標記字符串，創建一個DOM對象，並將這個DOM對象包裝成一個jQuery 對象後返回
①創建<li>
var $li_1 = $("<li></li>"); var $li_2 = $("<li></li>");
②添加到ul中
$("ul").append($li_1);
$("ul").append($li_2);
//或者采用連寫
$("ul").append($li_1).append($li_2);
* 創建單標簽元素時，要采用XHTML格式
$("br/");
2創建文本節點
var $li_1 = $("<li>香蕉</li>"); var $li_2 = $("<li>雪梨</li>"); $("ul").append($li_1); $("ul").append($li_2);
3 創建屬性節點
創建屬性節點與文本節點類似，也是在元素節點創建時一起創建
var $li_1 = $("<li title=‘香蕉‘>香蕉</li>"); //屬性 title = ‘’ 要用單引號 var $li_2 = $("<li title=‘雪梨‘>雪梨</li>"); $("ul").append($li_1); $("ul").append($li_2);
3.2.3 插入節點
|
方法 |
描述 |
示例 |
|
append() |
向每個匹配的元素內部追加內容 將B追加到A |
<p>我想說</p> $(“p”).append(“<b>你好</b>”); 結果：<p>我想說</p><b>你好</b> |
|
appendTo() |
將A追加到B |
<p>我想說</p> $(“<b>你好</b>”).append(“p”); 結果：<p>我想說</p><b>你好</b> |
|
prepend() |
前置內容 |
<p>我想說</p> $(“p”).prepend(“<b>你好</b>”); 結果：<b>你好</b><p>我想說</p> |
|
prependTo() |
將A前置到B |
<p>我想說</p> $(“<b>你好</b>”).prependTo(“p”); 結果：<b>你好</b><p>我想說</p> |
|
after() |
在每個匹配的元素之後插入內容（將B插入到A後） |
<p>我想說</p> $(“p”).after(“<b>你好</b>”); 結果：<p>我想說</p><b>你好</b> |
|
insertAfter() |
將A插入到B後 |
<p>我想說</p> $(“<b>你好</b>”).after(“p”); 結果：<p>我想說</p><b>你好</b> |
|
before() |
在匹配元素之前插入內容 |
<p>我想說</p> $(“p”).before(“<b>你好</b>”); 結果： <b>你好</b><p>我想說</p> |
|
insertBefore() |
將A插入到B前面 |
<p>我想說</p> $(“<b>你好</b>”).insertBefore(“p”); 結果： <b>你好</b><p>我想說</p> |
插入節點的方法不僅能將新創建的 DOM 元素插入到文檔中，也能對原有 DOM 元素進行移動
①插入
var $li_1 = $("<li title=‘香蕉‘>香蕉</li>"); var $li_2 = $("<li title=‘雪梨‘>雪梨</li>"); var $li_3 = $("<li title=‘其他‘>其他</li>"); var $parent = $("ul"); var $two_li = $("ul li:eq(1)"); $parent.append($li_1); //append() 方法將創建的第1個<li>元素添加到父元素最後 $parent.prepend($li_2); //prepend() 方法將創建的第2個<li>添加到父元素最前面 $li_3.insertAfter($two_li); //insertAter() 方法將創建的第3個<li>元素插入到獲取的<li> 元素之後
②移動
var $one_li = $("ul li:eq(1)"); //獲取第二個 var $two_li = $("ul li:eq(2)"); //獲取第三個 $two_li.insertBefore($one_li); //將第三個移動到第二個之前
移動後
3.2.4 刪除節點
remove() 和 empty()
1 remove() 方法
從DOM中刪除所有匹配元素
var $li = $("ul li:eq(1)").remove(); //獲取第2個元素後刪除 $li.appendTo("ul"); //又重新添加到<ul>元素中
某個元素使用 remove() 方法刪除後，該節點包含的所有後代將同時被刪除，這個方法返回值是一個指向已被刪除的節點的引用。因此可以在以後再使用這些元素 （用remove()方法刪除後，還可以繼續使用）
選擇元素屬性刪除
$("ul li").remove("li[title!=菠蘿]");
2 empty() 方法
嚴格來講，empty() 方法並不是刪除節點，而是清空節點，能清空元素中的所有後代節點
3.2.5 復制節點
$("ul li").click(function(){
$(this).clone().appendTo("ul"); //復制當前單擊的節點，並將它追加到<ul>元素中
})
被復制出的節點是不具備再次復制的功能，如果需要具備，可以在clone()中傳入 true
$("ul li").click(function(){
$(this).clone(true).appendTo("ul"); //復制當前單擊的節點，並將它追加到<ul>元素中
})
3.2.6 替換節點
replaceWith() 和 replaceAll()
$("p").replaceWith("<strong>你最不喜歡的水果是？</strong>");
replaceAll() 只是顛倒了 replaceWith() 順序
$("<strong>你最不喜歡的水果是？</strong>").replaceAll("p");
3.2.7 包裹節點
將節點用其他標記包裹起來 用 wrap()
$("strong").wrap("<b></b>"); //用<b>標簽把 <strong>元素包裹起來
//得到結果：
<b><strong title = "選擇你最喜歡的水果"> 你最喜歡的水果是？</strong></b>
包裹節點操作還有2個方法 wrapAll() 和 wrapInner()
①wrapAll() 方法
該方法會將所有的元素用一個元素來包裹。不同於wrap() 方法，wrap() 方法是醬所有的元素單獨包裝
wrap() 單獨包裹每個元素
<strong title="選擇你最喜歡的水果">你最不喜歡的水果是？</strong> <strong title="選擇你最喜歡的水果">你最不喜歡的水果是？</strong> <ul> <li title="蘋果">蘋果</li> <li title="橘子">橘子</li> <li title="菠蘿">菠蘿</li> </ul> $("strong").wrap("<b></b>");
結果
wrapAll() 包裹整個元素
<strong title="選擇你最喜歡的水果">你最不喜歡的水果是？</strong> <strong title="選擇你最喜歡的水果">你最不喜歡的水果是？</strong> <ul> <li title="蘋果">蘋果</li> <li title="橘子">橘子</li> <li title="菠蘿">菠蘿</li> </ul> $("strong").wrapAll("<b></b>")
結果
wrapInner() 包裹元素的子元素
<strong title="選擇你最喜歡的水果">你最不喜歡的水果是？</strong> <strong title="選擇你最喜歡的水果">你最不喜歡的水果是？</strong> <ul> <li title="蘋果">蘋果</li> <li title="橘子">橘子</li> <li title="菠蘿">菠蘿</li> </ul> $("strong").wrapInner("<b></b>")
結果
3.2.8 屬性操作
在jQuery中，庸attr()方法來獲取和設置元素屬性，removeAttr() 方法來刪除元素屬性
1 獲取屬性和設置屬性
var $para = $("p"); var p_txt = $para.attr("title"); //獲取 p 元素的節點屬性 title $("p").attr("title","your title"); //設置單個屬性值 $("p").attr({"title":"your title","name":"test"}); //設置多個屬性
2 刪除屬性
$("p").removeAttr("title"); //刪除P元素的屬性 title
3.2.9 樣式操作
1 attr獲取樣式和設置樣式 2 追加樣式addClass
$("p").attr("class","high") //使用attr() 為p元素設置class
$("input:eq(2)").click(function(){
$("p").addClass("high");
}) //使用addClass追加樣式
3移除樣式
$("p").removeClass("high"); //移除單個
$("p").removeClass("high").removeClass("another");
//或者
$("p").removeClass("high another"); //移除多個
$("p").removeClass(); //移除所有
4 切換樣式 toggle()
$toggleBtn.toggle(function(){ //顯示元素 }，function(){ //隱藏元素 })
toggleClass() 方法控制樣式上的重復切換
$("p").toggleClass("another"); //重復切換類名 "another"
5 判斷是否含有某個樣式
hasClass() 可以用來判斷元素中是否含有某個class，如果有，返回 true ，否則返回 false
$("p").hasClass("another");
$("p").is(".another"); //hasClass 相當於調用了 is() 方法
3.2.10 設置和獲取HTML、文本和值
1 html()
html() 類似於JS中的 innerHTML 屬性，用來讀取或者設置某個元素中的HTML內容
<p title="選擇你最喜歡的水果"><strong>你最喜歡的水果</strong></p> var p_html = $("p").html(); alert(p_html);
html() 設置元素的 HTML 代碼
$("p").html("<b>你最不喜歡的水果是？</b>"); //設置<p>元素的HTML代碼
2 text()
類似於JS中的innerText() ，可以用來設置某個元素中的文本內容。和 html() 用法一樣
3 val()
類似於JS中value()。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text" id="address" value="請輸入郵箱地址" name=""><br/><br/> <input type="text" id="password" value="請輸入郵箱密碼" name=""><br/><br/> <input type="button" value="登錄" name=""> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $("#address").focus(function(){ var txt_value = $(this).val(); //獲取地址文本框的值 if(txt_value=="請輸入郵箱地址"){ //如果值==“請輸入郵箱地址” 則清空 $(this).val(""); } }) $("#address").blur(function(){ var txt_value = $(this).val(); if(txt_value == ""){ $(this).val("請輸入郵箱地址"); } }) </script> </body> </html>
使用 defaultValue 屬性來實現同樣功能。defaultValue 屬性包含該表單元素的初始值。
$("#address").focus(function(){
var txt_value = $(this).val(); //獲取地址文本框的值
if(txt_value==this.defaultValue){ //如果值==“請輸入郵箱地址” 則清空
$(this).val("");
}
})
$("#address").blur(function(){
var txt_value = $(this).val();
if(txt_value == ""){
$(this).val(this.defaultValue);
}
})
* this 指向當前的文本框， “this.defaultValue” 就是當前文本框的默認值
3.2.11 遍歷節點
1 children() 方法
用於取得匹配元素的子元素集合
2 next() 方法
用於取得匹配元素後面緊鄰的同輩元素
3 prev() 方法
用於取得匹配元素前面緊鄰的同輩元素
4 siblings() 方法
用於取得匹配元素前後所有的同輩元素
3.2.12 CSS-DOM 操作
1利用CSS直接獲取元素的樣式屬性
$("p").css("color"); //獲取P元素的樣式顏色
$("p").css("color","red") //獲取並修改樣式顏色
$("p").css({"color":"red","fontSize":"12px"}); //設置多個樣式
2height() width()
$("p").height(); //獲取元素高度
$("p").height(100) //設置元素高度為100px
//1.offset() 方法
//獲取元素在當前視窗的相對偏移，返回的對象包含2個屬性，top和left。只對可見元素有效
var offset = $("p").offset(); //獲取元素的offset()
var left = offset.left; //獲取左偏移
var top = offset.top; // 獲取右偏移
//2.position() 方法
//獲取元素相對於最近的一個position樣式屬性設置為 relative或absolute的祖父節點的相對偏移。用法同 offset()
//scrollTop() 和 scrollLeft()
//獲取元素的滾動條距離頂端和距離左端的距離
var $p = $("p");
var scrollTop = $p.scrollTop(); //距離頂端距離
var scrollLeft = $p.scrollLeft(); //距離左端距離
//還可以設置滾動到指定位置
$("p").scrollTop(300); //垂直滾動條到指定位置
$(‘p‘).scrollLeft(300); //橫向滾動條滾動到指定位置
第三章（jQuery中的DOM操作）