JQ 元素建立插入刪除篇

2021-10-11 16:15:47 字數 3295 閱讀 8297

建立元素, $()傳入htmlstring 用於建立元素

var jqdiv =$(


"");
設定所需要的屬性或者樣式

jqdiv.


css();


jqdiv.


prop


("id"


,"div1"


);
插入到當前文件中

$


("body").


(jqdiv)


;var jqdiv =$(


"").html


("這是div1").


css().


prop


("id"


,"div1");


$("body").


(jqdiv)


;

b的 型別可以是: jq物件, dom元素, html字串

$


("body").


(jqdiv)


;var domp = document.


createelement


("p");


domp.innerhtml =


"這是段落1"


;domp.style.background =


"gold"


;domp.style.fontsize =


"50px";$


("body").


(domp);$


("body").


("");
$(a).prepend(b) 在a元素裡面的最前面插入b

b的資料型別: jq物件, dom元素, html字串, 元素陣列

var jqdiv =$(


"").html


("這是jq建立的div");


var jsdiv = document.


createelement


("div");


jsdiv.innerhtml =


"這是js建立的div"


;var htmldiv =


"這是htmlstring_div";


var elearr =


[jqdiv, jsdiv, htmldiv];$


("body").


prepend


(jqdiv);$


("body").


prepend


(jsdiv);$


("body").


prepend


(htmldiv);$


("body").


prepend


(elearr)


;
b的型別可以是: jq物件, dom元素, 選擇器

$(""


).html


("這是div1").


($("body"))


;$(""


).html


("這是div2").


(document.


queryselector


("body"))


;$(""


).html


("這是div3").


("body"


);
$(a).prependto(b) 在b元素裡面的最前面插入a

b的型別可以是: jq物件, dom元素, 選擇器

$(""


).html


("span1").


prependto($


("body"))


;$(""


).html


("標題2").


css(


"background"


,"red").


prependto


(document.


queryselector


("body"))


;$(""


).html


("按鈕1").


prependto


("body"


);
$(a).after(b); 在a元素的後面插入b元素

b的資料型別: jq物件, dom元素, html字串

$


("h2").


after($


("").


prop


("src"


,"../day21/img/1.png"))


;$("h2").


after


(document.


createelement


("hr"))


;$("h2").


after(""


);
$(a).before(b); 在a元素的前面插入b元素

b的資料型別: jq物件, dom元素, html字串

$


("h2").


before($


("").


prop


("src"


,"../day21/img/2.jpeg"))


;$("h2").


before


(document.


createelement


("hr"))


;$("h2").


before(""


);
刪除元素

// 刪除remove按鈕


var removebtn =$(


"button:eq(0)").


remove()


;// 刪除detach按鈕


var detachbtn =$(


"button:eq(0)").


detach()


;
轉殖元素 (一塊兒轉殖元素事件)

$


("button:eq(1)").


clone


(true).


html


("轉殖的按鈕").


($("body"))


;
遍歷jq物件, 操作jq物件裡的dom元素js

jq物件.


each


(function


(i, v));


//例$


("button").


each


(function


(i,v)


);

jq刪除元素操作

jquery提供了多個方法進行元素的刪除操作，目前用到了remove empty 1.remove 是刪除指定的元素全部內容，例如 this parentnode remove 刪除按鈕的父節點 但除了這個元素本身得以保留之外，remove 不會保留元素的 jquery 資料。其他的比如繫結的事件 ...

JQ插入元素的幾種方法

jquery prepend 方法 p prepend hellow world jquery prepend 在被選中元素的 開始 位置插入內容 jquery prependto 方法 hello world prependto p jquery prependto 方法 hello world ...

deque插入 刪除元素

deque 容器中，無論是新增元素還是刪除元素，都只能借助 deque 模板類提供的成員函式。表 1 中羅列的是所有和新增或刪除容器內元素相關的 deque 模板類中的成員函式。表 1 和新增或刪除deque容器中元素相關的成員函式 成員函式 功能push back 在容器現有元素的尾部新增乙個元素...