3.1 DOM 操作分類
①DOM Core?
包括（getElementById() , getElementsByTagName() , getAttribute() , setAttribute() ）
//獲取表單對象 docuement.getElementsByTagName("form");//獲取某元素的src屬性 element.getAttribute("src");
jquery轉換成dom對象？②HTML DOM
專屬HTML_DOM屬性，提供一些更簡明的記號來描述各種HTML元素屬性（只能用來處理web文檔）
//獲取表單 document.forms //HTML_DOM提供了一個forms對象//獲取元素的src屬性 element.src
③CSS_DOM
CSS_DOM是針對CSS的操作，該技術主要作用是獲取和設置 style 對象的各種屬性
element.style.color = "red";
vue通過什么屬性獲取dom、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查找節點
jquery 虛擬dom、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);
jquery對象轉換為dom對象方法、
3.2.2 創建節點
1創建元素節點
例如創建2個<li>元素節點，并將其添加到<ul>中
vue如何獲取dom？使用 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/"); jquery dome、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);
jquery對象和dom對象區別、
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); //橫向滾動條滾動到指定位置 ?
