原文链接：http://blog.csdn.net/jiangwei0910410003/article/details/32102187

 1.简介
2.工具
3.jQuery对象
　　1.DOM对象转化成jQuery对象
　　2.jQuery对象转化成DOM对象
4.jQuery选择器
　　1.基本选择器
　　2.层次选择器
　　3.过滤选择器
　　4.基础过滤选择器
　　5.内容过滤选择器
5.可见度过滤选择器
　　1.属性过滤选择器
　　2.子元素过滤选择器
　　3.表单对象属性过滤选择器
　　4.表单选择器
6.jQuery中的DOM操作
　　1.内部插入节点
　　2.外部插入节点
　　3.查找节点
　　4.创建节点
　　5.删除节点
　　6.复制节点
　　7.替换节点
　　8.属性操作
　　9.样式操作
　　10.设置和获取 HTML 文本和值
　　11.常用的遍历节点方法
　　12.CSS-DOM操作
　　13.jQuery解析并加载XML
7.jQuery中的事件
8.jQuery的表单验证
　　1.jquery自定义验证规则
　　2.jQuery自定义消息
　　3.jQuery的自定义校验规则
　　　　1.在定义校验规则之前定义一个新的方法
　　　　2.在rules中指定这个某个域使用此校验规则
　　　　3.在messages中指定这个域使用此校验规则没有通过的提示信息
9.jQuery中封装的Ajax请求
　　1.load方法
　　2.get方法
　　3.post方法
　　4.getScript方法
　　5.jQuery Ajax 事件
　　6.ajax方法

前面我们讲解了的J2EE的技术都是服务端的技术，下面我们来看一下前端的一些开发技术，这一篇我们来看一下jQuery技术

简介：

jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多

javascript高手加入其team。 jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

工具：

我们在使用MyEclipse中编写jQuery的时候，是没有任何提示的，所以写代码很难受的，我们需要借助额外的工具Aptana，这个在编写js，jQuery，Ajax等都会有相关的提示，具体如何在MyEclipse中添加这个工具，看如下的一篇文章：

http://blog.csdn.net/jiangwei0910410003/article/details/28423545

jQuery的一个简单例子：

[html] view plaincopyprint?

