jQuery组织您钞四----jQuery操作DOM

时间：2025-02-16 19:05:26

一、采用jQuery创建节点

节点是DOM基础设施。依据DOM产品规格，Node是一个很宽泛的概念，包含元素、属性、正文、档、。实际开发过程中，要创建动态内容，主要操作的节点包括元素、

属性和文本。

看一个样例 实例4-1：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> jQuery创建元素、文本和属性 </title>

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

	$(function(){

		var $h1=$("<h1  title='一级标题'>jQuery创建元素、文本和属性</h1>");

		$("body").append($h1);

		//写成一行

		$("body").append("<h2  title='二级标题'>二级标题</h2>")

	})

  </script>

 </head>

 <body>

 </body>

</html>

运行效果如图：

jQuery组织您钞四----jQuery操作DOM

非常easy的一行代码就能够完毕创建元素、文本和属性而且把该元素放到body元素下。比JavaScript简化了太多了。

二、使用jQuery插入元素

1、在节点内部插入内容

jQuery提供了4种方法用于在节点内部插入内容

表4-1 在节点内部插入内容方法
方法 说明
append() 向每一个匹配的元素内部追加内容（既然是‘追加’，那旧说明是在匹配元素内部的后面添加）
appendTo()       把全部匹配的元素追加到还有一个指定的元素集合中，实际上。这种方法颠倒了append()方法的应用。比如$(A).append($B)和

$B.appendTo($A)是等价的
prepend() 与append()相反。它是把元素插到到匹配元素内部的最前面
prependTo() 与prepend()使用方法颠倒，不多说了

这四个方法的參数能够是字符串、DOM元素对象或者是jQuery对象。

以下演示样例演示append()方法分别把DOM元素对象、jQuery对象和字符串加入到ul对象以下。

实例4-2：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> jQuery在节点内部插入内容 </title>

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

		$(function(){

			var $li =$("<li>jQuery对象</li>");

			var li=document.createElement("li");

			li.innerText="DOM对象";

			$("ul").append($li)

			$("ul").append(li)

			$("ul").append("<li>字符串</li>");

		})

  </script>

 </head>

 <body>

	<ul></ul>

 </body>

</html>

运行结果如图：

jQuery组织您钞四----jQuery操作DOM

2、在节点外部插入内容

jQuery相同提供了四个方法

表4-2 在节点外部插入内容方法
方法 说明
after() 在每一个匹配的元素之后插入内容
before() 在每一个匹配的元素之前插入内容
insertAfter() 把全部匹配的元素插入到还有一个指定的元素集合的后面
insertBefore() 把全部匹配的元素插入到还有一个指定的元素集合的前面

这四个方法跟前面那四个方法使用方法相似，看个样例

实例4-3：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> jQuery在节点外部插入内容 </title>

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

	$(function(){

		$("div").after($("<p>最后一段文本</p>"))

		$("div").before($("<p>第一段文本</p>"))

		$("div").css("background","red");

	})

  </script>

 </head>

 <body>

	<div id="" class="" bgcolor="red">

		<p >段落文本</p>

	</div>

 </body>

</html>

运行效果如图：

jQuery组织您钞四----jQuery操作DOM

特别注意：appendTo()、prependTo()、insertAfter()、insertBefore()四个方法具有破坏性操作的特性。

也就是说，假设选择已存在的内容并把他们插入到指定对象中，则原位

置的内容将被删除。

实例4-4：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> 插入内容的破坏性 </title>

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

	$(function(){

	$("div").css("background","red");

	})

  </script>

 </head>

 <body>

	<div id="" class="" bgcolor="red">

		<p >段落文本</p>

	</div>

 </body>

</html>

运行效果：

jQuery组织您钞四----jQuery操作DOM

加上一段js：

$("p").insertAfter($("div"))

运行效果例如以下：

jQuery组织您钞四----jQuery操作DOM

三、使用jQuery删除元素

jQuery支持两种删除元素的方法：remove()和empty()。而DOM仅定义了与jQuery的remove()方法相应的removeChild()方法。

表4-3 jQuery删除元素的方法
方法 说明
remove() 从DOM中删除全部的匹配的元素，也就是把本身都删除。
empty() 这个意义是清空。是清空内部，本身保留。

四、使用jQuery复制元素

jQuery定义了clone()方法用来复制节点，与之相应的DOM定义了cloneNote()方法实现同样的操作功能。

这个比較简单。看个样例得了：

实例4-5：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> 使用jQuery复制元素 </title>

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

	$(function(){

		var $tr=$("table tr:last").clone();

		$tr.find("td").each(function(index,value){

			$(this).text("第3行第"+(index+1)+'列')

		})

		$("table").append($tr)

	})

  </script>

 </head>

 <body>

	<div id=""  >

		<table width="100%" border="1" cellpadding="2" cellspacing="0">

		<tr>

			<td>第1行第1列</td>

			<td>第1行第2列</td>

		</tr>

		<tr>

			<td>第2行第1列</td>

			<td>第2行第2列</td>

		</tr>

		</table>

	</div>

 </body>

