用户登录
用户注册

分享至

jquery处理Html文档

  • 作者: 西班牙吹牛士
  • 来源: 51数据库
  • 2021-09-21

jquery处理Html文档

1.向元素中添加内容

  1. append()方法
    向每个匹配的元素内部追加内容,添加位置是在匹配元素内部最后,如果想添加在元素的最前面,使用prepend()方法
<p>I would like to say: </p>
$("p").append("<b>Hello</b>");

结果:

  1. appendTo()方法
    把所有匹配的元素追加到另一个指定的元素元素集合中,原来的元素会被清除。
    将第一个p标签内的b标签添加到第二个p标签内后面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p><b>Hello</b></p>
		<p>123</p>
		
		<script src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			$($("p>b")[0]).appendTo($($("p")[1]))
			
		</script>
	</body>
</html>

结果:

2.将元素包裹在另一个元素中

wrap()
案例1:把所有匹配的元素用其他元素的结构化标记包裹起来。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p><b>Hello</b></p>
		<p>123</p>
		
		<script src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			$("p").wrap("<div class='wrap'></div>");
			
		</script>
	</body>
</html>

结果:

案例2:用原先div的内容作为新div的class,并将每一个元素包裹起来

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$('.inner').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});

结果:

<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

3.删除元素

  1. empty()
    删除匹配的元素集合中所有的子节点,删除的是元素内部的东西
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p><b>Hello</b></p>
		<p>123</p>
		
		<script src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			$("p").empty();
			
		</script>
	</body>
</html>

结果:

  1. remove()
    从DOM中删除所有匹配的元素,删除的是元素本身
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p><b>Hello</b></p>
		<p>123</p>
		
		<script src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			$("p").remove();
			
		</script>
	</body>
</html>

结果:

软件
前端设计
程序设计
Java相关