1. <!--引入jquery的js库-->  
2.  <script type="text/javascript" src=http://www.mamicode.com/"script/jquery-1.4.2.js"></script>  
3.  <script language="JavaScript">  
4.    $(document).ready(function(){//等待dom元素加载完毕,类似window.onload;  
5.        alert("您好,我是张三丰");  
6.    });  
7.  </script>  

   <!--引入jquery的js库-->    <script type="text/javascript" src="http://www.mamicode.com/script/jquery-1.4.2.js"></script>    <script language="JavaScript">      $(document).ready(function(){//等待dom元素加载完毕,类似window.onload;          alert("您好,我是张三丰");      });    </script>

这里要注意的是一定要记得引入jquery的js库：jquery-1.4.2.js文件

jQuery对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。 jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html(); 比如：  $("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法  这段代码等同于用DOM实现代码：  document.getElementById(" test ").innerHTML;  虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错 约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.  var $variable = jQuery对象 var variable = DOM对象

DOM对象转化成jQuery对象

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) 

转换后就可以使用 jQuery 中的方法了

jQuery对象转化成DOM对象

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);  (1) jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象

(2) jQuery本身提供，通过.get(index)方法，得到相应的DOM对象                        

jQuery选择器

选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点: 简洁的写法                                                                                     ${“#id”}   等价于    document.getElementById("id"); ${“tagName”}     等价于   document.getElementsByTagName("tagName");
完善的事件处理机制 val()获得第一个匹配元素的当前值.

//若网页中没有id=value的元素,浏览器会报错 document.getElementById("username").value;     //需要判断document.getElementById("username")是否存在

[html] view plaincopyprint?

1. if(document.getElementById("username")){  
2.   var username=document.getElementById("username");  
3.   alert(username.value);  
4. }else{  
5.   alert("没有该id元素");  
6. }  

if(document.getElementById("username")){  var username=document.getElementById("username");  alert(username.value);}else{  alert("没有该id元素");}

//使用JQUERY处理即使不存在也不会报错 var $username=$("#username"); alert("^^^ "+$username.val());
//注意:在javaScript中函数返回值为空,表示false

基本选择器：

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用). 1、#id用法: $(”#myDiv”);    返回值  单个元素的组成的集合 说明: 这个就是直接选择html中的id=”myDiv” 2、Element用法: $(”div”)     返回值  集合元素 说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如 div, input, a 等等. 3、class 用法: $(”.myClass”)      返回值  集合元素 说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的). 4、*用法: $(”*”)      返回值  集合元素 说明: 匹配所有元素,多用于结合上下文来搜索 5、selector1, selector2, selectorN      用法: $(”div,span,p.myClass”)    返回值  集合元素 说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素 p class=”myClass”

基本选择器示例：

改变 id 为 one 的元素的背景色为 #0000FF 改变 class 为 mini 的所有元素的背景色为 #FF0033 改变元素名为 <div> 的所有元素的背景色为 #00FFFF 改变所有元素的背景色为 #00FF33 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF

[html] view plaincopyprint?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>base_selecter.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.     <script language="JavaScript" src=http://www.mamicode.com/"../jquery/jquery-1.4.2.js"></script>  
10.     <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  
11.   
12.   </head>  
13.   <body>  
14.     <input value=http://www.mamicode.com/"haha" type="text" id="username" name="username" />  
15.     <span style="white-space:pre">    </span><input type="button" value=http://www.mamicode.com/"改变id为one的元素的背景颜色" id="b1" />  
16.     <input type="button" value=http://www.mamicode.com/"改变所有div的背景颜色" id="b2" />  
17.     <input type="button" value=http://www.mamicode.com/"改变所有div背景颜色 为绿色" id="b3" />  
18.     <input type="button" value=http://www.mamicode.com/"改变所有span和id为two的背景颜色 " id="b4" />  
19.     <table border="1" cellspacing="0" width="200">  
20.         <tr>  
21.             <td id="one"><a href=http://www.mamicode.com/"#">1</a></td>  
22.             <td class="mini"><a href=http://www.mamicode.com/"#">2</a></td>  
23.             <td>3</td>  
24.         </tr>  
25.     </table>  
26.     <a href=http://www.mamicode.com/"#">嘿嘿</a>  
27.     <div>div1</div>  
28.     <div class="mini" id="two">div2</div>  
29.     <div>div3</div>  
30.     <span>span1</span>  
31.     <span>span2</span>  
32.   </body>  
33.   <script language="JavaScript">  
34.     //<input value=http://www.mamicode.com/"haha" type="text" id="username" name="username" />获得焦点  
35.     $("#username").focus(function(){  
36.         alert("aaa");  
37.     });  
38.       
39.     //一、<input type="button" value=http://www.mamicode.com/"改变id为one的元素的背景颜色" name="ok"  />  
40.     $("#b1").click(function(){  
41.         $("#one").css("background-color", "red");     
42.     });  
43.       
44.     //二、改变所有div背景颜色 为绿色  
45.     $("#b2").click(function(){  
46.         $("div").css("background-color", "green");  
47.     });  
48.       
49.     //三、改变class是mini的所有背景颜色为蓝色  
50.     $("#b3").click(function(){  
51.         $(".mini").css("background-color", "blue");  
52.     });  
53.       
54.     //四、改变所有span和id为two的背景颜色  
55.     $("#b4").click(function(){  
56.         $("span,#two").css("background-color", "yellow");  
57.     });  
58.       
59.   </script>  
60.     
61.     
62. </html>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>base_selecter.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script language="JavaScript" src="http://www.mamicode.com/jquery/jquery-1.4.2.js"></script>    <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  </head>  <body>  	<input value="http://www.mamicode.com/haha" type="text" id="username" name="username" />    <span style="white-space:pre">	</span><input type="button" value="http://www.mamicode.com/改变id为one的元素的背景颜色" id="b1" />	<input type="button" value="http://www.mamicode.com/改变所有div的背景颜色" id="b2" />	<input type="button" value="http://www.mamicode.com/改变所有div背景颜色 为绿色" id="b3" />	<input type="button" value="http://www.mamicode.com/改变所有span和id为two的背景颜色" id="b4" />	<table border="1" cellspacing="0" width="200">		<tr>			<td id="one"><a href="http://www.mamicode.com/#">1</a></td>			<td class="mini"><a href="http://www.mamicode.com/#">2</a></td>			<td>3</td>		</tr>	</table>	<a href="http://www.mamicode.com/#">嘿嘿</a>	<div>div1</div>	<div class="mini" id="two">div2</div>	<div>div3</div>	<span>span1</span>	<span>span2</span>  </body>  <script language="JavaScript">  	//<input value="http://www.mamicode.com/haha" type="text" id="username" name="username" />获得焦点	$("#username").focus(function(){		alert("aaa");	});	  	//一、<input type="button" value="http://www.mamicode.com/改变id为one的元素的背景颜色" name="ok"  />	$("#b1").click(function(){		$("#one").css("background-color", "red");		});		//二、改变所有div背景颜色 为绿色	$("#b2").click(function(){		$("div").css("background-color", "green");	});		//三、改变class是mini的所有背景颜色为蓝色	$("#b3").click(function(){		$(".mini").css("background-color", "blue");	});		//四、改变所有span和id为two的背景颜色	$("#b4").click(function(){		$("span,#two").css("background-color", "yellow");	});	  </script>    </html>

层次选择器：

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器. 1 、ancestor descendant 用法: $(”form input”) ;   返回值  集合元素 说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开. 2、parent > child 用法: $(”form > input”) ;    返回值  集合元素 说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素 3、prev + next 用法: $(”label + input”) ;   返回值  集合元素 说明: 匹配所有紧接在 prev 元素后的 next 元素 4、prev ~ siblings 用法: $(”form ~ input”) ;    返回值  集合元素 说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配. 注意:  (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

层次选择器示例：

改变所有td中<a>标签的字体 改变所有td中但不是td孙子以下的<a>标签的颜色 改变id为one的下一个td背景色 改变id为two的所有div的背景色

[html] view plaincopyprint?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>base_selecter.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.     <script language="JavaScript" src=http://www.mamicode.com/"../jquery/jquery-1.4.2.js"></script>  
10.     <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  
11.   
12.   </head>  
13.   <body>  
14.     <input type="button" value=http://www.mamicode.com/"改变所有td中<a>标签的字体" id="b1" />  
15.     <input type="button" value=http://www.mamicode.com/"改变所有td中但不是td孙子以下的<a>标签的颜色" id="b2" />  
16.     <input type="button" value=http://www.mamicode.com/"改变id为one的下一个td背景色" id="b3" />  
17.     <input type="button" value=http://www.mamicode.com/"改变id为two的所有div的背景色" id="b4" />  
18.     <table border="1" cellspacing="0" width="200">  
19.         <tr>  
20.             <td id="one"><a href=http://www.mamicode.com/"#">1</a></td>  
21.             <td class="mini"><a href=http://www.mamicode.com/"#">2</a><div><a>div中的</a></div></td>  
22.             <td>3</td>  
23.         </tr>  
24.     </table>  
25.     <a href=http://www.mamicode.com/"#">嘿嘿</a>  
26.     <div>div1</div>  
27.     <div class="mini" id="two">div2</div>  
28.     <div>div3</div>  
29.     <div>div4</div>  
30.     <span>span1</span>  
31.     <span>span2</span>  
32.   </body>  
33.   <script language="JavaScript">  
34.   //层次选择器  
35.   // 一、   改变所有td中<a>标签的字体  
36.     $("#b1").click(function(){  
37.         $("td a").css("background-color", "silver");  
38.     });  
39.       
40.       
41.     //二、 改变所有td中但不是td孙子以下的<a>标签的字体  
42.     $("#b2").click(function(){  
43.         $("td>a").css("background-color", "silver");  
44.     });  
45.       
46.       
47.     //三、改变id为one的下一个td背景色  
48.     $("#b3").click(function(){  
49.         $("#one+td").css("background-color", "red");  
50.     });  
51.       
52.     //四、改变id为two的所有div的背景色  
53.     $("#b4").click(function(){  
54.         $("#two~div").css("background-color", "red");  
55.     });  
56.       
57.   </script>  
58.     
59.     
60. </html>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>base_selecter.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script language="JavaScript" src="http://www.mamicode.com/jquery/jquery-1.4.2.js"></script>    <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  </head>  <body>	<input type="button" value="http://www.mamicode.com/改变所有td中标签的字体" id="b1" />	<input type="button" value="http://www.mamicode.com/改变所有td中但不是td孙子以下的标签的颜色" id="b2" />	<input type="button" value="http://www.mamicode.com/改变id为one的下一个td背景色" id="b3" />	<input type="button" value="http://www.mamicode.com/改变id为two的所有div的背景色" id="b4" />	<table border="1" cellspacing="0" width="200">		<tr>			<td id="one"><a href="http://www.mamicode.com/#">1</a></td>			<td class="mini"><a href="http://www.mamicode.com/#">2</a><div><a>div中的</a></div></td>			<td>3</td>		</tr>	</table>	<a href="http://www.mamicode.com/#">嘿嘿</a>	<div>div1</div>	<div class="mini" id="two">div2</div>	<div>div3</div>	<div>div4</div>	<span>span1</span>	<span>span2</span>  </body>  <script language="JavaScript">  //层次选择器  // 一、   改变所有td中<a>标签的字体	$("#b1").click(function(){		$("td a").css("background-color", "silver");	});			//二、 改变所有td中但不是td孙子以下的<a>标签的字体	$("#b2").click(function(){		$("td>a").css("background-color", "silver");	});			//三、改变id为one的下一个td背景色	$("#b3").click(function(){		$("#one+td").css("background-color", "red");	});		//四、改变id为two的所有div的背景色	$("#b4").click(function(){		$("#two~div").css("background-color", "red");	});	  </script>    </html>

过滤选择器：

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头 按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

基础过滤选择器：

[html] view plaincopyprint?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>baseFilter_selecter.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.       
10.     <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  
11.     <script language="JavaScript" src=http://www.mamicode.com/"../jquery/jquery-1.4.2.js"></script>  
12.     <style type="text/css">  
13.         #mover{  
14.             width:100px;  
15.             height:200px;  
16.               
17.         }  
18.     </style>  
19.   </head>  
20.     
21.   <body>  
22.     <input type="button" value=http://www.mamicode.com/"改变第一个div的背景色" id="b1" />  
23.     <input type="button" value=http://www.mamicode.com/"改变最后一个div的背景色" id="b2" />  
24.     <input type="button" value=http://www.mamicode.com/"改变class不为one的所有div的背景色" id="b3" />  
25.     <input type="button" value=http://www.mamicode.com/"改变索引值为偶数的div的背景色" id="b4" />  
26.     <input type="button" value=http://www.mamicode.com/"改变索引值为基数的div的背景色" id="b5" />  
27.     <input type="button" value=http://www.mamicode.com/"改变索引值大于3的div的背景色" id="b6" />  
28.     <input type="button" value=http://www.mamicode.com/"改变索引值等于3的div的背景色" id="b7" />  
29.     <input type="button" value=http://www.mamicode.com/"改变索引值小于3的div的背景色" id="b8" />  
30.     <input type="button" value=http://www.mamicode.com/"改变所有标题元素的背景色" id="b9" />  
31.       
32.     <h2>h2</h2>  
33.     <h5>h5</h5>  
34.     <h3>h3</h3>  
35.     <div class="one">div1</div>  
36.     <div class="one">div2</div>  
37.     <div>div3</div>  
38.     <div>div4</div>  
39.     <div>div5</div>  
40.     <div>div6</div>  
41.     <div>div7</div>  
42.     <div class="one">div8</div>  
43.     <div>div9</div>  
44.       
45.     <input type="button" value=http://www.mamicode.com/"增加动画效果" id="b10" /><br>  
46.     <div id="mover">动画</div>  
47.   </body>  
48.   <script language="JavaScript">  
49.     //一、改变第一个div的背景色  
50.     $("#b1").click(function(){  
51.         $("div:first").css("background-color", "yellow");  
52.     });  
53.       
54.     //二、改变最后一个div的背景色  
55.     $("#b2").click(function(){  
56.         $("div:last").css("background-color", "red");  
57.     });  
58.       
59.     //三、改变class不为one的所有div的背景色  
60.     $("#b3").click(function(){  
61.         $("div:not(.one)").css("background-color", "yellow");  
62.     });  
63.       
64.     //四、改变索引值为偶数的div的背景色  
65.     $("#b4").click(function(){  
66.         $("div:even").css("background-color", "yellow");  
67.     });  
68.     //五、改变索引值为基数的div的背景色  
69.     $("#b5").click(function(){  
70.         $("div:odd").css("background-color", "yellow");  
71.     });  
72.     //六、改变索引值大于3的div的背景色  
73.     $("#b6").click(function(){  
74.         $("div:gt(3)").css("background-color", "yellow");  
75.     });  
76.     //七、改变索引值等于3的div的背景色  
77.     $("#b7").click(function(){  
78.         $("div:eq(3)").css("background-color", "yellow");  
79.     });  
80.       
81.     //八、改变索引值小于3的div的背景色  
82.     $("#b8").click(function(){  
83.         $("div:lt(3)").css("background-color", "yellow");  
84.     });  
85.       
86.     //九、改变所有标题元素的背景色  
87.     $("#b9").click(function(){  
88.         $(":header").css("background-color", "yellow");  
89.     });  
90.       
91.     //十、  <div id="mover">动画</div>  增加动画效果  
92.     $("#b10").click(function(){  
93.         $(":animated").css("background-color", "yellow");  
94.     });  
95.     function ca(){  
96.         $("#mover").slideToggle(800, ca);  
97.     }  
98.     ca();  
99.   </script>  
100.     
101. </html>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>baseFilter_selecter.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->	<script language="JavaScript" src="http://www.mamicode.com/jquery/jquery-1.4.2.js"></script>	<style type="text/css">		#mover{			width:100px;			height:200px;			background-color:red;		}	</style>  </head>    <body>    <input type="button" value="http://www.mamicode.com/改变第一个div的背景色" id="b1" />	<input type="button" value="http://www.mamicode.com/改变最后一个div的背景色" id="b2" />	<input type="button" value="http://www.mamicode.com/改变class不为one的所有div的背景色" id="b3" />	<input type="button" value="http://www.mamicode.com/改变索引值为偶数的div的背景色" id="b4" />	<input type="button" value="http://www.mamicode.com/改变索引值为基数的div的背景色" id="b5" />	<input type="button" value="http://www.mamicode.com/改变索引值大于3的div的背景色" id="b6" />	<input type="button" value="http://www.mamicode.com/改变索引值等于3的div的背景色" id="b7" />	<input type="button" value="http://www.mamicode.com/改变索引值小于3的div的背景色" id="b8" />	<input type="button" value="http://www.mamicode.com/改变所有标题元素的背景色" id="b9" />		<h2>h2</h2>	<h5>h5</h5>	<h3>h3</h3>	<div class="one">div1</div>	<div class="one">div2</div>	<div>div3</div>	<div>div4</div>	<div>div5</div>	<div>div6</div>	<div>div7</div>	<div class="one">div8</div>	<div>div9</div>		<input type="button" value="http://www.mamicode.com/增加动画效果" id="b10" /><br>	<div id="mover">动画</div>  </body>  <script language="JavaScript">  	//一、改变第一个div的背景色	$("#b1").click(function(){		$("div:first").css("background-color", "yellow");	});		//二、改变最后一个div的背景色	$("#b2").click(function(){		$("div:last").css("background-color", "red");	});		//三、改变class不为one的所有div的背景色	$("#b3").click(function(){		$("div:not(.one)").css("background-color", "yellow");	});		//四、改变索引值为偶数的div的背景色	$("#b4").click(function(){		$("div:even").css("background-color", "yellow");	});	//五、改变索引值为基数的div的背景色	$("#b5").click(function(){		$("div:odd").css("background-color", "yellow");	});	//六、改变索引值大于3的div的背景色	$("#b6").click(function(){		$("div:gt(3)").css("background-color", "yellow");	});	//七、改变索引值等于3的div的背景色	$("#b7").click(function(){		$("div:eq(3)").css("background-color", "yellow");	});		//八、改变索引值小于3的div的背景色	$("#b8").click(function(){		$("div:lt(3)").css("background-color", "yellow");	});		//九、改变所有标题元素的背景色	$("#b9").click(function(){		$(":header").css("background-color", "yellow");	});		//十、  <div id="mover">动画</div>  增加动画效果	$("#b10").click(function(){		$(":animated").css("background-color", "yellow");	});	function ca(){		$("#mover").slideToggle(800, ca);	}	ca();  </script>  </html>

内容过滤选择器：

[html] view plaincopyprint?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>contentFilter_selecter.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.       
10.     <script language="JavaScript" src=http://www.mamicode.com/"../jquery/jquery-1.4.2.js"></script>  
11.     <style>  
12.         .mini{  
13.             width:100px;  
14.             height:50px;  
15.               
16.         }  
17.     </style>  
18.   </head>  
19.     
20.   <body>  
21.     <input type="button" value=http://www.mamicode.com/"改变含有文本di的背景色" id="b1" />  
22.     <input type="button" value=http://www.mamicode.com/"改变没有文本的背景色" id="b2" />  
23.     <input type="button" value=http://www.mamicode.com/"改变含有<p>的div元素的背景色" id="b3" />  
24.     <input type="button" value=http://www.mamicode.com/"改变含有子元素或者文本的div" id="b4" />  
25.     <input type="button" value=http://www.mamicode.com/"改变不含有文本di的div元素的背景色" id="b5" />  
26.       
27.     <div> id为one div</div>  
28.     <div ><p> id为two class是mini div</p></div>  
29.     <div class="mini"></div>  
30.     <div> id为two class是mini</div>  
31.       
32.     <table border="1" cellspacing="0" width="200">  
33.         <tbody>  
34.             <tr>  
35.                 <td>1</td>  
36.                 <td>1</td>  
37.                 <td></td>  
38.                 <td></td>  
39.             </tr>  
40.         </tbody>  
41.     </table>  
42.       
43.   </body>  
44.   <script language="JavaScript">  
45.     //一、改变含有文本di的背景色  
46.     $("#b1").click(function(){  
47.         $("div:contains(‘di‘)").css("background-color", "green");  
48.     });  
49.       
50.     //二、改变没有文本的背景色  
51.     $("#b2").click(function(){  
52.         $("td:empty").css("background-color", "green");  
53.     });  
54.       
55.     //三、改变含有<p>的div元素的背景色  
56.     $("#b3").click(function(){  
57.         $("div:has(p)").css("background-color", "yellow");  
58.     });  
59.       
60.     //四、改变含有子元素或者文本的div  
61.     $("#b4").click(function(){  
62.         $("div:parent").css("background-color", "yellow");  
63.     });  
64.       
65.     //五、改变不含有文本di的div元素的背景色  
66.     $("#b5").click(function(){  
67.         $("div:not(:contains(di))").css("background-color", "yellow");  
68.     });   
69.   </script>  
70. </html>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>contentFilter_selecter.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <script language="JavaScript" src="http://www.mamicode.com/jquery/jquery-1.4.2.js"></script>	<style>		.mini{			width:100px;			height:50px;			background-color:green;		}	</style>  </head>    <body>    <input type="button" value="http://www.mamicode.com/改变含有文本di的背景色" id="b1" />	<input type="button" value="http://www.mamicode.com/改变没有文本的背景色" id="b2" />	<input type="button" value="http://www.mamicode.com/改变含有
的div元素的背景色" id="b3" />	<input type="button" value="http://www.mamicode.com/改变含有子元素或者文本的div" id="b4" />	<input type="button" value="http://www.mamicode.com/改变不含有文本di的div元素的背景色" id="b5" />		<div> id为one div</div>	<div ><p> id为two class是mini div</p></div>	<div class="mini"></div>	<div> id为two class是mini</div>		<table border="1" cellspacing="0" width="200">		<tbody>			<tr>				<td>1</td>				<td>1</td>				<td></td>				<td></td>			</tr>		</tbody>	</table>	  </body>  <script language="JavaScript">  	//一、改变含有文本di的背景色	$("#b1").click(function(){		$("div:contains(‘di‘)").css("background-color", "green");	});		//二、改变没有文本的背景色	$("#b2").click(function(){		$("td:empty").css("background-color", "green");	});		//三、改变含有<p>的div元素的背景色	$("#b3").click(function(){		$("div:has(p)").css("background-color", "yellow");	});		//四、改变含有子元素或者文本的div	$("#b4").click(function(){		$("div:parent").css("background-color", "yellow");	});		//五、改变不含有文本di的div元素的背景色	$("#b5").click(function(){		$("div:not(:contains(di))").css("background-color", "yellow");	});	  </script></html>

可见度过滤选择器：

[html] view plaincopyprint?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>visiableFilter_selecter.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.       
10.     <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  
11.     <script language="JavaScript" src=http://www.mamicode.com/"../jquery/jquery-1.4.2.js"></script>  
12.     <style type="text/css">  
13.         div.visiable{  
14.             display:none;  
15.         }  
16.     </style>  
17.   </head>  
18.     
19.   <body>  
20.     <input type="button" value=http://www.mamicode.com/"改变所有可见的div的背景色" id="b1" />  
21.     <input type="button" value=http://www.mamicode.com/"选取所有不可见的元素并将他们显示出来" id="b2" />  
22.     <input type="button" value=http://www.mamicode.com/"选取所有的文本影藏" id="b3" />  
23.       
24.     <div>可见</div>  
25.     <div>可见</div>  
26.     <div class="visiable">不可见</div>  
27.     <div class="visiable">不可见</div>  
28.     <div class="visiable">不可见</div>  
29.     <div>可见</div>  
30.       
31.     <input type="hidden" value=http://www.mamicode.com/"hidden1" />  
32.     <input type="hidden" value=http://www.mamicode.com/"hidden2" />  
33.     <input type="hidden" value=http://www.mamicode.com/"hidden3" />  
34.   </body>  
35.   <script language="JavaScript">  
36.     //一、改变所有可见的div的背景色  
37.     $("#b1").click(function(){  
38.         $("div:visible").css("background-color", "yellow");  
39.         $("div").show();  
40.     });  
41.       
42.     //二、选取所有不可见div的元素并将他们显示出来  
43.     $("#b2").click(function(){  
44.         $("div:hidden").show();  
45.     });  
46.       
47.     //三、选取所有的文本影藏,输出值  
48.     $("#b3").click(function(){  
49.         var $inputHid=$("input:hidden");  
50.           
51.         /**  
52.          *   
53.          * @param {Object} 每次遍历的索引  
54.          * @param {Object} domEle  
55.          */  
56.         $inputHid.each(function(index,domEle){  
57.             //jquery中的方法  
58.             //alert($(this).val());  
59.             //alert(index);  
60.             //alert(domEle.value)  
61.             alert($(domEle).val());  
62.         });  
63.           
64.     });  
65.   </script>  
66.     
67. </html>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>visiableFilter_selecter.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->	<script language="JavaScript" src="http://www.mamicode.com/jquery/jquery-1.4.2.js"></script>	<style type="text/css">		div.visiable{			display:none;		}	</style>  </head>    <body>    <input type="button" value="http://www.mamicode.com/改变所有可见的div的背景色" id="b1" />	<input type="button" value="http://www.mamicode.com/选取所有不可见的元素并将他们显示出来" id="b2" />	<input type="button" value="http://www.mamicode.com/选取所有的文本影藏" id="b3" />		<div>可见</div>	<div>可见</div>	<div class="visiable">不可见</div>	<div class="visiable">不可见</div>	<div class="visiable">不可见</div>	<div>可见</div>		<input type="hidden" value="http://www.mamicode.com/hidden1" />	<input type="hidden" value="http://www.mamicode.com/hidden2" />	<input type="hidden" value="http://www.mamicode.com/hidden3" />  </body>  <script language="JavaScript">  	//一、改变所有可见的div的背景色	$("#b1").click(function(){		$("div:visible").css("background-color", "yellow");		$("div").show();	});		//二、选取所有不可见div的元素并将他们显示出来	$("#b2").click(function(){		$("div:hidden").show();	});		//三、选取所有的文本影藏,输出值	$("#b3").click(function(){		var $inputHid=$("input:hidden");				/**		 * 		 * @param {Object} 每次遍历的索引		 * @param {Object} domEle		 */		$inputHid.each(function(index,domEle){			//jquery中的方法			//alert($(this).val());			//alert(index);			//alert(domEle.value)			alert($(domEle).val());		});			});  </script>  </html>

属性过滤选择器：

[html] view plaincopyprint?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>AttributeFilter_selecter.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.       
10.     <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  
11.     <script language="JavaScript" src=http://www.mamicode.com/"../jquery/jquery-1.4.2.js"></script>  
12.   </head>  
13.     
14.   <body>  
15.     <input type="button" value=http://www.mamicode.com/"改变含有属性title的div" id="b1" />  
16.     <input type="button" value=http://www.mamicode.com/"改变不含属性title的div" id="b2" />  
17.     <input type="button" value=http://www.mamicode.com/"属性title等于test的div元素" id="b3" />  
18.     <input type="button" value=http://www.mamicode.com/"属性title不等于test的div元素" id="b4" />  
19.     <input type="button" value=http://www.mamicode.com/"含有title但是title!=test" id="b5" />  
20.     <input type="button" value=http://www.mamicode.com/"属性title是以te开头的div元素" id="b6" />  
21.     <input type="button" value=http://www.mamicode.com/"属性title是以est结尾的div元素" id="b7" />  
22.     <input type="button" value=http://www.mamicode.com/"属性title包含es的div元素" id="b8" />  
23.     <input type="button" value=http://www.mamicode.com/"选取有属性id的div元素  然后在结果中选取属性title值含有es的div元素" id="b9" />  
24.       
25.     <div title="test01"> div title=test01</div>  
26.     <div> div </div>  
27.     <div title="test"> div title=test</div>  
28.     <div title="test" id="1"> div title=test</div>  
29.     <div> div</div>  
30.     <div title="01" id="1"> div title=01</div>  
31.     <div title="01est" id="1"> div title=01est</div>  
32.   </body>  
33.     <script language="JavaScript">  
34.         //一、改变含有属性title的div  
35.         $("#b1").click(function(){  
36.             $("div[title]").css("background-color", "yellow");  
37.         });  
38.           
39.           
40.         //二、改变不含属性title的div  
41.         $("#b2").click(function(){  
42.             $("div:not([title])").css("background-color", "yellow");  
43.         });  
44.           
45.         //三、属性title等于test的div元素  
46.         $("#b3").click(function(){  
47.             $("div[title=‘test‘]").css("background-color", "yellow");  
48.         });  
49.           
50.         //四、属性title不等于test的div元素     不含title或者含有title但不等于test的  
51.         $("#b4").click(function(){  
52.             $("div[title!=‘test‘]").css("background-color", "yellow");  
53.         });  
54.           
55.         //五、含有title但是title!=test  
56.         $("#b5").click(function(){  
57.             $("div[title][title!=test]").css("background-color", "yellow");  
58.         });  
59.           
60.         //六、属性title是以te开头的div元素  
61.         $("#b6").click(function(){  
62.             $("div[title^=te]").css("background-color", "yellow");  
63.         });  
64.           
65.         //七、属性title是以est结尾的div元素  
66.         $("#b7").click(function(){  
67.             $("div[title$=est]").css("background-color", "yellow");  
68.         });  
69.           
70.         //八、属性title包含es的div元素  
71.         $("#b8").click(function(){  
72.             $("div[title*=es]").css("background-color", "yellow");  
73.         });  
74.           
75.         //九、选取有属性id的div元素  然后在结果中选取属性title值含有es的div元素  
76.         $("#b9").click(function(){  
77.             $("div[id][title*=‘es‘]").css("background-color", "yellow");  
78.         });  
79.           
80.           
81.     </script>  
82. </html>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>AttributeFilter_selecter.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->	<script language="JavaScript" src="http://www.mamicode.com/jquery/jquery-1.4.2.js"></script>  </head>    <body>    <input type="button" value="http://www.mamicode.com/改变含有属性title的div" id="b1" />	<input type="button" value="http://www.mamicode.com/改变不含属性title的div" id="b2" />	<input type="button" value="http://www.mamicode.com/属性title等于test的div元素" id="b3" />	<input type="button" value="http://www.mamicode.com/属性title不等于test的div元素" id="b4" />	<input type="button" value="http://www.mamicode.com/含有title但是title!=test" id="b5" />	<input type="button" value="http://www.mamicode.com/属性title是以te开头的div元素" id="b6" />	<input type="button" value="http://www.mamicode.com/属性title是以est结尾的div元素" id="b7" />	<input type="button" value="http://www.mamicode.com/属性title包含es的div元素" id="b8" />	<input type="button" value="http://www.mamicode.com/选取有属性id的div元素  然后在结果中选取属性title值含有es的div元素" id="b9" />		<div title="test01"> div title=test01</div>	<div> div </div>	<div title="test"> div title=test</div>	<div title="test" id="1"> div title=test</div>	<div> div</div>	<div title="01" id="1"> div title=01</div>	<div title="01est" id="1"> div title=01est</div>  </body> 	<script language="JavaScript"> 		//一、改变含有属性title的div		$("#b1").click(function(){			$("div[title]").css("background-color", "yellow");		});						//二、改变不含属性title的div		$("#b2").click(function(){			$("div:not([title])").css("background-color", "yellow");		});				//三、属性title等于test的div元素		$("#b3").click(function(){			$("div[title=‘test‘]").css("background-color", "yellow");		});				//四、属性title不等于test的div元素     不含title或者含有title但不等于test的		$("#b4").click(function(){			$("div[title!=‘test‘]").css("background-color", "yellow");		});				//五、含有title但是title!=test		$("#b5").click(function(){			$("div[title][title!=test]").css("background-color", "yellow");		});				//六、属性title是以te开头的div元素		$("#b6").click(function(){			$("div[title^=te]").css("background-color", "yellow");		});				//七、属性title是以est结尾的div元素		$("#b7").click(function(){			$("div[title$=est]").css("background-color", "yellow");		});				//八、属性title包含es的div元素		$("#b8").click(function(){			$("div[title*=es]").css("background-color", "yellow");		});				//九、选取有属性id的div元素  然后在结果中选取属性title值含有es的div元素		$("#b9").click(function(){			$("div[id][title*=‘es‘]").css("background-color", "yellow");		});				 	</script></html>

子元素过滤选择器：

选取下列元素,改变其背景色为 #0000FF 每个class为one的div父元素下的第2个子元素. 每个class为one的div父元素下的第一个子元素 每个class为one的div父元素下的最后一个子元素 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素

[html] view plaincopyprint?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>AttributeFilter_selecter.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.       
10.     <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  
11.     <script language="JavaScript" src=http://www.mamicode.com/"../jquery/jquery-1.4.2.js"></script>  
12.   </head>  
13.     
14.   <body>  
15.     <input type="button" value=http://www.mamicode.com/"每个class为one的div父元素下的第二个子元素" id="b1" />  
16.     <input type="button" value=http://www.mamicode.com/"每个class为one的div父元素下的第1个子元素" id="b2" />  
17.     <input type="button" value=http://www.mamicode.com/"每个class为one的div父元素下的最后一个子元素" id="b3" />  
18.     <input type="button" value=http://www.mamicode.com/"找到class为one的且只有一个子元素的div" id="b4" />  
19.     <input type="button" value=http://www.mamicode.com/"含有title但是title!=test" id="b5" />  
20.     <input type="button" value=http://www.mamicode.com/"属性title是以te开头的div元素" id="b6" />  
21.     <input type="button" value=http://www.mamicode.com/"属性title是以est结尾的div元素" id="b7" />  
22.     <input type="button" value=http://www.mamicode.com/"属性title包含es的div元素" id="b8" />  
23.     <input type="button" value=http://www.mamicode.com/"选取有属性id的div元素  然后在结果中选取属性title值含有es的div元素" id="b9" />  
24.       
25.     <div class="one"> div1　　　<font>one</font>　　　<font>two</font>　　　<font>three</font></div>  
26.     <div class="one"> div2　　　<font>one</font></div>  
27.     <div class="one"> div3　　　<font>one</font></div>  
28.     <div class="one"> div4</div>  
29.     <div class="one"> div5</div>  
30.     <div class="one1"> div5　　　<font>one</font>　　　<font>two</font></div>  
31.       
32.   </body>  
33.     <script language="JavaScript">  
34.         //一、每个class为one的div父元素下的第2个子元素  
35.         $("#b1").click(function(){  
36.             $("div[class=‘one‘] :nth-child(2)").css("background-color", "yellow");  
37.         });  
38.           
39.         //二、每个class为one的div父元素下的第1个子元素  
40.         /*法一  
41.         $("#b2").click(function(){  
42.             $("div[class=‘one‘] :nth-child(1)").css("background-color", "yellow");  
43.         });  
44.         */  
45.         //法二  
46.         $("#b2").click(function(){  
47.             $("div[class=‘one‘] :first-child").css("background-color", "yellow");  
48.         });  
49.           
50.         //三、每个class为one的div父元素下的最后一个子元素  
51.         $("#b3").click(function(){  
52.             $("div[class=‘one‘] :last-child").css("background-color", "yellow");  
53.         });  
54.           
55.         //四、找到class为one的且只有一个子元素的div  
56.         $("#b4").click(function(){  
57.             $("div[class=‘one‘] :only-child").css("background-color", "yellow");  
58.         });  
59.           
60.           
61.     </script>  
62. </html>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>AttributeFilter_selecter.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->	<script language="JavaScript" src="http://www.mamicode.com/jquery/jquery-1.4.2.js"></script>  </head>    <body>    <input type="button" value="http://www.mamicode.com/每个class为one的div父元素下的第二个子元素" id="b1" />	<input type="button" value="http://www.mamicode.com/每个class为one的div父元素下的第1个子元素" id="b2" />	<input type="button" value="http://www.mamicode.com/每个class为one的div父元素下的最后一个子元素" id="b3" />	<input type="button" value="http://www.mamicode.com/找到class为one的且只有一个子元素的div" id="b4" />	<input type="button" value="http://www.mamicode.com/含有title但是title!=test" id="b5" />	<input type="button" value="http://www.mamicode.com/属性title是以te开头的div元素" id="b6" />	<input type="button" value="http://www.mamicode.com/属性title是以est结尾的div元素" id="b7" />	<input type="button" value="http://www.mamicode.com/属性title包含es的div元素" id="b8" />	<input type="button" value="http://www.mamicode.com/选取有属性id的div元素  然后在结果中选取属性title值含有es的div元素" id="b9" />		<div class="one"> div1　　　<font>one</font>　　　<font>two</font>　　　<font>three</font></div>	<div class="one"> div2　　　<font>one</font></div>	<div class="one"> div3　　　<font>one</font></div>	<div class="one"> div4</div>	<div class="one"> div5</div>	<div class="one1"> div5　　　<font>one</font>　　　<font>two</font></div>	  </body> 	<script language="JavaScript"> 		//一、每个class为one的div父元素下的第2个子元素		$("#b1").click(function(){			$("div[class=‘one‘] :nth-child(2)").css("background-color", "yellow");		});				//二、每个class为one的div父元素下的第1个子元素		/*法一		$("#b2").click(function(){			$("div[class=‘one‘] :nth-child(1)").css("background-color", "yellow");		});		*/		//法二		$("#b2").click(function(){			$("div[class=‘one‘] :first-child").css("background-color", "yellow");		});				//三、每个class为one的div父元素下的最后一个子元素		$("#b3").click(function(){			$("div[class=‘one‘] :last-child").css("background-color", "yellow");		});				//四、找到class为one的且只有一个子元素的div		$("#b4").click(function(){			$("div[class=‘one‘] :only-child").css("background-color", "yellow");		});				 	</script></html>

 

表单对象属性过滤选择器：

此选择器主要对所选择的表单元素进行过滤 1、:enabled 用法: $(”input:enabled”)    返回值  集合元素       说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦. 2、:disabled 用法: $(”input:disabled”)    返回值  集合元素       说明: 匹配所有不可用元素.与上面的那个是相对应的. 3、:checked 用法: $(”input:checked”)   返回值  集合元素       说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口. 4、:selected 用法: $(”select option:selected”)   返回值  集合元素        说明: 匹配所有选中的option元素.

 

表单属性过滤选择器：

利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值 利用 jQuery 对象的 length 属性获取多选框选中的个数 利用 jQuery 对象的 text() 方法获取下拉框选中的内容

[html] view plaincopyprint?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>AttributeFilter_selecter.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.       
10.     <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  
11.     <script language="JavaScript" src=http://www.mamicode.com/"../jquery/jquery-1.4.2.js"></script>  
12.   </head>  
13.     
14.   <body>  
15.     <input type="button" value=http://www.mamicode.com/"取出可用的input" id="b1" />  
16.     <input type="button" value=http://www.mamicode.com/"取出不可用的input" id="b2" />  
17.     <input type="button" value=http://www.mamicode.com/"利用jquery的length属性获取多选框选中的个数" id="b3" />  
18.     <input type="button" value=http://www.mamicode.com/"输出被选中的多选框的值" id="b4" />  
19.     <input type="button" value=http://www.mamicode.com/"用jquery的text方法获取下拉选的结果" id="b5" />  
20.       
21.       
22.     <input type="text" value=http://www.mamicode.com/"可用" />  
23.     <input type="text" value=http://www.mamicode.com/"不可用" disabled="true" />  
24.     <input type="text" value=http://www.mamicode.com/"不可用" disabled="true" />  
25.     <input type="text" value=http://www.mamicode.com/"可用" />  
26.     <input type="text" value=http://www.mamicode.com/"可用" />  
27.       
28.     <input type="checkbox" name="lang" value=http://www.mamicode.com/"java"/>java  
29.     <input type="checkbox" name="lang" value=http://www.mamicode.com/"c"/>c  
30.     <input type="checkbox" name="lang" value=http://www.mamicode.com/"c#"/>c#  
31.       
32.     <select name="">  
33.         <option value=http://www.mamicode.com/"">--请选择--</option>  
34.         <option value=http://www.mamicode.com/"选项一">选项一</option>  
35.         <option value=http://www.mamicode.com/"选项二">选项二</option>  
36.         <option value=http://www.mamicode.com/"选项三">选项三</option>  
37.     </select>  
38.       
39.   </body>  
40.     <script language="JavaScript">  
41.         //一、取出可用的input  
42.         $("#b1").click(function(){            
43.             $("input[type=‘text‘]:enabled").val("xxxxxxxxxxxx");  
44.         })  
45.           
46.         //二、取出不可用的input  
47.         $("#b2").click(function(){            
48.             $("input[type=‘text‘]:disabled").val("xxxxxxxxxxxx");  
49.         })  
50.           
51.         //三、利用jquery的length属性获取多选框选中的个数  
52.         $("#b3").click(function(){            
53.             var len=$("input[type=‘checkbox‘]:checked").length;  
54.             alert(len);  
55.         })  
56.           
57.         //四、输出被选中的多选框的值  
58.         $("#b4").click(function(){            
59.             $.each($("input[type=‘checkbox‘]:checked"),function(index, domEle){  
60.                 alert($(domEle).val());  
61.             });  
62.         })  
63.           
64.         //五、用jquery的text方法获取下拉选的结果  
65.         $("#b5").click(function(){            
66.             var val=$("select option:selected").text();           
67.             alert(val);  
68.         })  
69.           
70.     </script>  
71. </html>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>AttributeFilter_selecter.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->	<script language="JavaScript" src="http://www.mamicode.com/jquery/jquery-1.4.2.js"></script>  </head>    <body>    <input type="button" value="http://www.mamicode.com/取出可用的input" id="b1" />	<input type="button" value="http://www.mamicode.com/取出不可用的input" id="b2" />	<input type="button" value="http://www.mamicode.com/利用jquery的length属性获取多选框选中的个数" id="b3" />	<input type="button" value="http://www.mamicode.com/输出被选中的多选框的值" id="b4" />	<input type="button" value="http://www.mamicode.com/用jquery的text方法获取下拉选的结果" id="b5" />			<input type="text" value="http://www.mamicode.com/可用" />	<input type="text" value="http://www.mamicode.com/不可用" disabled="true" />	<input type="text" value="http://www.mamicode.com/不可用" disabled="true" />	<input type="text" value="http://www.mamicode.com/可用" />	<input type="text" value="http://www.mamicode.com/可用" />		<input type="checkbox" name="lang" value="http://www.mamicode.com/java"/>java	<input type="checkbox" name="lang" value="http://www.mamicode.com/c"/>c	<input type="checkbox" name="lang" value="http://www.mamicode.com/c#"/>c#		<select name="">		<option value="">--请选择--</option>		<option value="http://www.mamicode.com/选项一">选项一</option>		<option value="http://www.mamicode.com/选项二">选项二</option>		<option value="http://www.mamicode.com/选项三">选项三</option>	</select>	  </body> 	<script language="JavaScript"> 		//一、取出可用的input		$("#b1").click(function(){						$("input[type=‘text‘]:enabled").val("xxxxxxxxxxxx");		})				//二、取出不可用的input		$("#b2").click(function(){						$("input[type=‘text‘]:disabled").val("xxxxxxxxxxxx");		})				//三、利用jquery的length属性获取多选框选中的个数		$("#b3").click(function(){						var len=$("input[type=‘checkbox‘]:checked").length;			alert(len);		})				//四、输出被选中的多选框的值		$("#b4").click(function(){						$.each($("input[type=‘checkbox‘]:checked"),function(index, domEle){				alert($(domEle).val());			});		})				//五、用jquery的text方法获取下拉选的结果		$("#b5").click(function(){						var val=$("select option:selected").text();						alert(val);		})		 	</script></html>

表单选择器：

1、:input 用法: $(”:input”) ;   返回值  集合元素       说明:匹配所有 input, textarea, select 和 button 元素  2、:text 用法: $(”:text”) ;  返回值  集合元素       说明: 匹配所有的单行文本框. 3、:password 用法: $(”:password”) ; 返回值  集合元素       说明: 匹配所有密码框. 4、:radio 用法: $(”:radio”) ; 返回值  集合元素      说明: 匹配所有单选按钮. 5、:checkbox 用法: $(”:checkbox”) ; 返回值  集合元素       说明: 匹配所有复选框 6、:submit 用法: $(”:submit”) ;   返回值  集合元素       说明: 匹配所有提交按钮.

7、:image 用法: $(”:image”)   返回值  集合元素       说明: 匹配所有图像域. 8、:reset 用法: $(”:reset”) ;  返回值  集合元素       说明: 匹配所有重置按钮. 9、:button 用法: $(”:button”) ;  返回值  集合元素       说明: 匹配所有按钮.这个包括直接写的元素button. 10、:file 用法: $(”:file”) ;  返回值  集合元素      说明: 匹配所有文件域. 11、:hidden 用法: $(”input:hidden”) ; 返回值  集合元素       说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.       注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,

 

jQuery中的DOM操作

DOM(Document Object Model—文档对象模型)：一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件 DOM 操作的分类: DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML HTML DOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时,　有许多专属于 HTML-DOM 的属性 CSS-DOM:针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性

 

内部插入节点：

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

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

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

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

 

案例：

[html] view plaincopyprint?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>inner_insert.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.       
10.     <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  
11.   
12.   <script language="JavaScript" src=http://www.mamicode.com/"../jquery/jquery-1.4.2.js"></script>  
13.   </head>  
14.     
15.   <body>  
16.     <input type="button" value=http://www.mamicode.com/"反恐放到重庆后" id="b1" />  
17.     <input type="button" value=http://www.mamicode.com/"反恐放到重庆后" id="b2" />  
18.     <input type="button" value=http://www.mamicode.com/"反恐放到city第一位" id="b3" />  
19.     <input type="button" value=http://www.mamicode.com/"反恐放到city第一位" id="b4" />  
20.       
21.       
22.     <br>  
23.     您喜欢的城市:<br>  
24.     <ul id="city">  
25.         <li id="bj" value=http://www.mamicode.com/"beijing">北京</li>  
26.         <li id="sh" value=http://www.mamicode.com/"shanghai">上海</li>  
27.         <li id="cq" value=http://www.mamicode.com/"chongqing">重庆</li>  
28.     </ul>  
29.     您喜欢的游戏:<br>  
30.     <ul id="love">  
31.         <li id="ms" value=http://www.mamicode.com/"moshou">魔兽</li>    
32.         <li id="fk" value=http://www.mamicode.com/"fankong">反恐</li>  
33.     </ul>  
34.       
35.   </body>  
36.     
37.   <script language="JavaScript">  
38.     //一、反恐放到重庆后  
39.     $("#b1").click(function(){            
40.             $("#city").append($("#fk"));  
41.     })  
42.       
43.     //二、反恐放到重庆后  
44.     $("#b2").click(function(){    
45.             $("#fk").appendTo("#city");  
46.     })  
47.       
48.     //三、反恐放到city第一位  
49.     $("#b3").click(function(){    
50.             $("#city").prepend($("#fk"));  
51.     })  
52.       
53.     //四、反恐放到city第一位  
54.     $("#b4").click(function(){    
55.             $("#fk").prependTo("#city");  
56.     })  
57.       
58.   </script>  
59.     
60. </html>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>inner_insert.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  <script language="JavaScript" src="http://www.mamicode.com/jquery/jquery-1.4.2.js"></script>  </head>    <body>    <input type="button" value="http://www.mamicode.com/反恐放到重庆后" id="b1" />    <input type="button" value="http://www.mamicode.com/反恐放到重庆后" id="b2" />	<input type="button" value="http://www.mamicode.com/反恐放到city第一位" id="b3" />	<input type="button" value="http://www.mamicode.com/反恐放到city第一位" id="b4" />			<br>	您喜欢的城市:<br>	<ul id="city">		<li id="bj" value="http://www.mamicode.com/beijing">北京</li>		<li id="sh" value="http://www.mamicode.com/shanghai">上海</li>		<li id="cq" value="http://www.mamicode.com/chongqing">重庆</li>	</ul>	您喜欢的游戏:<br>	<ul id="love">		<li id="ms" value="http://www.mamicode.com/moshou">魔兽</li>			<li id="fk" value="http://www.mamicode.com/fankong">反恐</li>	</ul>	  </body>    <script language="JavaScript">  	//一、反恐放到重庆后	$("#b1").click(function(){						$("#city").append($("#fk"));	})		//二、反恐放到重庆后	$("#b2").click(function(){				$("#fk").appendTo("#city");	})		//三、反恐放到city第一位	$("#b3").click(function(){				$("#city").prepend($("#fk"));	})		//四、反恐放到city第一位	$("#b4").click(function(){				$("#fk").prependTo("#city");	})	  </script>  </html>

 

外部插入节点：

 

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

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

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

insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面以上方法不但能将新创建的 DOM 元素插入到

档中, 也能对原有的 DOM 元素进行移动.

 

案例：

 

[html] view plaincopyprint?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>outer_insert.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.       
10.     <script language="JavaScript" src=http://www.mamicode.com/"../jquery/jquery-1.4.2.js"></script>  
11.   </head>  
12.     
13.   <body>  
14.     <input type="button" value=http://www.mamicode.com/"将p2移动到重庆后" id="b1" />  
15.     <input type="button" value=http://www.mamicode.com/"将p2移动到北京之前" id="b2" />  
16.     <input type="button" value=http://www.mamicode.com/"将p2移动到重庆后" id="b3" />  
17.     <input type="button" value=http://www.mamicode.com/"将p2移动到北京之前" id="b4" />  
18.       
19.       
20.     <br>  
21.     您喜欢的城市:<br>  
22.     <ul id="city">  
23.         <li id="bj" value=http://www.mamicode.com/"beijing">北京</li>  
24.         <li id="sh" value=http://www.mamicode.com/"shanghai">上海</li>  
25.         <li id="cq" value=http://www.mamicode.com/"chongqing">重庆</li>  
26.     </ul>  
27.       
28.     <p id="p3">p3</p>  
29.     <p id="p2">p2</p>  
30.     <p id="p1">p1</p>  
31.       
32.   </body>  
33.     
34.   <script language="JavaScript">  
35.     //一、after  将p2移动到重庆后  
36.     $("#b1").click(function(){            
37.         $("#city").after($("#p2"));  
38.     })  
39.       
40.     //二、将p2移动到北京之前  
41.     $("#b2").click(function(){            
42.         $("#city").before($("#p2"));  
43.     })  
44.       
45.     //三、after  将p2移动到重庆后  
46.     $("#b3").click(function(){            
47.         $("#p2").insertAfter($("#city"));  
48.     })  
49.       
50.     //四、将p2移动到北京之前  
51.     $("#b4").click(function(){            
52.         $("#p2").insertBefore("#city");  
53.     })  
54.       
55.   </script>  
56.     
57.     
58. </html>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>outer_insert.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">       	<script language="JavaScript" src="http://www.mamicode.com/jquery/jquery-1.4.2.js"></script>  </head>    <body>    <input type="button" value="http://www.mamicode.com/将p2移动到重庆后" id="b1" />	<input type="button" value="http://www.mamicode.com/将p2移动到北京之前" id="b2" />	<input type="button" value="http://www.mamicode.com/将p2移动到重庆后" id="b3" />	<input type="button" value="http://www.mamicode.com/将p2移动到北京之前" id="b4" />    		<br>	您喜欢的城市:<br>	<ul id="city">		<li id="bj" value="http://www.mamicode.com/beijing">北京</li>		<li id="sh" value="http://www.mamicode.com/shanghai">上海</li>		<li id="cq" value="http://www.mamicode.com/chongqing">重庆</li>	</ul>		<p id="p3">p3</p>	<p id="p2">p2</p>	<p id="p1">p1</p>	  </body>    <script language="JavaScript">  	//一、after  将p2移动到重庆后	$("#b1").click(function(){					$("#city").after($("#p2"));	})		//二、将p2移动到北京之前	$("#b2").click(function(){					$("#city").before($("#p2"));	})		//三、after  将p2移动到重庆后	$("#b3").click(function(){					$("#p2").insertAfter($("#city"));	})		//四、将p2移动到北京之前	$("#b4").click(function(){					$("#p2").insertBefore("#city");	})	  </script>    </html>

 

查找节点：

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

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

创建节点

使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回. 注意:  动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;  当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“</P>”) 创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建

 