</html>

运行结果：

jQuery组织您钞四----jQuery操作DOM

五、使用jQuery替换元素



jQuery定义了replaceWith()方法和replaceAll()方法用来替换节点，与之相应的DOM定义了replaceChild()方法实现同样的操作功能。只是他们的使用方法迥然不同。

replaceWith()方法可以将全部匹配的元素替换成指定的HTML或DOM元素。replaceAll()方法与之功能同样。可是操作相反，比如在下例中将全部的p元素替换为div元素

实例4-6：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> jQuery替换元素 </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

		$(function(){

			$("p").replaceWith("<div>111</div>")

			//$("<div>111</div>").replaceAll($("p")) 与上面的效果同样

		})

  </script>

 </head>

 <body>

	<p>段落1</p>

	<p>段落2</p>

	<p>段落3</p>

 </body>

</html>

看一下它的DOM结构：

jQuery组织您钞四----jQuery操作DOM

六、使用jQuery操作属性

jQuery和DOM都提供了元素属性的基本操作方法

1、设置属性

jQuery通常使用attr()方法来设置属性,而DOM定义了setAttribute()方法来设置元素的属性。

在使用jQuery提供的attr()方法的时候。须要为该方法设置两个參数值，各自是属性名和属性值。还能够用一个函数替换第二个參数（属性值）。用函数的返回结果充当属性值。

使用方法非常easy，比如：$("p").attr("title","段落文本");

2、获取属性

jQuery里还是用attr(),DOM里用getAttribute()。

当为attr()设置了一个參数值时，代表要获取这个属性的属性值，假设没有该属性，那么返回undefined。不用举例了，非常easy。也经经常使用。

3、删除属性

jQuery里定义的方法是removeAttr()方法删除指定的元素属性，DOM里定义的是removeAttribute()。

$("p").removeAttr("title");

七、jQuery操作类样式

在设计动态样式时，常常须要与元素的class属性打交道，该属性能够为元素定义样式。既然作为元素的属性。我们当然能够用上面介绍的attr()方法进行动态改动元素的class。

只是，jQuery为了开发人员方便操作。又单独定义了几个与class操作相关的方法。

1、追加样式 addClass

使用addClass方法前首先的定义好样式类。使用方法也非常easy。看个样例

实例4-7：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title>addClass </title>

  <style type="text/css">

	.red{

		color:red;/*红色字体样式*/

	}

	.bold{

		font-weight:bold;/*加粗字体样式*/

	}

	.italic{

		font-style:italic;/*倾斜字体样式*/

	}

  </style>

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  <!--

		$(function(){

			$("input").eq(0).click(function(){

				$("p").addClass("red");

			});

			$("input").eq(1).click(function(){

				$("p").addClass("bold");

			})

			$("input").eq(2).click(function(){

				$("p").addClass("italic");

			})

		})

  //-->

  </script>

 </head>

 <body>

    <p>手握日月摘星辰,世间无我这般人</p>

    <input type="button" value="红色" onclick="">

	<input type="button" value="加粗" onclick="">

	<input type="button" value="倾斜" onclick="">

 </body>

</html>

运行前的效果和分别点击三个button后的变化如图：

jQuery组织您钞四----jQuery操作DOMjQuery组织您钞四----jQuery操作DOM

jQuery组织您钞四----jQuery操作DOM

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">jQuery组织您钞四----jQuery操作DOM

2、移除样式removeClass()

用法大同小异。不做介绍了。

3、切换样式toggleClass()

样式切换在鼠标动态操作中很有用。在Web开发中诸如折叠、开关、伸缩、Tab切换等动态效果中都须要用到交互切换。jQuery为此定义了toggleClass()方法。该方法可用来

开/关指定类样式，从而实现切换类样式的目标。

jQuery的toggleClass()方法包括两个參数，第一个參数指定作为开关的类样式名称，第二个參数用来决定是否打开类样式。该參数为可选。

假设没有设置第二个參数，则

toggleClass()方法依据是否存在參数设置的样式，假设存在。就去除，否则追加。

实例4-8：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <style type="text/css">

	.hidden{

		display:none;

	}

  </style>

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  <!--

		$(function(){

			$("input").click(function(){

				$("p").toggleClass("hidden")

			})

		})

  //-->

  </script>

 </head>

 <body>

	<input type="button" value="切换样式" >

	<p>手握日月摘星辰,世间无我这般人</p>

 </body>

</html>

4、推断样式hasClass()

在过滤函数里总结过。不反复写了。

八、使用jQuery操作HTML、文本和值

就是经经常使用的html()  text()  val()

没有參数的时候是读取。有參数的时候是赋值。

版权声明：本文博主原创文章。博客，未经同意不得转载。

相关文章