JQuery技術詳解

時間  2019-11-30
標籤 jquery 技術 詳解 欄目 JQuery 简体版
原文   原文鏈接

前面咱們講解了的J2EE的技術都是服務端的技術，下面咱們來看一下前端的一些開發技術，這一篇咱們來看一下jQuery技術javascript

 

簡介：

jQuery由美國人John Resig建立，至今已吸引了來自世界各地的衆多css

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還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。html

jQuery可以使用戶的html頁保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只需定義id便可。前端

 

工具：

咱們在使用MyEclipse中編寫jQuery的時候，是沒有任何提示的，因此寫代碼很難受的，咱們須要藉助額外的工具Aptana，這個在編寫js，jQuery，Ajax等都會有相關的提示，具體如何在MyEclipse中添加這個工具，看以下的一篇文章：java

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

 

jQuery的一個簡單例子：jquery

 

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <!--引入jquery的js庫-->  
  2.  <script type="text/javascript" src="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庫：jquery-1.4.2.js文件ajax

 

 

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對象json

 

DOM對象轉化成jQuery對象

對於已是一個DOM對象，只須要用$()把DOM對象包裝起來，就能夠得到一個jQuery對象了。$(DOM對象) c#

轉換後就可使用 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 plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. if(document.getElementById("username")){  
  2.   var username=document.getElementById("username");  
  3.   alert(username.value);  
  4. }else{  
  5.   alert("沒有該id元素");  
  6. }  


//使用JQUERY處理即便不存在也不會報錯
var $username=$("#username");
alert("^^^ "+$username.val());

//注意:在javaScript中函數返回值爲空,表示false

 

 

基本選擇器：

基本選擇器是 jQuery 中最經常使用的選擇器, 也是最簡單的選擇器, 它經過元素 id, class 和標籤名來查找 DOM 元素(在網頁中 id 只能使用一次, class 容許重複使用).
一、#id用法: $(」#myDiv」);    返回值  單個元素的組成的集合
說明: 這個就是直接選擇html中的id=」myDiv」
二、Element用法: $(」div」)     返回值  集合元素
說明: element的英文翻譯過來是」元素」,因此element其實就是html已經定義的標籤元素,例如 div, input, a 等等.
三、class 用法: $(」.myClass」)      返回值  集合元素
說明: 這個標籤是直接選擇html代碼中class=」myClass」的元素或元素組(由於在同一html頁面中class是能夠存在多個一樣值的).
四、*用法: $(」*」)      返回值  集合元素
說明: 匹配全部元素,多用於結合上下文來搜索
五、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 plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="../jquery/jquery-1.4.2.js"></script>  
  10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
  11.   
  12.   </head>  
  13.   <body>  
  14.     <input value="haha" type="text" id="username" name="username" />  
  15.     <span style="white-space:pre">    </span><input type="button" value="改變id爲one的元素的背景顏色" id="b1" />  
  16.     <input type="button" value="改變全部div的背景顏色" id="b2" />  
  17.     <input type="button" value="改變全部div背景顏色 爲綠色" id="b3" />  
  18.     <input type="button" value="改變全部span和id爲two的背景顏色 " id="b4" />  
  19.     <table border="1" cellspacing="0" width="200">  
  20.         <tr>  
  21.             <td id="one"><a href="#">1</a></td>  
  22.             <td class="mini"><a href="#">2</a></td>  
  23.             <td>3</td>  
  24.         </tr>  
  25.     </table>  
  26.     <a href="#">嘿嘿</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="haha" type="text" id="username" name="username" />得到焦點  
  35.     $("#username").focus(function(){  
  36.         alert("aaa");  
  37.     });  
  38.       
  39.     //1、<input type="button" value="改變id爲one的元素的背景顏色" name="ok"  />  
  40.     $("#b1").click(function(){  
  41.         $("#one").css("background-color", "red");     
  42.     });  
  43.       
  44.     //2、改變全部div背景顏色 爲綠色  
  45.     $("#b2").click(function(){  
  46.         $("div").css("background-color", "green");  
  47.     });  
  48.       
  49.     //3、改變class是mini的全部背景顏色爲藍色  
  50.     $("#b3").click(function(){  
  51.         $(".mini").css("background-color", "blue");  
  52.     });  
  53.       
  54.     //4、改變全部span和id爲two的背景顏色  
  55.     $("#b4").click(function(){  
  56.         $("span,#two").css("background-color", "yellow");  
  57.     });  
  58.       
  59.   </script>  
  60.     
  61.     
  62. </html>  

 

 

層次選擇器：

若是想經過 DOM 元素之間的層次關係來獲取特定元素, 例如後代元素, 子元素, 相鄰元素, 兄弟元素等, 則須要使用層次選擇器.
1 、ancestor descendant
用法: $(」form input」) ;   返回值  集合元素
說明: 在給定的祖先元素下匹配全部後代元素.這個要下面講的」parent > child」區分開.
二、parent > child 用法: $(」form > input」) ;    返回值  集合元素
說明: 在給定的父元素下匹配全部子元素.注意:要區分好後代元素與子元素
三、prev + next
用法: $(」label + input」) ;   返回值  集合元素
說明: 匹配全部緊接在 prev 元素後的 next 元素
四、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 plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="../jquery/jquery-1.4.2.js"></script>  
  10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
  11.   
  12.   </head>  
  13.   <body>  
  14.     <input type="button" value="改變全部td中<a>標籤的字體" id="b1" />  
  15.     <input type="button" value="改變全部td中但不是td孫子如下的<a>標籤的顏色" id="b2" />  
  16.     <input type="button" value="改變id爲one的下一個td背景色" id="b3" />  
  17.     <input type="button" value="改變id爲two的全部div的背景色" id="b4" />  
  18.     <table border="1" cellspacing="0" width="200">  
  19.         <tr>  
  20.             <td id="one"><a href="#">1</a></td>  
  21.             <td class="mini"><a href="#">2</a><div><a>div中的</a></div></td>  
  22.             <td>3</td>  
  23.         </tr>  
  24.     </table>  
  25.     <a href="#">嘿嘿</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.   // 1、   改變全部td中<a>標籤的字體  
  36.     $("#b1").click(function(){  
  37.         $("td a").css("background-color", "silver");  
  38.     });  
  39.       
  40.       
  41.     //2、 改變全部td中但不是td孫子如下的<a>標籤的字體  
  42.     $("#b2").click(function(){  
  43.         $("td>a").css("background-color", "silver");  
  44.     });  
  45.       
  46.       
  47.     //3、改變id爲one的下一個td背景色  
  48.     $("#b3").click(function(){  
  49.         $("#one+td").css("background-color", "red");  
  50.     });  
  51.       
  52.     //4、改變id爲two的全部div的背景色  
  53.     $("#b4").click(function(){  
  54.         $("#two~div").css("background-color", "red");  
  55.     });  
  56.       
  57.   </script>  
  58.     
  59.     
  60. </html>  

 

 

