jQuery中  DOM操作相关

DOM相关

今天小编给带大家一探 jQuery中 DOM操作的 部分 方法

1.append( ): 将参数 中的元素 插入 到当前 元素内的尾部

$(“.div_1”).append(“

我是 p1

”);

2.appendTo( ): 将当前元素 插入 到参数 元素的尾部 ( 另一个元素 )

$(“

appendTo进去的P元素

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

3.prepend( ); 将 参数中的元素 变成 当前 元素的第一个子元素

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

4.perpendTo( ) : 将 当前 元素 变成  参数 元素的第一个子元素 (另一个元素)

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

5.after( ) : 将参数 的元素 插入到当前  元素的 后面 ( 同一父元素 )

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

6.before ( ) : 将参数 中的元素 ,加入 到当前 元素的前面 ( 同一父元素 )

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

7.insertAfter( ): 将当前 元素 加入到 参数 元素 的后面 ( 另一个元素 )

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

8.insertBefore( ) : 将当前元素加入 到参数 元素的前面 ( 另一元素 )

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

9.remove( ) : 移除 当前  元素, 可以设置  移除 条件

$(ele).remove ( );

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

//也可以 按 条件  删除

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

10.empty( ) : 清空 当前  元素内的所有元素

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

11.replaceWith( ) : 将当前 元素替换 成 参数  元素

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

拿命来!!!

”);

$( ele ).replaceWith( “

‘background:red;’ >aaaa

”);

12.克隆

clone( ) :克隆 一个元素,如果 有参数 ,并且 参数 为 true 那么 ,克隆 出来 的元素具备 之前元素事件 , 如果 不填写 参数  或者 参数  为false , 则只克隆 结构 和样式 , 不克隆 事件

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

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

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

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

//注意:如果 元素 本身 写好了 onclick 事件 的话,那克隆 后都具备 单击事件,但如果 像这种写法,就要进行 参数 设置 了

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

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

$cloneBtn.insertAfter( $(this) );

});

13.wrap( ) : 将当前 元素 用一个HTML结构 包裹 起来

$( “div”).wrap( “

‘background:blue;’>

);

14. unwrap( ): 将当前 元素,快速 取消 包裹 的HTML结构

$(“div”).unwrap( );

15.wrapInner( ): 将当前 元素内的子元素 用HTML结构 包裹 起来

$(“div”).wrapInner( “”); //当div 内的文字  加粗