案例：

[html] view plaincopyprint?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>geAttri.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.       
10.     <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  
11.     <script language="JavaScript" src=http://www.mamicode.com/"../jquery/jquery-1.4.2.js"></script>  
12.   </head>  
13.     
14.   <body>  
15.     <input type="button" value=http://www.mamicode.com/"创建上海节点并追加到天津后面" id="b2" />  
16.       
17.       
18.     <br>  
19.     <ul id="city">  
20.         <li id="bj" name="beijing">北京</li>  
21.         <li id="tj" name="tianjing">天津</li>  
22.     </ul>  
23.   </body>  
24.     
25.   <script language="JavaScript">  
26.     //二、创建上海节点并追加到天津后面  
27.     $("#b2").click(function(){            
28.             var $shEle=$("<li id=‘sh‘ name=‘shanghai‘>上海</li>");  
29.             $("#city").append($shEle);  
30.               
31.               
32.             //添加大连  
33.             var $dlEle=$("<li></li>");  
34.             $dlEle.attr("id", "dl");  
35.             $dlEle.attr("name", "dalian");  
36.               
37.             $dlEle.text("大连");  
38.               
39.             $("#city").append($dlEle);  
40.               
41.     })  
42.       
43.       
44.       
45.     //三、  
46.       
47.       
48.   </script>  
49.     
50. </html>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>geAttri.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->	<script language="JavaScript" src="http://www.mamicode.com/jquery/jquery-1.4.2.js"></script>  </head>    <body>	<input type="button" value="http://www.mamicode.com/创建上海节点并追加到天津后面" id="b2" />			<br>    <ul id="city">    	<li id="bj" name="beijing">北京</li>		<li id="tj" name="tianjing">天津</li>    </ul>  </body>    <script language="JavaScript">	//二、创建上海节点并追加到天津后面	$("#b2").click(function(){						var $shEle=$("<li id=‘sh‘ name=‘shanghai‘>上海</li>");			$("#city").append($shEle);									//添加大连			var $dlEle=$("<li></li>");			$dlEle.attr("id", "dl");			$dlEle.attr("name", "dalian");						$dlEle.text("大连");						$("#city").append($dlEle);				})				//三、		  </script>  </html>

 