過濾選擇器：

過濾選擇器主要是經過特定的過濾規則來篩選出所需的 DOM 元素, 該選擇器都以 「:」 開頭
按照不一樣的過濾規則, 過濾選擇器能夠分爲基本過濾, 內容過濾, 可見性過濾, 屬性過濾, 子元素過濾和表單對象屬性過濾選擇器.

 

基礎過濾選擇器：

一、:first
用法: $(」tr:first」) ;  返回值  單個元素的組成的集合
      說明: 匹配找到的第一個元素
二、:last
用法: $(」tr:last」)  返回值  集合元素
      說明: 匹配找到的最後一個元素.與 :first 相對應.
三、:not(selector)
用法: $(」input:not(:checked)」)返回值  集合元素
     說明: 去除全部與給定選擇器匹配的元素.有點相似於」非」,意思是沒有被選中的input(當input的type=」checkbox」).
四、:even
用法: $(」tr:even」)  返回值  集合元素
     說明: 匹配全部索引值爲偶數的元素，從 0 開始計數.js的數組都是從0開始計數的.例如要選擇table中的行,由於是從0開始計數,因此table中的第一個tr就爲偶數0.
五、: odd
用法: $(」tr:odd」) 返回值  集合元素
      說明: 匹配全部索引值爲奇數的元素,和:even對應,從 0 開始計數.
六、:eq(index) 用法: $(」tr:eq(0)」)    返回值  集合元素
      說明: 匹配一個給定索引值的元素.eq(0)就是獲取第一個tr元素.括號裏面的是索引值,不是元素排列數.
七、:gt(index) 用法: $(」tr:gt(0)」)    返回值  集合元素
說明: 匹配全部大於給定索引值的元素.
八、:lt(index) 用法: $(」tr:lt(2)」)    返回值  集合元素  
      說明: 匹配全部小於給定索引值的元素.
九、:header(固定寫法) 用法: $(」:header」).css(」background」, 「#EEE」)    返回值  集合元素
      說明: 匹配如 h1, h2, h3之類的標題元素.這個是專門用來獲取h1,h2這樣的標題元素.
十、:animated(固定寫法)   返回值  集合元素
      說明: 匹配全部正在執行動畫效果的元素 
 
基礎過濾選擇器示例：
改變第一個 div 元素的背景色爲 #0000FF
改變最後一個 div 元素的背景色爲 #0000FF
改變class不爲 one 的全部 div 元素的背景色爲 #0000FF
改變索引值爲偶數的 div 元素的背景色爲 #0000FF
改變索引值爲奇數的 div 元素的背景色爲 #0000FF
改變索引值爲大於 3 的 div 元素的背景色爲 #0000FF
改變索引值爲等於 3 的 div 元素的背景色爲 #0000FF
改變索引值爲小於 3 的 div 元素的背景色爲 #0000FF
改變全部的標題元素的背景色爲 #0000FF
改變當前正在執行動畫的全部元素的背景色爲 #0000FF
 
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="./styles.css">-->  
  11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
  12.     <style type="text/css">  
  13.         #mover{  
  14.             width:100px;  
  15.             height:200px;  
  16.             background-color:red;  
  17.         }  
  18.     </style>  
  19.   </head>  
  20.     
  21.   <body>  
  22.     <input type="button" value="改變第一個div的背景色" id="b1" />  
  23.     <input type="button" value="改變最後一個div的背景色" id="b2" />  
  24.     <input type="button" value="改變class不爲one的全部div的背景色" id="b3" />  
  25.     <input type="button" value="改變索引值爲偶數的div的背景色" id="b4" />  
  26.     <input type="button" value="改變索引值爲基數的div的背景色" id="b5" />  
  27.     <input type="button" value="改變索引值大於3的div的背景色" id="b6" />  
  28.     <input type="button" value="改變索引值等於3的div的背景色" id="b7" />  
  29.     <input type="button" value="改變索引值小於3的div的背景色" id="b8" />  
  30.     <input type="button" value="改變全部標題元素的背景色" 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="增長動畫效果" id="b10" /><br>  
  46.     <div id="mover">動畫</div>  
  47.   </body>  
  48.   <script language="JavaScript">  
  49.     //1、改變第一個div的背景色  
  50.     $("#b1").click(function(){  
  51.         $("div:first").css("background-color", "yellow");  
  52.     });  
  53.       
  54.     //2、改變最後一個div的背景色  
  55.     $("#b2").click(function(){  
  56.         $("div:last").css("background-color", "red");  
  57.     });  
  58.       
  59.     //3、改變class不爲one的全部div的背景色  
  60.     $("#b3").click(function(){  
  61.         $("div:not(.one)").css("background-color", "yellow");  
  62.     });  
  63.       
  64.     //4、改變索引值爲偶數的div的背景色  
  65.     $("#b4").click(function(){  
  66.         $("div:even").css("background-color", "yellow");  
  67.     });  
  68.     //5、改變索引值爲基數的div的背景色  
  69.     $("#b5").click(function(){  
  70.         $("div:odd").css("background-color", "yellow");  
  71.     });  
  72.     //6、改變索引值大於3的div的背景色  
  73.     $("#b6").click(function(){  
  74.         $("div:gt(3)").css("background-color", "yellow");  
  75.     });  
  76.     //7、改變索引值等於3的div的背景色  
  77.     $("#b7").click(function(){  
  78.         $("div:eq(3)").css("background-color", "yellow");  
  79.     });  
  80.       
  81.     //8、改變索引值小於3的div的背景色  
  82.     $("#b8").click(function(){  
  83.         $("div:lt(3)").css("background-color", "yellow");  
  84.     });  
  85.       
  86.     //9、改變全部標題元素的背景色  
  87.     $("#b9").click(function(){  
  88.         $(":header").css("background-color", "yellow");  
  89.     });  
  90.       
  91.     //10、  <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>  

