jquery DOM

xuehen發表於2015-11-08
jQuery

jquery封裝了一些dom操作，粗略看起來是在寫法上精簡了不少，最明顯的就是jquery中的dom操作以$（）符號作為最顯著的標準。但本質上，兩種方式獲取的結果物件是不一樣的。現在先來總結一下，jquery中的一些dom操作介面。

節點的操作

  • 查詢節點：

var $var_1=$("htmltype");   //獲取所有htmltype節點

例如：

var $ul_1=$("ul");

  • 建立並追加節點：

var $var_1=$("<htmltype>");//這句話是建立一個節點
$("htmltype2").append($var_1) ; //這句話是把節點插入所有htmltype2節點中

例如：

var $li_1=$("<li  title="title1">香蕉</li>");
$("ul").append($li_1);

其中插入方法有以下幾種：

append() 把B追加到A內部（所有的A元素，以下類似）
appendTo() 把A追加到B內部
prepend() 把B追加到A內部的內容前
prependTo() 把A追加到B的內容前
after() 在A後追加B
insertAfter() 在A前追加B
before() 在A前追加B
insertBefore()在A後追加B

例如：

$("ul").append("<li>你好</li>");//在ul內部追加li
$("<li>你好</li>").appendTo("ul");//在ul內部追加li

  • 刪除節點

remove() 刪除該元素
empty() 清空節點，包括後代節點

例如：

   $("ul  li").remove(“li[title="菠蘿"]”);//刪除ul中li元素屬性title="菠蘿"的元素

  • 複製節點

clone();//複製本節點

例如：

$("ul  li:eq[1]").clone().appenTo("ul");//複製並追加到ul中，只複製是不會顯示出來的

  • 替換節點

replaceWith();//將B替換所有A
replaceAll();//將A替換所有B

  • 包裹節點

warpAll();//用B包裹A
warpInner();//用B包裹A的內容

例如：

 <div id="div1">
     <p id="p1">我是p1裡的內容</p>
     <p id="p2">我是p2裡的內容</p>
</div>

//執行程式碼： 
 $("#p1").wrap($("#p2"));
//執行之後的結果為：

<div id="div1">
    <p id="p2">
         我是p2裡的內容<p id="p1">我是p1裡的內容</p>
    </p>
    <p id="p2">我是p2裡的內容</p>
</div>

注意到：當選擇DOM元素用wrap包裹元素的時候，是另外複製一份包裹元素的。並不是將被包裹元素移動到包裹元素裡。

屬性操作

  • 獲取和設定屬性

var $var_1=$("p");//這句話是獲取節點P
var $p_1=$var_1.attr("title");//獲取節點P的title屬性
var $p_2=$var_1.attr("title","你好");//設定節點P的title屬性為"你好"

  • 刪除屬性

$("p").removeAttr("title");//刪除節點P的Title屬性

樣式操作

  • 獲取和設定樣式

var $var_class=$("p").attr("class");//獲取節點P的class屬性
$("p").attr("class","class1");設定節點P的class屬性為樣式表類class1

  • 追加樣式

addClass() 新增樣式到A
$("p").addClass("another");//例如，新增樣式表類another類到P

  • 移除樣式

removeClass() 移除類

  • 切換樣式

toggleClass() 切換clss屬性類為新的類

  • 判斷某個樣式是否存在

hasClass()

  • css(“屬性”，”值”)
    css(“屬性”，”值”) 設定元素css某個屬性的值，如：

$("p").css("color","red");//設定P的css屬性{color:red;}

內容的操作

html() 該方法獲取html元素的內容，如：var var1=$("p").html();//獲取P元素內的內容
text() 獲取或設定某個html元素的內容
val() 獲取元素的Value值
children() 獲取html元素的所有子節點
next()  獲取html元素後緊鄰的同輩節點
prev() 獲取html元素前緊鄰的同輩節點
siblings() 獲取html元素前後緊鄰的同輩節點 

jquery dom vs. dom

DOM物件是我們用傳統的方法（javascript）獲得的物件，jQuery物件就是用jQuery的類庫選擇器獲得的物件。JQuery物件就是通過jQuery包裝DOM物件後產生的物件。JQuery物件是jQuery獨有的，其可以使用jQuery裡的方法，但是不能使用DOM的方法；
例如：

$("#color").html();//獲取id為color的元素內的html程式碼，html()是jQuery特有的方法;

它等同於:

document.getElementById("color").innerHTML;

DOM物件就是javascript固有的一些物件。DOM物件能使用javascript固有的方法，但是不能使用jQuery裡面的方法。
例如

$("#id").innerHTML 和$("#id").checked

之類的寫法都是錯誤的，可以用

$("#id").html()和$("#id").attr("checked")

之類的 jQuery方法來代替。

var domObj =document.getElementById("id"); //DOM物件
var $obj =$("#id"); //jQuery物件;

dom 物件jquery dom 物件的相互轉化

  • jQuery物件轉換成DOM物件
    jquery提供了兩種方法將一個jquery物件轉換成一個dom物件，即

[index]和get(index)

jquery物件就是一個陣列物件
如下是將一個jquery物件轉換成dom物件，再使用dom物件的方法
程式碼如下:

var $cr=$("#cr"); //jquery物件
var cr = $cr[0]; //dom物件 也可寫成 var cr=$cr.get(0);
alert(cr.checked); //檢測這個checkbox是否給選中

  • dom物件轉換成jquery物件
    對於一個dom物件，只需要用$()把dom物件包裝起來，就可以獲得一個jquery物件了，方法為

$(dom物件);

程式碼如下:

var cr=document.getElementById("cr"); //dom物件
var $cr = $(cr); //轉換成jquery物件

轉換後可以任意使用jquery中的方法了.

相關文章