删除节点：

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

 

案例：

[html] view plaincopyprint?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>geAttri.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.       
10.     <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  
11.     <script language="JavaScript" src=http://www.mamicode.com/"../jquery/jquery-1.4.2.js"></script>  
12.   </head>  
13.     
14.   <body>  
15.     <input type="button" value=http://www.mamicode.com/"删除北京节点 " id="b1" />  
16.     <input type="button" value=http://www.mamicode.com/"清除city下所有节点 " id="b2" />  
17.     <br>  
18.     <ul id="city">  
19.         <li id="bj" name="beijing">北京　　<font>font</font></li>  
20.         <li id="tj" name="tianjing">天津</li>  
21.     </ul>  
22.       
23.       
24.     <p>hello</p> how ara <p>you</p>  
25.       
26.   </body>  
27.     
28.   <script language="JavaScript">  
29.     //一、删除北京节点  
30.     $("#b1").click(function(){  
31.         $("#bj").remove();  
32.     })  
33.       
34.       
35.     //二、清除city下所有节点  
36.     $("#b2").click(function(){  
37.         $("#city").empty();  
38.           
39.         alert($("#city").attr("id"));  
40.     })  
41.       
42.   </script>  
43.     
44. </html>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>geAttri.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->	<script language="JavaScript" src="http://www.mamicode.com/jquery/jquery-1.4.2.js"></script>  </head>    <body>  	<input type="button" value="http://www.mamicode.com/删除北京节点" id="b1" />	<input type="button" value="http://www.mamicode.com/清除city下所有节点" id="b2" />	<br>    <ul id="city">    	<li id="bj" name="beijing">北京　　<font>font</font></li>		<li id="tj" name="tianjing">天津</li>    </ul>			<p>hello</p> how ara <p>you</p>	  </body>    <script language="JavaScript">	//一、删除北京节点	$("#b1").click(function(){		$("#bj").remove();	})			//二、清除city下所有节点	$("#b2").click(function(){		$("#city").empty();				alert($("#city").attr("id"));	})	  </script>  </html>

 