內容過濾選擇器：

內容過濾選擇器的過濾規則主要體如今它所包含的子元素和文本內容上
一、:contains(text) 用法: $(」div:contains(’John’)」)    返回值  集合元素
      說明: 匹配包含給定文本的元素.這個選擇器比較有用，當咱們要選擇的不是dom標籤元素時,它就派上了用場了,它的做用是查找被標籤」圍」起來的文本內容是否符合指定的內容的.
二、:empty 用法: $(」td:empty」)   返回值  集合元素
      說明: 匹配全部不包含子元素或者文本的空元素
三、:has(selector)
      用法: $(」div:has(p)」).addClass(」test」)    返回值  集合元素
      說明: 匹配含有選擇器所匹配的元素的元素.這個解釋須要好好琢磨,可是一旦看了使用的例子就徹底清楚了:給全部包含p元素的div標籤加上class=」test」.
四、:parent 用法: $(」td:parent」)   返回值  集合元素
      說明: 匹配含有子元素或者文本的元素.注意:這裏是」:parent」,可不是」.parent」哦!感受與上面講的」:empty」造成反義詞.
 
內容過濾選擇器示例：
改變含有文本 ‘di’ 的 div 元素的背景色爲 #0000FF
改變不包含子元素(或者文本元素) 的 div 空元素的背景色爲 #0000FF
改變含有 class 爲 mini 元素的 div 元素的背景色爲 #0000FF
改變含有子元素(或者文本元素)的div元素的背景色爲 #0000FF
改變不含有文本 di; 的 div 元素的背景色
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="../jquery/jquery-1.4.2.js"></script>  
  11.     <style>  
  12.         .mini{  
  13.             width:100px;  
  14.             height:50px;  
  15.             background-color:green;  
  16.         }  
  17.     </style>  
  18.   </head>  
  19.     
  20.   <body>  
  21.     <input type="button" value="改變含有文本di的背景色" id="b1" />  
  22.     <input type="button" value="改變沒有文本的背景色" id="b2" />  
  23.     <input type="button" value="改變含有<p>的div元素的背景色" id="b3" />  
  24.     <input type="button" value="改變含有子元素或者文本的div" id="b4" />  
  25.     <input type="button" value="改變不含有文本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.     //1、改變含有文本di的背景色  
  46.     $("#b1").click(function(){  
  47.         $("div:contains('di')").css("background-color", "green");  
  48.     });  
  49.       
  50.     //2、改變沒有文本的背景色  
  51.     $("#b2").click(function(){  
  52.         $("td:empty").css("background-color", "green");  
  53.     });  
  54.       
  55.     //3、改變含有<p>的div元素的背景色  
  56.     $("#b3").click(function(){  
  57.         $("div:has(p)").css("background-color", "yellow");  
  58.     });  
  59.       
  60.     //4、改變含有子元素或者文本的div  
  61.     $("#b4").click(function(){  
  62.         $("div:parent").css("background-color", "yellow");  
  63.     });  
  64.       
  65.     //5、改變不含有文本di的div元素的背景色  
  66.     $("#b5").click(function(){  
  67.         $("div:not(:contains(di))").css("background-color", "yellow");  
  68.     });   
  69.   </script>  
  70. </html>  

可見度過濾選擇器：

可見度過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素
一、:hidden 用法: $(」tr:hidden」)  返回值  集合元素
     說明: 匹配全部的不可見元素，input 元素的 type 屬性爲 「hidden」 的話也會被匹配到.意思是css中display:none和input type=」hidden」的都會被匹配到.一樣,要在腦海中完全分清楚冒號」:」, 點號」.」和逗號」,」的區別.
二、:visible 用法: $(」tr:visible」)  返回值  集合元素
    說明: 匹配全部的可見元素.
 
可見度過濾選擇器示例：
改變全部可見的div元素的背景色爲 #0000FF
選取全部不可見的元素, 利用 jQuery 中的 show() 方法將它們顯示出來, 並設置其背景色爲 #0000FF
選取全部的文本隱藏域, 並打印它們的值
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="./styles.css">-->  
  11.     <script language="JavaScript" src="../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="改變全部可見的div的背景色" id="b1" />  
  21.     <input type="button" value="選取全部不可見的元素並將他們顯示出來" id="b2" />  
  22.     <input type="button" value="選取全部的文本影藏" 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="hidden1" />  
  32.     <input type="hidden" value="hidden2" />  
  33.     <input type="hidden" value="hidden3" />  
  34.   </body>  
  35.   <script language="JavaScript">  
  36.     //1、改變全部可見的div的背景色  
  37.     $("#b1").click(function(){  
  38.         $("div:visible").css("background-color", "yellow");  
  39.         $("div").show();  
  40.     });  
  41.       
  42.     //2、選取全部不可見div的元素並將他們顯示出來  
  43.     $("#b2").click(function(){  
  44.         $("div:hidden").show();  
  45.     });  
  46.       
  47.     //3、選取全部的文本影藏,輸出值  
  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>  
 

屬性過濾選擇器：

屬性過濾選擇器的過濾規則是經過元素的屬性來獲取相應的元素
一、[attribute] 用法: $(」div[id]「) ;  返回值  集合元素
      說明: 匹配包含給定屬性的元素. 例子中是選取了全部帶」id」屬性的div標籤.
