jquery第十一期:相干文档的处理 _Web前端

jquery第十一期:有关文档的处理

1.append：我们在上一节已经用到了append，向每个匹配的元素内部追加内容，以上一节的例子为例。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>表单操作</title>
  <script type="text/javascript" src="jquery-1.10.1.js"></script>
  <script type="text/javascript">
      $(function()
	  {
		//添加新的option，设置selected为selected
		$("#province").append("<option value='4' selected='selected'>河南省</option>");
	  });
  </script>
 </head>

 用户名:<input type="text" name="username"  id="username"/><br/>
 密码  :<input type="password" name="password" id="password"/><br/>
 性别  :<input type="radio" name="sex">男
        <input type="radio" name="sex">女<br/>
 爱好  :<input type="checkbox" name="interest" value="Dota">Dota
        <input type="checkbox" name="interest" value="LOL">LOL
		<input type="checkbox" name="interest" value="梦三国">梦三国
		<input type="checkbox" name="interest" value="英雄三国">英雄三国<br/>
 省份：<select id="province">
         <option>请选择省份</option>
         <option value="1">黑龙江</option>
		 <option value="2">河北</option>
		 <option value="3">山东</option>
       </select><br>

	   <input type="button" value="click" id="btn">
 <body> 
 </body>
</html>

2.prepend方法和append方法类似，只是prepend是在向前添加。

3.after，注意与append的区别，append是在所选的内部添加，而after是在包装外添加，举一个简单的例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title></title>
  <script type="text/javascript" src="jquery-1.10.1.js"></script>
  <script type="text/javascript">
      $(function()
	  {
		$("p").after("<b>niujiabin<b>");
	  });
  </script>
 </head>
  <p>this is a para</p>
 
 <body> 
 </body>
</html>

运行结果：

4.wrap把所有匹配的元素用其他元素的结构化标记包裹起来。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title></title>
  <script type="text/javascript" src="jquery-1.10.1.js"></script>
  <script type="text/javascript">
      $(function()
	  {
		$("p").wrap("<div class='wrap' style='color:red'></div>");
	  });
  </script>
 </head>
  <p >this is a para</p>
 
 <body> 
 </body>
</html>

运行结果：

5.unwrap这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素，与wrap的作用相反。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>表单操作</title>
  <script type="text/javascript" src="jquery-1.10.1.js"></script>
  <script type="text/javascript">
      $(function()
	  {
		$("p").wrap("<div class='wrap' style='color:red'></div>");
		$("p").unwrap();
	  });
  </script>
 </head>
  <p >this is a para</p>
 
 <body> 
 </body>
</html>