JQuery 操作DOM元素

標籤：

//使用attr()方法控制元素的屬性

使用attr("屬性名稱");是擷取該屬性的值。使用attr("屬性名稱",屬性值);是設定屬性的值

 

//html(),text()方法控制元素的文本

/*包含樣式*/使用html();時是擷取元素的html文本(包括樣式：如果文本是斜體的，擷取到的也是斜體的),使用html("<b>哈哈哈</b>");時是將元素的html文字屬性設定為粗體的哈哈哈

/*不包含樣式*/使用text();時是擷取元素的文本(不包括樣式：如果文本是斜體的，擷取到的則是正體的 沒有任何樣式的),使用text("<b>哈哈哈</b>");時是將元素的文本設定為<b>哈哈哈</b>

 

//css()控制樣式

$("#divid").css({"background":"red","color","green"});//把divid元素的背景色設定為red 前景色彩設定為green

 

//removeAttr(),removeClass()移除屬性或樣式

$("#divid").removeAttr("屬性名稱"); //移除指定的屬性名稱  $("#divid").removeClass("樣式名");//移除指定的樣式名

 

//append()方法向元素追加內容  ~~參數也可以是一個返回字串的函數 例如$("body").append(myfunction());

var myhtml = " <div id = testdiv>哈哈哈 <div>";

$("body").append(myhtml);//向body中追加一個div 文本是哈哈哈

 

//appendTo()方法 將內容追加到指定的元素

$(".red").appendTo("div");//將class屬性為red的元素追加到div中，預設追加在最後

 

//before(),after()在元素的前後插入內容

var myhtml = "<span> 哈哈哈</span>";

$("#myid").before(myhtml);//在id為myid的元素前面插入一個span標籤

$("#myid").after(myhtml);//在id為myid的元素後面插入一個span標籤

 

//clone()方法複製元素 ：包括 節點 文本 屬性

$("body").append($("#myid").clone()); //把id為myid的元素複製一份加到body中

 

//replaceWith()  replaceAll() 方法替換

$("要替換的元素對象").replaceWith("替換的文本"); //var myhtml = "<span id = myid>哈哈哈</span>";  $(".green").replaceWith(myhtml); 把myhtml替換到class屬性為green 的元素的地方

$("替換的文本").replaceAll("要替換的元素對象");//var myhtml="<span id = myid>哈哈哈</span>";  $(myhtml).replaceAll(".green"); 把myhtml替換到class屬性為green的元素的地方

 

//wrap()  wrapInner()  包含

$("span").wrap("<div></div>"); //將span標籤包含在div標籤中

$("span").wrapInner("<b></b>");//將span的文本變成粗體

 

//each()方法遍曆元素

$("span").each(function(index)

{

 if(index==1)

{

 $(this).attr("color","red");

}

}); //迴圈遍曆span元素,遍曆到第二個的時候把元素的前景色彩設為red

 

//remove() empty()刪除元素

$("span").remove();//刪除span元素的子項目和span本身

$("span").empty();//只刪除span元素的子項目而不刪除span本身

 

JQuery 操作DOM元素