jQuery中的DOM操作

最新推荐文章于 2024-02-28 16:51:01 发布

嗨皮汪小成

最新推荐文章于 2024-02-28 16:51:01 发布

阅读量88

点赞数

分类专栏： JavaScript 文章标签： jquery ViewUI

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../script/jquery-1.10.1.js"></script>
<style type="text/css"></style>
<title>jQueryTest_0301</title>
</head>
<body>
	<p title="选择你喜欢吃的水果">选择你喜欢吃的水果</p>
	<ul>
		<li title="苹果">苹果</li>
		<li title="西瓜">西瓜</li>
		<li title="香蕉">香蕉</li>
		<li title="桔子">桔子</li>
	</ul>
</body>
</html>

1.查找节点（元素节点和属性节点）

<script type="text/javascript">
	//查找元素节点
	var $li = $("ul li:eq(2)");		//获取<ul>里第2个<li>节点
	var li_txt = $li.text();		//获取第2个<li>节点的文本内容
	//查找属性节点
	var $param = $("p");			//获取<p>节点
	var p_txt = $param.attr("title");//获取属性title的内容
</script>

2.创建节点

<script type="text/javascript">
	var $li_01 = $("<li title='甜橙'>甜橙</li>");//创建一个<li>元素，包含元素结点和文本结点以及属性
	$("ul").append($li_01);
</script>

3.插入节点

插入节点方法：

append()	向每个匹配的元素的内部追加内容
prepend()	向每个匹配的元素的内部前置内容
after()	向每个匹配的元素之后插入内容
before()	向每个匹配元素之前插入内容

jQuery还提供了一些其它的插入方法：appentTo()、prependTo()、insertAfter()、insertBefore()

4.删除节点

jQuery提供了两种删除节点的方法：

● remove()方法：从DOM中删除所有匹配的元素

$("ul li:eq(2)").remove();//删除第二个<li>元素

● empty()方法：清空匹配元素中所有后代结点

$("ul li:eq(2)").empty();

5.复制节点

<script type="text/javascript">
	$("ul li").click(function(){
		$(this).clone().appendTo("ul");
	});
</script>

6.替换节点

● replaceWith()：将所有匹配的元素都替换成指定的HTML或者DOM元素

● replaceAll()：该方法作用与replaceWith()完全相同，只是颠倒了replaceWith()的操作

<script type="text/javascript">
	$("ul li").click(function(){
		var txt = $(this).text();
		$(this).replaceWith("<li><strong>"+txt+"</strong></li>");
	});
</script>

7.包裹节点

● wrap()：将所有的元素进行单独包裹

● wrapAll()：将所有匹配的元素用一个元素包裹起来

● wrapInner()：将第一个匹配的元素的子内容（包括文本节点）用其它结构化的标记包裹起来

$("p").wrap("<b></b>");//用<b>元素将<p>元素包裹起来

8.属性操作

<script type="text/javascript">
	var $para = $("p");
	$para.attr("title","你最不喜欢吃的水果？");
	var txt = $para.attr("title");//获得<p>元素属性title
	$para.removeAttr(title");//删除<p>的title属性
</script>

9.样式操作

addClass()：追加样式

removeClass()：移除样式

hasClass()：判断是否含有某个样式

toggleClass()：切换样式

<script type="text/javascript">
	$("ul li:eq(0)").addClass("high");
	$("ul li:eq(1)").addClass("another");//追加样式
	$("ul li:eq(1)").removeClass("another");//移除样式
	$("#changeButton").click(function(){
		$("p").toggleClass("another");
	});
</script>

10.设置和获取HTML、文本和值

● html()方法：读取或设置某个元素中的HTML内容

● text()方法：读取或设置某个元素中的文本内容

● val()方法：设置或获取元素的值，如果元素为多选，则返回一个包含所有选择的值的数组

<select id="single">
	<option>选择1号</option>
	<option>选择2号</option>
	<option>选择3号</option>
</select>
<select id="multiple" multiple="multiple">
	<option selected="selected">选择1号</option>
	<option>选择2号</option>
	<option>选择3号</option>
	<option>选择4号</option>
	<option selected="selected">选择5号</option>
</select>
<input type="checkbox" value="check1">多选1</input>
<input type="checkbox" value="check2">多选2</input>
<input type="checkbox" value="check3">多选3</input>
<input type="checkbox" value="check4">多选4</input>
<input type="radio" value="radio1">单选1</input>
<input type="radio" value="radio2">单选2</input>
<input type="radio" value="radio3">单选3</input>

使用val()方法设置选中项：

<script type="text/javascript">
	$("#single").val("选择3号");
	$("#multiple").val(["选择2号","选择4号"]);
	$(":checkbox").val(["check2","check3"]);
	$(":radio").val(["radio2"]);
</script>

对于下拉列表框，在jQuery中，val()方法从最后一个选项往前读取，如果选项的value或者text中任意一项符合就会选中。

11.遍历节点

● children()方法：取得匹配元素的子元素集合

● next()方法：取得匹配元素后面紧邻的同辈元素

● prev()方法：取得匹配元素前面紧邻的同辈元素

● siblings()方法：取得匹配元素前、后所有的同辈元素

● closest()方法：取得最近的匹配元素

嗨皮汪小成

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的DOM操作

HTML代码：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="t
复制链接

扫一扫

专栏目录