二、[attribute=value] 用法: $(」input[name='newsletter']「).attr(」checked」, true);    返回值  集合元素
      說明: 匹配給定的屬性是某個特定值的元素.例子中選取了全部 name 屬性是 newsletter 的 input 元素.
三、[attribute!=value] 用法: $(」input[name!='newsletter']「).attr(」checked」, true);    返回值  集合元素
      說明: 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素.此選擇器等價於:not([attr=value]),要匹配含有特定屬性但不等於特定值的元素,請使用[attr]:not([attr=value]).以前看到的 :not 派上了用場.
四、[attribute^=value] 用法: $(」input[name^=‘news’]「)  返回值  集合元素 
      說明: 匹配給定的屬性是以某些值開始的元素.,咱們又見到了這幾個相似於正則匹配的符號.如今想忘都忘不掉了吧?!
五、[attribute$=value] 用法: $(」input[name$=‘letter’]「)  返回值  集合元素 
     說明: 匹配給定的屬性是以某些值結尾的元素.
六、[attribute*=value] 用法: $(」input[name*=‘man’]「)   返回值  集合元素
     說明: 匹配給定的屬性是以包含某些值的元素.
七、[attributeFilter1][attributeFilter2][attributeFilterN] 用法: $(」input[id][name$=‘man’]「)  返回值  集合元素
     說明: 複合屬性選擇器,須要同時知足多個條件時使用.又是一個組合,這種狀況咱們實際使用的時候很經常使用.這個例子中選擇的是全部含有 id 屬性,而且它的 name 屬性是以 man 結尾的元素.
 
屬性過濾選擇器示例：
選取下列元素,改變其背景色爲 #0000FF
含有屬性title 的div元素.
屬性title值等於"test"的div元素.
屬性title值不等於"test"的div元素(沒有屬性title的也將被選中).
屬性title值 以"te"開始 的div元素.
屬性title值 以"est"結束 的div元素.
屬性title值 含有"es"的div元素.
選取有屬性id的div元素，而後在結果中選取屬性title值含有「es」的 div 元素
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="./styles.css">-->  
  11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
  12.   </head>  
  13.     
  14.   <body>  
  15.     <input type="button" value="改變含有屬性title的div" id="b1" />  
  16.     <input type="button" value="改變不含屬性title的div" id="b2" />  
  17.     <input type="button" value="屬性title等於test的div元素" id="b3" />  
  18.     <input type="button" value="屬性title不等於test的div元素" id="b4" />  
  19.     <input type="button" value="含有title可是title!=test" id="b5" />  
  20.     <input type="button" value="屬性title是以te開頭的div元素" id="b6" />  
  21.     <input type="button" value="屬性title是以est結尾的div元素" id="b7" />  
  22.     <input type="button" value="屬性title包含es的div元素" id="b8" />  
  23.     <input type="button" value="選取有屬性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.         //1、改變含有屬性title的div  
  35.         $("#b1").click(function(){  
  36.             $("div[title]").css("background-color", "yellow");  
  37.         });  
  38.           
  39.           
  40.         //2、改變不含屬性title的div  
  41.         $("#b2").click(function(){  
  42.             $("div:not([title])").css("background-color", "yellow");  
  43.         });  
  44.           
  45.         //3、屬性title等於test的div元素  
  46.         $("#b3").click(function(){  
  47.             $("div[title='test']").css("background-color", "yellow");  
  48.         });  
  49.           
  50.         //4、屬性title不等於test的div元素     不含title或者含有title但不等於test的  
  51.         $("#b4").click(function(){  
  52.             $("div[title!='test']").css("background-color", "yellow");  
  53.         });  
  54.           
  55.         //5、含有title可是title!=test  
  56.         $("#b5").click(function(){  
  57.             $("div[title][title!=test]").css("background-color", "yellow");  
  58.         });  
  59.           
  60.         //6、屬性title是以te開頭的div元素  
  61.         $("#b6").click(function(){  
  62.             $("div[title^=te]").css("background-color", "yellow");  
  63.         });  
  64.           
  65.         //7、屬性title是以est結尾的div元素  
  66.         $("#b7").click(function(){  
  67.             $("div[title$=est]").css("background-color", "yellow");  
  68.         });  
  69.           
  70.         //8、屬性title包含es的div元素  
  71.         $("#b8").click(function(){  
  72.             $("div[title*=es]").css("background-color", "yellow");  
  73.         });  
  74.           
  75.         //9、選取有屬性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>  

子元素過濾選擇器：

一、:nth-child(index/even/odd/equation) 用法: $(」ul li:nth-child(2)」)   返回值  集合元素
      說明: 匹配其父元素下的第N個子或奇偶元素.這個選擇器和以前說的基礎過濾(Basic Filters)中的 eq() 有些相似,不一樣的地方就是前者是從0開始,後者是從1開始.
二、:first-child 用法: $(」ul li:first-child」)    返回值  集合元素 
      說明: 匹配第一個子元素.’:first’ 只匹配一個元素,而此選擇符將爲每一個父元素匹配一個子元素.這裏須要特別點的記憶下區別.
三、:last-child 用法: $(」ul li:last-child」)      返回值  集合元素
      說明: 匹配最後一個子元素.’:last’只匹配一個元素,而此選擇符將爲每一個父元素匹配一個子元素.
四、: only-child 用法: $(」ul li:only-child」)   返回值  集合元素 
      說明: 若是某個元素是父元素中惟一的子元素,那將會被匹配.若是父元素中含有其餘元素,那將不會被匹配.意思就是:只有一個子元素的纔會被匹配!
 
nth-child() 選擇器詳解以下：
(1):nth-child(even/odd): 能選取每一個父元素下的索引值爲偶(奇)數的元素
(2):nth-child(2): 能選取每一個父元素下的索引值爲 2 的元素
(3):nth-child(3n): 能選取每一個父元素下的索引值是 3 的倍數 的元素
(3):nth-child(3n + 1): 能選取每一個父元素下的索引值是 3n + 1的元素
 
