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：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			     140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			     30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->    
	</head>
	 
	<body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		 
		 
		  <ul id="love">
		 	 <li id="fk" name="fankong">反恐</li>
			 <li id="xj" name="xingji">星际</li>
		 </ul>
		
		<div id="foo1">Hello1</div> 
       
	</body>
<script language="JavaScript">
//*   append(content) :向每个匹配的元素的内部的结尾处追加内容
	//append后面的元素插入到append前面的元素的后面
//	$("#bj").append($("#fk"));

//*   appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
	//appendTo前面的元素插入到appendTo后面的元素的后面
//	$("#bj").appendTo($("#fk"));
	
//*   prepend(content):向每个匹配的元素的内部的开始处插入内容
	//prepend后面的元素插入到prepend前面的元素的前面
	$("#bj").prepend($("#fk"));

//*   prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
	//prependTo前面的元素插入到prependTo后面的元素的前面
//	$("#bj").prependTo($("#fk"));	
</script>

</html>

示例2：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			     140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			     30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->    
	</head>
	 
	<body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		
		 <p  id="p3">I would like to say: p3</p>
		 
		 <p  id="p2">I would like to say: p2</p>
		
		 <p  id="p1">I would like to say: p1</p>
       
	</body>
<script language="JavaScript">
//*  after(content) :在每个匹配的元素之后插入内容
	//after后面的元素插入到after前面的元素的后面
//	$("#bj").after($("#p2"));

//*  before(content):在每个匹配的元素之前插入内容 
	//before后面的元素插入到before前面的元素的前面
	$("#bj").before($("#p2"));

//*  insertAfter(content):把所有匹配的元素插入到另一个、指定的元素集合的后面 
	//insertAfter前面的元素插入到insertAfter后面的元素的后面
//	$("#bj").insertAfter($("#p2"));

//*  insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面 
	//insertBefore前面的元素插入到insertBefore后面的元素的前面
//	$("#bj").insertBefore($("#p2"));

</script>
   
</html>

示例3：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			     140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			     30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 每个class为one的div父元素下的第2个子元素"  id="b1"/>
		 <input type="button" value=" 每个class为one的div父元素下的第一个子元素"  id="b2"/>
		 <input type="button" value=" 每个class为one的div父元素下的最后一个子元素"  id="b3"/>
		 <input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"  id="b4"/>
		 

		 <!--文本隐藏域-->
         <input type="hidden" value="hidden_1">
		 <input type="hidden" value="hidden_2">
		 <input type="hidden" value="hidden_3">
		 <input type="hidden" value="hidden_4">
		 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
		 
	     <div id="one">
	    	 id为one   div
		 </div>
		
		 <ul>
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			
		 </ul>
		
	</body>
    <script language="JavaScript">
     //获取"北京"
	 var $bjElement = $("#bj");
	 
	 alert($bjElement.attr("name"));	//在这里相当于DOM操作里的getAttribute()
	 
	 /*
	  * jquery中的attr()方法相当于DOM操作里的getAttribute和setAttribute
	  * 	* 对应DOM操作里getAttribute是attr(name)
	  * 		* name：属性名称
	  * 	* 对应DOM操作里setAttribute是attr(name,value)
	  * 		* name：属性名称
	  * 		* value：属性的值
	  */
	 
	 
    </script>
   
</html>

示例4：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			     140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			     30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
		 </ul>
		
	</body>
<script language="JavaScript">
	//在city下增加<li id="tj" name="tianjin">天津</li>节点
		//1 创建<li id="tj" name="tianjin">天津</li>
			/*
			 * 1 创建<li></li>
			 * 
			 * 	* 标签的闭合
			 * 		* 开始标签和截止标签：<li></li>
			 * 		* <li />
			 * 		
			 * 	* 以下几种方式是不正确的：
			 * 		* <li>
			 * 		* $("li")获取对应标签
			 */
			var $li = $("<li></li>");	//document.createElement("li");
			
			//2 设置属性
			$li.attr("id","tj");
			$li.attr("name","tianjin");
			
			//3 创建文本节点
			//4 插入
			/*
			 * text()：同时也具备get和set两种属性
			 * 		* 如果是get的话，text()无参数形式
			 * 		* 如果是set的话，text(name)传入文本内容
			 */
			$li.text("天津");
		
		//2 获取city标签
		var $city = $("#city");
		
		//3 插入
		$city.append($li);
		
		
		
