JQuery -- Dom操作，示例代码

1.内部插入节点

* append(content) :向每个匹配的元素的内部的结尾处追加内容

* appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处

* prepend(content):向每个匹配的元素的内部的开始处插入内容

* prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处

2.外部插入节点

* after(content) :在每个匹配的元素之后插入内容

* before(content):在每个匹配的元素之前插入内容

* insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面

* insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面

3.查找节点

•查找属性节点:通过jQuery选择器完成.

•查找属性节点:查找到所需要的元素之后,可以调用jQuery对象的attr()方法来获取它的各种属性值

4.创建节点

创建节点: 使用jQuery的工厂函数$():$(html);会根据传入的html标记字符串创建一个DOM 对象,并把这个DOM对象包装成一个jQuery 对象返回.

注意:

•动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中;

•当创建单个元素时,需注意闭合标签和使用标准的XHTML格式.例如创建一个元素,可以使用$(“”)或$(“”),但不能使用$(“”)或$(“”)或$(“p”)

创建文本节点就是在创建元素节点时直接把文本内容写出来;创建属性节点也是在创建元素节点时一起创建

5.删除节点

remove(): 从 DOM 中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素.当某个节点用remove()方法删除后,该节点所包含的所有后代节点将被同时删除.这个方法的返回值是一个指向已被删除的节点的引用.

empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点).

6.复制节点

clone(): 克隆匹配的 DOM 元素,返回值为克隆后的副本.但此时复制的新节点不具有任何行为.

clone(true): 复制元素的同时也复制元素中的的事件

7.替换节点

replaceWith(): 将所有匹配的元素都替换为指定的HTML或DOM元素

replaceAll(): 颠倒了的replaceWith()方法.

注意: 若在替换之前,已经在元素上绑定了事件,替换后原先绑定的事件会与原先的元素一起消失

8.属性操作 样式操作

attr(): 获取属性和设置属性

•当为该方法传递一个参数时,即为某元素的获取指定属性

•当为该方法传递两个参数时,即为某元素设置指定属性的值

jQuery 中有很多方法都是一个函数实现获取和设置.如: attr(), html(), text(), val(), height(), width(), css()等.

removeAttr(“属性名”):删除指定元素的指定属性

获取 class 和设置class : class 是元素的一个属性,所以获取 class 和设置 class 都可以使用attr() 方法来完成.

追加样式: addClass()

移除样式: removeClass() ---从匹配的元素中删除全部或指定的 class

切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它,如果类名不存在则添加它.

判断是否含有某个样式: hasClass() ---判断元素中是否含有某个 class,如果有, 则返回true; 否则返回 false

9. 设置和获取 HTML, 文本和值

读取和设置某个元素中的 HTML 内容: html(“”) .该方法可以用于 XHTML, 但不能用于 XML 文档

读取和设置某个元素中的文本内容:text().该方法既可以用于 XHTML 也可以用于 XML文档.

读取和设置某个元素中的值: val() --- 该方法类似JavaScript 中的 value 属性.对于文本框,下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框,则返回一个包含所有选择值的数组 alert($("#b1")[0].defaultValue);

示例1：



示例2：



示例3：



示例4：

示例5：



示例6：



示例7：
 
示例8：




示例9：

 
案例一：   checkbox选项框，全选 反选 。。。



案例2：


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript"  src="../js/jquery-1.4.2.js"></script>
<title>无标题文档</title>

<style type="text/css">
<!--

BODY
{
	font-family:Courier;;
	font-size: 12px;
	margin:0px 0px 0px 0px;
	overflow-x:no;
	overflow-y:no;
	background-color: #B8D3F4;
}
td
{
	font-size:12px;
}
.default_input
{
	border:1px solid #666666;
	height:18px;
	font-size:12px;
}
.default_input2
{
	border:1px solid #666666;
	height:18px;
	font-size:12px;
}
.nowrite_input
{
	border:1px solid #849EB5;
	height:18px;
	font-size:12px;
	background-color:#EBEAE7;
	color: #9E9A9E;
}
.default_list
{
	font-size:12px;
  border:1px solid #849EB5;
}
.default_textarea
{
	font-size:12px;
	border:1px solid #849EB5;
}

.nowrite_textarea
{
	border:1px solid #849EB5;
	font-size:12px;
	background-color:#EBEAE7;
	color: #9E9A9E;
}

.wordtd5 {
	font-size: 12px;
	text-align: center;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #b8c4f4;
}

.wordtd {
	font-size: 12px;
	text-align: left;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #b8c4f4;
}
.wordtd_1 {
	font-size: 12px;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #516CD6;
	color:#fff;
}
.wordtd_2{
	font-size: 12px;
	text-align: right;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #64BDF9;
}
.wordtd_3{
	font-size: 12px;
	text-align: right;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #F1DD34;
}
.inputtd
{
	font-size:12px;
	vertical-align:top;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}
.inputtd2
{
	text-align: center;
	font-size:12px;
	vertical-align:top;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}
.tablebg
{
	font-size:12px;
}

.tb{
	border-collapse: collapse;
	border: 1px outset #999999;
	background-color: #FFFFFF;
}
.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
.td4{background-color:#F6F6F6;line-height:20px;}
.td5{border:#000000 solid;
       border-right-width:0px;
	   border-left-width:0px;
	   border-top-width:0px;
	   border-bottom-width:1px;}

.tb td{
font-size: 12px;
border: 2px groove #ffffff;
}




.noborder {
	border: none;
}

.button {
	border: 1px ridge #ffffff;
	line-height:18px;
	height: 20px;
	width: 45px;
	padding-top: 0px;
	background:#CBDAF7;
	color:#000000;
	font-size: 9pt;
    font-family:Courier;;
} 

.textarea {
	font-family: Arial, Helvetica, sans-serif, "??";
	font-size: 9pt;
	color: #000000;
	border-bottom-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #000000;
	background-color:transparent;
	text-align: left
}
-->
</style></head>

<body>

<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
  <tr>
    <td width="126">
    	<!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
		<select name="first" size="10" multiple="multiple" class="td3" >
		  <option value="选项1">选项1</option>
		  <option value="选项2">选项2</option>
		  <option value="选项3">选项3</option>
		  <option value="选项4">选项4</option>
		  <option value="选项5">选项5</option>
		  <option value="选项6">选项6</option>
		  <option value="选项7">选项7</option>
		  <option value="选项8">选项8</option>
		</select>    
	</td>
    <td width="69" valign="middle">
       <input name="add"   /> 
       <input name="add_all"  /> 
       <input name="remove"   />
	   <input name="remove_all"  />
        </td>
    <td width="127" align="left">
	  <select name="second" size="10" multiple="multiple" class="td3" >
         <option value="选项9">选项9</option>
      </select>
	</td>
  </tr>
</table>
</div>
</body>
<script type="text/javascript">
		//<input name="add"   /> 
		$("#add").click(function(){
			$("#first option:selected").appendTo($("#second"));
		});
		
		//<input name="add_all"  /> 
		$("#add_all").click(function(){
			$("#first option").appendTo($("#second"));
		});
		
		
		//<input name="remove"   />
		$("#remove").click(function(){
			$("#second option:selected").appendTo($("#first"));
		});
		
		
		//<input name="remove_all"  />
		$("#remove_all").click(function(){
			$("#second option").appendTo($("#first"));
		});
		
		//双击
		$("#first").dblclick(function(){
			$("#first option:selected").appendTo($("#second"));
		});
		
		$("#second").dblclick(function(){
			$("#second option:selected").appendTo($("#first"));
		});
  
  </script>
</html>