复制节点：

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

[html] view plaincopyprint?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>clone.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.       
10.     <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  
11.     <script language="JavaScript" src=http://www.mamicode.com/"../jquery/jquery-1.4.2.js"></script>  
12.   </head>  
13.     
14.   <body>  
15.     <button>保存</button><br><br><br>  
16.     <p>段落</p>  
17.       
18.   </body>  
19.   <script language="JavaScript">  
20.     $("button").click(function(){  
21.         alert(1);  
22.     })  
23.       
24.     //克隆button并追加到P上 但事件不克隆  
25.     //$("button").clone().appendTo($("p"));  
26.       
27.     //克隆button并追加到P上 克隆事件  
28.     $("button").clone(true).appendTo($("p"));  
29.       
30.   </script>  
31.     
32. </html>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>clone.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->	<script language="JavaScript" src="http://www.mamicode.com/jquery/jquery-1.4.2.js"></script>  </head>    <body>    <button>保存</button><br><br><br>	<p>段落</p>	  </body>  <script language="JavaScript">  	$("button").click(function(){		alert(1);	})		//克隆button并追加到P上 但事件不克隆	//$("button").clone().appendTo($("p"));		//克隆button并追加到P上 克隆事件	$("button").clone(true).appendTo($("p"));	  </script>  </html>

 

替换节点：

replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素 replaceAll(): 颠倒了的 replaceWith() 方法. 注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失

案例：

[html] view plaincopyprint?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>replce.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.       
10.     <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  
11.     <script language="JavaScript" src=http://www.mamicode.com/"../jquery/jquery-1.4.2.js"></script>  
12.   </head>  
13.     
14.   <body>  
15.     <button>保存</button><br><br><br>  
16.     <p>段落</p>  
17.     <p>段落</p>  
18.     <p>段落</p>  
19.       
20.   </body>  
21.   <script language="JavaScript">  
22.     $("button").click(function(){  
23.         alert(1);  
24.     })  
25.       
26.     //用p替换button    
27.     //$("p").replaceWith($("<button>保存</button>"));  
28.       
29.     //$("p").replaceWith($("button"));  
30.       
31.       
32.     $("<button>保存</button>").replaceAll($("p"));  
33.       
34.       
35.   </script>  
36. </html>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>replce.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->	<script language="JavaScript" src="http://www.mamicode.com/jquery/jquery-1.4.2.js"></script>  </head>    <body>    <button>保存</button><br><br><br>	<p>段落</p>	<p>段落</p>	<p>段落</p>	  </body>  <script language="JavaScript">  	$("button").click(function(){		alert(1);	})	  	//用p替换button  	//$("p").replaceWith($("<button>保存</button>"));		//$("p").replaceWith($("button"));			$("<button>保存</button>").replaceAll($("p"));		  </script></html>

 

属性操作：

attr(): 获取属性和设置属性 当为该方法传递一个参数时, 即为某元素的获取指定属性 当为该方法传递两个参数时, 即为某元素设置指定属性的值 jQuery中有很多方法都是一个函数实现获取和设置.如:attr(), html(), text(), val(),height(), width(), css() 等. removeAttr(): 删除指定元素的指定属性

 