</script>
   
</html>

示例5：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			     140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			     30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		<p class="hello">Hello</p> how are <p>you?</p> 
	</body>
<script language="JavaScript">
   //删除<li id="bj" name="beijing">北京</li>
   $("#bj").remove();
   
   
   
   //删除所有的子节点   清空元素中的所有后代节点(不包含属性节点).
   $("#tj").empty();
   
   alert($("#tj").attr("name"));
   
</script>
   
</html>

示例6：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			     140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			     30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
	</head>
	<body>
		<button>保存</button>	
		<br>	<br>	<br>	
	    <p>段落</p>
	</body>
    <script language="JavaScript">
        //button增加事件
		$("button").click(function(){
			alert("yyy");
		});
		
		
	    //克隆button 追加到p上 ,但事件不克隆
		//clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为
//	    $("button").clone().appendTo($("p"));
		
		
		
		//克隆button 追加到p上 ,但事件也克隆
		//clone(true): 复制元素的同时也复制元素中的的事件 
		$("button").clone(true).appendTo($("p"));
		
		
		
    </script>
</html>

示例7：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			     140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			     30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
	</head>
	<body>
	    <p>段落</p>
		<p>段落</p>
		<p>段落</p>
		<button>保存</button>	
	</body>
<script language="JavaScript">
	    //$("button")用 <p>tttttttt</P>替换
		//replaceWith前面的元素是被替换的，replaceWith后面的元素是替换后的
		$("button").replaceWith($("<p>tttttttt</P>"));
		
		
		
	    // p 用  <button>保存</button>  替换
		//replaceAll前面的元素是替换后的，replaceAll后面的元素是要被替换的
		$("<button>保存</button>").replaceAll($("p"));
		
		//replaceWith与replaceAll，效果刚好相反
		
</script>
</html>

