jQuery整理笔记四----jQuery操作DOM

一、使用jQuery创建节点

节点是DOM结构的基础。根据DOM规范,节点是一个很宽泛的概念,范围包含元素、属性、文本、文档、注释等。实际开发过程中,要创建动态内容,主要操作的节点包括元素、

属性和文本。

看一个例子 实例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>

执行效果如图:


很简单的一行代码就可以完成创建元素、文本和属性并且把该元素放到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>
执行结果如图:

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>
执行效果如图:

特别注意: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>
执行效果:

加上一段js:

$("p").insertAfter($("div"))
执行效果如下:

三、使用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定义了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都提供了元素属性的基本操作方法

1、设置属性

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

在使用jQuery提供的attr()方法的时候,需要为该方法设置两个参数值,分别是属性名和属性值。还可以用一个函数替换第二个参数(属性值),用函数的返回结果充当属性值。

用法很简单,例如:$("p").attr("title","段落文本");

2、获取属性

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

当为attr()设置了一个参数值时,代表要获取这个属性的属性值,如果没有该属性,那么返回undefined。不用举例了,很简单,也经常用。

3、删除属性

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

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

七、jQuery操作类样式

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

不过,jQuery为了开发者方便操作,又单独定义了几个与class操作相关的方法。

1、追加样式 addClass

使用addClass方法前首先的定义好样式类。用法也很简单,看个例子

实例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>

执行前的效果和分别点击三个按钮后的变化如图:


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()  

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




jQuery整理笔记四----jQuery操作DOM,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。