JQuery筆記
jQuery概要
JavaWeb和框架內容 javascript
javascript和javascript類庫(框架)
* 定義：封裝了不少預約義的對象和實用函數。 * javascript腳本語言是面向對象的。 * 能幫助使用者創建有高難度交互的 Web2.0 特性的富客戶端頁面, 而且兼容各大瀏覽器。 * Web1.0和Web2.0： * Web1.0：之內容爲主的網站（門戶網站） * Web2.0：以人的關係爲主的網站（社交網站） * Web3.0：基於移動互聯網的社交網站 * (富)胖客戶端頁面和瘦客戶端頁面 * (富)胖客戶端頁面：靜態頁面加上操做(交互) * 瘦客戶端頁面：靜態頁面
流行的javascript庫：
當前流行的 JavaScript 庫有：css
jQuery、MooTools、Prototype、Dojo、YUI、EXT_JS、DWR
推薦給你們一個網站：www.open-open.com上百種js庫html
JQuery的優點
jQuery的宗旨是——WRITE LESS,DO MORE,寫更少的代碼,作更多的事情。
1.輕量級 jQuery很是輕巧，採用Dean Edwards編寫的Packer（http://dean.edwards.name/packer/）壓縮後，大小不到30KB。若是使用Min版而且在服務器端啓用Gzip壓縮後，大小隻有18KB。 2.強大的選擇器 jQuery容許開發者使用從CSS1到CSS3幾乎全部的選擇器，以及jQuery首創的高級而複雜的選擇器。另外還能夠加入插件使其支持XPath選擇器，甚至開發者能夠編寫屬於本身的選擇器。 3.出色的DOM操做的封裝 jQuery封裝了大量經常使用的DOM操做，使開發者在編寫DOM操做相關程序的時候可以駕輕就熟。 4.可靠的事件處理機制 吸取了javascript專家Dean Edwards編寫的事件處理函數的精華，使得jQuery在處理事件綁定的時候很是可靠。在預留退路、按部就班以及非入侵式變成思想方面，jQuery作得很是不錯。 5.完善的Ajax 使開發者處理Ajax的時候可以專心處理業務邏輯而無需關心複雜的瀏覽器兼容性和XMLHttpRequest對象的建立和使用的問題。 6.不污染頂級變量 jQuery只創建一個名爲jQuery對象，其全部的函數方法都在這個對象之下。 7.出色的瀏覽器兼容性 jQuery修復了一些瀏覽器之間的差別，使開發者沒必要在開展項目前創建瀏覽器兼容庫。 8.鏈式操做方式 jQuery中最有特點的莫過於它的鏈式操做方式 —— 即對發生在同一個jQuery對象上的一組動做，能夠直接連寫而無需重複獲取對象。 9.隱式迭代 行爲層與結構層的分離 開發者可使用jQuery選擇器選中元素，而後直接給元素添加事件。這種將行爲層與結構層徹底分離的思想，可使jQuery開發人員和HTML或其餘頁面開發人員各司其職，擺脫開發衝突或我的單幹的開發模式。 10.豐富的插件支持 jQuery的易擴展性，吸引了來自全球的開發者編寫jQuery的擴展插件。目前已經有超過幾百種的官方插件支持，並且還不斷有新插件面世。 11.完善的文檔 jQuery的文檔很是豐富
jQuery：（js的類庫）
* jQuery官網團隊： * 核心研發 * UI研發 * 插件研發 * jQuery分類： * Web版本：咱們主要學習 * UI版本：UI界面 * mobile版本：針對移動開發 * qunit版本：用於測試 * jQuery版本： * 1.4.2版本：企業開發主流 * 1.8.3版本：學習研究主流 * 1.11.0版本：目前最新版本 * 2.1.0版本：目前最新版本(jQuery官方宣佈再也不支持IE瀏覽器:6.0\7.0\8.0\9.0) * jQuery具備兩個文件： * 正常版本：學習研究，代碼和註釋 * 壓縮版本(min)：開發使用，只有代碼 * 頂級變量(頂級對象) * jQuery中只有一個對象：jQuery * jQuery的頂級對象，只能調用 * jQuery具備約束符："$" jQuery.屬性名 == $.屬性名 * 隱式迭代：只關心開始和結束(要遍歷誰和遍歷後的結果) * 行爲層與結構層的分離 * 行爲層：邏輯部分 * 結構層：HTML標籤 * DOM對象和jQuery對象： * DOM對象：經過DOM解析HTML頁面元素，所獲得的DOM元素
DOM解析HTML頁面，將頁面元素解釋爲元素節點、屬性節點和文本節點。
而經過DOM解析HTML頁面元素，所獲得的DOM元素就是DOM對象。
DOM對象可使用JavaScript中的方法。
jQuery對象(底層仍是DOM對象)：經過jQuery包裝DOM對象後產生的對象java
jQuery對象就是經過jQuery包裝DOM對象後產生的對象。
jQuery 對象是 jQuery 獨有的。
雖然jQuery對象是包裝DOM對象後產生的，可是jQuery沒法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery裏的方法。
雖然jQuery對象是包裝DOM對象後產生的，可是jQuery沒法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery裏的方法。亂使用會報錯。
約定：若是獲取的是 jQuery 對象, 那麼要在變量前面加上 $。
DOM對象轉換成jQuery對象：$(DOM對象)jquery
轉換後就可使用jQuery中的方法了git
jQuery對象轉換成DOM對象： * jQuery對象是數組對象：jQuery對象[索引值] * jQuery提供了get(index)方法
兩種轉換方式將一個jQuery對象轉換成DOM對象：[index]和.get(index);
(1) jQuery對象是一個數組對象，能夠經過[index]的方法，來獲得相應的DOM對象程序員
(2) jQuery自己提供，經過.get(index)方法，獲得相應的DOM對象面試
比較：ajax
* DOM對象與jQuery對象互操做?不能夠
* jQuery相對於DOM來說，具備比較完善的事情處理機制
JQuery選擇器
* 選擇器是jQuery中的根基json
1.什麼是jQuery選擇器 jQuery中的選擇器徹底集成了CSS的風格。 利用jQuery選擇器，能夠很是便捷和快速地找出特定的DOM元素。 學會使用選擇器是學習jQuery的基礎。 2.jQuery選擇器的優點 簡介的寫法： $( ) 函數在不少javascript類庫中都被做爲一個選擇器函數來使用，在jQuery中也不例外。 3.支持CSS1到CSS3選擇器 jQuery選擇器支持CSS一、CSS2的所有和CSS3的部分選擇器，同時擁有少許獨有的選擇器。 使用jQuery選擇器時無需考慮瀏覽器是否支持這些選擇器。 4.完善的處理機制
jQuery的九大選擇器(分類)
A.基本選擇器：
基本選擇器是 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」
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>01-基本選擇器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 //== window.onload = function(){} 12 $(document).ready(function(){ 13 // <input type="button" value="選擇 id爲 one 的元素." id="btn1"/> 14 $("#btn1").click(function(){ 15 /* 16 * css(name, value) 17 * * name:指定樣式名稱,對應css幫助文檔的內容 18 * * value:指定樣式值 19 */ 20 $("#one").css("background","yellow"); 21 }); 22 23 // <input type="button" value="選擇 class 爲 mini 的全部元素." id="btn2"/> 24 $("#btn2").click(function(){ 25 //jQuery支持相似於批處理的操做 26 $(".mini").css("background","yellow"); 27 }); 28 29 // <input type="button" value="選擇 元素名是 div 的全部元素." id="btn3"/> 30 $("#btn3").click(function(){ 31 $("div").css("background","yellow"); 32 }); 33 34 // <input type="button" value="選擇 全部的元素." id="btn4"/> 35 $("#btn4").click(function(){ 36 $("*").css("background","yellow"); 37 }); 38 39 // <input type="button" value="選擇 全部的span元素和id爲two的元素." id="btn5"/> 40 $("#btn5").click(function(){ 41 //多個選擇器並列使用,用","隔開(並集) 42 $("span,#two").css("background","yellow"); 43 }); 44 45 }); 46 47 </script> 48 </head> 49 <body> 50 <button id="reset">手動重置頁面元素</button> 51 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點擊下列按鈕時先自動重置頁面</label><br /><br /> 52 <h3>基本選擇器.</h3> 53 54 <!-- 控制按鈕 --> 55 <input type="button" value="選擇 id爲 one 的元素." id="btn1"/> 56 <input type="button" value="選擇 class 爲 mini 的全部元素." id="btn2"/> 57 <input type="button" value="選擇 元素名是 div 的全部元素." id="btn3"/> 58 <input type="button" value="選擇 全部的元素." id="btn4"/> 59 <input type="button" value="選擇 全部的span元素和id爲two的元素." id="btn5"/> 60 61 <br /><br /> 62 63 <!-- 測試的元素 --> 64 <div class="one" id="one" > 65 id爲one,class爲one的div 66 <div class="mini">class爲mini</div> 67 </div> 68 69 <div class="one" id="two" title="test" > 70 id爲two,class爲one,title爲test的div. 71 <div class="mini" title="other">class爲mini,title爲other</div> 72 <div class="mini" title="test">class爲mini,title爲test</div> 73 </div> 74 75 <div class="one"> 76 <div class="mini">class爲mini</div> 77 <div class="mini">class爲mini</div> 78 <div class="mini">class爲mini</div> 79 <div class="mini"></div> 80 </div> 81 82 83 84 <div class="one"> 85 <div class="mini">class爲mini</div> 86 <div class="mini">class爲mini</div> 87 <div class="mini">class爲mini</div> 88 <div class="mini" title="tesst">class爲mini,title爲tesst</div> 89 </div> 90 91 92 <div style="display:none;" class="none">style的display爲"none"的div</div> 93 94 <div class="hide">class爲"hide"的div</div> 95 96 <div> 97 包含input的type爲"hidden"的div<input type="hidden" size="8"/> 98 </div> 99 100 101 <span id="mover">正在執行動畫的span元素.</span> 102 103 <!-- Resources from http://down.liehuo.net --> 104 </body> 105 </html>
B.層次選擇器：
若是想經過 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() 與先後位置無關, 只要是同輩節點就能夠選取
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>02-層次選擇器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="選擇 body內的全部div元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 //祖先元素和後代元素的關係 15 $("body div").css("background","yellow"); 16 }); 17 18 // <input type="button" value="在body內,選擇子元素是div的。" id="btn2"/> 19 $("#btn2").click(function(){ 20 //父子元素的關係 21 $("body>div").css("background","yellow"); 22 }); 23 24 // <input type="button" value="選擇 id爲one 的下一個兄弟節點爲div元素." id="btn3"/> 25 $("#btn3").click(function(){ 26 $("#one+div").css("background","yellow"); 27 }); 28 29 // <input type="button" value="選擇 id爲two的元素後面的全部div兄弟元素." id="btn4"/> 30 $("#btn4").click(function(){ 31 $("#two~div").css("background","yellow"); 32 }); 33 34 // <input type="button" value="選擇 id爲two的元素全部div兄弟元素." id="btn5"/> 35 $("#btn5").click(function(){ 36 $("#two").siblings("div").css("background","yellow"); 37 }); 38 }) 39 </script> 40 </head> 41 <body> 42 <h3>層次選擇器.</h3> 43 <button id="reset">手動重置頁面元素</button> 44 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點擊下列按鈕時先自動重置頁面</label><br /><br /> 45 46 <input type="button" value="選擇 body內的全部div元素." id="btn1"/> 47 <input type="button" value="在body內,選擇子元素是div的。" id="btn2"/> 48 <input type="button" value="選擇 id爲one 的下一個div元素." id="btn3"/> 49 <input type="button" value="選擇 id爲two的元素後面的全部div兄弟元素." id="btn4"/> 50 <input type="button" value="選擇 id爲two的元素全部div兄弟元素." id="btn5"/> 51 <br /> 52 <br /> 53 54 <!-- 測試的元素 --> 55 <div class="one" id="one" > 56 id爲one,class爲one的div 57 <div class="mini">class爲mini</div> 58 </div> 59 60 <div class="one" id="two" title="test" > 61 id爲two,class爲one,title爲test的div. 62 <div class="mini" title="other">class爲mini,title爲other</div> 63 <div class="mini" title="test">class爲mini,title爲test</div> 64 </div> 65 66 <div class="one"> 67 <div class="mini">class爲mini</div> 68 <div class="mini">class爲mini</div> 69 <div class="mini">class爲mini</div> 70 <div class="mini"></div> 71 </div> 72 73 74 75 <div class="one"> 76 <div class="mini">class爲mini</div> 77 <div class="mini">class爲mini</div> 78 <div class="mini">class爲mini</div> 79 <div class="mini" title="tesst">class爲mini,title爲tesst</div> 80 </div> 81 82 83 <div style="display:none;" class="none">style的display爲"none"的div</div> 84 85 <div class="hide">class爲"hide"的div</div> 86 87 <div> 88 包含input的type爲"hidden"的div<input type="hidden" size="8"/> 89 </div> 90 91 92 <span id="mover">正在執行動畫的span元素.</span> 93 94 <!-- Resources from http://down.liehuo.net --> 95 </body> 96 </html>
過濾選擇器：
過濾選擇器主要是經過特定的過濾規則來篩選出所需的 DOM 元素, 該選擇器都以 「:」 開頭
按照不一樣的過濾規則, 過濾選擇器能夠分爲基本過濾, 內容過濾, 可見性過濾, 屬性過濾, 子元素過濾和表單對象屬性過濾選擇器。
C.基礎過濾選擇器：
一、: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(固定寫法) 返回值 集合元素
說明: 匹配全部正在執行動畫效果的元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>03-基本過濾選擇器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="選擇第一個div元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 $("div:first").css("background","yellow"); 15 }) 16 17 // <input type="button" value="選擇最後一個div元素." id="btn2"/> 18 $("#btn2").click(function(){ 19 $("div:last").css("background","yellow"); 20 }) 21 22 // <input type="button" value="選擇class不爲one的 全部div元素." id="btn3"/> 23 $("#btn3").click(function(){ 24 //class不爲one的元素,包含沒有class屬性的 25 $("div:not('.one')").css("background","yellow"); 26 }) 27 28 // <input type="button" value="選擇索引值爲偶數 的div元素." id="btn4"/> 29 $("#btn4").click(function(){ 30 $("div:even").css("background","yellow"); 31 }) 32 33 // <input type="button" value="選擇索引值爲奇數 的div元素." id="btn5"/> 34 $("#btn5").click(function(){ 35 $("div:odd").css("background","yellow"); 36 }) 37 38 // <input type="button" value="選擇索引值等於3的元素." id="btn6"/> 39 $("#btn6").click(function(){ 40 $("div:eq(3)").css("background","yellow"); 41 }) 42 43 // <input type="button" value="選擇索引值大於3的元素." id="btn7"/> 44 $("#btn7").click(function(){ 45 $("div:gt(3)").css("background","yellow"); 46 }) 47 48 // <input type="button" value="選擇索引值小於3的元素." id="btn8"/> 49 $("#btn8").click(function(){ 50 $("div:lt(3)").css("background","yellow"); 51 }) 52 53 // <input type="button" value="選擇全部的標題元素." id="btn9"/> 54 $("#btn9").click(function(){ 55 $(":header").css("background","yellow"); 56 }) 57 58 // <input type="button" value="選擇當前正在執行動畫的全部元素." id="btn10"/> 59 function move(){ 60 $("#mover").slideToggle("fast",move); 61 } 62 move(); 63 64 $("#btn10").click(function(){ 65 $(":animated").css("background","yellow"); 66 }) 67 68 }); 69 </script> 70 </head> 71 <body> 72 <h3>基本過濾選擇器.</h3> 73 <button id="reset">手動重置頁面元素</button> 74 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點擊下列按鈕時先自動重置頁面</label><br /><br /> 75 76 <input type="button" value="選擇第一個div元素." id="btn1"/> 77 <input type="button" value="選擇最後一個div元素." id="btn2"/> 78 <input type="button" value="選擇class不爲one的 全部div元素." id="btn3"/> 79 <input type="button" value="選擇索引值爲偶數 的div元素." id="btn4"/> 80 <input type="button" value="選擇索引值爲奇數 的div元素." id="btn5"/> 81 <input type="button" value="選擇索引值等於3的元素." id="btn6"/> 82 <input type="button" value="選擇索引值大於3的元素." id="btn7"/> 83 <input type="button" value="選擇索引值小於3的元素." id="btn8"/> 84 <input type="button" value="選擇全部的標題元素." id="btn9"/> 85 <input type="button" value="選擇當前正在執行動畫的全部元素." id="btn10"/> 86 87 <br /><br /> 88 89 <!-- 測試的元素 --> 90 <div class="one" id="one" > 91 id爲one,class爲one的div 92 <div class="mini">class爲mini</div> 93 </div> 94 95 <div class="one" id="two" title="test" > 96 id爲two,class爲one,title爲test的div. 97 <div class="mini" title="other">class爲mini,title爲other</div> 98 <div class="mini" title="test">class爲mini,title爲test</div> 99 </div> 100 101 <div class="one"> 102 <div class="mini">class爲mini</div> 103 <div class="mini">class爲mini</div> 104 <div class="mini">class爲mini</div> 105 <div class="mini"></div> 106 </div> 107 108 109 110 <div class="one"> 111 <div class="mini">class爲mini</div> 112 <div class="mini">class爲mini</div> 113 <div class="mini">class爲mini</div> 114 <div class="mini" title="tesst">class爲mini,title爲tesst</div> 115 </div> 116 117 118 <div style="display:none;" class="none">style的display爲"none"的div</div> 119 120 <div class="hide">class爲"hide"的div</div> 121 122 <div> 123 包含input的type爲"hidden"的div<input type="hidden" size="8"/> 124 </div> 125 126 127 <span id="mover">正在執行動畫的span元素.</span> 128 129 <!-- Resources from http://down.liehuo.net --> 130 </body> 131 </html>
D.內容過濾選擇器
內容過濾選擇器的過濾規則主要體如今它所包含的子元素和文本內容上
一、: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」造成反義詞.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>04-內容過濾選擇器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="選取含有文本「di」的div元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 $("div:contains('di')").css("background","yellow"); 15 }) 16 17 // <input type="button" value="選取不包含子元素(或者文本元素)的div空元素." id="btn2"/> 18 $("#btn2").click(function(){ 19 $("div:empty").css("background","yellow"); 20 }) 21 22 // <input type="button" value="選取含有class爲mini元素 的div元素." id="btn3"/> 23 $("#btn3").click(function(){ 24 $("div:has('.mini')").css("background","yellow"); 25 }) 26 27 // <input type="button" value="選取含有子元素(或者文本元素)的div元素." id="btn4"/> 28 $("#btn4").click(function(){ 29 $("div:parent").css("background","yellow"); 30 }) 31 32 }); 33 </script> 34 </head> 35 <body> 36 <h3>內容過濾選擇器.</h3> 37 <button id="reset">手動重置頁面元素</button> 38 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點擊下列按鈕時先自動重置頁面</label><br /><br /> 39 40 <input type="button" value="選取含有文本「di」的div元素." id="btn1"/> 41 <input type="button" value="選取不包含子元素(或者文本元素)的div空元素." id="btn2"/> 42 <input type="button" value="選取含有class爲mini元素 的div元素." id="btn3"/> 43 <input type="button" value="選取含有子元素(或者文本元素)的div元素." id="btn4"/> 44 45 46 <br /><br /> 47 48 <!-- 測試的元素 --> 49 <div class="one" id="one" > 50 id爲one,class爲one的div 51 <div class="mini">class爲mini</div> 52 </div> 53 54 <div class="one" id="two" title="test" > 55 id爲two,class爲one,title爲test的div. 56 <div class="mini" title="other">class爲mini,title爲other</div> 57 <div class="mini" title="test">class爲mini,title爲test</div> 58 </div> 59 60 <div class="one"> 61 <div class="mini">class爲mini</div> 62 <div class="mini">class爲mini</div> 63 <div class="mini">class爲mini</div> 64 <div class="mini"></div> 65 </div> 66 67 68 69 <div class="one"> 70 <div class="mini">class爲mini</div> 71 <div class="mini">class爲mini</div> 72 <div class="mini">class爲mini</div> 73 <div class="mini" title="tesst">class爲mini,title爲tesst</div> 74 </div> 75 76 77 <div style="display:none;" class="none">style的display爲"none"的div</div> 78 79 <div class="hide">class爲"hide"的div</div> 80 81 <div> 82 包含input的type爲"hidden"的div<input type="hidden" size="8"/> 83 </div> 84 85 86 <span id="mover">正在執行動畫的span元素.</span> 87 88 <!-- Resources from http://down.liehuo.net --> 89 </body> 90 </html>
E.可見度過濾選擇器
可見度過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素
一、:hidden用法: $(」tr:hidden」) 返回值 集合元素
說明: 匹配全部的不可見元素，input 元素的 type 屬性爲 「hidden」 的話也會被匹配到.意思是css中display:none和input type=」hidden」的都會被匹配到.一樣,要在腦海中完全分清楚冒號」:」, 點號」.」和逗號」,」的區別.
二、:visible用法: $(」tr:visible」) 返回值 集合元素
說明: 匹配全部的可見元素.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>05-可見性過濾選擇器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value=" 選取全部可見的div元素" id="b1"/> 13 $("#b1").click(function(){ 14 $("div:visible").css("background","yellow"); 15 }); 16 17 // <input type="button" value=" 選取全部不可見的元素, 利用 jQuery 中的 show() 方法將它們顯示出來" id="b2"/> 18 $("#b2").click(function(){ 19 $("div:hidden").show(3000).css("background","yellow"); 20 }); 21 22 // <input type="button" value=" 選取全部的文本隱藏域, 並打印它們的值" id="b3"/> 23 $("#b3").click(function(){ 24 /* 25 * <!--文本隱藏域--> 26 <input type="hidden" value="hidden_1"> 27 <input type="hidden" value="hidden_2"> 28 <input type="hidden" value="hidden_3"> 29 <input type="hidden" value="hidden_4"> 30 */ 31 var $inputs = $("input:hidden"); 32 33 // for(var i=0;i<$inputs.length;i++){ 34 // var input = $inputs[i]; 35 // alert(input.value); 36 // } 37 38 /* 39 * jQuery提供的隱式迭代的方法 40 * each(callback) 41 * * callback:回調函數,function(index,domEle){} 42 * * index:索引值 43 * * domEle:DOM對象 44 */ 45 $inputs.each(function(index,domEle){ 46 alert(domEle.value) 47 }); 48 49 }); 50 51 // <input type="button" value=" 選取全部的文本隱藏域, 並打印它們的值" id="b4"/> 52 $("#b4").click(function(){ 53 /* 54 * <!--文本隱藏域--> 55 <input type="hidden" value="hidden_1"> 56 <input type="hidden" value="hidden_2"> 57 <input type="hidden" value="hidden_3"> 58 <input type="hidden" value="hidden_4"> 59 */ 60 var $inputs = $("input:hidden"); 61 62 /* 63 * jQuery還提供了隱式迭代的方法 64 * jQuery.each(object,callback) 65 * * jQuery.each()和each()方法的區別: 66 * * each():至關於Java中的實例方法,$(expr).each() 67 * * jQuery.each():至關於Java中的靜態方法,$.each() 68 * * jQuery.each(object,callback) 69 * * object:須要例遍的對象或數組。 70 * * callback:回調函數,function(index,domEle){} 71 * * index:索引值 72 * * domEle:DOM對象 73 */ 74 $.each($inputs,function(index,domEle){ 75 //alert(domEle.value); 76 //alert($(domEle).val()); 77 78 /* 79 * this的用法: 80 * * 指代當前頁面元素內容,這裏的元素內容就能夠稱之爲DOM對象 81 * * this的使用,必需要在一個具備上下文環境 82 * * 建議:實際開發中,this的使用盡可能不要用 83 */ 84 //alert(this.value); 85 alert($(this).val()); 86 }); 87 88 }); 89 90 }) 91 </script> 92 </head> 93 <body> 94 <h3>可見性過濾選擇器.</h3> 95 <button id="reset">手動重置頁面元素</button> 96 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點擊下列按鈕時先自動重置頁面</label> 97 <br/><br/> 98 <input type="button" value=" 選取全部可見的div元素" id="b1"/> 99 <input type="button" value=" 選取全部不可見的元素, 利用 jQuery 中的 show() 方法將它們顯示出來" id="b2"/> 100 <input type="button" value=" 選取全部的文本隱藏域, 並打印它們的值" id="b3"/> 101 <input type="button" value=" 選取全部的文本隱藏域, 並打印它們的值" id="b4"/> 102 <br /><br /> 103 104 <!--文本隱藏域--> 105 <input type="hidden" value="hidden_1"> 106 <input type="hidden" value="hidden_2"> 107 <input type="hidden" value="hidden_3"> 108 <input type="hidden" value="hidden_4"> 109 110 <div class="one" id="one" > 111 id爲one,class爲one的div 112 <div class="mini">class爲mini</div> 113 </div> 114 115 <div class="one" id="two" title="test" > 116 id爲two,class爲one,title爲test的div. 117 <div class="mini" title="other">class爲mini,title爲other</div> 118 <div class="mini" title="test">class爲mini,title爲test</div> 119 </div> 120 121 <div class="one"> 122 <div class="mini">class爲mini</div> 123 <div class="mini">class爲mini</div> 124 <div class="mini">class爲mini</div> 125 <div class="mini" title="tesst">class爲mini,title爲tesst</div> 126 </div> 127 128 129 <div style="display:none;" class="none">style的display爲"none"的div</div> 130 131 <div class="hide">class爲"hide"的div</div> 132 133 <span id="mover">正在執行動畫的span元素.</span> 134 <!-- Resources from http://down.liehuo.net --> 135 </body> 136 </html>
F.屬性過濾選擇器
屬性過濾選擇器的過濾規則是經過元素的屬性來獲取相應的元素
一、[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 結尾的元素.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>06-屬性選擇器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="選取含有 屬性title 的div元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 $("div[title]").css("background","yellow"); 15 }); 16 17 // <input type="button" value="選取 屬性title值等於「test」的div元素." id="btn2"/> 18 $("#btn2").click(function(){ 19 $("div[title=test]").css("background","yellow"); 20 }); 21 22 // <input type="button" value="選取 屬性title值不等於「test」的div元素(沒有屬性title的也將被選中)." id="btn3"/> 23 $("#btn3").click(function(){ 24 $("div[title!=test]").css("background","yellow"); 25 }); 26 27 // <input type="button" value="選取 屬性title值 以「te」開始 的div元素." id="btn4"/> 28 $("#btn4").click(function(){ 29 $("div[title^=te]").css("background","yellow"); 30 }); 31 32 // <input type="button" value="選取 屬性title值 以「est」結束 的div元素." id="btn5"/> 33 $("#btn5").click(function(){ 34 $("div[title$=est]").css("background","yellow"); 35 }); 36 37 // <input type="button" value="選取 屬性title值 含有「es」的div元素." id="btn6"/> 38 $("#btn6").click(function(){ 39 $("div[title*=es]").css("background","yellow"); 40 }); 41 42 // <input type="button" value="組合屬性選擇器,首先選取有屬性id的div元素，而後在結果中 選取屬性title值 含有「es」的元素." id="btn7"/> 43 $("#btn7").click(function(){ 44 //多個屬性過濾選擇器並列使用(交集) 45 $("div[id][title*=es]").css("background","yellow"); 46 }); 47 48 }); 49 </script> 50 </head> 51 <body> 52 <button id="reset">手動重置頁面元素</button> 53 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點擊下列按鈕時先自動重置頁面</label> 54 55 56 57 <h3> 屬性選擇器.</h3> 58 <input type="button" value="選取含有 屬性title 的div元素." id="btn1"/> 59 <input type="button" value="選取 屬性title值等於「test」的div元素." id="btn2"/> 60 <input type="button" value="選取 屬性title值不等於「test」的div元素(沒有屬性title的也將被選中)." id="btn3"/> 61 <input type="button" value="選取 屬性title值 以「te」開始 的div元素." id="btn4"/> 62 <input type="button" value="選取 屬性title值 以「est」結束 的div元素." id="btn5"/> 63 <input type="button" value="選取 屬性title值 含有「es」的div元素." id="btn6"/> 64 <input type="button" value="組合屬性選擇器,首先選取有屬性id的div元素，而後在結果中 選取屬性title值 含有「es」的元素." id="btn7"/> 65 66 67 68 69 <br /><br /> 70 <div class="one" id="one" > 71 id爲one,class爲one的div 72 <div class="mini">class爲mini</div> 73 </div> 74 75 <div class="one" id="two" title="test" > 76 id爲two,class爲one,title爲test的div. 77 <div class="mini" title="other">class爲mini,title爲other</div> 78 <div class="mini" title="test">class爲mini,title爲test</div> 79 </div> 80 81 <div class="one"> 82 <div class="mini">class爲mini</div> 83 <div class="mini">class爲mini</div> 84 <div class="mini">class爲mini</div> 85 <div class="mini"></div> 86 </div> 87 88 89 90 <div class="one"> 91 <div class="mini">class爲mini</div> 92 <div class="mini">class爲mini</div> 93 <div class="mini">class爲mini</div> 94 <div class="mini" title="tesst">class爲mini,title爲tesst</div> 95 </div> 96 97 98 <div style="display:none;" class="none">style的display爲"none"的div</div> 99 100 <div class="hide">class爲"hide"的div</div> 101 102 <div> 103 包含input的type爲"hidden"的div<input type="hidden" size="8"/> 104 </div> 105 106 107 <span id="mover">正在執行動畫的span元素.</span> 108 <!-- Resources from http://down.liehuo.net --> 109 </body> 110 </html>
G.子元素過濾選擇器
一、: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」) 返回值 集合元素
說明: 若是某個元素是父元素中惟一的子元素,那將會被匹配.若是父元素中含有其餘元素,那將不會被匹配.意思就是:只有一個子元素的纔會被匹配!
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>07-子元素過濾選擇器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="選取每一個class爲one的div父元素下的第2個子元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 /* 15 * * 子元素過濾選擇器的特殊用法,要在其前面增長空格 16 * * 子元素過濾選擇器的起始位置爲"1" 17 */ 18 $("div[class=one] :nth-child(1)").css("background","yellow"); 19 }) 20 21 // <input type="button" value="選取每一個class爲one的div父元素下的第一個子元素." id="btn2"/> 22 $("#btn2").click(function(){ 23 $("div[class=one] :first-child").css("background","yellow"); 24 }) 25 26 // <input type="button" value="選取每一個class爲one的div父元素下的最後一個子元素." id="btn3"/> 27 $("#btn3").click(function(){ 28 $("div[class=one] :last-child").css("background","yellow"); 29 }) 30 31 // <input type="button" value="若是class爲one的div父元素下的僅僅只有一個子元素，那麼選中這個子元素." id="btn4"/> 32 $("#btn4").click(function(){ 33 $("div[class=one] :only-child").css("background","yellow"); 34 }) 35 36 }) 37 38 </script> 39 </head> 40 <body> 41 <button id="reset">手動重置頁面元素</button> 42 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點擊下列按鈕時先自動重置頁面</label> 43 44 <h3>子元素過濾選擇器.</h3> 45 <input type="button" value="選取每一個class爲one的div父元素下的第2個子元素." id="btn1"/> 46 <input type="button" value="選取每一個class爲one的div父元素下的第一個子元素." id="btn2"/> 47 <input type="button" value="選取每一個class爲one的div父元素下的最後一個子元素." id="btn3"/> 48 <input type="button" value="若是class爲one的div父元素下的僅僅只有一個子元素，那麼選中這個子元素." id="btn4"/> 49 50 51 52 53 <br /><br /> 54 <div class="one" id="one" > 55 id爲one,class爲one的div 56 <div class="mini">class爲mini</div> 57 </div> 58 59 <div class="one" id="two" title="test" > 60 id爲two,class爲one,title爲test的div. 61 <div class="mini" title="other">class爲mini,title爲other</div> 62 <div class="mini" title="test">class爲mini,title爲test</div> 63 </div> 64 65 <div class="one"> 66 <div class="mini">class爲mini</div> 67 <div class="mini">class爲mini</div> 68 <div class="mini">class爲mini</div> 69 <div class="mini"></div> 70 </div> 71 72 73 74 <div class="one"> 75 <div class="mini">class爲mini</div> 76 <div class="mini">class爲mini</div> 77 <div class="mini">class爲mini</div> 78 <div class="mini" title="tesst">class爲mini,title爲tesst</div> 79 </div> 80 81 82 <div style="display:none;" class="none">style的display爲"none"的div</div> 83 84 <div class="hide">class爲"hide"的div</div> 85 86 <div> 87 包含input的type爲"hidden"的div<input type="hidden" size="8"/> 88 </div> 89 90 91 <span id="mover">正在執行動畫的span元素.</span> 92 <!-- Resources from http://down.liehuo.net --> 93 </body> 94 </html>
H.表單對象屬性過濾選擇器
此選擇器主要對所選擇的表單元素進行過濾
一、:enabled用法: $(」input:enabled」) 返回值 集合元素
說明: 匹配全部可用元素.意思是查找全部input中不帶有disabled=」disabled」的input.不爲disabled,固然就爲enabled啦.
二、:disabled用法: $(」input:disabled」) 返回值 集合元素
說明: 匹配全部不可用元素.與上面的那個是相對應的.
三、:checked用法: $(」input:checked」) 返回值 集合元素
說明: 匹配全部選中的被選中元素(複選框、單選框等，不包括select中的option).這話提及來有些繞口.
四、:selected用法: $(」select option:selected」) 返回值 集合元素
說明: 匹配全部選中的option元素.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>08-表單對象屬性過濾選擇器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 11 <script type="text/javascript"> 12 $(document).ready(function(){ 13 // <button id="btn1">對錶單內 可用input 賦值操做.</button> 14 $("#btn1").click(function(){ 15 /* 16 * 可用元素：<input name="add" value="可用文本框"/> <br/> 17 不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/> 18 可用元素： <input name="che" value="可用文本框" /><br/> 19 不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/> 20 */ 21 /* 22 * val():獲取和設置 23 * * 獲取:不傳參數 24 * * 設置:傳遞傳輸 25 */ 26 $("input:enabled").val("xxxxx"); 27 28 }); 29 30 // <button id="btn2">對錶單內 不可用input 賦值操做.</button> 31 $("#btn1").click(function(){ 32 /* 33 * 可用元素：<input name="add" value="可用文本框"/> <br/> 34 不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/> 35 可用元素： <input name="che" value="可用文本框" /><br/> 36 不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/> 37 */ 38 /* 39 * val():獲取和設置 40 * * 獲取:不傳參數 41 * * 設置:傳遞傳輸 42 */ 43 $("input:disabled").val("xxxxx"); 44 45 }); 46 47 // <button id="btn3">獲取多選框選中的個數.</button> 48 $("#btn3").click(function(){ 49 /* 50 * <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1 51 <input type="checkbox" name="newsletter" value="test2" />test2 52 <input type="checkbox" name="newsletter" value="test3" />test3 53 <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4 54 <input type="checkbox" name="newsletter" value="test5" />test5 55 */ 56 alert($("input[name=newsletter]:checked").length); 57 58 }); 59 60 // <button id="btn4">獲取下拉框選中的內容.</button> 61 $("#btn4").click(function(){ 62 /* 63 * 下拉列表1：<br/> 64 <select name="test" multiple="multiple" style="height:100px"> 65 <option>浙江</option> 66 <option selected="selected">湖南</option> 67 <option>北京</option> 68 <option selected="selected">天津</option> 69 <option>廣州</option> 70 <option>湖北</option> 71 </select> 72 73 <br/><br/> 74 下拉列表2：<br/> 75 <select name="test2" > 76 <option>浙江</option> 77 <option>湖南</option> 78 <option selected="selected">北京</option> 79 <option>天津</option> 80 <option>廣州</option> 81 <option>湖北</option> 82 </select> 83 */ 84 alert($("select>option:selected").text()); 85 86 }); 87 88 }); 89 </script> 90 91 </head> 92 <body> 93 <h3> 表單對象屬性過濾選擇器.</h3> 94 <form id="form1" action="#"> 95 <button type="reset">重置全部表單元素</button> 96 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點擊下列按鈕時先自動重置頁面</label> 97 <br /><br /> 98 <button id="btn1">對錶單內 可用input 賦值操做.</button> 99 <button id="btn2">對錶單內 不可用input 賦值操做.</button> 100 <button id="btn3">獲取多選框選中的個數.</button> 101 <button id="btn4">獲取下拉框選中的內容.</button> 102 103 <br /><br /> 104 105 可用元素：<input name="add" value="可用文本框"/> <br/> 106 不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/> 107 可用元素： <input name="che" value="可用文本框" /><br/> 108 不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/> 109 <br/> 110 多選框：<br/> 111 <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1 112 <input type="checkbox" name="newsletter" value="test2" />test2 113 <input type="checkbox" name="newsletter" value="test3" />test3 114 <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4 115 <input type="checkbox" name="newsletter" value="test5" />test5 116 <div></div> 117 118 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 119 下拉列表1：<br/> 120 <select name="test" multiple="multiple" style="height:100px"> 121 <option>浙江</option> 122 <option selected="selected">湖南</option> 123 <option>北京</option> 124 <option selected="selected">天津</option> 125 <option>廣州</option> 126 <option>湖北</option> 127 </select> 128 129 <br/><br/> 130 下拉列表2：<br/> 131 <select name="test2" > 132 <option>浙江</option> 133 <option>湖南</option> 134 <option selected="selected">北京</option> 135 <option>天津</option> 136 <option>廣州</option> 137 <option>湖北</option> 138 </select> 139 <br/><br/> 140 141 <div></div> 142 </form> 143 144 145 146 <!-- Resources from http://down.liehuo.net --> 147 </body> 148 </html>
I.表單選擇器
一、: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的,
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>09-表單選擇器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <script type="text/javascript"> 9 //<![CDATA[ 10 $(document).ready(function(){ 11 12 var $alltext = $("#form1 :text"); 13 var $allpassword= $("#form1 :password"); 14 var $allradio= $("#form1 :radio"); 15 var $allcheckbox= $("#form1 :checkbox"); 16 17 var $allsubmit= $("#form1 :submit"); 18 var $allimage= $("#form1 :image"); 19 var $allreset= $("#form1 :reset"); 20 var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>均可以匹配 21 var $allfile= $("#form1 :file"); 22 var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>均可以匹配. 23 var $allselect = $("#form1 select"); 24 var $alltextarea = $("#form1 textarea"); 25 26 var $AllInputs = $("#form1 :input"); 27 var $inputs = $("#form1 input"); 28 29 $("div").append(" 有" + $alltext.length + " 個（ :text 元素）<br/>") 30 .append(" 有" + $allpassword.length + " 個（ :password 元素）<br/>") 31 .append(" 有" + $allradio.length + " 個（ :radio 元素）<br/>") 32 .append(" 有" + $allcheckbox.length + " 個（ :checkbox 元素）<br/>") 33 .append(" 有" + $allsubmit.length + " 個（ :submit 元素）<br/>") 34 .append(" 有" + $allimage.length + " 個（ :image 元素）<br/>") 35 .append(" 有" + $allreset.length + " 個（ :reset 元素）<br/>") 36 .append(" 有" + $allbutton.length + " 個（ :button 元素）<br/>") 37 .append(" 有" + $allfile.length + " 個（ :file 元素）<br/>") 38 .append(" 有" + $allhidden.length + " 個（ :hidden 元素）<br/>") 39 .append(" 有" + $allselect.length + " 個（ select 元素）<br/>") 40 .append(" 有" + $alltextarea.length + " 個（ textarea 元素）<br/>") 41 .append(" 表單有 " + $inputs.length + " 個（input）元素。<br/>") 42 .append(" 總共有 " + $AllInputs.length + " 個(:input)元素。<br/>") 43 .css("color", "red") 44 45 $("form").submit(function () { return false; }); // return false;不能提交. 46 47 }); 48 //]]> 49 </script> 50 </head> 51 <body> 52 <form id="form1" action="#"> 53 <input type="button" value="Button"/><br/> 54 <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/> 55 <input type="file" /><br/> 56 <input type="hidden" /><div style="display:none">test</div><br/> 57 <input type="image" /><br/> 58 <input type="password" /><br/> 59 <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/> 60 <input type="reset" /><br/> 61 <input type="submit" value="提交"/><br/> 62 <input type="text" /><br/> 63 <select><option>Option</option></select><br/> 64 <textarea rows="5" cols="20"></textarea><br/> 65 <button>Button</button><br/> 66 </form> 67 68 <div></div> 69 <!-- Resources from http://down.liehuo.net --> 70 </body> 71 </html>
* 建議：
* 必定要將九個頁面強加練習
* 熟悉jQuery的幫助文檔
DOM操做
對比原生DOM操做來學習
* 獲取節點： * 元素節點：全部選擇器 * 文本節點：text() * 屬性節點： * attr() * removeAttr() * 建立節點： * 元素節點：$(HTML代碼),注意標籤的閉合 * 文本節點：text() * 屬性節點：attr() * 刪除節點： * remove()：刪除自身節點及後代節點 * empty()：刪除後代節點，保留自身節點
查找節點
查找元素節點
var $usernameElement = $("#username");
alert("jquery "+$usernameElement.val());
查找屬性節點
jQuery查找到須要的元素節點後，使用attr()方法來獲取它的各類屬性的值。
$usernameElement.attr("value");
查找文本節點
jQuery查找到須要的元素節點後，使用text()方法來獲取它的文本內容。
$usernameElement.text();
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>01_查找節點.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 <body> 9 <ul> 10 <li id="bj"></li> 11 <li id="tj" name="tianjin">天津</li> 12 13 </ul> 14 </body> 15 <script type="text/javascript"> 16 // alert($("#bj").text()); 17 // 18 // $("#bj").text("北京"); 19 // alert($("#bj").text()); 20 21 alert($("#bj").attr("name")); 22 23 $("#bj").attr("name","beijing"); 24 alert($("#bj").attr("name")); 25 26 $("#bj").removeAttr("name"); 27 alert($("#bj").attr("name")); 28 </script> 29 30 </html>
建立節點
建立元素節點
使用 jQuery 的工廠函數 $(HTML) 。該工廠函數會根據傳入的 html 標記字符串建立一個 DOM 對象, 並把這個 DOM 對象包裝成一個 jQuery 對象返回。
當建立單個元素時, 需注意閉合標籤。
var $option = $("<option></option>");
建立文本節點
建立元素節點後，使用text()方法來設置其節點的文本內容。
$option.text("北京");
建立元素節點時，直接將其節點的文本內容插入其中。
var $option = $("<option>北京</option>");
建立屬性節點
建立元素節點後，使用attr()方法來設置其節點的屬性。
$option.attr("value","北京");
建立元素節點時，直接將其節點的屬性插入其中。
var $option = $("<option value="北京">北京</option>");
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>02_建立節點.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 <body> 9 <ul id="city"> 10 <li id="bj" name="beijing">北京</li> 11 </ul> 12 </body> 13 <script type="text/javascript"> 14 //在city下增長<li id="tj" name="tianjin">天津</li>節點 15 //1 建立<li id="tj" name="tianjin">天津</li> 16 // //1 建立元素節點<li></li> 17 // var $li = $("<li></li>"); //建立元素節點:$(HTML代碼) 標籤閉合 18 // 19 // //2 設置屬性 20 // $li.attr("id","tj"); 21 // $li.attr("name","tianjin"); 22 // 23 // //3 設置文本內容 24 // $li.text("天津"); 25 26 var $li = $("<li id='tj' name='tianjin'>天津</li>"); 27 28 //2 獲取id="city"標籤 29 //3 添加 30 $("#city").append($li); 31 32 </script> 33 34 </html>
插入節點
1.內部插入節點（標籤內部插入）
append(content) :向每一個匹配的元素的內部的結尾處追加內容
appendTo(content) :將每一個匹配的元素追加到指定的元素中的內部結尾處
prepend(content):向每一個匹配的元素的內部的開始處插入內容
prependTo(content) :將每一個匹配的元素插入到指定的元素內部的開始處
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>03_內部插入節點.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 9 <body> 10 <ul id="city"> 11 <li id="bj" name="beijing">北京</li> 12 <li id="tj" name="tianjin">天津</li> 13 <li id="cq" name="chongqing">重慶</li> 14 </ul> 15 16 17 <ul id="love"> 18 <li id="fk" name="fankong">反恐</li> 19 <li id="xj" name="xingji">星際</li> 20 </ul> 21 22 <div id="foo1">Hello1</div> 23 24 </body> 25 <script type="text/javascript"> 26 //* append(content) :向每一個匹配的元素的內部的結尾處追加內容 27 //append後面的元素插入到append前面的元素的後面 28 // $("#bj").append($("#fk")); 29 30 //* appendTo(content) :將每一個匹配的元素追加到指定的元素中的內部結尾處 31 //appendTo前面的元素插入到appendTo後面的元素的後面 32 // $("#bj").appendTo($("#fk")); 33 34 //* prepend(content):向每一個匹配的元素的內部的開始處插入內容 35 //prepend後面的元素插入到prepend前面的元素的前面 36 $("#bj").prepend($("#fk")); 37 38 //* prependTo(content) :將每一個匹配的元素插入到指定的元素內部的開始處 39 //prependTo前面元素插入到prependTo後面元素的前面 40 // $("#bj").prependTo($("#fk")); 41 42 </script> 43 44 </html>
2.外部插入節點（標籤外部插入）
after(content) :在每一個匹配的元素以後插入內容
before(content):在每一個匹配的元素以前插入內容
insertAfter(content):把全部匹配的元素插入到另外一個、指定的元素元素集合的後面
insertBefore(content) :把全部匹配的元素插入到另外一個、指定的元素元素集合的前面
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>04_外部插入節點.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 9 <body> 10 <ul id="city"> 11 <li id="bj" name="beijing">北京</li> 12 <li id="tj" name="tianjin">天津</li> 13 <li id="cq" name="chongqing">重慶</li> 14 </ul> 15 16 <p id="p3">I would like to say: p3</p> 17 18 <p id="p2">I would like to say: p2</p> 19 20 <p id="p1">I would like to say: p1</p> 21 22 </body> 23 <script type="text/javascript"> 24 //* after(content) :在每一個匹配的元素以後插入內容 25 //after後面的元素插入到after前面的元素的後面 26 // $("#bj").after($("#p2")); 27 28 //* before(content):在每一個匹配的元素以前插入內容 29 //before後面的元素插入到before前面的元素的前面 30 $("#bj").before($("#p2")); 31 32 //* insertAfter(content):把全部匹配的元素插入到另外一個、指定的元素集合的後面 33 //insertAfter前面的元素插入到insertAfter後面的元素的後面 34 // $("#bj").insertAfter($("#p2")); 35 36 //* insertBefore(content) :把全部匹配的元素插入到另外一個、指定的元素元素集合的前面 37 //insertBefore前面的元素插入到insertBefore後面的元素的前面 38 // $("#bj").insertBefore($("#p2")); 39 40 </script> 41 42 </html>
刪除節點
remove(): 從 DOM 中刪除全部匹配的元素, 傳入的參數用於根據 jQuery 表達式來篩選元素. 當某個節點用 remove() 方法刪除後, 該節點所包含的全部後代節點將被同時刪除. 這個方法的返回值是一個指向已被刪除的節點的引用。
empty(): 清空節點 – 清空元素中的全部後代節點(不包含屬性節點)。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>05_刪除節點.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 9 <body> 10 <ul id="city"> 11 <li id="bj" name="beijing">北京<p>海淀區</p></li> 12 <li id="tj" name="tianjin">天津<p>河西區</p></li> 13 <li id="cq" name="chongqing">重慶</li> 14 </ul> 15 <p class="hello">Hello</p> how are <p>you?</p> 16 </body> 17 <script type="text/javascript"> 18 //刪除<li id="bj" name="beijing">北京</li> 19 $("#bj").remove(); 20 21 //刪除全部的子節點 清空元素中的全部後代節點(不包含屬性節點). 22 $("#tj").empty(); 23 24 alert($("#tj").attr("name")); 25 26 27 </script> 28 29 </html>
複製節點
clone(): 克隆匹配的 DOM 元素, 返回值爲克隆後的副本. 但此時複製的新節點不具備任何行爲.
clone(true): 複製元素的同時也複製元素中的的事件 （true表明同時複製該元素事件）；
<button>保存</button> <p>段落</p> $("button").click(function(){ alert("點擊按鈕"); }); //克隆節點，不克隆事件 $("button").clone().appendTo("p"); //克隆節點，克隆事件 $("button").clone(true).appendTo("p");
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>06_複製節點.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 <body> 9 <button>保存</button><br> 10 <p>段落</p> 11 </body> 12 <script type="text/javascript"> 13 //button增長事件 14 $("button").click(function(){ 15 alert("button"); 16 }); 17 18 19 //克隆button 追加到p上 ,但事件不克隆 20 //clone(): 克隆匹配的 DOM 元素, 返回值爲克隆後的副本. 但此時複製的新節點不具備任何行爲 21 $("button").clone(true).appendTo($("p")) 22 23 24 //克隆button 追加到p上 ,但事件也克隆 25 //clone(true): 複製元素的同時也複製元素中的的事件 26 27 </script> 28 </html>
替換節點
replaceWith(): 將全部匹配的元素都替換爲指定的 HTML 或 DOM 元素，前面的元素是被替換元素；後面的元素是替換元素
replaceAll(): 顛倒了的 replaceWith() 方法.前面的元素是替換元素；後面的元素是被替換元素
注意: 若在替換以前, 已經在元素上綁定了事件, 替換後原先綁定的事件會與原先的元素一塊兒消失
//<p>段落</p> //方式一 $("p").replaceWith("<button>登錄</button>"); //方式二 $("<button>登錄</button>").replaceAll("p");
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>07_替換節點.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 <html> 9 <p>段落</p> 10 <p>段落</p> 11 <p>段落</p> 12 <button>保存</button> 13 </html> 14 <script type="text/javascript"> 15 //$("button")用 <p>tttttttt</p>替換 16 $("button").replaceWith($("<p>tttttttt</p>")); 17 18 // p 用 <button>保存</button> 替換 19 $("<button>保存</button>").replaceAll($("p")); 20 21 </script> 22 </html>
樣式操做
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>08_樣式操做.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 <style type="text/css"> 8 .one{ 9 width: 200px; 10 height: 140px; 11 margin: 40px; 12 background: red; 13 border: #000 1px solid; 14 float:left; 15 font-size: 17px; 16 font-family:Roman; 17 } 18 19 div,span{ 20 width: 140px; 21 height: 140px; 22 margin: 20px; 23 background: #9999CC; 24 border: #000 1px solid; 25 float:left; 26 font-size: 17px; 27 font-family:Roman; 28 } 29 30 div.mini{ 31 width: 30px; 32 height: 30px; 33 background: #CC66FF; 34 border: #000 1px solid; 35 font-size: 12px; 36 font-family:Roman; 37 } 38 </style> 39 40 41 </head> 42 <body> 43 <input type="button" value="採用屬性增長樣式" id="b1"/> 44 <input type="button" value=" addClass" id="b2"/> 45 <input type="button" value="removeClass" id="b3"/> 46 <input type="button" value=" 切換樣式" id="b4"/> 47 <input type="button" value=" hasClass" id="b5"/> 48 49 50 <h1>天氣冷了</h1> 51 <h2>天氣又冷了</h2> 52 53 54 55 <br> 56 <div id="mover"> 57 動畫 58 </div> 59 <br> 60 <span class="spanone"> span 61 </span> 62 63 </body> 64 <script type="text/javascript"> 65 //<input type="button" value="採用屬性增長樣式" id="b1"/> 66 $("#b1").click(function(){ 67 $("#mover").attr("class","one"); 68 }); 69 70 //<input type="button" value=" addClass" id="b2"/> 71 $("#b2").click(function(){ 72 $("#mover").addClass("mini"); 73 }); 74 75 //<input type="button" value="removeClass" id="b3"/> 76 $("#b3").click(function(){ 77 /* 78 * removeClass() 79 * * 不傳:刪除全部樣式 80 * * 傳遞:刪除指定樣式 81 */ 82 $("#mover").removeClass(); 83 }); 84 85 //<input type="button" value=" 切換樣式" id="b4"/> 86 $("#b4").click(function(){ 87 //toggleClass():切換樣式是在沒有樣式與指定樣式之間 88 $("#mover").toggleClass("one"); 89 }); 90 91 //<input type="button" value=" hasClass" id="b5"/> 92 $("#b5").click(function(){ 93 //hasClass():是判斷是否含有某個具體樣式 94 alert($("#mover").hasClass("one")); 95 }); 96 97 </script> 98 </html>
html()方法就至關於DOM中的innerHTML屬性
遍歷節點
* 父節點：parent()
* 子節點：children()
* 兄弟節點
* 上一個兄弟節點：prev()
* 下一個兄弟節點：next()
* 全部兄弟節點：siblings()
* find(expr)
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>09_遍歷節點.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 9 <body> 10 11 12 <ul id="city"> 13 <li id="bj" name="beijing">北京</li> 14 <li id="tj" name="tianjin">天津</li> 15 <li id="nj" name="nanjing">南京</li> 16 </ul> 17 18 </body> 19 <script type="text/javascript"> 20 //獲取北京節點的父節點 21 //alert($("#bj").parent().attr("id")); 22 23 //獲取city標籤下的全部子節點的個數 24 //alert($("#city").children().length); 25 26 //獲取天津節點的上一個兄弟節點和下一個兄弟節點 27 // alert($("#tj").prev().attr("name")); 28 // alert($("#tj").next().attr("name")); 29 30 //獲取city標籤下全部li標籤 31 alert($("#city").find("li").length); 32 33 </script> 34 35 </html>
包裹節點
* wrap()：分別包裹
* wrapAll()：一塊兒包裹
* wrapInner()：包裹指定標籤內部
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>10_包裹節點.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 8 </head> 9 10 <body> 11 <strong title="jQuery">jQuery</strong> 12 <strong title="jQuery">jQuery</strong> 13 </body> 14 <script type="text/javascript"> 15 //jQuery代碼以下： 16 $("strong").wrap("<b></b>"); 17 18 /* 19 * 獲得的結果以下 20 * <b><strong title="jQuery">jQuery</strong></b> 21 * <b><strong title="jQuery">jQuery</strong></b> 22 */ 23 24 //jQuery代碼以下： 25 $("strong").wrapAll("<b></b>"); 26 27 /* 28 * 獲得的結果以下 29 * <b> 30 * <strong title="jQuery">jQuery</strong> 31 * <strong title="jQuery">jQuery</strong> 32 * </b> 33 */ 34 35 //jQuery代碼以下： 36 $("strong"). wrapInner("<b></b>"); 37 38 /* 39 * 獲得的結果以下 40 * <strong title="jQuery"><b>jQuery</b></strong> 41 * <strong title="jQuery"><b>jQuery</b></strong> 42 */ 43 44 </script> 45 46 </html>
案例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>無標題文檔</title> 5 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 6 <style type="text/css"> 7 <!-- 8 BODY 9 { 10 font-family:"Courier"; 11 font-size: 12px; 12 margin:0px 0px 0px 0px; 13 overflow-x:no; 14 overflow-y:no; 15 background-color: #B8D3F4; 16 } 17 td 18 { 19 font-size:12px; 20 } 21 .default_input 22 { 23 border:1px solid #666666; 24 height:18px; 25 font-size:12px; 26 } 27 .default_input2 28 { 29 border:1px solid #666666; 30 height:18px; 31 font-size:12px; 32 } 33 .nowrite_input 34 { 35 border:1px solid #849EB5; 36 height:18px; 37 font-size:12px; 38 background-color:#EBEAE7; 39 color: #9E9A9E; 40 } 41 .default_list 42 { 43 font-size:12px; 44 border:1px solid #849EB5; 45 } 46 .default_textarea 47 { 48 font-size:12px; 49 border:1px solid #849EB5; 50 } 51 52 .nowrite_textarea 53 { 54 border:1px solid #849EB5; 55 font-size:12px; 56 background-color:#EBEAE7; 57 color: #9E9A9E; 58 } 59 60 .wordtd5 { 61 font-size: 12px; 62 text-align: center; 63 vertical-align:top; 64 padding-top: 6px; 65 padding-right: 5px; 66 padding-bottom: 3px; 67 padding-left: 5px; 68 background-color: #b8c4f4; 69 } 70 71 .wordtd { 72 font-size: 12px; 73 text-align: left; 74 vertical-align:top; 75 padding-top: 6px; 76 padding-right: 5px; 77 padding-bottom: 3px; 78 padding-left: 5px; 79 background-color: #b8c4f4; 80 } 81 .wordtd_1 { 82 font-size: 12px; 83 vertical-align:top; 84 padding-top: 6px; 85 padding-right: 5px; 86 padding-bottom: 3px; 87 padding-left: 5px; 88 background-color: #516CD6; 89 color:#fff; 90 } 91 .wordtd_2{ 92 font-size: 12px; 93 text-align: right; 94 vertical-align:top; 95 padding-top: 6px; 96 padding-right: 5px; 97 padding-bottom: 3px; 98 padding-left: 5px; 99 background-color: #64BDF9; 100 } 101 .wordtd_3{ 102 font-size: 12px; 103 text-align: right; 104 vertical-align:top; 105 padding-top: 6px; 106 padding-right: 5px; 107 padding-bottom: 3px; 108 padding-left: 5px; 109 background-color: #F1DD34; 110 } 111 .inputtd 112 { 113 font-size:12px; 114 vertical-align:top; 115 padding-top: 3px; 116 padding-right: 3px; 117 padding-bottom: 3px; 118 padding-left: 3px; 119 } 120 .inputtd2 121 { 122 text-align: center; 123 font-size:12px; 124 vertical-align:top; 125 padding-top: 3px; 126 padding-right: 3px; 127 padding-bottom: 3px; 128 padding-left: 3px; 129 } 130 .tablebg 131 { 132 font-size:12px; 133 } 134 135 .tb{ 136 border-collapse: collapse; 137 border: 1px outset #999999; 138 background-color: #FFFFFF; 139 } 140 .td2{line-height:22px; text-align:center; background-color:#F6F6F6;} 141 .td3{background-color:#B8D3F4; text-align:center; line-height:20px;} 142 .td4{background-color:#F6F6F6;line-height:20px;} 143 .td5{border:#000000 solid; 144 border-right-width:0px; 145 border-left-width:0px; 146 border-top-width:0px; 147 border-bottom-width:1px;} 148 149 .tb td{ 150 font-size: 12px; 151 border: 2px groove #ffffff; 152 } 153 154 155 156 157 .noborder { 158 border: none; 159 } 160 161 .button { 162 border: 1px ridge #ffffff; 163 line-height:18px; 164 height: 20px; 165 width: 45px; 166 padding-top: 0px; 167 background:#CBDAF7; 168 color:#000000; 169 font-size: 9pt; 170 font-family:"Courier"; 171 } 172 173 .textarea { 174 font-family: Arial, Helvetica, sans-serif, "??"; 175 font-size: 9pt; 176 color: #000000; 177 border-bottom-width: 1px; 178 border-top-style: none; 179 border-right-style: none; 180 border-bottom-style: solid; 181 border-left-style: none; 182 border-bottom-color: #000000; 183 background-color:transparent; 184 text-align: left 185 } 186 --> 187 </style></head> 188 189 <body> 190 191 <div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;"> 192 <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;"> 193 <tr> 194 <td width="126"> 195 <!--multiple="multiple" 能同時選擇多個 size="10" 肯定下拉選的長度--> 196 <select name="first" multiple="multiple" size=10 class="td3" id="first"> 197 <option value="選項1">選項1</option> 198 <option value="選項2">選項2</option> 199 <option value="選項3">選項3</option> 200 <option value="選項4">選項4</option> 201 <option value="選項5">選項5</option> 202 <option value="選項6">選項6</option> 203 <option value="選項7">選項7</option> 204 <option value="選項8">選項8</option> 205 </select> 206 </td> 207 <td width="69" valign="middle"> 208 <input name="add" id="add" type="button" class="button" value="-->" /> 209 <input name="add_all" id="add_all" type="button" class="button" value="==>" /> 210 <input name="remove" id="remove" type="button" class="button" value="<--" /> 211 <input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> 212 </td> 213 <td width="127" align="left"> 214 <select name="second" size="10" multiple="multiple" class="td3" id="second"> 215 <option value="選項9">選項9</option> 216 </select> 217 </td> 218 </tr> 219 </table> 220 </div> 221 </body> 222 <script type="text/javascript"> 223 // <input name="add" id="add" type="button" class="button" value="-->" /> 224 // 外部插入錯誤 225 // $("#add").click(function(){ 226 // $("#first>option:selected").insertAfter($("#second")); 227 // }); 228 $("#add").click(function(){ 229 $("#second").append($("#first>option:selected")); 230 }) 231 232 // <input name="add_all" id="add_all" type="button" class="button" value="==>" /> 233 $("#add_all").click(function(){ 234 $("#first>option").appendTo($("#second")); 235 }); 236 237 // <input name="remove" id="remove" type="button" class="button" value="<--" /> 238 $("#remove").click(function(){ 239 $("#second>option:selected").appendTo($("#first")); 240 }); 241 242 // <input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> 243 $("#remove_all").click(function(){ 244 $("#second>option").appendTo($("#first")); 245 }); 246 247 $("#first").dblclick(function(){ 248 $("#first>option:selected").appendTo($("#second")); 249 }); 250 251 $("#second").dblclick(function(){ 252 $("#second>option:selected").appendTo($("#first")); 253 }); 254 255 </script> 256 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>動態列表效果.html</title> 6 <style type="text/css"> 7 *{ margin:0; padding:0;} 8 body {font-size:12px;text-align:center;} 9 a { color:#04D; text-decoration:none;} 10 a:hover { color:#F50; text-decoration:underline;} 11 .SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;} 12 .SubCategoryBox ul { list-style:none;} 13 .SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;} 14 .showmore { clear:both; text-align:center;padding-top:10px;} 15 .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;} 16 .showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;} 17 .promoted a { color:#F50;} 18 </style> 19 <!-- 引入jQuery --> 20 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 21 <script type="text/javascript"> 22 $(document).ready(function(){ 23 //1 獲取指定的內容 24 var $li = $("li:gt(5):not(':last')"); 25 26 //2 將指定內容隱藏 27 $li.hide(); 28 29 //3 獲取按鈕的onclick事件 30 $("a>span").click(function(){ 31 if($li.is(":hidden")){ 32 //4 將指定隱藏的內容,顯示 33 $li.show(); 34 35 $("a>span").text("精簡顯示品牌"); 36 }else{ 37 //4 將指定隱藏的內容,顯示 38 $li.hide(); 39 40 $("a>span").text("顯示所有品牌"); 41 } 42 43 return false; 44 }); 45 46 }); 47 </script> 48 </head> 49 <body> 50 <div class="SubCategoryBox"> 51 <ul> 52 <li ><a href="#">佳能</a><i>(30440) </i></li> 53 <li ><a href="#">索尼</a><i>(27220) </i></li> 54 <li ><a href="#">三星</a><i>(20808) </i></li> 55 <li ><a href="#">尼康</a><i>(17821) </i></li> 56 <li ><a href="#">松下</a><i>(12289) </i></li> 57 <li ><a href="#">卡西歐</a><i>(8242) </i></li> 58 <li ><a href="#">富士</a><i>(14894) </i></li> 59 <li ><a href="#">柯達</a><i>(9520) </i></li> 60 <li ><a href="#">賓得</a><i>(2195) </i></li> 61 <li ><a href="#">理光</a><i>(4114) </i></li> 62 <li ><a href="#">奧林巴斯</a><i>(12205) </i></li> 63 <li ><a href="#">明基</a><i>(1466) </i></li> 64 <li ><a href="#">愛國者</a><i>(3091) </i></li> 65 <li ><a href="#">其它品牌相機</a><i>(7275) </i></li> 66 </ul> 67 <div class="showmore"> 68 <a href="#"><span>顯示所有品牌</span></a> 69 </div> 70 </div> 71 <!-- Resources from http://down.liehuo.net --> 72 </body> 73 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>文字提示</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <style type="text/css"> 9 body{ 10 margin:0; 11 padding:40px; 12 background:#fff; 13 font:80% Arial, Helvetica, sans-serif; 14 color:#555; 15 line-height:180%; 16 } 17 p{ 18 clear:both; 19 margin:0; 20 padding:.5em 0; 21 } 22 /* tooltip */ 23 #tooltip{ 24 position:absolute; 25 border:1px solid #333; 26 background:#f7f5d1; 27 padding:1px; 28 color:#333; 29 display:none; 30 } 31 </style> 32 <script type="text/javascript"> 33 $(document).ready(function(){ 34 var x = 10, y = 20; 35 var myTitle; 36 //1 獲取操做的a標籤:鼠標懸停事件\鼠標移除事件 37 $("a[class=tooltip]").mouseover(function(e){ 38 //1 獲取對應a標籤的title屬性值 39 myTitle = this.title; 40 41 //2 建立用於信息提示的標籤 42 var $div = $("<div id='tooltip'>"+myTitle+"</div>"); 43 44 //3 刪除自帶提示 45 this.title = ""; 46 47 //4 將自定義標籤,添加到body標籤下 48 $("body").append($div); 49 50 //5 將自定義標籤的位置調整:根據鼠標的座標值(e.pageX,e.pageY) 51 $("#tooltip").css({ 52 top : e.pageY + y + "px", 53 left : e.pageX + x + "px" 54 }).show(1000); 55 56 }).mouseout(function(){ 57 this.title = myTitle; 58 $("#tooltip").remove(); 59 }).mousemove(function(e){ 60 $("#tooltip").css({ 61 top : e.pageY + y + "px", 62 left : e.pageX + x + "px" 63 }) 64 }); 65 66 }); 67 </script> 68 </head> 69 <body> 70 <p><a href="#" class="tooltip" title="這是個人超連接提示1.">提示1.</a></p> 71 <p><a href="#" class="tooltip" title="這是個人超連接提示2.">提示2.</a></p> 72 <p><a href="#" title="這是自帶提示1.">自帶提示1.</a></p> 73 <p><a href="#" title="這是自帶提示2.">自帶提示2.</a> </p> 74 <!-- Resources from http://down.liehuo.net --> 75 </body> 76 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>圖片提示</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 8 <style type="text/css"> 9 body{ 10 margin:0; 11 padding:40px; 12 background:#fff; 13 font:80% Arial, Helvetica, sans-serif; 14 color:#555; 15 line-height:180%; 16 } 17 img{border:none;} 18 ul,li{ 19 margin:0; 20 padding:0; 21 } 22 li{ 23 list-style:none; 24 float:left; 25 display:inline; 26 margin-right:10px; 27 border:1px solid #AAAAAA; 28 } 29 30 /* tooltip */ 31 #tooltip{ 32 position:absolute; 33 border:1px solid #ccc; 34 background:#333; 35 padding:2px; 36 display:none; 37 color:#fff; 38 } 39 </style> 40 <script type="text/javascript"> 41 $(document).ready(function(){ 42 var x = 10, y = 20; 43 var myHref; 44 $("a[class=tooltip]").mouseover(function(e){ 45 myHref = this.href; 46 var $div = $("<div id='tooltip'><img src='"+myHref+"'></img></div>"); 47 $("body").append($div); 48 $("#tooltip").css({ 49 top : e.pageY + y + "px", 50 left : e.pageX + x + "px" 51 }).show(1000); 52 }).mouseout(function(){ 53 this.href = myHref; 54 $("#tooltip").remove(); 55 }).mousemove(function(e){ 56 $("#tooltip").css({ 57 top : e.pageY + y + "px", 58 left : e.pageX + x + "px" 59 }) 60 }); 61 }); 62 </script> 63 64 </head> 65 <body> 66 <h3>有效果：</h3> 67 <ul> 68 <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="蘋果 iPod"><img src="images/apple_1.jpg" alt="蘋果 iPod" /></a></li> 69 <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="蘋果 iPod nano"><img src="images/apple_2.jpg" alt="蘋果 iPod nano"/></a></li> 70 <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="蘋果 iPhone"><img src="images/apple_3.jpg" alt="蘋果 iPhone"/></a></li> 71 <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="蘋果 Mac"><img src="images/apple_4.jpg" alt="蘋果 Mac"/></a></li> 72 </ul> 73 74 75 <br/><br/><br/><br/> 76 <br/><br/><br/><br/> 77 78 79 <h3>無效果：</h3> 80 <ul> 81 <li><a href="images/apple_1_bigger.jpg" title="蘋果 iPod"><img src="images/apple_1.jpg" alt="蘋果 iPod" /></a></li> 82 <li><a href="images/apple_2_bigger.jpg" title="蘋果 iPod nano"><img src="images/apple_2.jpg" alt="蘋果 iPod nano"/></a></li> 83 <li><a href="images/apple_3_bigger.jpg" title="蘋果 iPhone"><img src="images/apple_3.jpg" alt="蘋果 iPhone"/></a></li> 84 <li><a href="images/apple_4_bigger.jpg" title="蘋果 Mac"><img src="images/apple_4.jpg" alt="蘋果 Mac"/></a></li> 85 </ul> 86 <!-- Resources from http://down.liehuo.net --> 87 </body> 88 </html>
事件
* 常規事件：click()\dblclick()等
* 特殊事件：
在頁面加載完畢後, 瀏覽器會經過 JavaScript 爲 DOM 元素添加事件. 在常規的 JavaScript 代碼中, 一般使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.
ready()：面試
$(docment).ready(function(){}) == window.onload
* ready的執行效率高
* ready在一個頁面能夠有多個
* ready的簡寫方法：
* $().ready(function(){})
* $(function(){})
* bind()與unbind()：綁定事件與解綁定事件
* 綁定事件： 將頁面元素綁定到具體事件上
咱們除了能夠直接爲頁面的元素增長事件，也能夠利用bind()方法爲頁面元素來綁定事件。
語法：bind(type, [data], fn)
參數type：含有一個或多個事件類型的字符串。
提供能夠綁定的事件有：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error。
參數data：做爲event.data屬性值傳遞給事件對象的額外數據對象。
參數fn：綁定到每一個匹配元素的事件上面的處理函數
* $(expr).click()
1 <body> 2 <div id="panel"> 3 <h5 class="head">什麼是jQuery?</h5> 4 <div class="content"> 5 jQuery是繼Prototype以後又一個優秀的JavaScript庫，它是一個由 John Resig 建立於2006年1月的開源項目。jQuery憑藉簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操做DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。 6 </div> 7 </div> 8 </body> 9 <script language="JavaScript"> 10 $(function(){ 11 $("#panel h5.head").bind("click",function(){ 12 var $content = $(this).next("div.content"); 13 if($content.is(":visible")){ 14 $content.hide(); 15 }else{ 16 $content.show(); 17 } 18 }) 19 }) 20 </script>
1 <body> 2 <div id="panel"> 3 <h5 class="head">什麼是jQuery?</h5> 4 <div class="content"> 5 jQuery是繼Prototype以後又一個優秀的JavaScript庫，它是一個由 John Resig 建立於2006年1月的開源項目。jQuery憑藉簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操做DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。 6 </div> 7 </div> 8 </body> 9 <script language="JavaScript"> 10 $(function(){ 11 $("#panel h5.head").bind("mouseover mouseout",function(){ 12 var $content = $(this).next("div.content"); 13 if($content.is(":visible")){ 14 $content.hide(); 15 }else{ 16 $content.show(); 17 } 18 }) 19 }) 20 </script>
1 <body> 2 <div id="panel"> 3 <h5 class="head">退出</h5> 4 </div> 5 </body> 6 <script language="JavaScript"> 7 $(function(){ 8 $("#panel h5.head").bind("click",{text:"你確認要退出嗎？"},function(event){ 9 var flag = confirm(event.data.text); 10 if(!flag){ 11 return false; 12 }else{ 13 alert("退出成功！"); 14 return false; 15 } 16 }) 17 }) 18 </script>
1 <body> 2 <input type="button" value="移除事件"> 3 <div id="panel"> 4 <h5 class="head">什麼是jQuery?</h5> 5 <div class="content"> 6 jQuery是繼Prototype以後又一個優秀的JavaScript庫，它是一個由 John Resig 建立於2006年1月的開源項目。jQuery憑藉簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操做DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。 7 </div> 8 </div> 9 </body> 10 <script language="JavaScript"> 11 $(function(){ 12 $("#panel h5.head").bind("click",{bn:true},function(event){ 13 var $content = $(this).next("div.content"); 14 if($content.is(":visible")){ 15 $content.hide(); 16 }else{ 17 $content.show(); 18 } 19 }) 20 $("input").click(function(){ 21 $("#panel h5.head").unbind(); 22 }) 23 }) 24 </script>
1 <body> 2 <input type="button" value="移除事件"> 3 <div id="panel"> 4 <h5 class="head">什麼是jQuery?</h5> 5 <div class="content"> 6 jQuery是繼Prototype以後又一個優秀的JavaScript庫，它是一個由 John Resig 建立於2006年1月的開源項目。jQuery憑藉簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操做DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。 7 </div> 8 </div> 9 </body> 10 <script language="JavaScript"> 11 $(function(){ 12 $("#panel h5.head").bind("mouseover mouseout", 13 {bn:true},function(event){ 14 var $content = $(this).next("div.content"); 15 if($content.is(":visible")){ 16 $content.hide(); 17 }else{ 18 $content.show(); 19 } 20 }) 21 $("input").click(function(){ 22 $("#panel h5.head").unbind("mouseout"); 23 }) 24 }) 25 </script>
1 <script language="JavaScript"> 2 $(function(){ 3 function event(){ 4 var $content = $(this).next("div.content"); 5 if($content.is(":visible")){ 6 $content.hide(); 7 }else{ 8 $content.show(); 9 } 10 } 11 $("#panel h5.head").bind("click",event) 12 $("input").click(function(){ 13 $("#panel h5.head").unbind("click",event); 14 }) 15 }) 16 </script>
綁定事件與解綁定事件
* 綁定與解綁單個事件
* 綁定與解綁多個事件
* 綁定與解綁支持多少事件：blur, focus, focusin, focusout, load,
resize, scroll, unload, click, dblclick, mousedown, mouseup,
mousemove, mouseover, mouseout, mouseenter, mouseleave, change,
select, submit, keydown, keypress, keyup, error 。
* 其實常規事件就是綁定事件的簡寫方式。
* 事件切換
* hover(over, out)：模擬一個鼠標懸停事件(over,out)
* over:mouseover
* out:mouseout
* 爲何要這樣作：
* 實現鼠標懸停更簡單
* 多用於頁面效果
* toggle()：多用於頁面效果
1 <body> 2 <div id="panel"> 3 <h5 class="head">什麼是jQuery?</h5> 4 <div class="content"> 5 jQuery是繼Prototype以後又一個優秀的JavaScript庫，它是一個由 John Resig 建立於2006年1月的開源項目。jQuery憑藉簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操做DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。 6 </div> 7 </div> 8 </body> 9 <script language="JavaScript"> 10 $(function(){ 11 $("#panel h5.head").hover(function(){ 12 $(this).next("div.content").show(); 13 },function(){ 14 $(this).next("div.content").hide(); 15 }) 16 }) 17 </script>
1 <body> 2 <div id="panel"> 3 <h5 class="head">什麼是jQuery?</h5> 4 <div class="content"> 5 jQuery是繼Prototype以後又一個優秀的JavaScript庫，它是一個由 John Resig 建立於2006年1月的開源項目。jQuery憑藉簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操做DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。 6 </div> 7 </div> 8 </body> 9 <script language="JavaScript"> 10 $(function(){ 11 $("#panel h5.head").toggle(function(){ 12 $(this).next("div.content").show(); 13 },function(){ 14 $(this).next("div.content").hide(); 15 }) 16 }) 17 </script>
Ajax
$.ajax()：最複雜、最靈活，最接近原生Ajax的用法
load()：最簡單、最不靈活
load()方法是 jQuery 中最爲簡單和經常使用的 Ajax 方法, 能載入遠程的 HTML 代碼並插入到 DOM 中。
它的結構是: load(url[, data][,callback])
程序員只須要使用 jQuery 選擇器爲 HTML 片斷指定目標位置, 而後將要加載的文件的 url 作爲參數傳遞給 load() 方法便可
傳遞方式: load() 方法的傳遞參數根據參數 data 來自動自定. 若是沒有參數傳遞, 採用 GET 方式傳遞, 不然採用 POST 方式
對於必須在加載完才能繼續的操做, load() 方法提供了回調函數,
該函數有三個參數:
表明請求返回內容的 data; 表明請求狀態的 textStatus 對象(其值可能爲: succuss, error, notmodify, timeout 4 種)和 XMLHttpRequest 對象
方法的返回值是 jQuery
若是隻須要加載目標 HTML 頁面內的某些元素, 則能夠經過 load() 方法的 URL 參數來達到目的. 經過 URL 參數指定選擇符, 就能夠方便的從加載過來的 HTML 文檔中選出所須要的內容.
load() 方法的 URL 參數的語法結構爲 「url selector」(注意: url 和 選擇器之間有一個空格)
$.get()：請求類型是GET
$.get() 方法使用 GET 方式來進行異步請求. 它的結構是: $.get(url[, data][, callback][, type]);
$.get() 方法的回調函數只有兩個參數: data 表明返回的內容, 能夠是 XML 文檔, JSON 文件, HTML 片斷等; textstatus 表明請求狀態, 其值可能爲: succuss, error, notmodify, timeout 4 種.
方法的返回值:XMLHttpRequest對象
$.get() 和 $.post() 方法是 jQuery 中的全局函數, 而 find() 等方法都是對 jQuery 對象進行操做的方法
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>get()方法</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 <style type="text/css"> 8 div,span{ 9 width: 140px; 10 height: 140px; 11 margin: 20px; 12 background: #9999CC; 13 border: #000 1px solid; 14 float:left; 15 font-size: 17px; 16 font-family:Roman; 17 } 18 19 div.mini{ 20 width: 30px; 21 height: 30px; 22 background: #CC66FF; 23 border: #000 1px solid; 24 font-size: 12px; 25 font-family:Roman; 26 } 27 28 div.visible{ 29 display:none; 30 } 31 </style> 32 <!--引入jquery的js庫--> 33 34 </head> 35 36 <body> 37 <form action="" name="form1" id="form1"> 38 <input type="text" name="username" id="username" value="zhang"><br> 39 <input type="text" name="psw" id="psw" value="99999"><br> 40 <input type="button" id="b1" value="登錄"> 41 </form> 42 43 <div id="one"> 44 </div> 45 46 </body> 47 <script language="JavaScript"> 48 $(function(){ 49 $("#b1").click(function(){ 50 /* 51 * $.ajax(options) 52 * * options:(可選) 53 * * url:請求路徑 54 * * type:請求類型 55 * * async:表示是否異步 56 * * data:發送到服務器端的請求數據,格式是key/value格式 57 * * success:表示Ajax異步交互請求成功後,回調函數(接收服務器端的響應) 58 * * function(data, textStatus){} 59 * * data:請求返回的數據內容 60 * * textStatus:表示請求的狀態,值有success、error、notmodify、timeout等 61 * * error:表示Ajax異步交互請求失敗後,回調函數 62 * function(XMLHttpRequest, textStatus, errorThrown){} 63 * XMLHttpRequest對象 64 * textStatus:表示請求的狀態,值有success、error、notmodify、timeout等 65 * errorThrown:異常對象 66 * * 返回值:XMLHttpRequest對象 67 */ 68 var json = { 69 username : $("#username").val(), 70 psw : $("#psw").val() 71 } 72 73 $.ajax({ 74 url : "get.jsp", 75 type : "get", 76 async : true, 77 data : json, 78 success : function(data, textStatus){ 79 alert(data); 80 }, 81 error : function(XMLHttpRequest, textStatus, errorThrown){ 82 alert("請求錯誤啦。。。"); 83 } 84 }); 85 86 }); 87 }); 88 </script> 89 </html>
1 <%@ page language="java" pageEncoding="UTF-8"%> 2 <% 3 System.out.println(request.getMethod()); 4 5 System.out.println("connection server success!"); 6 7 System.out.println("username = "+request.getParameter("username")); 8 System.out.println("password = "+request.getParameter("psw")); 9 10 out.println("helloworld"); 11 %>
$.post()：請求類型是POST
$.getScript()：獲取腳本代碼
有時候，在頁面初次加載時就取得所需的所有的javascript文件是徹底沒有必要的。雖然咱們能夠在須要時，動態建立<script>標籤。但這種方式並不理想。
爲此，jQuery提供了$.getScript()方法直接加載.js文件，與加載一個HTML片斷同樣簡單方便。
1 <body> 2 <br/> 3 <p> 4 <input type="button" id="send" value="加載"/> 5 </p> 6 7 <div class="comment">已有評論：</div> 8 <div id="resText" > 9 10 </div> 11 </body> 12 <script language="JavaScript"> 13 $(function(){ 14 $('#send').click(function() { 15 $.getScript('test.js'); 16 }); 17 }) 18 </script>
1 <body> 2 <br/> 3 <p> 4 <input type="button" id="send" value="加載"/> 5 </p> 6 7 <div class="comment">已有評論：</div> 8 <div id="resText" > 9 10 </div> 11 </body> 12 <script language="JavaScript"> 13 $(function(){ 14 $('#send').click(function() { 15 $.getScript('test.js',function(){ 16 $('#resText').html(html); 17 }); 18 }); 19 }) 20 </script>
$.getJSON()：返回的數據格式是JSON格式
1 <body> 2 <br/> 3 <p> 4 <input type="button" id="send" value="加載"/> 5 </p> 6 7 <div class="comment">已有評論：</div> 8 <div id="resText" > 9 10 </div> 11 </body> 12 <script language="JavaScript"> 13 $(function(){ 14 $('#send').click(function() { 15 $.getJSON('test.json', function(data) { 16 $('#resText').empty(); 17 var html = ''; 18 $.each( data , function(commentIndex, comment) { 19 html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; 20 }) 21 $('#resText').html(html); 22 }) 23 }) 24 }) 25 </script>
序列化元素
* serialize()
* 序列化的是JSON格式中的key/value格式
* 返回的是JSON字符串
* serializeArray()
* 序列化的是JSON格式中的數組格式
* 返回的是JSON對象
* 插件
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>test</title> 5 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 6 <meta http-equiv="description" content="this is my page"> 7 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 8 <script language="JavaScript" src="../../js/jquery-1.4.2.js"></script> 9 <style> 10 * { margin:0; padding:0;} 11 body { font-size:12px;} 12 .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} 13 .comment h6 { font-weight:700; font-size:14px;} 14 .para { margin-top:5px; text-indent:2em;background:#DDD;} 15 .block{width:80px;height:80px;background:#DDD;} 16 </style> 17 </head> 18 <body> 19 <p id="results"><b>Results: </b> </p> 20 <form> 21 <select name="single"> 22 <option>Single</option> 23 <option>Single2</option> 24 </select> 25 <select name="multiple" multiple="multiple"> 26 <option selected="selected">Multiple</option> 27 <option>Multiple2</option> 28 <option selected="selected">Multiple3</option> 29 </select><br/> 30 <input type="checkbox" name="check" value="check1"/> check1 31 <input type="checkbox" name="check" value="check2" checked="checked"/> check2 32 <input type="radio" name="radio" value="radio1" checked="checked"/> radio1 33 <input type="radio" name="radio" value="radio2"/> radio2 34 </form> 35 </body> 36 <script language="JavaScript"> 37 $(function(){ 38 $("#results").click(function(){ 39 $("#results").append( "<br><tt>" + $("form").serialize() + "</tt><br>" ); 40 }); 41 }) 42 </script> 43 </html>
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>test</title> 5 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 6 <meta http-equiv="description" content="this is my page"> 7 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 8 <script language="JavaScript" src="../../js/jquery-1.4.2.js"></script> 9 <style> 10 * { margin:0; padding:0;} 11 body { font-size:12px;} 12 .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} 13 .comment h6 { font-weight:700; font-size:14px;} 14 .para { margin-top:5px; text-indent:2em;background:#DDD;} 15 .block{width:80px;height:80px;background:#DDD;} 16 </style> 17 </head> 18 <body> 19 <p id="results"><b>Results: </b> </p> 20 <form> 21 <select name="single"> 22 <option>Single</option> 23 <option>Single2</option> 24 </select> 25 <select name="multiple" multiple="multiple"> 26 <option selected="selected">Multiple</option> 27 <option>Multiple2</option> 28 <option selected="selected">Multiple3</option> 29 </select><br/> 30 <input type="checkbox" name="check" value="check1"/> check1 31 <input type="checkbox" name="check" value="check2" checked="checked"/> check2 32 <input type="radio" name="radio" value="radio1" checked="checked"/> radio1 33 <input type="radio" name="radio" value="radio2"/> radio2 34 </form> 35 </body> 36 <script language="JavaScript"> 37 $(function(){ 38 var fields = $("select, :radio").serializeArray(); 39 jQuery.each( fields, function(i, field){ 40 $("#results").append(field.value + " "); 41 }); 42 }) 43 </script> 44 </html>
實現跨域請求
域名：（英語：Domain Name），又稱網域、網域名稱，是由一串用點分隔的名字組成的Internet上某一臺計算機或計算機組的名稱，用於在數據傳輸時標識計算機的電子方位（有時也指地理位置）。
跨域：兩個不一樣域名之間的通訊，稱之爲跨域。例如：http://www.baidu.com和http://www.sina.com.cn。
jQuery如何實現跨域請求？使用JSONP形式實現跨域
什麼是JSONP
JSONP（JSON with Padding）是數據交換格式 JSON 的一種「使用模式」，可讓網頁從別的網域要資料。
因爲同源策略，通常來講位於 server.example.com 的網頁沒法與不是 server.example.com 的服務器溝通，而 HTML 的 <script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁能夠獲得從其餘來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3 <html> 4 <head> 5 <title>實現跨域請求</title> 6 <script type="text/javascript" src="js/jquery-1.4.2.js"></script> 7 </head> 8 9 <body> 10 <input type="button" id="send" value="實現跨域"> 11 </body> 12 <script type="text/javascript"> 13 $(function(){ 14 $("#send").click(function(){ 15 //$.getJSON(url,data,callback); 16 // * url:請求路徑 17 $.getJSON("sinaServlet?timeStamp="+new Date().getTime(),function(){ 18 alert("跨域請求成功啦。。。"); 19 }); 20 21 }); 22 }); 23 </script> 24 </html>
1 package app.servlet; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 6 import javax.servlet.ServletException; 7 import javax.servlet.http.HttpServlet; 8 import javax.servlet.http.HttpServletRequest; 9 import javax.servlet.http.HttpServletResponse; 10 11 public class SinaServlet extends HttpServlet { 12 13 public void doGet(HttpServletRequest request, HttpServletResponse response) 14 throws ServletException, IOException { 15 16 response.setContentType("text/html"); 17 PrintWriter out = response.getWriter(); 18 19 System.out.println("connection sina server success!"); 20 21 //jsonp1402020857020 22 String callback = request.getParameter("callback"); 23 24 System.out.println("callback = "+callback); 25 26 //假設將callback看成一個函數的函數名來處理:callback(參數) 27 //out.println("sina news!"); 28 String json = "{'msg':'sina news!'}"; 29 30 //服務器端進行響應時,構建了一個函數的調用體:callback(json) 31 out.println(callback+"("+json+")"); 32 33 } 34 35 public void doPost(HttpServletRequest request, HttpServletResponse response) 36 throws ServletException, IOException { 37 38 doGet(request, response); 39 } 40 41 }
JQuery 能夠經過 $.get() 或 $.post() 方法來加載 xml.
JQuery 解析 XML 與解析 DOM 同樣, 可使用 find(), children() 等函數來解析和用 each() 方法來進行遍歷
jQuery插件
* 研究jQuery插件機制
* 目的：
* 爲了未來實際開發中，快速上手新的插件
* 爲了未來你們面試的：獨立製做插件
種類：
* 機制（分類）： * 封裝對象方法的插件 * $(expr).each()：對象方法 * jQuery.fn.extend(object) * 封裝全局函數的插件 * $.each()：全局函數 * jQuery.extend(object) * 選擇器插件：這一類插件，如今幾乎不用了。例如XPath插件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>test.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 <!-- 引入jQuery文件 --> 10 <script src="../../js/jquery-1.4.2.js"></script> 11 <!-- 引入jQuery的插件文件 --> 12 <script src="test.js"></script> 13 </head> 14 <script type="text/javascript"> 15 $(function(){ 16 $("input").click(function(){ 17 var a = prompt("請輸入一個數值"); //window對象的prompt():標準輸入框 18 var b = prompt("請再輸入一個數值"); 19 //minValue()和maxValue()兩個方法不是jQuery的,可是調用和jQuery的方法同樣. 20 var c = $.minValue(a,b); 21 var d = jQuery.maxValue(a,b); 22 alert("你輸入的最大值是："+d+"\n你輸入的最小值是："+c); 23 }); 24 }) 25 26 </script> 27 <body> 28 <input type="button" value="jQuery插件擴展測試"> 29 </body> 30 </html>
1 //測試extend()方法 2 jQuery.extend({ 3 minValue : function(a,b){ 4 return a < b ? a : b; 5 }, 6 maxValue : function(a,b){ 7 return a < b ? b : a; 8 } 9 }); 10 11 //JSON格式的數據內容(key/value格式),這種"key/value"的JSON格式其實就是javascript對象 12 //var method = { 13 // minValue : function(a,b){ 14 // return a < b ? a : b; 15 // }, 16 // maxValue : function(a,b){ 17 // return a < b ? b : a; 18 // } 19 //}
* 使用：
* 先引入jQuery文件
* 再引入jQuery的插件文件
* this的用法：（瞭解）
* 做用：
* 指代DOM對象：明確指代頁面中的具體元素
* 指代jQuery對象：在插件中使用，基本都是jQuery對象
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>test.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 src="../../js/jquery-1.4.2.js"></script> 10 <script src="test.js"></script> 11 </head> 12 <script type="text/javascript"> 13 $(function(){ 14 $("input").click(function(){ 15 //this指代頁面元素input標籤 16 $(this).test(); 17 18 // $("intpu").test = function(){ 19 // this 20 // } 21 22 }); 23 }) 24 </script> 25 <body> 26 <input type="button" value="jQuery插件擴展測試"> 27 </body> 28 </html>
1 ////測試extend()方法 2 jQuery.fn.extend({ 3 test : function(){ 4 //誰調用test()方法,打印誰的value屬性值 5 //this指代DOM對象仍是jQuery對象?jQuery對象 6 //jQuery對象是數組對象,數組能夠遍歷 7 $.each(this,function(){ 8 alert($(this).val()); 9 }); 10 } 11 });
注意：儘可能不用
* 舉例：表單驗證插件
1.導入jQuery.js和JQuery validation.js表單驗證插件的js文件
2.使用：插件指定對應的jQuery版本（換版本可能致使插件失效）
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>jQuery validation plug-in - main demo</title> 5 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> 6 <script type="text/javascript" src="./js/jquery.js"></script> 7 <script type="text/javascript" src="./js/jquery.validate.js"></script> 8 9 <script type="text/javascript"> 10 $(function(){ 11 /* 12 * 如何不能知足驗證需求時,自定義驗證方法 13 * * $.validator.addMethod(name,method,message):固定寫法 14 * * name:添加的方法的名字 15 * * method:一個函數,function(value,element,param){} 16 * * value:是元素的值,須要驗證的元素的value屬性值 17 * * element:是元素自己,對應頁面的元素 18 * * param:是參數,調用自定義驗證方法後的value值 19 * * message:就是自定義的錯誤提示(不用) 20 * label標籤的錯誤提示 -> messages設置的錯誤提示 -> 自定義錯誤提示 21 */ 22 $.validator.addMethod("cartLength",function(value,element,param){ 23 //驗證文本框的內容的長度 24 //1 獲取到對應文本框內容的長度 25 var len = value.length; 26 27 //2 判斷 28 if(len==15||len==18){ //len!=15&&len!=18 29 return true; 30 } 31 return false; 32 }); 33 $.validator.addMethod("cartCheck",function(value,element,param){ 34 //驗證文本框的內容的長度 35 //1 獲取到對應文本框內容的長度 36 var len = value.length; 37 38 //2 分狀況判斷 39 if(len==15){ 40 var p = /^[0-9]{15}$/; 41 var flag = p.test(value); 42 return flag; 43 } 44 if(len==18){ 45 var p = /^[0-9]{18}|[0-9]{17}x$/; 46 var flag = p.test(value); 47 return flag; 48 } 49 }); 50 /*******************************************/ 51 $("#empForm").validate({ 52 debug:true, 53 rules:{ 54 realname : "required", 55 gender : "required", 56 edu : "required", 57 cart : { 58 required : true, 59 cartLength : true, 60 cartCheck : true 61 } 62 }, 63 messages:{ 64 realname : "真實姓名不能爲空", 65 /* 66 * 不起做用,不須要設置 67 * label標籤的錯誤提示 -> messages設置的錯誤提示 68 */ 69 gender : "你沒有第三種選擇", 70 /* 71 * 下拉選框的驗證,起做用的話: 72 * * 保證其中一個option選項的value值爲空 73 * * 保證其中爲空的option選項必須是第一個 74 */ 75 edu : "請選擇你的學歷", 76 cart : "請輸入正確的身份證號碼" 77 } 78 }); 79 80 }); 81 </script> 82 </head> 83 <body> 84 <p>員工信息錄入</p> 85 <form name="empForm" id="empForm" method="post" action="test.html"> 86 <table border=1> 87 <tr> 88 <td>真實姓名(不能爲空 ,沒有其餘要求)</td> 89 <td><input type="text" id="realname" name="realname" /> 90 </td> 91 </tr> 92 <tr> 93 <td>登陸名(登陸名不能爲空,長度應該在5-8之間,能夠包含中文字符(一個漢字算一個字符)):</td> 94 <td><input type="text" id="username" name="username" /></td> 95 </tr> 96 <tr> 97 <td>密碼(不能爲空,長度6-12字符或數字,不能包含中文字符):</td> 98 <td><input type="password" id="psw" name="psw" style="width:120px" /></td> 99 </tr> 100 <tr> 101 <td>重複密碼密碼(不能爲空,長度6-12字符或數字,不能包含中文字符):</td> 102 <td><input type="password" id="psw2" name="psw2" style="width:120px" /></td> 103 </tr> 104 <!-- 105 <label style="display: none" for="gender" class="error">請選擇性別</label> 106 * for:設置對應元素的name屬性值 107 * class:設置樣式 108 * style:設置成隱藏 109 * 文本內容:錯誤提示信息 110 111 表單驗證插件的錯誤提示信息,默認顯示在第一個驗證的元素的後面 112 113 研究表單驗證插件的運行機制:會到對應的頁面中查找是否存在對應label標籤 114 * 對應頁面中存在對應的label標籤,表單驗證插件利用對應頁面中的label標籤,進行錯誤信息的提示 115 * 對應頁面中沒有對應的label標籤,表單驗證插件經過底層代碼,建立label標籤,進行錯誤信息的提示 116 117 errorClass: "error", 118 validClass: "valid", 119 errorElement: "label", 120 121 // create label 122 label = $("<" + this.settings.errorElement + "/>") //<label></label> 123 .attr({"for": this.idOrName(element), generated: true})//<label for='gender'></label> 124 .addClass(this.settings.errorClass) //<label class='error' for='gender'></label> 125 .html(message || ""); //<label class='error' for='gender'>錯誤提示信息</label> 126 --> 127 <tr> 128 <td>性別(必選其一)</td> 129 <td> 130 <input type="radio" id="gender_male" value="m" name="gender"/>男 131 <input type="radio" id="gender_female" value="f" name="gender"/>女 132 <label style="display: none" for="gender" class="error">請選擇性別</label> 133 </td> 134 </tr> 135 <tr> 136 <td>年齡(必填26-50):</td> 137 <td><input type="text" id="age" name="age" /></td> 138 </tr> 139 140 <tr> 141 <td>你的學歷:</td> 142 <td> <select name="edu" id="edu"> 143 <option value="">－－請選擇你的學歷－－</option> 144 <option value="a">專科</option> 145 <option value="b">本科</option> 146 <option value="c">研究生</option> 147 <option value="e">碩士</option> 148 <option value="d">博士</option> 149 </select> 150 </td> 151 </tr> 152 153 <tr> 154 <td>出生日期(1982/09/21):</td> 155 <td><input type="text" id="birthday" name="birthday" style="width:120px" value="" /></td> 156 </tr> 157 158 <tr> 159 <td>興趣愛好:</td> 160 <td colspan="2"> 161 <input type="checkbox" name="checkbox1" id="qq1"/>乒乓球 162 <input type="checkbox" name="checkbox1" id="qq2" value="1" />羽毛球 163 <input type="checkbox" name="checkbox1" id="qq3" value="2" />上網 164 <input type="checkbox" name="checkbox1" id="qq4" value="3" />旅遊 165 <input type="checkbox" name="checkbox1" id="qq5" value="4" />購物 166 <label style="display: none" for="checkbox1" class="error">您的興趣愛好,至少選擇一個</label> 167 </td> 168 </tr> 169 <tr> 170 <td align="left">電子郵箱:</td> 171 <td><input type="text" id="email" style="width:120px" name="email" /></td> 172 </tr> 173 <tr> 174 <td align="left">身份證(15-18):</td> 175 <td><input type="text" id="cart" style="width:200px" name="cart" /></td> 176 </tr> 177 <tr> 178 <td></td> 179 <td></td> 180 <td><input type="submit" name="firstname" id="firstname" value="保存"></td> 181 </tr> 182 </table> 183 184 </form> 185 <script language="JavaScript"> 186 187 </script> 188 189 </body> 190 </html>
1 /* 2 * Translated default messages for the jQuery validation plugin. 3 * Locale: CN 4 */ 5 jQuery.extend(jQuery.validator.messages, { 6 required: "必選字段", 7 remote: "請修正該字段", 8 email: "請輸入正確格式的電子郵件", 9 url: "請輸入合法的網址", 10 date: "請輸入合法的日期", 11 dateISO: "請輸入合法的日期 (ISO).", 12 number: "請輸入合法的數字", 13 digits: "只能輸入整數", 14 creditcard: "請輸入合法的信用卡號", 15 equalTo: "請再次輸入相同的值", 16 accept: "請輸入擁有合法後綴名的字符串", 17 maxlength: jQuery.validator.format("請輸入一個長度最可能是 {0} 的字符串"), 18 minlength: jQuery.validator.format("請輸入一個長度最少是 {0} 的字符串"), 19 rangelength: jQuery.validator.format("請輸入一個長度介於 {0} 和 {1} 之間的字符串"), 20 range: jQuery.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"), 21 max: jQuery.validator.format("請輸入一個最大爲 {0} 的值"), 22 min: jQuery.validator.format("請輸入一個最小爲 {0} 的值") 23 });
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 5 <title>jQuery validation plug-in - main demo</title> 6 7 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> 8 9 <script src="js/jquery.js" type="text/javascript"></script> 10 <script src="js/jquery.validate.js" type="text/javascript"></script> 11 12 <script type="text/javascript"> 13 $.validator.setDefaults({ 14 submitHandler: function() { alert("submitted!"); } 15 }); 16 17 $().ready(function() { 18 // validate the comment form when it is submitted 19 $("#commentForm").validate(); 20 21 // validate signup form on keyup and submit 22 $("#signupForm").validate({ 23 rules: { 24 firstname: "required", 25 lastname: "required", 26 username: { 27 required: true, 28 minlength: 2 29 }, 30 password: { 31 required: true, 32 minlength: 5 33 }, 34 confirm_password: { 35 required: true, 36 minlength: 5, 37 equalTo: "#password" 38 }, 39 email: { 40 required: true, 41 email: true 42 }, 43 topic: { 44 required: "#newsletter:checked", 45 minlength: 2 46 }, 47 agree: "required" 48 }, 49 messages: { 50 firstname: "Please enter your firstname", 51 lastname: "Please enter your lastname", 52 username: { 53 required: "Please enter a username", 54 minlength: "Your username must consist of at least 2 characters" 55 }, 56 password: { 57 required: "Please provide a password", 58 minlength: "Your password must be at least 5 characters long" 59 }, 60 confirm_password: { 61 required: "Please provide a password", 62 minlength: "Your password must be at least 5 characters long", 63 equalTo: "Please enter the same password as above" 64 }, 65 email: "Please enter a valid email address", 66 agree: "Please accept our policy" 67 } 68 }); 69 70 // propose username by combining first- and lastname 71 $("#username").focus(function() { 72 var firstname = $("#firstname").val(); 73 var lastname = $("#lastname").val(); 74 if(firstname && lastname && !this.value) { 75 this.value = firstname + "." + lastname; 76 } 77 }); 78 79 //code to hide topic selection, disable for demo 80 var newsletter = $("#newsletter"); 81 // newsletter topics are optional, hide at first 82 var inital = newsletter.is(":checked"); 83 var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray"); 84 var topicInputs = topics.find("input").attr("disabled", !inital); 85 // show when newsletter is checked 86 newsletter.click(function() { 87 topics[this.checked ? "removeClass" : "addClass"]("gray"); 88 topicInputs.attr("disabled", !this.checked); 89 }); 90 }); 91 </script> 92 93 <style type="text/css"> 94 #commentForm { width: 500px; } 95 #commentForm label { width: 250px; } 96 #commentForm label.error, #commentForm input.submit { margin-left: 253px; } 97 #signupForm { width: 670px; } 98 #signupForm label.error { 99 margin-left: 10px; 100 width: auto; 101 display: inline; 102 } 103 #newsletter_topics label.error { 104 display: none; 105 margin-left: 103px; 106 } 107 </style> 108 109 </head> 110 <body> 111 112 <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1> 113 <div id="main"> 114 115 <p>Default submitHandler is set to display an alert into of submitting the form</p> 116 117 <form class="cmxform" id="commentForm" method="get" action=""> 118 <fieldset> 119 <legend>Please provide your name, email address (won't be published) and a comment</legend> 120 <p> 121 <label for="cname">Name (required, at least 2 characters)</label> 122 <input id="cname" name="name" class="required" minlength="2" /> 123 <p> 124 <label for="cemail">E-Mail (required)</label> 125 <input id="cemail" type="email" name="email" class="required" /> 126 </p> 127 <p> 128 <label for="curl">URL (optional)</label> 129 <input id="curl" type="url" name="url" /> 130 </p> 131 <p> 132 <label for="ccomment">Your comment (required)</label> 133 <textarea id="ccomment" name="comment" class="required"></textarea> 134 </p> 135 <p> 136 <input class="submit" type="submit" value="Submit"/> 137 </p> 138 </fieldset> 139 </form> 140 141 <form class="cmxform" id="signupForm" method="get" action=""> 142 <fieldset> 143 <legend>Validating a complete form</legend> 144 <p> 145 <label for="firstname">Firstname</label> 146 <input id="firstname" name="firstname" /> 147 </p> 148 <p> 149 <label for="lastname">Lastname</label> 150 <input id="lastname" name="lastname" /> 151 </p> 152 <p> 153 <label for="username">Username</label> 154 <input id="username" name="username" /> 155 </p> 156 <p> 157 <label for="password">Password</label> 158 <input id="password" name="password" type="password" /> 159 </p> 160 <p> 161 <label for="confirm_password">Confirm password</label> 162 <input id="confirm_password" name="confirm_password" type="password" /> 163 </p> 164 <p> 165 <label for="email">Email</label> 166 <input id="email" name="email" type="email" /> 167 </p> 168 <p> 169 <label for="agree">Please agree to our policy</label> 170 <input type="checkbox" class="checkbox" id="agree" name="agree" /> 171 </p> 172 <p> 173 <label for="newsletter">I'd like to receive the newsletter</label> 174 <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" /> 175 </p> 176 <fieldset id="newsletter_topics"> 177 <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend> 178 <label for="topic_marketflash"> 179 <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" /> 180 Marketflash 181 </label> 182 <label for="topic_fuzz"> 183 <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" /> 184 Latest fuzz 185 </label> 186 <label for="topic_digester"> 187 <input type="checkbox" id="topic_digester" value="digester" name="topic" /> 188 Mailing list digester 189 </label> 190 <label for="topic" class="error">Please select at least two topics you'd like to receive.</label> 191 </fieldset> 192 <p> 193 <input class="submit" type="submit" value="Submit"/> 194 </p> 195 </fieldset> 196 </form> 197 198 <h3>Syntetic examples</h3> 199 <ul> 200 <li><a href="errorcontainer-demo.html">Error message containers in action</a></li> 201 <li><a href="custom-messages-metadata-demo.html">Custom Messages as Metadata</a></li> 202 <li><a href="radio-checkbox-select-demo.html">Radio and checkbox buttons and selects</a></li> 203 <li><a href="ajaxSubmit-intergration-demo.html">Integration with Form Plugin (AJAX submit)</a></li> 204 <li><a href="custom-methods-demo.html">Custom methods and message display.</a></li> 205 <li><a href="dynamic-totals.html">Dynamic forms</a></li> 206 <li><a href="themerollered.html">Forms styled with jQuery UI Themeroller</a></li> 207 </ul> 208 <h3>Real-world examples</h3> 209 <ul> 210 <li><a href="milk/">Remember The Milk signup form</a></li> 211 <li><a href="marketo/">Marketo signup form</a></li> 212 <li><a href="multipart/">Buy and Sell a House multipart form</a></li> 213 <li><a href="captcha/">Remote captcha validation</a></li> 214 </ul> 215 216 <h3>Testsuite</h3> 217 <ul> 218 <li><a href="../test/">Validation Testsuite</a></li> 219 </ul> 220 221 </div> 222 223 <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 224 </script> 225 <script type="text/javascript"> 226 _uacct = "UA-2623402-1"; 227 urchinTracker(); 228 </script> 229 </body> 230 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery validation plug-in - main demo</title> 6 7 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> 8 9 <script src="js/jquery.js" type="text/javascript"></script> 10 <script src="js/jquery.validate.js" type="text/javascript"></script> 11 <script src="js/messages_cn.js" type="text/javascript"></script> 12 <script type="text/javascript"> 13 14 $().ready(function() { 15 //validate()方法就是表單驗證方法 16 $("#commentForm").validate(); 17 18 }); 19 </script> 20 21 <style type="text/css"> 22 #commentForm { width: 500px; } 23 #commentForm label { width: 250px; } 24 #commentForm label.error, #commentForm input.submit { margin-left: 253px; } 25 #signupForm { width: 670px; } 26 #signupForm label.error { 27 margin-left: 10px; 28 width: auto; 29 display: inline; 30 } 31 #newsletter_topics label.error { 32 display: none; 33 margin-left: 103px; 34 } 35 </style> 36 37 </head> 38 <body> 39 40 <form class="cmxform" id="commentForm" method="get" action=""> 41 <fieldset> 42 <legend>Please provide your name, email address (won't be published) and a comment</legend> 43 <p> 44 <label for="cname">Name (required, at least 2 characters)</label> 45 <input id="cname" name="name" class="required" minlength="2" /> 46 <p> 47 <label for="cemail">E-Mail (required)</label> 48 <input id="cemail" type="email" name="email" class="required" /> 49 </p> 50 <p> 51 <label for="curl">URL (optional)</label> 52 <input id="curl" type="url" name="url" /> 53 </p> 54 <p> 55 <label for="ccomment">Your comment (required)</label> 56 <textarea id="ccomment" name="comment" class="required"></textarea> 57 </p> 58 <p> 59 <input class="submit" type="submit" value="Submit"/> 60 </p> 61 </fieldset> 62 </form> 63 64 </body> 65 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 5 <title>jQuery validation plug-in - main demo</title> 6 7 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> 8 9 <script src="js/jquery.js" type="text/javascript"></script> 10 <script src="js/jquery.validate.js" type="text/javascript"></script> 11 12 <script type="text/javascript"> 13 14 $().ready(function() { 15 16 /* 17 * validate(options)æ¹æ³ 18 * * optoins:符åJSONæ ¼å¼çkey/valueæ ¼å¼ 19 */ 20 $("#signupForm").validate({ 21 rules: { 22 firstname: "required", 23 lastname: "required", 24 username: { 25 required: true, 26 minlength: 2 27 }, 28 password: { 29 required: true, 30 minlength: 5 31 }, 32 confirm_password: { 33 required: true, 34 minlength: 5, 35 equalTo: "#password" 36 }, 37 email: { 38 required: true, 39 email: true 40 }, 41 topic: { 42 required: "#newsletter:checked", 43 minlength: 2 44 }, 45 agree: "required" 46 }, 47 messages: { 48 firstname: "Please enter your firstname", 49 lastname: "Please enter your lastname", 50 username: { 51 required: "Please enter a username", 52 minlength: "Your username must consist of at least 2 characters" 53 }, 54 password: { 55 required: "Please provide a password", 56 minlength: "Your password must be at least 5 characters long" 57 }, 58 confirm_password: { 59 required: "Please provide a password", 60 minlength: "Your password must be at least 5 characters long", 61 equalTo: "Please enter the same password as above" 62 }, 63 email: "Please enter a valid email address", 64 agree: "Please accept our policy" 65 } 66 }); 67 }); 68 </script> 69 70 <style type="text/css"> 71 #commentForm { width: 500px; } 72 #commentForm label { width: 250px; } 73 #commentForm label.error, #commentForm input.submit { margin-left: 253px; } 74 #signupForm { width: 670px; } 75 #signupForm label.error { 76 margin-left: 10px; 77 width: auto; 78 display: inline; 79 } 80 #newsletter_topics label.error { 81 display: none; 82 margin-left: 103px; 83 } 84 </style> 85 86 </head> 87 <body> 88 89 <form class="cmxform" id="signupForm" method="get" action=""> 90 <fieldset> 91 <legend>Validating a complete form</legend> 92 <p> 93 <label for="firstname">Firstname</label> 94 <input id="firstname" name="firstname" /> 95 </p> 96 <p> 97 <label for="lastname">Lastname</label> 98 <input id="lastname" name="lastname" /> 99 </p> 100 <p> 101 <label for="username">Username</label> 102 <input id="username" name="username" /> 103 </p> 104 <p> 105 <label for="password">Password</label> 106 <input id="password" name="password" type="password" /> 107 </p> 108 <p> 109 <label for="confirm_password">Confirm password</label> 110 <input id="confirm_password" name="confirm_password" type="password" /> 111 </p> 112 <p> 113 <label for="email">Email</label> 114 <input id="email" name="email" type="email" /> 115 </p> 116 <p> 117 <label for="agree">Please agree to our policy</label> 118 <input type="checkbox" class="checkbox" id="agree" name="agree" /> 119 </p> 120 <p> 121 <label for="newsletter">I'd like to receive the newsletter</label> 122 <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" /> 123 </p> 124 <fieldset id="newsletter_topics"> 125 <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend> 126 <label for="topic_marketflash"> 127 <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" /> 128 Marketflash 129 </label> 130 <label for="topic_fuzz"> 131 <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" /> 132 Latest fuzz 133 </label> 134 <label for="topic_digester"> 135 <input type="checkbox" id="topic_digester" value="digester" name="topic" /> 136 Mailing list digester 137 </label> 138 <label for="topic" class="error">Please select at least two topics you'd like to receive.</label> 139 </fieldset> 140 <p> 141 <input class="submit" type="submit" value="Submit"/> 142 </p> 143 </fieldset> 144 </form> 145 146 </body> 147 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery validation plug-in - main demo</title> 6 7 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> 8 9 <script src="js/jquery.js" type="text/javascript"></script> 10 <script src="js/jquery.validate.js" type="text/javascript"></script> 11 12 <script type="text/javascript"> 13 14 $().ready(function() { 15 16 /* 17 * validate(options)方法 18 * * optoins:符合JSON格式的key/value格式 19 * { 20 * rules : { 21 * key : value 22 * }, 23 * messages : { 24 * key : value 25 * } 26 * rules:設置表單驗證對應頁面元素使用的驗證方法 27 * key:設置表單驗證對應頁面元素的name屬性值 28 * value:設置表單驗證對應使用的驗證方法 29 * * required:驗證不能爲空 30 * messages:設置表單驗證對應頁面元素的錯誤提示信息 31 * key:設置表單驗證對應頁面元素的name屬性值 32 * value:設置表單驗證的錯誤提示信息 33 * } 34 */ 35 $("#signupForm").validate({ 36 rules: { 37 firstname: "required" 38 }, 39 messages: { 40 firstname: "請輸入你的名" 41 } 42 }); 43 }); 44 </script> 45 46 <style type="text/css"> 47 #commentForm { width: 500px; } 48 #commentForm label { width: 250px; } 49 #commentForm label.error, #commentForm input.submit { margin-left: 253px; } 50 #signupForm { width: 670px; } 51 #signupForm label.error { 52 margin-left: 10px; 53 width: auto; 54 display: inline; 55 } 56 #newsletter_topics label.error { 57 display: none; 58 margin-left: 103px; 59 } 60 </style> 61 62 </head> 63 <body> 64 65 <form class="cmxform" id="signupForm" method="get" action=""> 66 <fieldset> 67 <legend>Validating a complete form</legend> 68 <p> 69 <label for="firstname">Firstname</label> 70 <input id="firstname" name="firstname" /> 71 </p> 72 <p> 73 <label for="lastname">Lastname</label> 74 <input id="lastname" name="lastname" /> 75 </p> 76 <p> 77 <label for="username">Username</label> 78 <input id="username" name="username" /> 79 </p> 80 <p> 81 <label for="password">Password</label> 82 <input id="password" name="password" type="password" /> 83 </p> 84 <p> 85 <label for="confirm_password">Confirm password</label> 86 <input id="confirm_password" name="confirm_password" type="password" /> 87 </p> 88 <p> 89 <label for="email">Email</label> 90 <input id="email" name="email" type="email" /> 91 </p> 92 <p> 93 <label for="agree">Please agree to our policy</label> 94 <input type="checkbox" class="checkbox" id="agree" name="agree" /> 95 </p> 96 <p> 97 <label for="newsletter">I'd like to receive the newsletter</label> 98 <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" /> 99 </p> 100 <fieldset id="newsletter_topics"> 101 <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend> 102 <label for="topic_marketflash"> 103 <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" /> 104 Marketflash 105 </label> 106 <label for="topic_fuzz"> 107 <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" /> 108 Latest fuzz 109 </label> 110 <label for="topic_digester"> 111 <input type="checkbox" id="topic_digester" value="digester" name="topic" /> 112 Mailing list digester 113 </label> 114 <label for="topic" class="error">Please select at least two topics you'd like to receive.</label> 115 </fieldset> 116 <p> 117 <input class="submit" type="submit" value="Submit"/> 118 </p> 119 </fieldset> 120 </form> 121 122 </body> 123 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery validation plug-in - main demo</title> 6 7 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> 8 9 <script src="js/jquery.js" type="text/javascript"></script> 10 <script src="js/jquery.validate.js" type="text/javascript"></script> 11 12 <script type="text/javascript"> 13 14 $().ready(function() { 15 16 /* 17 * validate(options)方法 18 * * optoins:符合JSON格式的key/value格式 19 * { 20 * rules : { 21 * key : value 22 * }, 23 * messages : { 24 * key : value 25 * } 26 * rules:設置表單驗證對應頁面元素使用的驗證方法 27 * key:設置表單驗證對應頁面元素的name屬性值 28 * value:設置表單驗證對應使用的驗證方法 29 * * required:驗證不能爲空(required: true實際上等價於required) 30 * * minlength:驗證最小長度 31 * * equalTo:驗證當前元素內容是否等於指定元素內容 32 * * email:驗證email地址格式是否正確 33 * messages:設置表單驗證對應頁面元素的錯誤提示信息 34 * key:設置表單驗證對應頁面元素的name屬性值 35 * value:設置表單驗證的錯誤提示信息 36 * } 37 */ 38 $("#signupForm").validate({ 39 rules: { 40 firstname: "required", 41 lastname: "required", 42 username: { 43 required: true, 44 minlength: 2 45 }, 46 password: { 47 required: true, 48 minlength: 5 49 }, 50 confirm_password: { 51 required: true, 52 minlength: 5, 53 equalTo: "#password" 54 }, 55 email: { 56 required: true, 57 email: true 58 }, 59 topic: { 60 required: "#newsletter:checked", 61 minlength: 2 62 }, 63 agree: "required" 64 }, 65 messages: { 66 firstname: "請輸入你的名" 67 } 68 }); 69 }); 70 </script> 71 72 <style type="text/css"> 73 #commentForm { width: 500px; } 74 #commentForm label { width: 250px; } 75 #commentForm label.error, #commentForm input.submit { margin-left: 253px; } 76 #signupForm { width: 670px; } 77 #signupForm label.error { 78 margin-left: 10px; 79 width: auto; 80 display: inline; 81 } 82 #newsletter_topics label.error { 83 display: none; 84 margin-left: 103px; 85 } 86 </style> 87 88 </head> 89 <body> 90 91 <form class="cmxform" id="signupForm" method="get" action=""> 92 <fieldset> 93 <legend>Validating a complete form</legend> 94 <p> 95 <label for="firstname">Firstname</label> 96 <input id="firstname" name="firstname" /> 97 </p> 98 <p> 99 <label for="lastname">Lastname</label> 100 <input id="lastname" name="lastname" /> 101 </p> 102 <p> 103 <label for="username">Username</label> 104 <input id="username" name="username" /> 105 </p> 106 <p> 107 <label for="password">Password</label> 108 <input id="password" name="password" type="text" /> 109 </p> 110 <p> 111 <label for="confirm_password">Confirm password</label> 112 <input id="confirm_password" name="confirm_password" type="text" /> 113 </p> 114 <p> 115 <label for="email">Email</label> 116 <input id="email" name="email" type="email" /> 117 </p> 118 <p> 119 <label for="agree">Please agree to our policy</label> 120 <input type="checkbox" class="checkbox" id="agree" name="agree" /> 121 </p> 122 <p> 123 <label for="newsletter">I'd like to receive the newsletter</label> 124 <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" /> 125 </p> 126 <fieldset id="newsletter_topics"> 127 <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend> 128 <label for="topic_marketflash"> 129 <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" /> 130 Marketflash 131 </label> 132 <label for="topic_fuzz"> 133 <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" /> 134 Latest fuzz 135 </label> 136 <label for="topic_digester"> 137 <input type="checkbox" id="topic_digester" value="digester" name="topic" /> 138 Mailing list digester 139 </label> 140 <label for="topic" class="error">Please select at least two topics you'd like to receive.</label> 141 </fieldset> 142 <p> 143 <input class="submit" type="submit" value="Submit"/> 144 </p> 145 </fieldset> 146 </form> 147 148 </body> 149 </html>
JQueryUI入門
1.導入js文件
2.導入css文件
3.編輯HTML文件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>01_如何引入jQueryUI.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 <link rel="stylesheet" type="text/css" href="css/jquery-ui.css"> 10 <script type="text/javascript" src="js/jquery-1.9.1.js"></script> 11 <script type="text/javascript" src="js/jquery-ui-1.10.2.custom.js"></script> 12 </head> 13 <script> 14 $(function() { 15 //構建了JSON格式的數據內容,自動提示的備選內容 16 var availableTags = [ 17 "ActionScript", 18 "AppleScript", 19 "Asp", 20 "BASIC", 21 "C", 22 "C++", 23 "Clojure", 24 "COBOL", 25 "ColdFusion", 26 "Erlang", 27 "Fortran", 28 "Groovy", 29 "Haskell", 30 "Java", 31 "JavaScript", 32 "Lisp", 33 "Perl", 34 "PHP", 35 "Python", 36 "Ruby", 37 "Scala", 38 "Scheme" 39 ]; 40 //autocomplete()方法提供自動提示的方法 41 $( "#tags" ).autocomplete({ 42 source: availableTags 43 }); 44 }); 45 </script> 46 <body> 47 <input id="tags"> 48 </body> 49 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>01_如何引入jQueryUI.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 <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
相關文章
- 1. Jquery筆記
- 2. jquery筆記
- 3. jquery 筆記
- 4. JQuery筆記
- 5. ## jQuery筆記
- 6. jQuery的筆記
- 7. jQuery筆記——UI
- 8. 十、JQuery筆記
- 9. jQuery筆記
- 10. 筆記---jQuery
- 更多相關文章...
- • ASP.NET Razor - 標記 - ASP.NET 教程
- • ADO 添加記錄 - ADO 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Github 簡明教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Jquery筆記
- 2. jquery筆記
- 3. jquery 筆記
- 4. JQuery筆記
- 5. ## jQuery筆記
- 6. jQuery的筆記
- 7. jQuery筆記——UI
- 8. 十、JQuery筆記
- 9. jQuery筆記
- 10. 筆記---jQuery