子元素過濾選擇器示例：
選取下列元素,改變其背景色爲 #0000FF
每一個class爲one的div父元素下的第2個子元素.
每一個class爲one的div父元素下的第一個子元素
每一個class爲one的div父元素下的最後一個子元素
若是class爲one的div父元素下的僅僅只有一個子元素，那麼選中這個子元素
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="./styles.css">-->  
  11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
  12.   </head>  
  13.     
  14.   <body>  
  15.     <input type="button" value="每一個class爲one的div父元素下的第二個子元素" id="b1" />  
  16.     <input type="button" value="每一個class爲one的div父元素下的第1個子元素" id="b2" />  
  17.     <input type="button" value="每一個class爲one的div父元素下的最後一個子元素" id="b3" />  
  18.     <input type="button" value="找到class爲one的且只有一個子元素的div" id="b4" />  
  19.     <input type="button" value="含有title可是title!=test" id="b5" />  
  20.     <input type="button" value="屬性title是以te開頭的div元素" id="b6" />  
  21.     <input type="button" value="屬性title是以est結尾的div元素" id="b7" />  
  22.     <input type="button" value="屬性title包含es的div元素" id="b8" />  
  23.     <input type="button" value="選取有屬性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.         //1、每一個class爲one的div父元素下的第2個子元素  
  35.         $("#b1").click(function(){  
  36.             $("div[class='one'] :nth-child(2)").css("background-color", "yellow");  
  37.         });  
  38.           
  39.         //2、每一個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.         //3、每一個class爲one的div父元素下的最後一個子元素  
  51.         $("#b3").click(function(){  
  52.             $("div[class='one'] :last-child").css("background-color", "yellow");  
  53.         });  
  54.           
  55.         //4、找到class爲one的且只有一個子元素的div  
  56.         $("#b4").click(function(){  
  57.             $("div[class='one'] :only-child").css("background-color", "yellow");  
  58.         });  
  59.           
  60.           
  61.     </script>  
  62. </html>  
 

表單對象屬性過濾選擇器：

此選擇器主要對所選擇的表單元素進行過濾
一、:enabled 用法: $(」input:enabled」)    返回值  集合元素
      說明: 匹配全部可用元素.意思是查找全部input中不帶有disabled=」disabled」的input.不爲disabled,固然就爲enabled啦.
二、:disabled 用法: $(」input:disabled」)    返回值  集合元素
      說明: 匹配全部不可用元素.與上面的那個是相對應的.
三、:checked 用法: $(」input:checked」)   返回值  集合元素
      說明: 匹配全部選中的被選中元素(複選框、單選框等，不包括select中的option).這話提及來有些繞口.
四、:selected 用法: $(」select option:selected」)   返回值  集合元素
       說明: 匹配全部選中的option元素.
 
表單屬性過濾選擇器：
利用 jQuery 對象的 val() 方法改變表單內可用 <input> 元素的值
利用 jQuery 對象的 val() 方法改變表單內不可用 <input> 元素的值
利用 jQuery 對象的 length 屬性獲取多選框選中的個數
利用 jQuery 對象的 text() 方法獲取下拉框選中的內容
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="./styles.css">-->  
  11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
  12.   </head>  
  13.     
  14.   <body>  
  15.     <input type="button" value="取出可用的input" id="b1" />  
  16.     <input type="button" value="取出不可用的input" id="b2" />  
  17.     <input type="button" value="利用jquery的length屬性獲取多選框選中的個數" id="b3" />  
  18.     <input type="button" value="輸出被選中的多選框的值" id="b4" />  
  19.     <input type="button" value="用jquery的text方法獲取下拉選的結果" id="b5" />  
  20.       
  21.       
  22.     <input type="text" value="可用" />  
  23.     <input type="text" value="不可用" disabled="true" />  
  24.     <input type="text" value="不可用" disabled="true" />  
  25.     <input type="text" value="可用" />  
  26.     <input type="text" value="可用" />  
  27.       
  28.     <input type="checkbox" name="lang" value="java"/>java  
  29.     <input type="checkbox" name="lang" value="c"/>c  
  30.     <input type="checkbox" name="lang" value="c#"/>c#  
  31.       
  32.     <select name="">  
  33.         <option value="">--請選擇--</option>  
  34.         <option value="選項一">選項一</option>  
  35.         <option value="選項二">選項二</option>  
  36.         <option value="選項三">選項三</option>  
  37.     </select>  
  38.       
  39.   </body>  
  40.     <script language="JavaScript">  
  41.         //1、取出可用的input  
  42.         $("#b1").click(function(){            
  43.             $("input[type='text']:enabled").val("xxxxxxxxxxxx");  
  44.         })  
  45.           
  46.         //2、取出不可用的input  
  47.         $("#b2").click(function(){            
  48.             $("input[type='text']:disabled").val("xxxxxxxxxxxx");  
  49.         })  
  50.           
  51.         //3、利用jquery的length屬性獲取多選框選中的個數  
  52.         $("#b3").click(function(){            
  53.             var len=$("input[type='checkbox']:checked").length;  
  54.             alert(len);  
  55.         })  
  56.           
  57.         //4、輸出被選中的多選框的值  
  58.         $("#b4").click(function(){            
  59.             $.each($("input[type='checkbox']:checked"),function(index, domEle){  
  60.                 alert($(domEle).val());  
  61.             });  
  62.         })  
  63.           
  64.         //5、用jquery的text方法獲取下拉選的結果  
  65.         $("#b5").click(function(){            
  66.             var val=$("select option:selected").text();           
  67.             alert(val);  
  68.         })  
  69.           
  70.     </script>  
  71. </html>  

表單選擇器：

一、:input 用法: $(」:input」) ;   返回值  集合元素
      說明:匹配全部 input, textarea, select 和 button 元素 
二、:text 用法: $(」:text」) ;  返回值  集合元素
      說明: 匹配全部的單行文本框.
三、:password 用法: $(」:password」) ; 返回值  集合元素
      說明: 匹配全部密碼框.
四、:radio 用法: $(」:radio」) ; 返回值  集合元素
     說明: 匹配全部單選按鈕.
