jQuery HTML操作 - 获取、设置、添加、删除

 

-------------------------------------------------------------------

源文地址: http://www.cnblogs.com/yunlei0821/p/7573952.html，转载请务必保留此出处.

 

获取:

<input name="cnblogs" value="博客园"/>

<p>欢迎大家来到<span>博客园</span>大家庭</p>

说明	操作	结果值
获取value属性值	$("input").val();	博客园
获取两个标签之间的文本	$("p").text();	欢迎大家来到博客园大家庭
获取两个标签之间的所有内容(包括标签)	$("p").html();	欢迎大家来到<span>博客园</span>大家庭
获取标签的指定属性值	$("input").attr("name");	cnblogs

 

设置:

<input name="jquery" value="博客园"/>

<p></p>

说明	操作	结果值
设置value属性值	$("input").val("cnblogs");	<input name="jquery" value=" cnblogs "/>
添加两个标签之间的文本	$("p").text("博客园");	<p>博客园</p>
设置标签的指定属性值	$("input").attr("name","cnblogs");	<input name="cnblogs" value="博客园"/>
addClass()向匹配的元素添加指定的类名。	$("p").addClass("ptag");	<p class="ptag">welcome,</p>

 

添加:

<p>welcome,</p>

说明	操作	结果值
往两个标签之间替换为指定内容(包括标签)	$("p").html("欢迎大家来到<span>博客园</span>大家庭");	<p>欢迎大家来到<span>博客园</span>大家庭</p>
往两个标签之间的内容后面拼接内容(包括标签)	$("p").append("欢迎大家来到<span>博客园</span>大家庭");	<p>welcome,欢迎大家来到<span>博客园</span>大家庭</p>

 

删除:

<p>welcome,欢迎大家来到<span><b>博客园</b></span>大家庭</p>

说明	操作	结果值
移除匹配的元素中所有的子节点,匹配的元素仍然被保留	$("p").empty();	<p></p>
移除所有匹配的元素,包括其子节点	$("span").remove();	<p>welcome,欢迎大家来到大家庭</p>
"移除"(相当于隐藏)匹配元素,包括其子节点; 可以用添加节点元素的操作将"移除"的匹配元素重新添加到任意位置	var x = $("span").detach();	<p>welcome,欢迎大家来到大家庭</p>
	$("p").html(x);	<p> <span><b>博客园</b></span></p>

 

 

 　　ps:关于DOM节点,还有哪些相关的操作呢?欢迎留言补充哦..