jquery系列教程3-DOM操作全解

全栈工程师开发手册 （作者：栾鹏）

快捷链接：
jquery系列教程1-选择器全解
jquery系列教程2-style样式操作全解
jquery系列教程3-DOM操作全解
jquery系列教程4-事件操作全解
jquery系列教程5-动画操作全解
jquery系列教程6-ajax的应用全解
jquery系列教程7-自定义jquery插件全解
jquery系列教程8-jquery插件大全

jquery中的DOM操作详解：

下图是DOM树示意图，DOM是文档对象模型，它能够将网页中的文档对象组织起来，让页面结构更清晰。

创建添加元素

$cr = $("<label></label>"); 								//使用h5代码创建元素
$("#div1").append($cr); 									//添加创建好的元素

//创建文本节点
$cr = $("<label>这里就是文本</label>"); 					//在元素中加上文本就是创建文本节点，更准确的说法应该是创建元素节点和文本节点
$("#div1").append($cr); 									//创建好的元素

//创建属性节点
$cr = $("<label title='mytitle'>这里就是文本</label>"); 	//创建包含title属性的label元素
$("#div1").append($cr); 									//append表示在父元素内部结尾追加元素
$("#div1").prepend($cr); 									//prepend表示在父元素内部首部添加元素
$cr.appendTo($("#div1")); 								  //appendTo表示子元素追加到父元素内部结尾
$cr.prependTo($("#div1")); 								 //prependTo表示子元素添加到父元素内部首部
$("#div1").after($cr); 									  //after表示在元素后面添加同胞元素
$cr.insertAfter($("#div1")); 								//insertAfter表示添加到指定元素的后面
$("#div1").before($cr); 									  //before表示在元素前面添加同胞元素
$cr.insertBefore($("#div1")); 								//insertBefore表示添加到指定元素的前面

删除元素

$(".divclass").remove("div[title='mytitle']"); 	//选择性删除元素
$("#div1").remove(); 								//删除元素，解除绑定事件与附加数据
$("#div1").detach(); 								//删除元素，不解除绑定事件与附加数据
$("#div1").empty(); 								//设置innerHtml为空，删除所有子元素

复制元素

$("#div1").clone(true); 							//复制元素，true表示同时复制绑定事件

替换元素

$("#div1 label").replaceWith("<label>替换的新元素</label>");	//将label整个元素替换成新的h5代码
$("<label>替换的新元素</label>").replaceAll("#div1 label");	//新建元素替换已有元素，参数为选择器表达式

包裹元素

$("#div1 label").wrap("<div></div>"); 		//用多个div标签分别包裹div1下每个label元素
$("#div1 label").wrapAll("<div></div>"); 	//用一个div标签包裹div1下所有label元素
$("#div1 label").wrapInner("<div></div>"); //用一个div标签包裹div1下label元素的子内容

遍历元素

var $body_child = $("body").children(); 				 //children获取一级子元素，不获取其他后代元素
$body_child=$("body").find("div"); 						//find获取所有后代元素，括号内进行筛选
var $body = $body_child[0].parent(); 					//parent获取直接父元素
var $div_parents = $body_child[0].parents('body'); 	 //parents获取所有祖先元素列表，一直到html根节点，可以通过参数在父元素进一步筛选
$div_parents = $body_child[0].parentsUntil("body"); 	 //两个元素之间的所有祖先元素
var $div1 = $body_child[0].next(); 						//next后一个同辈元素，nextAll后面的所有同胞元素，nextUntil介于两个元素之间的所有同胞元素
var $div2 = $body_child[2].prev(); 						//prev前一个同辈元素，prevAll之前的所有同胞元素，prevUntil()介于两个元素之间的所有同胞元素
var $alldiv = $body_child[2].siblings(); 				  //所有兄弟元素
var $div3 = $("#div3 label").closest("div"); 			//查找距离目标元素最近的满足指定选择器参数的元素。由目标元素依次向父元素查询，不查询同胞元素
var $alldiv = $("div").filter(".divclass"); 			  //filter过滤元素，满足的留下，参数为选择器
$alldiv = $("div").not(".divclass"); 					//not过滤元素，不满足的留下，参数为选择器

内容显示

$cr.text(); 						//DOM操作中参数为空时表示读取
$cr.text("设置的值"); 				 //参数有值时表示设置
$cr.text(function(i,origText){ 	//参数为函数时表示根据该元素在列表中的下标和原有值设置新的值
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
$cr.html(); 						//读取元素节点内部的h5代码字符串，等价于cr.innerHtml();
$cr.text(); 						//读取元素文本内容
$cr.attr("title"); 				//设置元素属性

属性操作

var title = $cr.attr("title"); 					//读取属性
$cr.attr("title","mytitle"); 						//设置属性
$cr.attr({"title":"mytitle","name":"myname"}); 	//同时设置多个属性
$cr.removeAttr("title"); 							//删除属性

select操作

$("#selectId").append("<option value='"+value+"'>"+text+"</option>");//添加option
$("#select_id").prepend("<option value='0'>请选择</option>"); 		//为select插入一个option(第一个位置)
$("#select_id option[index='0']").remove(); 						  //删除select中索引值为0的option(第一个)
$("#select_id option[text='4']").remove(); 						  //删除select中Text='4'的option
$("#select_id option[value='3']").remove(); 						  //删除select中Value='3'的option
$("#selectedId option").remove(); 									  //删除所有option
var checkText=$("#select_id").find("option:selected").text(); 		  //获取select选择的text
var checkValue=$("#select_id").val(); 								  //获取select选择的value
var checkIndex=$("#select_id ").get(0).selectedIndex; 				  //获取select选择的索引值
var maxIndex=$("#select_id option:last").attr("index"); 			  //获取select最大的索引值
$(".selector").val("pxx"); 										  //设置value为pxx的项选中
$(".selector").find("option[text='pxx']").attr("selected",true); 	  //设置text为pxx的项选中。需要option自定义text属性。<option value="1" text="北京市">北京市</option>
$("#select_id ").get(0).selectedIndex=1; 							  //设置select索引值为1的项选中

文本和值

var label_html = $("label").html(); 			  //获取元素内的html代码，相当于innerhtml
$("label").html("<strong>代码添加的文字</strong>"); //设置元素内的html代码
var label_text = $("label").text(); 			  //获取元素内的文本内容，相当于innertext
$("label").text("代码添加的文字"); 				  //设置元素内的文本内容
var input_val = $("input").val(); 				  //获取元素内的value属性，相当于value属性
$("input").val("代码添加的文字"); 				  //设置元素内的value属性
$("#single").val("选择2号"); 						//通过设置val值选中单选下拉框的选项，没有value也可以设置text内容
$("#multilpe").val(['选择2号','选择3号']); 		  //通过数组设置val值选中多选下拉框的选项，没有value也可以设置text内容
$(":checkbox").val(['myvalue1','myvalue2']); 	  //通过数组设置val值选中多选框的选项
$(":radio").val(['myvalue1']); 				  //通过数组设置val值选中单选框的选项，对于单值也可以通过数组的形式传递
$("#single option:eq(1)").attr("selected",true); //通过选择器获取元素，再设置对象属性也可以选中
$("[value=myvalue]:radio").attr("checked",true); //通过选择器获取元素，再设置对象属性也可以选中