jQuery操控DOM元素

创建节点元素

$(html)用于动态的创建节点元素，只需要找到元素的上级节点

点击按钮创建p元素节点，并设置内容为：创建的节点，颜色为红色，字体大小为20像素

<script type="text/javascript">
	$(function(){
		var p=$('<p style="color: red;font-size: 20px">创建的节点</p>');
		$("input").click(function(){
			$("#wrapper").append(p);
		});
	});
</script>
<div id="wrapper">
	<input type="button" value="点击创建图片节点" />
</div>

插入节点

插入内部节点

append(function(index,html))

这个方法是将一个function函数作为append方法的参数，该函数的功能必须返回一个字符串，作为append方法插入的内容，index参数为对象在这个集合中的索引值，html参数为该对象原有的html值

通过append(function(index,html))方法插入节点

<script type="text/javascript">
	$(function(){
		var p=$('<p style="color: red;font-size: 20px">创建的节点</p>');
		$("input").click(function(){
			$("#wrapper").append(fun);
		});
		function fun(){
			var p=$('<p style="color: red;font-size: 20px">创建的节点</p>');
			return p;
		}
	});
</script>
<div id="wrapper">
	<input type="button" value="点击创建图片节点" />
</div>

appendTo(content);

该方法用于将一个指定的元素插入到另一个元素的内容中

将img元素插入到div元素中去

<script type="text/javascript">
	$(function() {
		$("input").click(function() {
			$("img.img").appendTo($("div.con"));
			});
	});
</script>
<div id="wrapper">
	<input type="button" value="点击创建图片节点" />
	<div class="con" style="border: 2px solid red">
		<img src="http://xinxinjs.github.io/img_test/st1.jpg" />
	</div>
	<img class="img" src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>

其他方法：

append(context);
context表示追加到目标中的内容

prepend(content);
content表示插入目标元素内部前面的内容

prepend(function(imdex,html));
通过function函数返回插入目标元素内部前面的内容

prependTo(content);
content用于表示选择元素的jQuery表达式

插入外部节点

after(content);
content表示插入目标元素外部后面的内容

after(function);
通过function函数返回插入目标元素外部后面的内容

before(content);
content表示插入目标元素外部前面的内容

before(function);
通过function函数返回插入目标元素外部前面的内容

insertAfter(content);
content表示插入目标元素外部后面的内容，（经测试，该方法会删除目标元素，然后在目标元素的外部后面插入新的内容）

insetBefore(function);
content表示插入目标元素外部前面的内容，（经测试，该方法会删除目标元素，然后在目标元素的外部前面插入新的内容）

在目标元素的外部后面插入图片

<script type="text/javascript">
	$(function() {
		$("input").click(function() {
			$(".con").after('<img src="http://xinxinjs.github.io/img_test/st1.jpg" />');
		});
	});
</script>
<div id="wrapper">
	<input type="button" value="点击创建图片节点" />
	<div class="con" style="border: 2px solid red">
		<img src="http://xinxinjs.github.io/img_test/st1.jpg" />
	</div>
		<img class="img" src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>

复制节点

将某个元素节点复制到另一个节点后，在jQuery中通过clone方法实现，其功能是复制匹配的DOM元素，并且选中复制成功的元素，该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。如果在复制时将该元素的全部行为也进行复制，可以通过方法clone(true);实现

点击图片，对图片进行复制，并添加到原来图片的后面

<script type="text/javascript">
	$(function() {
		$("img").click(function() {
			$(this).clone().appendTo("div.con");
		});
	});
</script>
<div id="wrapper">
	<div class="con" style="border: 2px solid red">
		<img src="http://xinxinjs.github.io/img_test/st1.jpg" />
	</div>
</div>

替换节点

在jQuery中替换节点有replaceWith和replaceAll两种方法，其语法如下

replaceWith(content);
该方法的功能是将所有选择的元素替换成指定的HTML或DOM元素，其中参数content为被所选元素替换的内容

replaceAll(selector);
该方法是将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素

分别用两种方法实现图片的替换

<script type="text/javascript">
	$(function(){
		$("#s1").click(function(){
			$(this).replaceWith('<img src="http://xinxinjs.github.io/img_test/st3.jpg" />');
		});
		$("#s2").click(function(){
			
			$('<img src="http://xinxinjs.github.io/img_test/st3.jpg" />').replaceAll("#s2");
		});
	});
</script>
<img id="s1" src="http://xinxinjs.github.io/img_test/st2.jpg" />
<img id="s2" src="http://xinxinjs.github.io/img_test/st1.jpg" />

包裹节点

在jQuery中可以根据需求包裹某各指定节点，对节点的包裹也是DOM对象操作中很重要的一项

以下列表展示包裹节点的全部方法

wrap(html);

html参数为字符串代码，用于生成元素并包裹所选元素

功能：把所有选择的元素，用其他字符创代码包裹起来

wrap(elem);

elem参数用于包装所选元素的DOM元素

功能：把所有选择的元素用其他DOM元素包裹起来

wrap(fn);

fn参数为包裹结构的一个函数

功能：把所有选择的元素用function函数返回的代码包裹起来

unwrap();

无参数

功能：移除所选元素的父元素或包裹标记

wrapAll(html);

html参数为字符串代码，用于生成元素，并包裹元素

功能：把所有选择的元素用单个元素包裹起来

wrapAll(elem);

elem参数用于包裹所选元素的DOM元素

功能：把所有选择的元素用单个DOM元素包裹起来

wrapInner(html);

html参数为字符串代码，用于生成元素，并包裹所选元素

功能：把所有选择元素的子内容（包括文本节点），用字符串代码包裹起来

wrapInner(elem);

elem参数用于包裹所选元素的DOM元素

功能：把所有选择元素的子内容（包括文本节点），用DOM元素包裹起来

wrapInner(fn);

fn参数为包裹结构的一个函数

功能：把所有选择元素的子内容（包括文本节点），用function函数返回的代码包裹起来

点击文本，用a标签包裹文本

<script type="text/javascript">
	$(function(){
		$("p").click(function(){
			$(this).wrap("<a href='#'></a>");
		});
	});
			
</script>
<p>元素，点击之后用a标签包裹</p>

遍历元素

在DOM文档中，有时候需要对同一标记的元素进行同一操作。在传统的JavaScript中，总是先获取元素的总长度，然后以for循环语句，递减总长度，访问其中的某各元素，代码相对复杂
而在jQuery中可以使用each方法实现元素的遍历，其语法如是：each(callback);

其中callback是一个function函数，该函数还可以接受一个形参，此形参为遍历元素的序号，从0开始。如果需要访问元素中的属性，可以借助形参index，配合this关键字来实现元素属性的设置或获取

删除元素

带DOM操作页面时，jQuery提供了两个删除元素的方法remove和empty方法，严格来说empty并非真正意义上的删除，使用该方法仅仅可以清空所有的节点或节点所包括的所有后代元素，并非删除节点和元素

remove方法的语法如下：remove([expr]);

其中expr为可选项，如果接受参数，则该参数为筛选元素的jQuery表达式，通过该表达式获取指定的元素，并进行删除。

empty语法的格式如下：empty();

点击文字，删除文字

<script type="text/javascript">
	$(function(){
		$("p").click(function(){
			$(this).remove();
		});
	});		
</script>
<p>元素，点击之后用a标签包裹</p>