案例：

[html] view plaincopyprint?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>check.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.       
10.     <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  
11.     <script language="JavaScript" src=http://www.mamicode.com/"../jquery/jquery-1.4.2.js"></script>  
12.   </head>  
13.     
14.   <body>  
15.     您的爱好：  
16.         <br>  
17.         <input type="checkbox" name="checkItems" id="checkItems" value=http://www.mamicode.com/"全选/全不选" />全选/全不选  
18.         <br>  
19.             <input type="checkbox" name="itmes" value=http://www.mamicode.com/"足球" />足球  
20.             <input type="checkbox" name="itmes" value=http://www.mamicode.com/"篮球" />篮球  
21.             <input type="checkbox" name="itmes" value=http://www.mamicode.com/"游泳" />游泳  
22.             <input type="checkbox" name="itmes" value=http://www.mamicode.com/"唱歌" />唱歌    
23.             <br>  
24.             <input type="button" name="checkall" id="checkall" value=http://www.mamicode.com/"全选" />  
25.             <input type="button" name="checkall" id="checkallNo" value=http://www.mamicode.com/"全不选" />  
26.             <input type="button" name="checkall" id="checkRevese" value=http://www.mamicode.com/"反选" />  
27.   </body>  
28.    
29.   <script language="JavaScript">  
30.       
31.     //<input type="button" name="checkall" id="checkall" value=http://www.mamicode.com/"全选" />  
32.     $("#checkall").click(function(){      
33.         $("input[type=‘checkbox‘]").attr("checked", "checked");  
34.     })  
35.       
36.     //<input type="button" name="checkall" id="checkallNo" value=http://www.mamicode.com/"全不选" />  
37.     $("#checkallNo").click(function(){  
38.         $("input[type=‘checkbox‘]").removeAttr("checked");  
39.     })  
40.       
41.     //<input type="button" name="checkall" id="checkRevese" value=http://www.mamicode.com/"反选" />  
42.     $("#checkRevese").click(function(){  
43.         $("input[name=‘itmes‘]").each(function(index, domEle){  
44.             if ($(domEle).attr("checked")){  
45.                 $(domEle).removeAttr("checked");  
46.             }else{  
47.                  $(domEle).attr("checked", "true");  
48.             }  
49.         })        
50.     })  
51.       
52.     //<input type="checkbox" name="checkItems" id="checkItems" value=http://www.mamicode.com/"全选/全不选" />全选/全不选  
53.     $("#checkItems").change(function(){  
54.         if($(this).attr("checked")){  
55.             $("input:[name=‘itmes‘]").attr("checked", "checked");  
56.               
57.         }else{  
58.             $("input:[name=‘itmes‘]").removeAttr("checked");              
59.         }  
60.     })  
61.       
62.   </script>  
63.     
64. </html>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>check.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->	<script language="JavaScript" src="http://www.mamicode.com/jquery/jquery-1.4.2.js"></script>  </head>    <body> 	您的爱好：		<br>		<input type="checkbox" name="checkItems" id="checkItems" value="http://www.mamicode.com/全选/全不选" />全选/全不选		<br>			<input type="checkbox" name="itmes" value="http://www.mamicode.com/足球" />足球			<input type="checkbox" name="itmes" value="http://www.mamicode.com/篮球" />篮球			<input type="checkbox" name="itmes" value="http://www.mamicode.com/游泳" />游泳			<input type="checkbox" name="itmes" value="http://www.mamicode.com/唱歌" />唱歌  			<br>			<input type="button" name="checkall" id="checkall" value="http://www.mamicode.com/全选" />			<input type="button" name="checkall" id="checkallNo" value="http://www.mamicode.com/全不选" />			<input type="button" name="checkall" id="checkRevese" value="http://www.mamicode.com/反选" />  </body>   <script language="JavaScript">  	  	//<input type="button" name="checkall" id="checkall" value="http://www.mamicode.com/全选" />	$("#checkall").click(function(){			$("input[type=‘checkbox‘]").attr("checked", "checked");	})		//<input type="button" name="checkall" id="checkallNo" value="http://www.mamicode.com/全不选" />	$("#checkallNo").click(function(){		$("input[type=‘checkbox‘]").removeAttr("checked");	})		//<input type="button" name="checkall" id="checkRevese" value="http://www.mamicode.com/反选" /> 	$("#checkRevese").click(function(){		$("input[name=‘itmes‘]").each(function(index, domEle){			if ($(domEle).attr("checked")){				$(domEle).removeAttr("checked");			}else{		         $(domEle).attr("checked", "true");			}		})			})		//<input type="checkbox" name="checkItems" id="checkItems" value="http://www.mamicode.com/全选/全不选" />全选/全不选	$("#checkItems").change(function(){		if($(this).attr("checked")){			$("input:[name=‘itmes‘]").attr("checked", "checked");					}else{			$("input:[name=‘itmes‘]").removeAttr("checked");					}	})	  </script>  </html>

 

样式操作：

获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成. 追加样式: addClass() 移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class 切换样式: toggleClass()  --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它. 判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false

案例：

[html] view plaincopyprint?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>class.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.       
10.     <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  
11.     <script language="JavaScript" src=http://www.mamicode.com/"../jquery/jquery-1.4.2.js"></script>  
12.     <style type="text/css">  
13.         #one{  
14.             font-size:12px;  
15.             height:130px;  
16.             width:130px;  
17.             border:1px solid;  
18.         }  
19.         .mini{  
20.                          
21.         }  
22.     </style>  
23.   </head>  
24.     
25.   <body>  
26.     <div id="one">div1</div>  
27.       
28.     <input type="button" value=http://www.mamicode.com/"使用attr来改变背景色" id="b1" /><br>  
29.     <input type="button" value=http://www.mamicode.com/"追加样式" id="b2" /><br>  
30.     <input type="button" value=http://www.mamicode.com/"移除样式" id="b3" /><br>  
31.     <input type="button" value=http://www.mamicode.com/"切换样式" id="b4" /><br>  
32.     <input type="button" value=http://www.mamicode.com/"判断是否含有某个样式" id="b5" /><br>  
33.       
34.       
35.   </body>  
36.   <script language="JavaScript">  
37.     //使用attr来改变背景色  
38.     $("#b1").click(function(){  
39.         $("#one").attr("class", "mini");  
40.     })  
41.       
42.       
43.     //追加样式  
44.     $("#b2").click(function(){  
45.         $("#one").addClass("mini");  
46.     })  
47.       
48.       
49.     //移除样式  
50.     $("#b3").click(function(){  
51.         $("#one").removeClass("mini");  
52.     })  
53.       
54.     //切换样式  
55.     $("#b4").click(function(){  
56.         $("#one").toggleClass("mini");  
57.     })  
58.       
59.     //判断是否含有某个样式  
60.     $("#b5").click(function(){  
61.         alert($("#one").hasClass("mini"));  
62.     })  
63.       
64.       
65.   </script>  
66. </html>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>class.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->	<script language="JavaScript" src="http://www.mamicode.com/jquery/jquery-1.4.2.js"></script>	<style type="text/css">		#one{			font-size:12px;			height:130px;			width:130px;			border:1px solid;		}		.mini{			background-color:red;					}	</style>  </head>    <body>    <div id="one">div1</div>		<input type="button" value="http://www.mamicode.com/使用attr来改变背景色" id="b1" /><br>	<input type="button" value="http://www.mamicode.com/追加样式" id="b2" /><br>	<input type="button" value="http://www.mamicode.com/移除样式" id="b3" /><br>	<input type="button" value="http://www.mamicode.com/切换样式" id="b4" /><br>	<input type="button" value="http://www.mamicode.com/判断是否含有某个样式" id="b5" /><br>		  </body>  <script language="JavaScript">  	//使用attr来改变背景色	$("#b1").click(function(){		$("#one").attr("class", "mini");	})			//追加样式	$("#b2").click(function(){		$("#one").addClass("mini");	})			//移除样式	$("#b3").click(function(){		$("#one").removeClass("mini");	})		//切换样式	$("#b4").click(function(){		$("#one").toggleClass("mini");	})		//判断是否含有某个样式	$("#b5").click(function(){		alert($("#one").hasClass("mini"));	})		  </script></html>

 

设置和获取 HTML, 文本和值

读取和设置某个元素中的 HTML 内容: html() . 该方法可以用于 XHTML, 但不能用于 XML 文档 读取和设置某个元素中的文本内容: text(). 该方法既可以用于 XHTML 也可以用于 XML 文档. 读取和设置某个元素中的值: val() --- 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组

 

常用的遍历节点方法

取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素. 取得匹配元素后面紧邻的同辈元素的集合:next();  取得匹配元素前面紧邻的同辈元素的集合:prev() 取得匹配元素前后所有的同辈元素: siblings()

 

CSS-DOM操作：

获取和设置元素的样式属性: css() 获取和设置元素透明度: opacity 属性 注:IE6,IE7不支持此属性,请使用Firefox1.5,或Opera9浏览  opacity:0.1
获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”); 获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效
em是相对长度单位。相对于当前对象内文本的字体尺寸 

 

 

jQuery解析并加载XML

JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml. JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历

jQuery中的事件

 

在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.

 

jQuery的表单验证

jquery表单验证 默认的提示 

表单验证：