五、:checkbox 用法: $(」:checkbox」) ; 返回值  集合元素
      說明: 匹配全部複選框
六、:submit 用法: $(」:submit」) ;   返回值  集合元素
      說明: 匹配全部提交按鈕.
七、:image 用法: $(」:image」)   返回值  集合元素
      說明: 匹配全部圖像域.
八、:reset 用法: $(」:reset」) ;  返回值  集合元素
      說明: 匹配全部重置按鈕.
九、:button 用法: $(」:button」) ;  返回值  集合元素
      說明: 匹配全部按鈕.這個包括直接寫的元素button.
十、:file 用法: $(」:file」) ;  返回值  集合元素
     說明: 匹配全部文件域.
十一、: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 plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="./styles.css">-->  
  11.   
  12.   <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
  13.   </head>  
  14.     
  15.   <body>  
  16.     <input type="button" value="反恐放到重慶後" id="b1" />  
  17.     <input type="button" value="反恐放到重慶後" id="b2" />  
  18.     <input type="button" value="反恐放到city第一位" id="b3" />  
  19.     <input type="button" value="反恐放到city第一位" id="b4" />  
  20.       
  21.       
  22.     <br>  
  23.     您喜歡的城市:<br>  
  24.     <ul id="city">  
  25.         <li id="bj" value="beijing">北京</li>  
  26.         <li id="sh" value="shanghai">上海</li>  
  27.         <li id="cq" value="chongqing">重慶</li>  
  28.     </ul>  
  29.     您喜歡的遊戲:<br>  
  30.     <ul id="love">  
  31.         <li id="ms" value="moshou">魔獸</li>    
  32.         <li id="fk" value="fankong">反恐</li>  
  33.     </ul>  
  34.       
  35.   </body>  
  36.     
  37.   <script language="JavaScript">  
  38.     //1、反恐放到重慶後  
  39.     $("#b1").click(function(){            
  40.             $("#city").append($("#fk"));  
  41.     })  
  42.       
  43.     //2、反恐放到重慶後  
  44.     $("#b2").click(function(){    
  45.             $("#fk").appendTo("#city");  
  46.     })  
  47.       
  48.     //3、反恐放到city第一位  
  49.     $("#b3").click(function(){    
  50.             $("#city").prepend($("#fk"));  
  51.     })  
  52.       
  53.     //4、反恐放到city第一位  
  54.     $("#b4").click(function(){    
  55.             $("#fk").prependTo("#city");  
  56.     })  
  57.       
  58.   </script>  
  59.     
  60. </html>  

 

外部插入節點：

 

after(content):在每一個匹配的元素以後插入內容

before(content):在每一個匹配的元素以前插入內容

insertAfter(content):把全部匹配的元素插入到另外一個、指定的元素元素集合的後面

insertBefore(content) :把全部匹配的元素插入到另外一個、指定的元素元素集合的前面以上方法不但能將新建立的 DOM 元素插入到

檔中, 也能對原有的 DOM 元素進行移動.

 

案例：

 

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="../jquery/jquery-1.4.2.js"></script>  
  11.   </head>  
  12.     
  13.   <body>  
  14.     <input type="button" value="將p2移動到重慶後" id="b1" />  
  15.     <input type="button" value="將p2移動到北京以前" id="b2" />  
  16.     <input type="button" value="將p2移動到重慶後" id="b3" />  
  17.     <input type="button" value="將p2移動到北京以前" id="b4" />  
  18.       
  19.       
  20.     <br>  
  21.     您喜歡的城市:<br>  
  22.     <ul id="city">  
  23.         <li id="bj" value="beijing">北京</li>  
  24.         <li id="sh" value="shanghai">上海</li>  
  25.         <li id="cq" value="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.     //1、after  將p2移動到重慶後  
  36.     $("#b1").click(function(){            
  37.         $("#city").after($("#p2"));  
  38.     })  
  39.       
  40.     //2、將p2移動到北京以前  
  41.     $("#b2").click(function(){            
  42.         $("#city").before($("#p2"));  
  43.     })  
  44.       
  45.     //3、after  將p2移動到重慶後  
  46.     $("#b3").click(function(){            
  47.         $("#p2").insertAfter($("#city"));  
  48.     })  
  49.       
  50.     //4、將p2移動到北京以前  
  51.     $("#b4").click(function(){            
  52.         $("#p2").insertBefore("#city");  
  53.     })  
  54.       
  55.   </script>  
  56.     
  57.     
  58. </html>  

 

查找節點：

查找屬性節點: 經過 jQuery 選擇器完成.

查找屬性節點: 查找到所須要的元素以後, 能夠調用 jQuery 對象的 attr() 方法來獲取它的各類屬性值

建立節點

使用 jQuery 的工廠函數 $(): $(html); 會根據傳入的 html 標記字符串建立一個 DOM 對象, 並把這個 DOM 對象包裝成一個 jQuery 對象返回.
注意: 
動態建立的新元素節點不會被自動添加到文檔中, 而是須要使用其餘方法將其插入到文檔中; 
當建立單個元素時, 需注意閉合標籤和使用標準的 XHTML 格式. 例如建立一個<p>元素, 可使用 $(「<p/>」) 或 $(「<p></p>」), 但不能使用 $(「<p>」) 或 $(「</P>」)
建立文本節點就是在建立元素節點時直接把文本內容寫出來; 建立屬性節點也是在建立元素節點時一塊兒建立
 
案例：
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="./styles.css">-->  
  11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
  12.   </head>  
  13.     
  14.   <body>  
  15.     <input type="button" value="建立上海節點並追加到天津後面" 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.     //2、建立上海節點並追加到天津後面  
  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.     //3、  
  46.       
  47.       
  48.   </script>  
  49.     
  50. </html>  
 

刪除節點：

remove(): 從 DOM 中刪除全部匹配的元素, 傳入的參數用於根據 jQuery 表達式來篩選元素. 當某個節點用 remove() 方法刪除後, 該節點所包含的全部後代節點將被同時刪除. 這個方法的返回值是一個指向已被刪除的節點的引用.
empty(): 清空節點 – 清空元素中的全部後代節點(不包含屬性節點).
 
