jQuery中??DOM操作相關(guān)

DOM相關(guān)

今天小編給帶大家一探 jQuery中 DOM操作的 部分 方法

1.append( ): 將參數(shù) 中的元素 插入 到當前 元素內(nèi)的尾部

$(“.div_1”).append(“

我是 p1

”);

2.appendTo( ): 將當前元素 插入 到參數(shù) 元素的尾部 ( 另一個元素 )

$(“

appendTo進去的P元素

”).appendTo( $(“.div_1”));

3.prepend( ); 將 參數(shù)中的元素 變成 當前 元素的第一個子元素

$(“.div_2”).prepend($(“.div_2 p:last”));

4.perpendTo( ) : 將 當前 元素 變成? 參數(shù) 元素的第一個子元素 (另一個元素)

$(“.div_2 p:last”).prependTo(“.div_2”);

5.after( ) : 將參數(shù) 的元素 插入到當前? 元素的 后面 ( 同一父元素 )

$(“.div_2 p:last” ).after( $( “.div_2? p:first”));

6.before ( ) : 將參數(shù) 中的元素 ,加入 到當前 元素的前面 ( 同一父元素 )

$(“ .div_2 p: first “).before ( $(“.div_2 p:last” ) );

7.insertAfter( ): 將當前 元素 加入到 參數(shù) 元素 的后面 ( 另一個元素 )

$( “.div_2 p:first” ).insertAfter( $(“.div_2 p:last”));

8.insertBefore( ) : 將當前元素加入 到參數(shù) 元素的前面 ( 另一元素 )

$(“ .div_2 p:last”).insertBefore( $(“.div_2? p:first”) );

9.remove( ) : 移除 當前? 元素, 可以設置? 移除 條件

$(ele).remove ( );

$(“p”).remove( );// 移除 所有 p

//也可以 按 條件? 刪除

$( “p”).remove ( “.div_2 p:last”);

10.empty( ) : 清空 當前? 元素內(nèi)的所有元素

$( “ .div_2 “).empty( );

11.replaceWith( ) : 將當前 元素替換 成 參數(shù)? 元素

$( “.div_2 p:last “).replaceWith( “

拿命來!!!

”);

$( ele ).replaceWith( “

‘background:red;’ >aaaa

”);

12.克隆

clone( ) :克隆 一個元素,如果 有參數(shù) ,并且 參數(shù) 為 true 那么 ,克隆 出來 的元素具備 之前元素事件 , 如果 不填寫 參數(shù)? 或者 參數(shù)? 為false , 則只克隆 結(jié)構(gòu) 和樣式 , 不克隆 事件

注意:不要去克隆 帶有 ID 的元素( ID是唯一的 )

Var? $cloneBtn = $(this).clone( );

Console.log ( $cloneBtn.html( ) );

$(“[value = clone ]”).click( function( ){

//注意:如果 元素 本身 寫好了 onclick 事件 的話,那克隆 后都具備 單擊事件,但如果 像這種寫法,就要進行 參數(shù) 設置 了

//var $cloneBtn = $(this).clone( );

Var? $cloneBtn = $(this).clone(true);

$cloneBtn.insertAfter( $(this) );

});

13.wrap( ) : 將當前 元素 用一個HTML結(jié)構(gòu) 包裹 起來

$( “div”).wrap( “

‘background:blue;’>

);

14. unwrap( ): 將當前 元素,快速 取消 包裹 的HTML結(jié)構(gòu)

$(“div”).unwrap( );

15.wrapInner( ): 將當前 元素內(nèi)的子元素 用HTML結(jié)構(gòu) 包裹 起來

$(“div”).wrapInner( “”); //當div 內(nèi)的文字? 加粗

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 第1章 簡介 第2章 DOM節(jié)點的創(chuàng)建 2-1 DOM創(chuàng)建節(jié)點及節(jié)點屬性 通過JavaScript可以很方便的獲...
    mo默22閱讀 933評論 0 8
  • http://www.imooc.com/static/lib/jquery/1.9.1/jquery.js js...
    再見理想冷雨夜閱讀 533評論 0 1
  • DOM創(chuàng)建節(jié)點及節(jié)點屬性 通過JavaScript可以很方便的獲取DOM節(jié)點,從而進行一系列的DOM操作。但實際上...
    阿r阿r閱讀 1,076評論 0 9
  • 創(chuàng)建 $('body').append($(" ")) //向body 中插入一個 div 插入 append:...
    學開船不會開船閱讀 300評論 0 1
  • 不得不說,我給了自己太大的壓力,我總是為孩子著想,為別人著想,卻沒有為自己著想,我以為這樣別人會感動,最終誰都不領(lǐng)...
    沐妮閱讀 190評論 0 0

友情鏈接更多精彩內(nèi)容