调用jquery.validate({});方法进行验证 $("#empForm").validate({       *     //自定义验证规则       *     //自定义提示信息 })

jquery自定义验证规则

这里的采用的都是标签的name属性值，而不是根据标签的id操作的

比如：<input type="text" id="realNames" name="realname" />，定义规则的时候采用的name属性,这个原因很简单的，因为我们知道id是唯一的，但是对于后面的radio标签的时候我们想要定义规则的时候，如果要是用id来操作的话，就不行了，name属性是可以多个的，所以使用name

realname:"required",其实这个required是一个函数，我们可以查看jquery插件的源码：

后面的都是类似的，都可以在源代码中找到

当然一个标签也可以定义多个规则：

username: { required:true, minlength:"5", maxlength:"8" }

这里的required:true的功能和上面的的realname那种方式是一样的，同时minlength和maxlength都是方法的，源码如下：

我们需要传递一个参数值，然后进行判断的，这个后面我们会在自定义的方法中详细说明

jQuery自定义消息：

这个作用就是给上面的校验规则中定义相对应的说明提示

这里面的提示信息，如果没有定义的话，会默认使用源码中的提示信息：

jQuery的自定义校验规则:

自定义校验规则可以通过自定义检验函数的方式新增加校验规则 步骤如下： 1. 在定义校验规则之前定义一个新的方法 2. 在rules中指定某个域使用此校验规则 3. 在messages中指定这个域使用此校验规则没有通过的提示 信息 

1. 在定义校验规则之前定义一个新的方法

2. 在rules中指定这个某个域使用此校验规则

3. 在messages中指定这个域使用此校验规则没有通过的提示信息 

案例：

[html] view plaincopyprint?

1. $.validator.addMethod("checkId",function(value,element,params){  
2.         if (value.length!= 15 && value.length!=18){  
3.             return false;  
4.         }  
5.           
6.         if (value.length==15){  
7.                 var patten=/^\d{15}$/;  
8.                 if (!patten.test(value)){  
9.                     return false;  
10.                 }  
11.             }  
12.               
13.         if (value.length==18){  
14.             patten=/^\d{18}|\d{17}[X]{1}$/;  
15.             if (!patten.test(value)){  
16.                 return false;  
17.             }  
18.         }  
19.           
20.         return true;  
21.     }, "身份证不正确")  

$.validator.addMethod("checkId",function(value,element,params){		if (value.length!= 15 && value.length!=18){			return false;		}				if (value.length==15){				var patten=/^\d{15}$/;				if (!patten.test(value)){					return false;				}			}					if (value.length==18){			patten=/^\d{18}|\d{17}[X]{1}$/;			if (!patten.test(value)){				return false;			}		}				return true;	}, "身份证不正确")

调用：

[html] view plaincopyprint?

1. cert：{  
2.        required:true,  
3.        checkId:"4"  
4. }  

 cert：{	       required:true,	       checkId:"4"	}

我们在使用checkId方法的时候

value:元素的值 element 元素本身 params 参数

其中value就对应标签name为cert标签的value值，element就是这个标签，params就是传递的参数：4

下面来看一下完整的一个校验的Demo:

[html] view plaincopyprint?

1. <span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3.   <head>  
4.     <title>emp.html</title>  
5.       
6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
7.     <meta http-equiv="description" content="this is my page">  
8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
9.       
10.     <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->  
11.     <script language="JavaScript" src=http://www.mamicode.com/"./jquery-1.4.2.js"></script>  
12.     <script language="JavaScript" src=http://www.mamicode.com/"./jquery.validate.js"></script>  
13.   <script language="JavaScript">  
14.       
15.     // 增加方法的名称  
16.     // 函数function  
17.     //    *value:元素的值  
18.     //    *element 元素本身  
19.     //    *params 参数  
20.       
21.     //调用  
22.     /**  
23.      * cert：{  
24.      *      required:true,  
25.      *      checkId:"4"  
26.      * }  
27.      *   
28.      * 返回值是false  
29.      *   
30.      */  
31.       
32.     $.validator.addMethod("checkId",function(value,element,params){  
33.         if (value.length!= 15 && value.length!=18){  
34.             return false;  
35.         }  
36.           
37.         if (value.length==15){  
38.                 var patten=/^\d{15}$/;  
39.                 if (!patten.test(value)){  
40.                     return false;  
41.                 }  
42.             }  
43.               
44.         if (value.length==18){  
45.             patten=/^\d{18}|\d{17}[X]{1}$/;  
46.             if (!patten.test(value)){  
47.                 return false;  
48.             }  
49.         }  
50.           
51.         return true;  
52.     }, "身份证不正确")  
53.       
54.       
55.     $(document).ready(function(){       //这个方法纯粹是对向window.load事件注册事件的替代方法  
56.         $("#empForm").validate({  
57.             //验证规则            
58.             //使用的是组件的name属性值,而不是id属性值  比如radio  只能通过name来确定了   
59.               
60.             //jquery 在执行验证时，利用lable显示错误提示信息               
61.             /*  
62.              * required:表示组件的输入值不能为空  
63.              *   
64.              */  
65.             rules:{  
66.                 //required：在插件源代码中查看函数  
67.                 realName:"required",  
68.                 username: {  
69.                     required:true,  
70.                     minlength:"5",  
71.                     maxlength:"8"  
72.                 },  
73.                 pwd1:{  
74.                     required:true,  
75.                     minlength:"6",  
76.                     maxlength:"12"  
77.                                           
78.                 },  
79.                 pwd2:{  
80.                     required:true,  
81.                     minlength:"6",  
82.                     maxlength:"12",  
83.                     equalTo:"#pwd1"  
84.                 },  
85.                 sex:{  
86.                     required:true  
87.                 },  
88.                 age:{  
89.                     required:true,  
90.                     range:[26,55]  
91.                 },  
92.                 edu:{  
93.                     required:true  
94.                 },  
95.                 birthday:{  
96.                     required:true,  
97.                     dateISO:true  
98.                 },  
99.                 like:{  
100.                     required:true  
101.                 },  
102.                 email:{  
103.                     required:true,  
104.                     email:true  
105.                 },  
106.                 id:{  
107.                     checkId:["4"]  
108.                 }  
109.                       
110.             },  
111.             //显示验证出错提示信息  
112.             //在插件源码中有默认值的             
113.             messages:{  
114.                 realName:"您的真实姓名不能为空",  
115.                 username:{  
116.                     required:"您的用户名不能为空",  
117.                     minlength:"用户名不能小于5个字符",  
118.                     maxlength:"用户名不能大于8个字符"  
119.                 },  
120.                 pwd1:{  
121.                     required:"您的密码不能为空",  
122.                     minlength:"用户名不能小于6个字符",  
123.                     maxlength:"用户名不能大于12个字符"  
124.                 },  
125.                 pwd2:{  
126.                     required:"确认密码不能为空",  
127.                     minlength:"用户名不能小于6个字符",  
128.                     maxlength:"用户名不能大于12个字符",  
129.                     equalTo:"两次输入不一致"  
130.                 },  
131.                 age:{  
132.                     required:"请输入您的年龄",  
133.                     range:"请输入合法年龄"  
134.                 },  
135.                 edu:{  
136.                     required:"请选择您的学历"  
137.                 },  
138.                 birthday:{  
139.                     required:"请输入您的生日",  
140.                     dateISO:"日期格式不正确"  
141.                 },  
142.                 email:{  
143.                     required:"请输入您的邮箱",  
144.                     email:"电子邮箱错误"  
145.                 }  
146.                   
147.             }  
148.         });  
149.           
150.           
151.           
152.     })  
153.       
154.           
155.   </script>  
156.     
157.   </head>  
158.     
159.   <body>  
160.     员工信息录入<br>  
161.     <form id="empForm" name="empForm" method="post">  
162.     <table border="1" cellpadding="0">  
163.         <tr>  
164.             <td>真实姓名(不能为空)</td>  
165.             <td><input type="text" id="realName" name="realName" /></td>  
166.         </tr>  
167.         <tr>  
168.             <td>用户名(不能为空,长度在5~8之间,可以包含中文字符(一个汉字算一个字符))</td>  
169.             <td><input type="text" id="username" name="username" /></td>  
170.         </tr>  
171.         <tr>  
172.             <td>密码(不能为空,6-12位字符或者数字,不能包含中文字母)</td>  
173.             <td><input type="password" id="pwd1" name="pwd1"/></td>  
174.         </tr>  
175.         <tr>  
176.             <td>重复密码(不能为空,6-12位字符或者数字,不能包含中文字母)</td>  
177.             <td><input type="password" id="pwd2" name="pwd2" /></td>  
178.         </tr>  
179.         <tr>  
180.             <!--  
181.                 jquery执行验证时，利用label标签显示错误提示信息  
182.                 <lable style="display:none" for="gender" class="error">请选择性别</lable>  
183.                     * for="gender" 该标签的唯一标识  
184.                     * style:设置标签的为不可见  
185.                     * class="error":error:错误信息，用户error这个样式表修饰  
186.                   
187.                 <input type="radio" id="gender_male" value=http://www.mamicode.com/"m" name="gender"/>  
188.                 执行: *jquery执行时先以组件中name属性的值为标识去查找lable标签  
189.                         * 如果找到直接使用  
190.                         * 如果没有找到 创建一个  
191.                   
192.                 底层代码:  
193.                 errorClass:"error" --class="error"  
194.                 errorElement:"lable" --<lable>  
195.                 lable=$("<"+this.settings.errorElement+"/>") --<lable>  
196.                 .attr({"for":this.idOrName(element),generated:true}) --<lable for>  
197.                 .addClass(this.settings.errorClass) --<label for class="error">messages</lable>  
198.                 .html(message || "");  
199.             -->  
200.             <td>性别</td>  
201.             <td><input type="radio" name="sex" value=http://www.mamicode.com/"man" id="gender_male" />男<input id="gender_feimale" type="radio" name="sex" value=http://www.mamicode.com/"woman" />女<label style="display: none" for="sex" class="error">请选择性别</label></td>  
202.         </tr>  
203.         <tr>  
204.             <td>年龄(26~55)</td>  
205.             <td><input type="text" id="age" name="age" /></td>  
206.         </tr>  
207.         <tr>  
208.             <td>学历</td>  
209.             <td>  
210.                 <select id="edu" name="edu">  
211.                     <option value=http://www.mamicode.com/"">--请选择您的学历--</option>  
212.                     <option value=http://www.mamicode.com/"benke">本科</option>  
213.                     <option value=http://www.mamicode.com/"zhuanke">专科</option>  
214.                     <option value=http://www.mamicode.com/"yanjiusheng">研究生</option>  
215.                 </select>  
216.             </td>  
217.         </tr>  
218.         <tr>  
219.             <td>出生日期(1999/09/19)</td>  
220.             <td><input type="text" id="birthday" name="birthday" /></td>  
221.         </tr>  
222.         <tr>  
223.             <td>情趣爱好</td>  
224.             <td><input type="checkbox" id="check1" name="like" />乒乓球<input type="checkbox" name="like" id="check1" />上网<input type="checkbox" name="like" id="check1" />code<label style="display: none" for="like" class="error">必须选择一个爱好</label></td>  
225.         </tr>  
226.         <tr>  
227.             <td>电子邮箱</td>  
228.             <td><input type="text" id="email" name="email" /></td>  
229.         </tr>  
230.         <tr>  
231.             <td>身份证(15或18位)</td>  
232.             <td><input type="text" id="id" name="id" /></td>  
233.         </tr>  
234.         <tr>  
235.             <td></td>  
236.             <td></td>  
237.             <td><input type="submit" value=http://www.mamicode.com/"保存" id="ok"></td>  
238.         </tr>  
239.     </table>  
240. </form>  
241.   </body>  
242.    
243.     
244. </html>  
245. </span>  

<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>emp.html</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->	<script language="JavaScript" src="http://www.mamicode.com/jquery-1.4.2.js"></script>	<script language="JavaScript" src="http://www.mamicode.com/jquery.validate.js"></script>  <script language="JavaScript">  		// 增加方法的名称	// 函数function	//    *value:元素的值	//    *element 元素本身	//    *params 参数		//调用	/**	 * cert：{	 * 		required:true,	 * 		checkId:"4"	 * }	 * 	 * 返回值是false	 * 	 */		$.validator.addMethod("checkId",function(value,element,params){		if (value.length!= 15 && value.length!=18){			return false;		}				if (value.length==15){				var patten=/^\d{15}$/;				if (!patten.test(value)){					return false;				}			}					if (value.length==18){			patten=/^\d{18}|\d{17}[X]{1}$/;			if (!patten.test(value)){				return false;			}		}				return true;	}, "身份证不正确")			$(document).ready(function(){		//这个方法纯粹是对向window.load事件注册事件的替代方法		$("#empForm").validate({			//验证规则						//使用的是组件的name属性值,而不是id属性值  比如radio  只能通过name来确定了 						//jquery 在执行验证时，利用lable显示错误提示信息 						/*			 * required:表示组件的输入值不能为空			 * 			 */			rules:{				//required：在插件源代码中查看函数				realName:"required",				username: {					required:true,					minlength:"5",					maxlength:"8"				},				pwd1:{					required:true,					minlength:"6",					maxlength:"12"														},				pwd2:{					required:true,					minlength:"6",					maxlength:"12",					equalTo:"#pwd1"				},				sex:{					required:true				},				age:{					required:true,					range:[26,55]				},				edu:{					required:true				},				birthday:{					required:true,					dateISO:true				},				like:{					required:true				},				email:{					required:true,					email:true				},				id:{					checkId:["4"]				}								},			//显示验证出错提示信息			//在插件源码中有默认值的						messages:{				realName:"您的真实姓名不能为空",				username:{					required:"您的用户名不能为空",					minlength:"用户名不能小于5个字符",					maxlength:"用户名不能大于8个字符"				},				pwd1:{					required:"您的密码不能为空",					minlength:"用户名不能小于6个字符",					maxlength:"用户名不能大于12个字符"				},				pwd2:{					required:"确认密码不能为空",					minlength:"用户名不能小于6个字符",					maxlength:"用户名不能大于12个字符",					equalTo:"两次输入不一致"				},				age:{					required:"请输入您的年龄",					range:"请输入合法年龄"				},				edu:{					required:"请选择您的学历"				},				birthday:{					required:"请输入您的生日",					dateISO:"日期格式不正确"				},				email:{					required:"请输入您的邮箱",					email:"电子邮箱错误"				}							}		});							})			  </script>    </head>    <body>    员工信息录入<br>	<form id="empForm" name="empForm" method="post">	<table border="1" cellpadding="0">		<tr>			<td>真实姓名(不能为空)</td>			<td><input type="text" id="realName" name="realName" /></td>		</tr>		<tr>			<td>用户名(不能为空,长度在5~8之间,可以包含中文字符(一个汉字算一个字符))</td>			<td><input type="text" id="username" name="username" /></td>		</tr>		<tr>			<td>密码(不能为空,6-12位字符或者数字,不能包含中文字母)</td>			<td><input type="password" id="pwd1" name="pwd1"/></td>		</tr>		<tr>			<td>重复密码(不能为空,6-12位字符或者数字,不能包含中文字母)</td>			<td><input type="password" id="pwd2" name="pwd2" /></td>		</tr>		<tr>			<!--				jquery执行验证时，利用label标签显示错误提示信息				<lable style="display:none" for="gender" class="error">请选择性别</lable>					* for="gender" 该标签的唯一标识					* style:设置标签的为不可见					* class="error":error:错误信息，用户error这个样式表修饰								<input type="radio" id="gender_male" value="http://www.mamicode.com/m" name="gender"/>				执行: *jquery执行时先以组件中name属性的值为标识去查找lable标签				       	* 如果找到直接使用						* 如果没有找到 创建一个								底层代码:				errorClass:"error" --class="error"				errorElement:"lable" --<lable>				lable=$("<"+this.settings.errorElement+"/>") --<lable>				.attr({"for":this.idOrName(element),generated:true}) --<lable for>				.addClass(this.settings.errorClass) --<label for class="error">messages</lable>				.html(message || "");			-->			<td>性别</td>			<td><input type="radio" name="sex" value="http://www.mamicode.com/man" id="gender_male" />男<input id="gender_feimale" type="radio" name="sex" value="http://www.mamicode.com/woman" />女<label style="display: none" for="sex" class="error">请选择性别</label></td>		</tr>		<tr>			<td>年龄(26~55)</td>			<td><input type="text" id="age" name="age" /></td>		</tr>		<tr>			<td>学历</td>			<td>				<select id="edu" name="edu">					<option value="">--请选择您的学历--</option>					<option value="http://www.mamicode.com/benke">本科</option>					<option value="http://www.mamicode.com/zhuanke">专科</option>					<option value="http://www.mamicode.com/yanjiusheng">研究生</option>				</select>			</td>		</tr>		<tr>			<td>出生日期(1999/09/19)</td>			<td><input type="text" id="birthday" name="birthday" /></td>		</tr>		<tr>			<td>情趣爱好</td>			<td><input type="checkbox" id="check1" name="like" />乒乓球<input type="checkbox" name="like" id="check1" />上网<input type="checkbox" name="like" id="check1" />code<label style="display: none" for="like" class="error">必须选择一个爱好</label></td>		</tr>		<tr>			<td>电子邮箱</td>			<td><input type="text" id="email" name="email" /></td>		</tr>		<tr>			<td>身份证(15或18位)</td>			<td><input type="text" id="id" name="id" /></td>		</tr>		<tr>			<td></td>			<td></td>			<td><input type="submit" value="http://www.mamicode.com/保存" id="ok"></td>		</tr>	</table></form>  </body>   </html></span>

我们注意到Demo中有一个特别的地方就是那个性别的标签，源码中一般都是在一个标签后面自动使用lable标签来显示提示信息的，但是我们这里面不能使用默认的，不然这个默认的lable标签,看一下效果图：

下面的图是正常操作显示的：

再来看一下使用系统的label：

插入的lable在第一个<input type="radio"...标签后面，而且提示信息是默认的，其实系统的这个默认的lable的产生原理，在代码中的注释说的很清楚了，就是自动生成一个lable标签，然后将提示信息添加进去即可。

jQuery中封装的Ajax请求

jQuery主要是封装了Ajax的一些方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到).

1.load方法

load( url, [data], [callback] ) ：载入远程HTML 文件代码并插入至 DOM 中。

url(String) : 请求的HTML页的URL地址。

data(Map) : (可选参数) 发送至服务器的 key/value 数据。(json格式)

callback(Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

我们看到，方法中的三个参数只有第一个参数url是必选的，其他都是可选的，所以这个方法是有重载的形式的

回调函数的参数说明：

回调函数function(date,textStatus,xmlRequest)：和Ajax中的函数一样的 1) data 代表请求返回的内容 2) textStatus 代表请求状态的对象 3) XMLHttpRequest 对象