案例：
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="./styles.css">-->  
  11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
  12.   </head>  
  13.     
  14.   <body>  
  15.     <input type="button" value="刪除北京節點 " id="b1" />  
  16.     <input type="button" value="清除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.     //1、刪除北京節點  
  30.     $("#b1").click(function(){  
  31.         $("#bj").remove();  
  32.     })  
  33.       
  34.       
  35.     //2、清除city下全部節點  
  36.     $("#b2").click(function(){  
  37.         $("#city").empty();  
  38.           
  39.         alert($("#city").attr("id"));  
  40.     })  
  41.       
  42.   </script>  
  43.     
  44. </html>  
 

複製節點：

clone(): 克隆匹配的 DOM 元素, 返回值爲克隆後的副本. 但此時複製的新節點不具備任何行爲.
clone(true): 複製元素的同時也複製元素中的的事件 
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="./styles.css">-->  
  11.     <script language="JavaScript" src="../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>  
 

替換節點：

replaceWith(): 將全部匹配的元素都替換爲指定的 HTML 或 DOM 元素
replaceAll(): 顛倒了的 replaceWith() 方法.
注意: 若在替換以前, 已經在元素上綁定了事件, 替換後原先綁定的事件會與原先的元素一塊兒消失
案例：
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="./styles.css">-->  
  11.     <script language="JavaScript" src="../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>  
 

屬性操做：

attr(): 獲取屬性和設置屬性
當爲該方法傳遞一個參數時, 即爲某元素的獲取指定屬性
當爲該方法傳遞兩個參數時, 即爲某元素設置指定屬性的值
jQuery中有不少方法都是一個函數實現獲取和設置.如:attr(), html(), text(), val(),height(), width(), css() 等.
removeAttr(): 刪除指定元素的指定屬性
 
案例：
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="./styles.css">-->  
  11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
  12.   </head>  
  13.     
  14.   <body>  
  15.     您的愛好：  
  16.         <br>  
  17.         <input type="checkbox" name="checkItems" id="checkItems" value="全選/全不選" />全選/全不選  
  18.         <br>  
  19.             <input type="checkbox" name="itmes" value="足球" />足球  
  20.             <input type="checkbox" name="itmes" value="籃球" />籃球  
  21.             <input type="checkbox" name="itmes" value="游泳" />游泳  
  22.             <input type="checkbox" name="itmes" value="唱歌" />唱歌    
  23.             <br>  
  24.             <input type="button" name="checkall" id="checkall" value="全選" />  
  25.             <input type="button" name="checkall" id="checkallNo" value="全不選" />  
  26.             <input type="button" name="checkall" id="checkRevese" value="反選" />  
  27.   </body>  
  28.    
  29.   <script language="JavaScript">  
  30.       
  31.     //<input type="button" name="checkall" id="checkall" value="全選" />  
  32.     $("#checkall").click(function(){      
  33.         $("input[type='checkbox']").attr("checked", "checked");  
  34.     })  
  35.       
  36.     //<input type="button" name="checkall" id="checkallNo" value="全不選" />  
  37.     $("#checkallNo").click(function(){  
  38.         $("input[type='checkbox']").removeAttr("checked");  
  39.     })  
  40.       
  41.     //<input type="button" name="checkall" id="checkRevese" value="反選" />  
  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="全選/全不選" />全選/全不選  
  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>  
 

樣式操做：

獲取 class 和設置 class : class 是元素的一個屬性, 因此獲取 class 和設置 class 均可以使用 attr() 方法來完成.
追加樣式: addClass()
移除樣式: removeClass() --- 從匹配的元素中刪除所有或指定的 class
切換樣式: toggleClass()  --- 控制樣式上的重複切換.若是類名存在則刪除它, 若是類名不存在則添加它.
判斷是否含有某個樣式: hasClass() --- 判斷元素中是否含有某個 class, 若是有, 則返回 true; 不然返回 false
案例：
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="./styles.css">-->  
  11.     <script language="JavaScript" src="../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.             background-color:red;             
  21.         }  
  22.     </style>  
  23.   </head>  
  24.     
  25.   <body>  
  26.     <div id="one">div1</div>  
  27.       
  28.     <input type="button" value="使用attr來改變背景色" id="b1" /><br>  
  29.     <input type="button" value="追加樣式" id="b2" /><br>  
  30.     <input type="button" value="移除樣式" id="b3" /><br>  
  31.     <input type="button" value="切換樣式" id="b4" /><br>  
  32.     <input type="button" value="判斷是否含有某個樣式" 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>  
 

設置和獲取 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的表單驗證

下載地址和Demo 
http://jquery.bassistance.de/validate/jquery.validate.zip 
首頁： http://bassistance.de/jquery-plugins/jquery-plugin-validation/
jQuery validation 1.7  ---驗證插件 須要:jQuery 1.3.2 或 1.4.2版本
下載以後能夠查看他的demo，從demo中抽取出來案例
 
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 plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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.     }, "身份證不正確")  

 

調用：

 

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. cert：{  
  2.        required:true,  
  3.        checkId:"4"  
  4. }  

咱們在使用checkId方法的時候

 

value:元素的值
element 元素自己
params 參數

其中value就對應標籤name爲cert標籤的value值，element就是這個標籤，params就是傳遞的參數：4

下面來看一下完整的一個校驗的Demo:

 

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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="./styles.css">-->  
  11.     <script language="JavaScript" src="./jquery-1.4.2.js"></script>  
  12.     <script language="JavaScript" src="./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="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="man" id="gender_male" />男<input id="gender_feimale" type="radio" name="sex" value="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="">--請選擇您的學歷--</option>  
  212.                     <option value="benke">本科</option>  
  213.                     <option value="zhuanke">專科</option>  
  214.                     <option value="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="保存" id="ok"></td>  
  238.         </tr>  
  239.     </table>  
  240. </form>  
  241.   </body>  
  242.    
  243.     
  244. </html>  
  245. </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 plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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>  

 

