jQuery文档处理

1.内部插入

append(content)		向每个匹配的元素内部追加内容。		
append(function(index,html))	
					jQuery 1.4 新增。向每个匹配的元素内部追加内容。
					index参数为对象在这个集合中的索引值
					html参数为这个对象原先的html值
appendTo(content)	把所有匹配的元素追加到另一个、指定的元素元素集合中。
prepend(content)	向每个匹配的元素内部前置内容。
prepend(function(index,html))	jQuery 1.4 新增。向每个匹配的元素内部最前面追加内容。
prependTo(content)	把所有匹配的元素前置到另一个、指定的元素元素集合中。

 

$(document).ready(function(){
	//append
		$("p").append("<div>luchunli</div>");		//div是p的子元素
		//等效于$("<div>luchunli</div>").appendTo("p");
		$("<div>aa</div>").appendTo("p");
		$("#id_but").click(function(){
			alert($("p").children("div").text());	//luchunli
		});
	//append(function(index,html))
		$("p").append(tt(0,"<div>ddddddddd</div"));		//从这里调用tt
		$("#id_but").click(function(){
			alert($("p").children("div").text());	//ddddddddd
		});
});
function tt(index,html){
	return html;	
}

  

2.外部插入 

after(content)		在每个匹配的元素之后插入内容。	
after(function)		同上，jQuery 1.4 新增。函数必须返回一个html字符串。
before(content)		在每个匹配的元素之前插入内容。
before(function)	同上
insertAfter(content)	把所有匹配的元素插入到另一个、指定的元素元素集合的后面。	
insertBefore(content)	把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

 

$(document).ready(function(){ 
	$("p").after("<div>ddddddddd</div");
	$("#id_but").click(function(){
		alert($("p").children().size());	//0 div是p的同级元素 紧跟在p之后
	});
});

     说明：    

要点一
	//$("<div>Welcome<div>").appendTo($("#one"));
	效果为：
		<div id="one">
			...
			<div>Welcome</div>
		</div>
	//$("#one").after($("<div>Welcome<div>"));
	效果为：
		<div id="one">
			...
		</div>
		<div>Welcome</div>

要点二
	当使用after时必须是通过已存在的div(此处为id="one"的div)将希望新添加的div添加进来

 

3.包裹 

wrap(html)		把所有匹配的元素用其他元素(html)的结构化标记包裹起来。			
wrap(elem)		同上，elem为DOM			
wrap(fn)		同上	
unwrap()		快速取消 .wrap()方法的效果。
wrapAll(html)	将所有匹配的元素用单个元素包裹起来
wrapAll(elem)	同上
wrapInner(html)	将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来	
wrapInner(elem)	同上
wrapInner(fn)	同wrap(fn)

 

$(document).ready(function(){ 	
	$("#id_but").click(function(){
		$("p").wrap("<b/>");		//用b包裹p，即：将china加粗
		$("p").wrap("<font color='red'></font>");	//用font包裹p，即：字体变红
		$("p").wrap(document.getElementById("id_font"));	//用font包裹p，即：字体变红
		$("div").wrap("<font size='20px'></font>");		//用font包裹所有的div	
		//<font size='20px'>
		//	<div>
		//		<font size='20px'>
		//			<div id="one">1</div>  
		//		</font>
		//		<font size='20px'>
		//			<div class="div" id="two"><span>2</span></div> 
		//		</font>				
		//		<br/>
		//		<font size='20px'>
		//			<div class="div" id="three"><span><a href="mailto:[email protected]">3</a></span></div> 
		//		</font>
		//		<br/>
		//		<font size='20px'>
		//			<div  class="div" id="four"><a href="http://www.baidu.com">4</a></div> 
		//		</font>	
		//	</div>
		//</font>
		$("div").wrap(function(){
			return "<font size='20px'></font>";			//用font包裹每个div
		});
		$("div").wrapAll("<font size='10px'></font>");	//只在最外层的div上面添加<font size='10px'></font>
		// $("p").unwrap();
		//wrapInner
		//<p>Hello</p><p>cruel</p><p>World</p>
		//$("p").wrapInner("<b></b>");
		//<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
	});
});

 

4.替换

 

replaceWith(content)	将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAll(selector)	用匹配的元素替换掉所有 selector匹配到的元素。

 

$(document).ready(function(){ 	
	$("#id_but").click(function(){
		$("label").replaceWith("div");		
		//<label>hello</label>整个被替换成div(div不再是标签，而是div文本值)
		$("label").replaceWith("<div>tom</div>");	
		//等效于$("<div>tom</div>").replaceAll("label");
		var temp = $("label").text();
		$("label").replaceWith("<div style='color:red'>ffff"+temp+"</div>");
	});
});

 

5.删除 

empty()			删除匹配的元素集合中所有的子节点。
remove([expr])	从DOM中删除所有匹配的元素。
				注意：
					这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。
					但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
detach([expr])	从DOM中删除所有匹配的元素。
				注意：
					这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。
					与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

 

$(document).ready(function(){ 	
	$("p").click(function(){alert("test fun");});
	$("#id_but").click(function(){
		$("p").remove();
	});
	$("#id_sbut").click(function(){alert("aa");$("<p>china</p>").appendTo("body")});
});

 

6.复制

clone()			克隆匹配的DOM元素并且选中这些克隆的副本。
clone(true)		元素以及其所有的事件处理并且选中这些克隆的副本