这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some >selector"。

这个方法可以很方便的动态加载一些HTML文件，例如表单。

示例代码：

[html] view plaincopyprint?

1. <span style="font-size:14px;">$("#one").load("load.jsp",{username:$("#username").val(),pwd:$("#pwd").val()},function(data, textStatus, xmlHttpReq){         
2.             alert(data);                  
3.         })</span>  

<span style="font-size:14px;">$("#one").load("load.jsp",{username:$("#username").val(),pwd:$("#pwd").val()},function(data, textStatus, xmlHttpReq){					alert(data);						})</span>

下面是访问的load.jsp内容：

[html] view plaincopyprint?

1. <span style="font-size:14px;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
2. <%  
3.     out.println("你好");  
4.     String username=request.getParameter("username");  
5.     String pwd=request.getParameter("pwd");  
6.     System.out.println(username);  
7.     System.out.println(pwd);  
8.     System.out.println(request.getMethod());  
9. %>  
10.   
11. <!-- h1标签内容 -->  
12. <h1>H1</h1>  
13.   
14. <!-- h2标签内容 -->  
15. <h2>H2</h2></span>  

<span style="font-size:14px;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%	out.println("你好");	String username=request.getParameter("username");	String pwd=request.getParameter("pwd");	System.out.println(username);	System.out.println(pwd);	System.out.println(request.getMethod());%><!-- h1标签内容 --><h1>H1</h1><!-- h2标签内容 --><h2>H2</h2></span>

我们在之前介绍jsp的时候说过，其实我们看到这个jsp会输出“你好”，同时也会输出后面的标签内容，因为jsp引擎会将其翻译成servlet

我们访问：

http://localhost:8080/ajax/load/load.html

显示结果：

将请求到的html内容加载到one标签中进行显示

下面在来看一下另外的一种形式：

[html] view plaincopyprint?

1. $("#one").load("load.jsp h1",{username:$("#username").val(),pwd:$("#pwd").val()},function(data, textStatus, xmlHttpReq){      
2.                 alert(data);                  
3.         })  

$("#one").load("load.jsp h1",{username:$("#username").val(),pwd:$("#pwd").val()},function(data, textStatus, xmlHttpReq){					alert(data);						})

我们看到第一个参数中在请求的load.jsp后面还有一个空格然后跟着一个h1标签，显示的结果：

我们看到这个内容是h1的内容，我们看到load.jsp中会返回一个h1标签，将h1标签中内容进行显示，那个load.jsp后面跟着的是h1标签，所以显示的是load.jsp返回的h1标签的内容。

其实我们通过上面的例子可以看到load的方式最大的作用就是将请求一段html代码，然后加载到指定的标签中。

2.get方法

 jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求

参数：

url(String) : 发送请求的URL地址.

data(Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示(json格式)，会做为QueryString附加到请求URL中。

callback(Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

回调函数的参数说明：

回调函数function(date,textStatus,xmlRequest)：和Ajax中的函数一样的 1) data 代表请求返回的内容 2) textStatus 代表请求状态的对象 3) XMLHttpRequest 对象

我们看到这个三个参数中第一个参数是必选的，其他的都是可选的

看一下案例：

[html] view plaincopyprint?

1. $("#b1").click(function(){  
2.         $.get("get.jsp", {username:$("#username").val(),pwd:$("#pwd").val()},function(data,textStatus){  
3.             $("#one").html(data);  
4.             alert(textStatus);  
5.         });  
6.     });  

$("#b1").click(function(){		$.get("get.jsp", {username:$("#username").val(),pwd:$("#pwd").val()},function(data,textStatus){			$("#one").html(data);			alert(textStatus);		});	});

其中get.jsp的内容和上面的load.jsp内容是一样的

这里面的作用就是将请求到的内容加载到指定标签中

3.post方法

 jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

参数：

url(String) : 发送请求的URL地址.

data(Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示(json格式)。

callback(Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

回调函数的参数说明：

回调函数function(date,textStatus,xmlRequest)：和Ajax中的函数一样的 1) data 代表请求返回的内容 2) textStatus 代表请求状态的对象 3) XMLHttpRequest 对象

type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。

第一个参数是必选的，其他都是可选的

示例代码：

[html] view plaincopyprint?

1. $("#b1").click(function(){  
2.         var xmlReq=$.post("get.jsp",{username:$("#username").val(),pwd:$("#pwd").val()},function(data,textStatus){  
3.             $("#one").html(data);  
4.             alert(textStatus);  
5.         });  
6.         alert(xmlReq.readyState);  
7.         alert(xmlReq.status)  
8.     });  

$("#b1").click(function(){		var xmlReq=$.post("get.jsp",{username:$("#username").val(),pwd:$("#pwd").val()},function(data,textStatus){			$("#one").html(data);			alert(textStatus);		});		alert(xmlReq.readyState);		alert(xmlReq.status)	});

4.getScript方法

jQuery.getScript( url, [callback] ) : 通过GET 方式请求载入并执行一个 JavaScript 文件。

参数

url(String) : 待载入 JS 文件地址。

callback(Function) : (可选) 成功载入后回调函数。

jQuery1.2 版本之前，getScript只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript加入脚本，请加入延时函数。

这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码：

加载并执行 test.js。

jQuery 代码:

$.getScript("test.js");

加载并执行 test.js ，成功后显示信息。

jQuery 代码:

[html] view plaincopyprint?

1. $.getScript("test.js", function(){  
2.             alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同？");  
3.             });  

$.getScript("test.js", function(){            alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同？");            });

5.jQuery Ajax 事件

Ajax请求会产生若干不同的事件，我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件：局部事件 和 全局事件。

局部事件就是在每次的Ajax请求时在方法内定义的，例如：

[html] view plaincopyprint?

1. $.ajax({  
2.             beforeSend: function(){  
3.             //Handle the beforeSend event  
4.             },  
5.             complete: function(){  
6.            //Handle the complete event  
7.             }  
8.             //...  
9.       });  

$.ajax({            beforeSend: function(){            //Handle the beforeSend event            },            complete: function(){           //Handle the complete event            }            //...      });

全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播，在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义：

[html] view plaincopyprint?

1. $("#loading").bind("ajaxSend", function(){  
2.             $(this).show();  
3.             }).bind("ajaxComplete",function(){  
4.             $(this).hide();  
5.             });  

$("#loading").bind("ajaxSend", function(){            $(this).show();            }).bind("ajaxComplete",function(){            $(this).hide();            });

或者：

[html] view plaincopyprint?

1. $("#loading").ajaxStart(function(){  
2.             $(this).show();  
3.             });  

$("#loading").ajaxStart(function(){            $(this).show();            });

我们可以在特定的请求将全局事件禁用，只要设置下 global 选项就可以了：

[html] view plaincopyprint?

1. $.ajax({  
2.             url: "test.html",  
3.             global: false,// 禁用全局Ajax事件.  
4.             // ...  
5.       });  

$.ajax({            url: "test.html",            global: false,// 禁用全局Ajax事件.            // ...      });

下面是jQuery官方给出的完整的Ajax事件列表：

ajaxStart(Global Event) This event is broadcast if an Ajax request is started and no other Ajaxrequests are currently running.

beforeSend(Local Event) This event, which is triggered before an Ajax request is started, allows you tomodify the XMLHttpRequest object (setting additional headers, if need be.)

ajaxSend(Global Event) This global event is also triggered before the request is run.

success(Local Event) This event is only called if the request was successful (no errors from theserver, no errors with the data).

ajaxSuccess(Global Event) This event is also only called if the request was successful.

error(Local Event) This event is only called if an error occurred with the request (you can neverhave both an error and a success callback with a request).

ajaxError(Global Event) This global event behaves the same as the local error event.

complete(Local Event) This event is called regardless of if the request was successful, or not. Youwill always receive a complete callback, even for synchronous requests.

ajaxComplete(Global Event) This event behaves the same as the complete event and will be triggered everytime an Ajax request finishes.

ajaxStop(Global Event) This global event is triggered if there are no more Ajax requests beingprocessed.

好了，下面开始说jQuery里面功能最强的Ajax请求方法 $.ajax(); 

6.ajax方法

jQuery.ajax( options ) : 通过HTTP 请求加载远程数据

这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

$.ajax()返回其创建的 XMLHttpRequest对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。

注意： 如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。

当设置 datatype 类型为 ‘script‘ 的时候，所有的远程(不在同一个域中)POST请求都会转换为GET方式。

$.ajax()只有一个参数：参数key/value 对象(json对象)，包含各配置及回调函数信息。详细参数选项见下。

jQuery1.2 中，您可以跨域加载 JSON数据，使用时需将数据类型设置为 JSONP。使用JSONP 形式调用函数时，如"myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。数据类型设置为 "jsonp" 时，jQuery 将自动调用回调函数。

参数列表：

这里有几个Ajax事件参数：beforeSend，success，complete ，error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下，这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。 请认真阅读上面的参数列表，如果你要用jQuery来进行Ajax开发，那么这些参数你都必需熟知的。

总结：jquery还有很多的内容这里就没有详细的介绍了，这个只有在后面的开发过程中慢慢的学习和总结，上面的例子的Demo下载地址是：

http://download.csdn.net/detail/jiangwei0910410003/7514949

里面除了上面的例子还有一些综合的案例演示

[转载]JavaEE学习篇之--JQuery技术详解