示例8：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		   .one{
			     200px;
			    height: 140px;
			    margin: 40px;
			    background: red;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
		
		 	div,span{
			     140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			     30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
	</head>
	<body>
		 <input type="button" value="采用属性增加样式"  id="b1"/>
		 <input type="button" value=" addClass"  id="b2"/>
		 <input type="button" value="removeClass"  id="b3"/>
		 <input type="button" value=" 切换样式"  id="b4"/>
		 <input type="button" value=" hasClass"  id="b5"/>
		
 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
		 
	   
		
		<br>
		<div id="mover">
		 	  动画
		</div>
		<br>
		<span class="spanone">    span
		</span>
		
	</body>
<script language="JavaScript">
	//<input type="button" value="采用属性增加样式"  id="b1"/>
	$("#b1").click(function(){
		$("#mover").attr("class","one");
	});
	
	//<input type="button" value=" addClass"  id="b2"/>
	$("#b2").click(function(){
		$("#mover").addClass("mini");
	});
	
	//<input type="button" value="removeClass"  id="b3"/>
	$("#b3").click(function(){
		/*
		 * removeClass()
		 * 		* 删除样式
		 * 		* 如果不带任何参数，removeClass()可以删除任何样式
		 * 		* 如果带参数的话，removeClass()只能删除指定样式
		 */
		$("#mover").removeClass("one");
	});
	
	//<input type="button" value=" 切换样式"  id="b4"/>
	$("#b4").click(function(){
		/*
		 * toggleClass();
		 * 		* 切换样式
		 * 		* 该方法只能接受一个参数
		 * 		* 所谓的切换样式，是在指定样式和没有样式(只是把指定样式删除)之间切换
		 */
		$("#mover").toggleClass("mini");
	});
	
	//<input type="button" value=" hasClass"  id="b5"/>
	$("#b5").click(function(){
		/*
		 * hasClass()
		 * 		* 判断是否含有某个样式，并不是判断是否含有样式
		 * 		* 该方法要指定样式名称
		 * 		* 如果有多个样式存在，hasClass()方法依然只判断是否含有该方法指定的样式
		 */
		alert($("#mover").hasClass("one"));
	});
	

</script>
</html>

示例9：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	</head>
	<body>
		<input type="button" value="使单选下拉框的'2号'被选中"/><br>
		<input type="button" value="使多选下拉框选中的'2号'和'5号'被选中"/><br>
		<input type="button" value="使复选框的'复选2'和'复选4'被选中"/><br>
		<input type="button" value="使单选框的'单选2'被选中"/><br>
		<input type="button" value="打印已经被选中的值"><br>
		<br/>
		
		<select id="one">
		  <option>1号</option>
		  <option>2号</option>
		  <option>3号</option>
		</select>
		
		<select id="many" multiple="multiple" style="height:120px;">
		  <option selected="selected">1号</option>
		  <option>2号</option>
		  <option>3号</option>
		  <option>4号</option>
		  <option>5号</option>
		  <option selected="selected">6号</option>
		</select>
		
		<br/>
		<br/>

		<input type="checkbox" name="c" value="check1"/> 复选1
		<input type="checkbox" name="c" value="check2"/> 复选2
		<input type="checkbox" name="c" value="check3"/> 复选3
		<input type="checkbox" name="c" value="check4"/> 复选4
		<br/>
		<input type="radio" name="r" value="radio1"/> 单选1
		<input type="radio" name="r"  value="radio2"/> 单选2
		<input type="radio" name="r"  value="radio3"/> 单选3
	</body>
<script language="JavaScript">	
		//<input type="button" value="使单选下拉框的'2号'被选中"/><br>
		$("input[type=button]:eq(0)").click(function(){
			/*
			 * <select id="one">
				  <option>1号</option>
				  <option>2号</option>
				  <option>3号</option>
				</select>
			 */
			//方法一：普通方法
			//$("#one option:eq(1)").attr("selected","selected");
			
			//方法二
			$("#one").val("2号");
			
		});
		
		//<input type="button" value="使多选下拉框选中的'2号'和'5号'被选中"/><br>
		$("input[type=button]:eq(1)").click(function(){
			/*
			 * <select id="many" multiple="multiple" style="height:120px;">
				  <option selected="selected">1号</option>
				  <option>2号</option>
				  <option>3号</option>
				  <option>4号</option>
				  <option>5号</option>
				  <option selected="selected">6号</option>
				</select>
			 */
			//方法一：普通方法
//			$("#many option").each(function(index,domEle){
//				$(domEle).attr("selected",null);
//				if(index==1||index==4){
//					$(domEle).attr("selected","selected");
//				}
//			});

			//方法二
			$("#many").val(["2号","5号"]);
			
			
		});
		
		//<input type="button" value="使复选框的'复选2'和'复选4'被选中"/><br>
		$("input[type=button]:eq(2)").click(function(){
			/*
			 * <input type="checkbox" name="c" value="check1"/> 复选1
				<input type="checkbox" name="c" value="check2"/> 复选2
				<input type="checkbox" name="c" value="check3"/> 复选3
				<input type="checkbox" name="c" value="check4"/> 复选4
			 */
			//方法一：普通方法
//			$("input[type=checkbox]").each(function(index,domEle){
//				if(index==1||index==3){
//					$(domEle).attr("checked","checked");
//				}
//			});
			
			//方法二：利用val()方法为多选框赋值，传入的参数是多选框的value属性的值
			$("input[type=checkbox]").val(["check2","check4"]);
			
			
		});
		
		
		//<input type="button" value="使单选框的'单选2'被选中"/><br>
		$("input[type=button]:eq(3)").click(function(){
			/*
			 * <input type="radio" name="r" value="radio1"/> 单选1
				<input type="radio" name="r"  value="radio2"/> 单选2
				<input type="radio" name="r"  value="radio3"/> 单选3
			 */
			//方法一：普通方法
//			$("input[type=radio]").each(function(index,domEle){
//				if(index==1){
//					$(domEle).attr("checked","checked");
//				}
//			});
			
//			$("input[type=radio]:eq(1)").attr("checked","checked");
			
			//方法二
			//利用val()方法为多选框和单选框赋值的时候，无论赋值是多个还是一个，都需要利用"[]"包裹起来
			$("input[type=radio]").val(["radio2"]);
			
		});
		
		
		//<input type="button" value="打印已经被选中的值"><br> 	
		$("input[type=button]:eq(4)").click(function(){
			$("select option:selected").each(function(index,domEle){
				alert($(domEle).text());
			});
			
			//多个属性过滤选择器使用时，是交集，不是并集
//			$("input[type=checkbox][type=radio]")
			
			$("input:checked").each(function(index,domEle){
				alert($(domEle).val());
			});
			
		});
		
</script>	
</html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	</head>
	<body>
		<form method="post" action="">
		   	请选择您的爱好!
			<br><input type="checkbox" id="checkedAll_2"/>全选/全不选
		   	<br/>
		    <input type="checkbox" name="items" value="足球"/>足球
			<input type="checkbox" name="items" value="篮球"/>篮球
			<input type="checkbox" name="items" value="游泳"/>游泳
			<input type="checkbox" name="items" value="唱歌"/>唱歌
		   	<br/>
		    <input type="button" id="CheckedAll" value="全　选"/>
		    <input type="button" id="CheckedNo" value="全不选"/>
		    <input type="button" id="CheckedRev" value="反　选"/> 
		
			<input type="button" id="send" value="提　交"/> 
		</form>
	</body>
	<script language="JavaScript">
		//<input type="button" id="CheckedAll" value="全　选"/>
		$("#CheckedAll").click(function(){
			/*
			 * <input type="checkbox" name="items" value="足球"/>足球
			<input type="checkbox" name="items" value="篮球"/>篮球
			<input type="checkbox" name="items" value="游泳"/>游泳
			<input type="checkbox" name="items" value="唱歌"/>唱歌
			 */
//			$("input[name=items]").each(function(index,domEle){
//				$(domEle).attr("checked","checked");
//			});
			
			$("input[name=items]").attr("checked","checked");
			
		});
		
		//<input type="button" id="CheckedNo" value="全不选"/>
		$("#CheckedNo").click(function(){
//			$("input[name=items]").attr("checked",null);
			
			$("input[name=items]").removeAttr("checked");
		});
		
		
		//<input type="button" id="CheckedRev" value="反　选"/> 
		$("#CheckedRev").click(function(){
			$("input[name=items]").each(function(index,domEle){
				if($(domEle).attr("checked")){
					$(domEle).attr("checked",null);
				}else{
					$(domEle).attr("checked","checked");
				}
			});
		});
		
		//<input type="checkbox" id="checkedAll_2"/>全选/全不选
		$("#checkedAll_2").click(function(){
			if($(this).attr("checked")){
				$("input[name=items]").attr("checked","checked");
			}else{
				$("input[name=items]").attr("checked",null);
			}
		});
		
	
	</script>
</html>

案例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-0px;
	   border-left-0px;
	   border-top-0px;
	   border-bottom-1px;}

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




.noborder {
	border: none;
}

.button {
	border: 1px ridge #ffffff;
	line-height:18px;
	height: 20px;
	 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- 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; 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" id="first">
		  <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"  id="add" type="button" class="button" value="-->" /> 
       <input name="add_all" id="add_all" type="button" class="button" value="==>" /> 
       <input name="remove"  id="remove" type="button" class="button" value="<--" />
	   <input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
        </td>
    <td width="127" align="left">
	  <select name="second" size="10" multiple="multiple" class="td3" id="second">
         <option value="选项9">选项9</option>
      </select>
	</td>
  </tr>
</table>
</div>
</body>
<script type="text/javascript">
		//<input name="add"  id="add" type="button" class="button" value="-->" /> 
		$("#add").click(function(){
			$("#first option:selected").appendTo($("#second"));
		});
		
		//<input name="add_all" id="add_all" type="button" class="button" value="==>" /> 
		$("#add_all").click(function(){
			$("#first option").appendTo($("#second"));
		});
		
		
		//<input name="remove"  id="remove" type="button" class="button" value="<--" />
		$("#remove").click(function(){
			$("#second option:selected").appendTo($("#first"));
		});
		
		
		//<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
		$("#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>

相关阅读:
windows上phpstudy配置memcache
获取全站详情链接，并输出为txt文本
 Linux 宝塔面板免费版开启 waf 防火墙的方法
 where条件多种情况
 网站加https
git常用命令
 缓存
 Stream转换成byte[] 、将 byte[] 转成 Stream 、Stream和文件的转换、从文件读取 Stream
C#发送邮件
 Ref和Out的区别
原文地址：https://www.cnblogs.com/xj626852095/p/3648010.html

JQuery -- Dom操作， 示例代码

JQuery -- Dom操作，示例代码