下面是訪問的load.jsp內容：

 

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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>  

咱們在以前介紹jsp的時候說過，其實咱們看到這個jsp會輸出「你好」，同時也會輸出後面的標籤內容，由於jsp引擎會將其翻譯成servlet

 

咱們訪問：

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

顯示結果：

將請求到的html內容加載到one標籤中進行顯示

 

下面在來看一下另外的一種形式：

 

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. $("#one").load("load.jsp h1",{username:$("#username").val(),pwd:$("#pwd").val()},function(data, textStatus, xmlHttpReq){      
  2.                 alert(data);                  
  3.         })  

咱們看到第一個參數中在請求的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 plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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.     });  

 

其中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 plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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.     });  

 

 

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 plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. $.getScript("test.js", function(){  
  2.             alert("AjaxEvent.js 加載完成並執行完成.你再點擊上面的Get或Post按鈕看看有什麼不一樣？");  
  3.             });  

 

 

5.jQuery Ajax 事件

Ajax請求會產生若干不一樣的事件，咱們能夠訂閱這些事件並在其中處理咱們的邏輯。在jQuery這裏有兩種Ajax事件：局部事件 和 全局事件。

局部事件就是在每次的Ajax請求時在方法內定義的，例如：

 

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. $.ajax({  
  2.             beforeSend: function(){  
  3.             //Handle the beforeSend event  
  4.             },  
  5.             complete: function(){  
  6.            //Handle the complete event  
  7.             }  
  8.             //...  
  9.       });  

 

全局事件是每次的Ajax請求都會觸發的，它會向DOM中的全部元素廣播，在上面 getScript() 示例中加載的腳本就是全局Ajax事件。全局事件能夠以下定義：

 

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. $("#loading").bind("ajaxSend", function(){  
  2.             $(this).show();  
  3.             }).bind("ajaxComplete",function(){  
  4.             $(this).hide();  
  5.             });  

 

或者：

 

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. $("#loading").ajaxStart(function(){  
  2.             $(this).show();  
  3.             });  

 

咱們能夠在特定的請求將全局事件禁用，只要設置下 global 選項就能夠了：

 

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. $.ajax({  
  2.             url: "test.html",  
  3.             global: false,// 禁用全局Ajax事件.  
  4.             // ...  
  5.       });  

 

 

下面是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 將自動調用回調函數。

參數列表：

參數名

類型

描述

url

String

(默認: 當前頁地址) 發送請求的地址。

type

String

(默認: "GET") 請求方式 ("POST" 或 "GET")， 默認爲 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可使用，但僅部分瀏覽器支持。

timeout

Number

設置請求超時時間（毫秒）。此設置將覆蓋全局設置。

async

Boolean

(默認: true) 默認設置下，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲 false。注意，同步請求將鎖住瀏覽器，用戶其它操做必須等待 請求完成才能夠執行。

beforeSend

Function

發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。XMLHttpRequest 對象是惟一的參數。
function (XMLHttpRequest) {

                        this; // the options for this ajax request

                        }

cache

Boolean

(默認: true) jQuery 1.2 新功能，設置爲 false 將不會從瀏覽器緩存中加載請求信息。

complete

Function

請求完成後回調函數 (請求成功或失敗時均調用)。參數： XMLHttpRequest 對象，成功信息字符串。
function (XMLHttpRequest, textStatus) {

                        this; // the options for this ajax request

                        }

contentType

String

(默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型。默認值適合大多數應用場合。

data

Object,
String

發送到服務器的數據。將自動轉換爲請求字符串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須爲 Key/Value 格 式。若是爲數組，jQuery 將自動爲不一樣值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換爲 '&foo=bar1&foo=bar2'。

dataType

String

預期服務器返回的數據類型。若是不指定，jQuery 將自動根據 HTTP 包 MIME 信息返回 responseXML 或 responseText，並做爲回調函數參數傳遞，可用值:

"xml": 返回 XML 文檔，可用 jQuery 處理。

"html": 返回純文本 HTML 信息；包含 script 元素。

"script": 返回純文本 JavaScript 代碼。不會自動緩存結果。

"json": 返回 JSON 數據 。

"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。

error

Function

(默認: 自動判斷 (xml 或 html)) 請求失敗時將調用此方法。這個方法有三個參數：XMLHttpRequest 對象，錯誤信息，（可能）捕獲的錯誤對象。
function (XMLHttpRequest, textStatus, errorThrown) {

                        // 一般狀況下textStatus和errorThown只有其中一個有值

                        this; // the options for this ajax request

                        }

global

Boolean

(默認: true) 是否觸發全局 AJAX 事件。設置爲 false 將不會觸發全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用於控制不一樣的Ajax事件

ifModified

Boolean

(默認: false) 僅在服務器數據改變時獲取新數據。使用 HTTP 包 Last-Modified 頭信息判斷。

processData

Boolean

(默認: true) 默認狀況下，發送的數據將被轉換爲對象(技術上講並不是字符串) 以配合默認內容類型 "application/x-www-form-urlencoded"。若是要發送 DOM 樹信息或其它不但願轉換的信息，請設置爲 false。

success

Function

請求成功後回調函數。這個方法有兩個參數：服務器返回數據，返回狀態
function (data, textStatus) {

                        // data could be xmlDoc, jsonObj, html, text, etc...

                        this; // the options for this ajax request

                        }

這裏有幾個Ajax事件參數：beforeSend，success，complete ，error 。咱們能夠定義這些事件來很好的處理咱們的每一次的Ajax請求。注意一下，這些Ajax事件裏面的 this 都是指向Ajax請求的選項信息的(請參考說 get() 方法時的this的圖片)。
請認真閱讀上面的參數列表，若是你要用jQuery來進行Ajax開發，那麼這些參數你都必需熟知的。

 

總結：jquery還有不少的內容這裏就沒有詳細的介紹了，這個只有在後面的開發過程當中慢慢的學習和總結，上面的例子的Demo下載地址是：

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

裏面除了上面的例子還有一些綜合的案例演示

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程