jQuery DOM操作

HTML代码:

<div id="div1">
	div1
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

  

append与appendTo

示例:把一个图片追加div1的内部最后

$("#div1").append("<img src='../../starbucks/img/coffee.png' />");
$("<img src='../../starbucks/img/coffee.png' />").appendTo("#div1");

  

prepend与prependTo

示例:在内部最前方插入

 

$("#div1").prepend("<img src='../../starbucks/img/coffee.png' />");
$("<img src='../../starbucks/img/coffee.png' />").prependTo("#div1");

 

after与insertAfter

示例:在div1的外部,后面插入节点

 

$("#div1").after("<p>这是一个p标签</p>");
$("<p>这也是一个p标签</p>").insertAfter("#div1");

 

before与insertBefore

示例:在div1外部,前面插入节点

 

$("#div1").before("<p>这是一个p标签</p>");
$("<p>这也是一个p标签</p>").insertBefore("#div1");

 

  

 

 

wrap、wrapAll、unwrap与wrapInner

示例:为每一个选中的节点都套一层父节点

$("#div1").wrap("<section></section>");

 

示例:将选中的所有节点包裹在同一父节点中

$("div ~ p").wrapAll("<section></section>");

 

示例:删除选中节点的父节点

$("div p").unwrap();

 

示例:将选中节点中的所有子元素,包裹在一个新的父节点中

新的父节点依然是当前元素的唯一子节点

$("div1").wrapInner("<div></div>");

 

replaceWith与replaceAll

示例:将所有选中节点替换为新的节点

 

$("div p").replaceWith("<span>1</span>");
$("<span>2</span>").replaceAll("div p");

 

empty、remove与detach

示例:清空当前节点中的内容,但会保留当前节点标签

 

$("#div1").empty();

 

示例: 删除当前节点,以及当前节点的所有子节点

 

$("#div1").remove();

 

示例: 删除当前节点,以及当前节点的所有子节点

$("#div1").detach();

 

【remove和detach的区别】

使用remove删除的节点,恢复以后,将不再保留节点所绑定的事件

使用detach删除的节点,在节点恢复以后,可以恢复节点之前绑定的数据

$("#div1").click(function(){
alert("123");
});
var div1=null;
$("button:eq(0)").click(function(){
div1=$("#div1").remove();
});
				
$("button:eq(1)").click(function(){
	div1=$("#div1").detach();
});
				
$("button:eq(2)").click(function(){
	$("#div2").before(div1);
});

 

 

【js中的cloneNode()与jQuery中clone()的区别】

1.cloneNode() 如果不传参或者参数传入的为false,表示只克隆当前节点,不克隆子节点

参数传入true,表示克隆当前节点及所有子节点

2.clone() 无论传入tru还是false都会克隆当前节点及其所有子节点

传入true表示克隆节点的同时将包括节点所绑定的事件

否则,只表示克隆节点,而不克隆事件

$("#div1").clone().insertBefore("button:eq(0)");
$("#div1").clone().empty().insertBefore("button:eq(0)");

  

posted @ 2018-05-06 19:14  长亭一抹斜阳  阅读(136)  评论(0编辑  收藏  举报