|
Web-第四天 jQuery學(xué)習(xí) 今日內(nèi)容介紹 重寫javascript案例：彈出廣告 重寫javascript案例：隔行換色 重寫javascript案例：全選/全不選 今日內(nèi)容學(xué)習(xí)目標(biāo) 列舉常見的五種選擇器，并簡單描述其作用 通過選擇器,，獲得jQuery對象 學(xué)會給標(biāo)簽綁定事件 可以實(shí)現(xiàn)顯示或隱藏標(biāo)簽,。 重寫javascript案例“彈出廣告” jQuery是一個JavaScript框架,。它兼容CSS3，還兼容各種瀏覽器,。文檔說明很全,，應(yīng)用詳細(xì)，成熟插件多,。 jQuery2.0及后續(xù)版本不再支持IE6/7/8瀏覽器 核心理念是write less,do more(寫得更少,做得更多) 學(xué)習(xí)JavaScript時,，我們就學(xué)習(xí)過自定義JS庫的導(dǎo)入，學(xué)習(xí)jQuery只需要將對應(yīng)js庫下載,，并導(dǎo)入到我們項(xiàng)目下,，在html頁面使用<script>導(dǎo)入即可。 <script src="../js/jquery-1.11.0.js" type="text/javascript" ></script> 基本語法：jQuery(選擇器) 或 $(選擇器) 及在 jQuery中 "jQuery == $",，區(qū)分大小寫 //1 獲得jQuery對象 // * 命名約定：jQuery對象變量名建議以$開頭,。 var $demoId = $("#demoId"); 注釋： //單行注釋 /*塊注釋*/ jQuery對象和DOM對象可以項(xiàng)目轉(zhuǎn)換，但兩個對象的函數(shù)不能彼此混搭使用,。及jQuery對象只能使用自己的函數(shù) DOM對象轉(zhuǎn)換成jQuery對象,，語法：jQuery(dom對象) jQuery對象轉(zhuǎn)換成DOM對象，語法：$username[index] //1 原生javascript獲得value值 var d1 = document.getElementById("demoId"); //alert(d1.value); //2 將js dom對象 轉(zhuǎn)換成jQuery對象 // * 語法：$(dom對象) 或 jQuery(dom對象) var $d2 = $(d1); //alert($d2.val()); //3 將jQuery 轉(zhuǎn)換成 dom對象 // * jQuery對象內(nèi)部以數(shù)組方式存放所有的匹配數(shù)據(jù),，如果只匹配到一個,，索引號為0。 var d3 = $d2[0]; alert(d3.value); // 總結(jié)：jQuery對象和dom對象,，函數(shù)(api)不能相互調(diào)用 jQuery提供ready()函數(shù),，用于頁面成功加載后執(zhí)行。與window.onload函數(shù)類型,。 <script type="text/javascript"> //實(shí)際開發(fā)中,，我們習(xí)慣將<script>標(biāo)簽編寫在<head>標(biāo)簽體內(nèi)， //整個頁面的解析時從上網(wǎng)下的,，此時將不能獲得<input>對象 alert($("#demoId").length); //獲得匹配對象的個數(shù),，0表示沒有匹配到任何 //1 javascript頁面加載 window.onload = function(){ alert("js頁面加載"); } //2 jQuery頁面加載 $(document).ready(function () { alert("jQuery頁面加載"); }); /* * 注意： * * js給onload只能賦一個值，如果對此賦值,，后面的將覆蓋前的,。 * * jQuery ready可以使用多次，多個頁面加載將依次執(zhí)行,。 */ </script> <body> <input type="text" id="demoId" value="悟空教程&Java幫幫&You"/> </body> jQuery后續(xù)的學(xué)習(xí)中,，“基本選擇器”使用的頻率最大，我們先預(yù)先學(xué)習(xí)一下,。 <script type="text/javascript"> $(document).ready(function () { //1 id選擇器,，格式：$("#id值") var $d1 = $("#r01"); alert($d1.length); //1 ,id="r01"只有一個 //2 標(biāo)簽選擇器，格式：$("標(biāo)簽名") var $d2 = $("input"); alert($d2.length); //3,，表示3個input //3 類選擇器,，格式：$(".class類名") // * length 和 size() 等效 var $d3 = $(".myClass"); alert($d3.size()); //2,，表示兩個input class為myClass }); </script> <input type="radio" name="hobby" value="敲代碼" id="r01"/> <input type="radio" name="hobby" value="調(diào)試bug"/> <input type="radio" name="hobby" value="談需求"/> 本案例中將使用到j(luò)Query的“基本過濾選擇器”、樣式操作,、屬性操作等知識,，接下來我們下了解這些知識。 通過改變元素 高度和寬度 顯示或隱藏 show(speed ,fn) 顯示 參數(shù)1 speed,，顯示速度,，單位：毫秒。固定字符串：slow, normal, or fast 參數(shù)2fn,，顯示成功之后回調(diào)函數(shù),。 hide() 隱藏 toggle() 切換 通過改變元素 高度 顯示或隱藏 slideDown() 顯示，高度變大,。 slideUp() 隱藏,，高度變小。 slideToggle() 切換 通過改變元素 透明度 顯示或隱藏 fadeIn() 顯示 fadeOut() 隱藏 fadeToggle() 切換 fadeTo(speed,opacity,[fn]) 指定透明度 參數(shù)2 opacity ：一個0至1之間表示透明度的數(shù)字 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> var time; $(function(){ // 設(shè)置定時 5秒后執(zhí)行一個顯示廣告的函數(shù) time = setInterval("showAd()",5000); }); // 顯示廣告的函數(shù) function showAd(){ // 獲得廣告的div,，顯示 // $("#divAd").show(1000); // $("#divAd").slideDown(3000); $("#divAd").fadeIn(3000); // 清空定時： clearInterval(time); // 重新設(shè)置定時: time = setInterval("hideAd()",5000); } // 隱藏廣告的函數(shù): function hideAd(){ // 獲得廣告的div,，隱藏 // $("#divAd").hide(3000); // $("#divAd").slideUp(3000); $("#divAd").fadeOut(3000); // 清空定時： clearInterval(time); } </script> jQuery后續(xù)的學(xué)習(xí)中,，“基本選擇器”使用的頻率最大,，我們先預(yù)先學(xué)習(xí)一下。 <script type="text/javascript"> $(document).ready(function () { //1 id選擇器,，格式：$("#id值") var $d1 = $("#r01"); alert($d1.length); //1 ,id="r01"只有一個 //2 標(biāo)簽選擇器,，格式：$("標(biāo)簽名") var $d2 = $("input"); alert($d2.length); //3，表示3個input //3 類選擇器,，格式：$(".class類名") // * length 和 size() 等效 var $d3 = $(".myClass"); alert($d3.size()); //2,，表示兩個input class為myClass }); </script> <input type="radio" name="hobby" value="敲代碼" id="r01"/> <input type="radio" name="hobby" value="調(diào)試bug"/> <input type="radio" name="hobby" value="談需求"/> A B ，獲得A元素內(nèi)部的所有的B元素,。（祖孫）--后代 A > B ,，獲得A元素下面的所有B子元素。（父子） A + B ,，獲得A元素同級下一個B元素（兄弟） A ~ B,， 獲得A元素之后的所有B元素（兄弟） :first 第一個 :last 最后一個 :not(..) 刪除指定內(nèi)容。例如：1234:not(3) --> 124 :even 偶數(shù),，從 0 開始計數(shù) -- 操作索引號,，頁面顯示奇數(shù)項(xiàng) :odd 奇數(shù) :eq(index) 指定第幾個 = :gt(index) 大于n個 > :lt(index) 小于n個 < -------------------------------------------------- :header 獲得標(biāo)題 （<h1> /<h2> ....） :animated 獲得動畫的 :focus 獲得焦點(diǎn) [屬性名] 獲得有屬性名的元素。例如：<xxx name="username"> | <xxx name=" "> | <xxx name> [屬性名=值] 獲得屬性名 等于 值 元素,。 [屬性名!=值] 獲得屬性名 不等于 值 元素,。 [...][...][...] 復(fù)合屬性選擇器，多個屬性同時過濾,。where .. and ... and ... ---------------------------------- [屬性名^=值] 獲得屬性名 以 值 開頭 元素,。 [屬性名$=值] 獲得屬性名 以 值 結(jié)尾 元素,。 [屬性名*=值] 獲得屬性名 含有 值 元素。 :enabled 可用 :disabled 不可用,。<xxx disabled="disabled"> | <xxx disabled=" "> | <xxx disabled> :checked 選中（單選radio ,，多選checkbox） <input type="..." checked="checked"> :selected 選擇（下列列表 <select>） <option selected="selected"> 重寫JavaScript案例“隔行換色” <xxx class=””> addClass() 給指定標(biāo)簽的class屬性追加樣式 removeClass() 將標(biāo)簽指定的class屬性移除 toggleClass() 切換class屬性樣式。及沒有時添加,，有的時候刪除,。 CSS樣式： .even { background:#FFF38F;} /* 偶數(shù)行樣式*/ .odd { background:#FFFFEE;} /* 奇數(shù)行樣式*/ JavaScript代碼 <script> $(function(){ // 找奇數(shù)行： //$("tr:odd").addClass("odd"); // 偶數(shù)行: //$("tr:even").addClass("even"); //tr索引號大于1的所有tr $("tr:gt(1):odd").addClass("odd"); $("tr:gt(1):even").addClass("even"); }); </script> 重寫JavaScript時案例“全選/全不選” prop() 操作的標(biāo)簽的特性。JQ1.6新特性,，獲得一些第一次分配undefined屬性值的標(biāo)簽時,，如果拋異常，將忽略瀏覽器生成的任何錯誤,。 removeProp() 移除標(biāo)簽的特性,。 attr() 設(shè)置標(biāo)簽屬性 removeAttr() 移除標(biāo)簽的屬性。 注意：prop() 和 attr() 使用時容易混淆,，建議先使用prop() 沒有效果,，再使用attr()。 // 復(fù)選框的全選和全不選: $(function(){ // 步驟一：為上面的復(fù)選框綁定單擊事件: $("#selectAll").click(function(){ /*if(this.checked == true){ // 如果上面的復(fù)選框被選中： $("input[name='ids']").prop("checked",true); }else{ // 上面的復(fù)選框沒有被選中 $("input[name='ids']"). prop ("checked",false); }*/ $("input[name='ids']").prop("checked",this.checked); }); }); <xxx style="k:v"> css(name) 獲得css值 css(name,value) 設(shè)置一對值 css(prop) 設(shè)置一組值 --> { k:v, k:v , ....} jQuery提供更靈活的方式用于綁定事件,，只要獲得jQuery對象,，就可以直接綁定事件，jQuery使用的事件與javascript使用的事件名稱雷同,，jQuery將js事件前面的on去掉了,。例如：javascript點(diǎn)擊稱為onclick，jQuery稱為click,。 <script type="text/javascript"> $(document).ready(function () { // 格式：對象.事件名(fn); // * jQuery事件名將js的之間前面的on去掉,，例如：事件onclick，jQuery為click $("#bId").click(function(){ alert("被點(diǎn)擊"); }); }); </script> $("#e02").mouseover(function(){ $("#divMsg").html("鼠標(biāo)移上：mouseover"); }).mouseout(function(){ $("#divMsg").html("鼠標(biāo)移出：mouseout"); }) <script type="text/javascript"> $(document).ready(function () { //數(shù)據(jù)展示中,，偶數(shù)行的顏色設(shè)置成#FFFAE8 $("tr:gt(1):odd").css("backgroundColor","#FFFAE8"); //鼠標(biāo)移上和移除變色 E8DFC4 $("tr:gt(1)").mouseover(function () { //記錄之前的顏色 $(this).attr("bgc" , $(this).css("backgroundColor")); //設(shè)置移上背景色 $(this).css("backgroundColor","#E8DFC4"); }).mouseout(function () { //獲得之前記錄的背景色 var bgc = $(this).attr("bgc"); //設(shè)置移除后之前的顏色 $(this).css("backgroundColor",bgc); }); }); </script> <script type="text/javascript"> $(function(){ // 全選 $("#selectAllId").click(function(){ $(".itemSelect").prop("checked" , this.checked); }); // 反選 $("#reverseId").click(function(){ $(".itemSelect").each(function(){ $(this).prop("checked", !this.checked); }); }); }); </script> <script type="text/javascript"> $(function(){ // 全選 $("#selectAllId").click(function(){ $(".itemSelect").prop("checked" , this.checked); }); // 反選 $("#reverseId").click(function(){ // 給每一個input設(shè)置與自己相反的狀態(tài) // 使用函數(shù)進(jìn)行數(shù)據(jù)返回 function(){ return ...} // 函數(shù)內(nèi)部this，就是當(dāng)前操作的對象 ,需要就是與自己相反 !this.checked $(".itemSelect").prop("checked", function(){ return !this.checked; }); }); }); </script> <script type="text/javascript"> $(function(){ // 全選 $("#selectAllId").click(function(){ $(".itemSelect").prop("checked" , this.checked); }); // 每一個列表項(xiàng)綁定事件,，如果不是全部勾選，那么“全選”按鈕不勾選 $(".itemSelect").click(function(){ $("#selectAllId").prop("checked",$(".itemSelect").length ==$(".itemSelect:checked").length); }); }); </script> 今日內(nèi)容介紹 重寫javascript案例：省市聯(lián)動 重寫javascript案例：左右選擇 重寫javascript案例：表單校驗(yàn) 今日內(nèi)容學(xué)習(xí)目標(biāo) 能夠使用jQuery為標(biāo)簽添加屬性或樣式 能夠?yàn)橹付?biāo)簽添加子標(biāo)簽或兄弟標(biāo)簽 學(xué)會給標(biāo)簽綁定事件 重寫javascript案例“省市聯(lián)動” 本案例需要對標(biāo)簽的value屬性值,，標(biāo)簽體內(nèi)容進(jìn)行操作,，并需要遍歷所有的市。 val() 獲得value屬性的值 val(...) 給value屬性設(shè)置值 html() 獲得html代碼,，如果有標(biāo)簽，一并獲得,。 html(....) 設(shè)置html代碼,，如果有標(biāo)簽，將進(jìn)行解析,。 text() 獲得文本,，如果有標(biāo)簽，忽略,。 text(....) 設(shè)置文本,，如果含有標(biāo)簽，不進(jìn)行解析,。原樣輸出,。 方式1：$(ele).each( fn ); 方式2：$.each( $ele , fn ); 回調(diào)函數(shù)fn：function(index , docEle) 參數(shù)1：遍歷索引號 參數(shù)2：遍歷當(dāng)前對象 docEle == this （dom對象） // each(fn) 函數(shù) $("input:hidden").each(function(){ //alert( this.value ); alert( $(this).val() ); }); // $.each(對象,fn) 全局函數(shù) // * each回調(diào)函數(shù) // ** 參數(shù)1：遍歷索引號 // ** 參數(shù)2：遍歷當(dāng)前對象 docEle == this $.each($("input:hidden"), function(index,docEle){ alert( index + " -- " + docEle.value ); }); A.append(B) , 將B插入到A內(nèi)部后面。 <A> .... <B></B> </A> A.prepend(B) , 將B插入到A內(nèi)部前面,。 <A> <B></B> .... </A> --------------------------------------------------- A.appendTo(B) ,，將A插入到B內(nèi)部后面 A.prependTo(B) ，將A插入到B內(nèi)部前面,。 <script type="text/javascript"> // 定義二維數(shù)組: var cities = new Array(4); cities[0] = new Array("市轄區(qū)","縣"); cities[1] = new Array("長春市","吉林市","松原市","延邊市"); cities[2] = new Array("濟(jì)南市","青島市","煙臺市","濰坊市","淄博市"); cities[3] = new Array("石家莊市","唐山市","邯鄲市","廊坊市"); cities[4] = new Array("南京市","蘇州市","揚(yáng)州市","無錫市"); $(document).ready(function () { // 給省綁定change事件 $("#provinceId").change(function () { //獲得省value值,及索引號 var pIndex = $(this).val(); // 獲得對應(yīng)的市 var allCity = cities[pIndex]; // 遍歷 $("#cityId").html("<option value=''>----請-選-擇-市----</option>"); $(allCity).each(function (i) { $("#cityId").append( "<option value=’’>"+allCity[i]+"</option>"); }); }); }); </script> 本案例我們jQuery的“層級選擇器”,、“表單屬性過濾選擇器”、“文檔處理”,。通過“層級選擇器”獲得需要的操作對象,，通過“表單屬性過濾選擇器”從已有的對象中篩選出需要的，最后通過“文檔處理”將篩選后的內(nèi)容追加到指定的位置,。 <script type="text/javascript"> $(document).ready(function () { $("#left1").click(function () { $("#leftSelectId option:selected:first").appendTo($("#rightSelectId")); }); $("#left2").click(function () { $("#leftSelectId option:selected").appendTo($("#rightSelectId")); }); $("#left3").click(function () { $("#leftSelectId option").appendTo($("#rightSelectId")); }); }); </script> hover( over , out ) 簡化方法 A.hover( fn1 , fn2) 等效 A.mouseover( fn1 ).mouseout( fn2 ) toggle( fn1 , fn2 , .... ) click事件增強(qiáng)版，輪回,。（1.8.3版本可用,，其他高版本不可用） 在學(xué)習(xí)JavaScript時，我們手動的完成過表單數(shù)據(jù)的校驗(yàn),，此功能在開發(fā)中非常常見,，屬于通用功能范疇，實(shí)際開發(fā)一般使用都是第三方工具,。本案例我們將使用jQuery插件validation進(jìn)行表單的校驗(yàn),。 官網(wǎng)地址：http:///files/jquery-validation-1.15.0.zip 幫助文檔位置：http:///documentation/ 目錄結(jié)構(gòu)： validate是jQuery插件，及必須在jQuery的基礎(chǔ)上進(jìn)行運(yùn)行,。我們將導(dǎo)入jQuery庫,、validate庫、和國際化資源庫（可選） <!--依賴的jQuery庫--> <script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8" /> <!--validation校驗(yàn)庫--> <script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8" /> <!--國際化庫，中文提示（可選）--> <script src="../js/messages_zh.js" type="text/javascript" charset="utf-8" /> validate需要手動的聲明,，對那個表單進(jìn)行校驗(yàn),，及需要手動調(diào)用validate()方法。 <script type="text/javascript"> $().ready(function () { $("#formId").validate(); }); </script> 校驗(yàn)類型 取值 描述 required true|false 必填字段 email email 郵件地址 url 路徑 date 數(shù)字 日期 dateISO 字符串 日期（YYYY-MM-dd） number 數(shù)字（負(fù)數(shù),，小數(shù)） digits 整數(shù) minlength 數(shù)字 最小長度 maxlength 數(shù)字 最大長度 rangelength [minL,maxL] 長度范圍 min 最小值 max 最大值 range [min,max] 值范圍 equalTo jQuery表達(dá)式 兩個值相同 remote url路徑 ajax校驗(yàn) 語法： $(…).validate({ rules:{}, messages:{} }); rules 規(guī)則語法： rules:{ 字段名:校驗(yàn)器, 字段名:校驗(yàn)器 } 校驗(yàn)器語法： 語法：{校驗(yàn)器:值,校驗(yàn)器:值,...} message 提示語法： message:{ 字段名:{校驗(yàn)器:"提示",校驗(yàn)器:"提示",...} } $("#formId").validate({ rules:{ username:{ required：true }, password:{ required:true, rangelength:[2,5] }, repassword:{ equalTo:"[name='password']" } }, messages:{ username:{ required:"不能為空" }, password:{ rangelength:"長度{0}-{1}之間" } } }); js代碼 <script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8"></script> <script src="../js/messages_zh.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $().ready(function () { $("#formId").validate({ rules:{ loginname:{ required:true, minlength:2, maxlength:5 }, loginpwd:{ required:true, number:true }, reloginpwd:{ equalTo:"[name='loginpwd']" }, email:"email", username:{ required:true, rangelength:[2,5] }, gender:{ required:true } }, messages:{ gender:{ required:"性別必須勾選" } } }); }); </script> html代碼 <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女 <!--在指定位置顯示錯誤信息 * class 必須是error * for 必須設(shè)置錯誤對象 --> <label for="gender"></label> jquery.validate.js jQuery插件,，對jQuery進(jìn)行增強(qiáng)，添加了validate()函數(shù),，用于對表單進(jìn)行校驗(yàn),。validate()函數(shù)內(nèi)部，調(diào)用的是$.validator定義函數(shù)進(jìn)行處理,，如果希望自定義校驗(yàn)規(guī)則,，需要使用$.validator.addMethod完成。 $.validator.addMethod(name , method , message); 參數(shù)1：name,，校驗(yàn)規(guī)則的名稱,。例如：required 參數(shù)2：method，執(zhí)行校驗(yàn)時使用的處理函數(shù),。返回true表示校驗(yàn)通過,，返回false表示校驗(yàn)未通過。 function(value , element , params ){} ,處理函數(shù)被調(diào)用時,，可以獲得3個參數(shù),。 參數(shù)value：表單項(xiàng)的value值。例如：<input value=""> 參數(shù)element：被校驗(yàn)的表單項(xiàng)對象,。 參數(shù)params：使用當(dāng)前校驗(yàn)規(guī)則傳遞的值,。例如：rules : { 參數(shù)1Method : 參數(shù)params } 參數(shù)3：message，校驗(yàn)未通過時的提示信息,。 <form id="formId" action="../index.html" > <table> <tr> <td colspan="3"> <font color="#3164af">會員注冊</font> USER REGISTER </td> </tr> <tr> <td>用戶名</td> <td colspan="2"><input type="text" name="username" /> </td> </tr> <tr> <td>身份證</td> <td colspan="2"><input type="text" name="card" /> </td> </tr> <tr> <td></td> <td colspan="2"> <input type="submit" value="注冊" /> </td> </tr> </table> </form> 先注冊校驗(yàn)規(guī)則：長度校驗(yàn)器 cardlength /* 1）校驗(yàn)規(guī)則名稱：cardlength * 2）校驗(yàn)處理函數(shù)：fn(value , element , params) * * value : 當(dāng)前文本框輸入的內(nèi)容 * * element : 當(dāng)前文本框 * * params : 校驗(yàn)的具體參數(shù),，[15,18] * 3）校驗(yàn)提示信息：身份證長度必須是{0}或{1} * * {0} 可以獲得 params第一個參數(shù) */ $.validator.addMethod("cardlength",function(value,element,params){ if(value.length==15 || value.length==18){ return true;//校驗(yàn)通過 } return false;//未通過 },"身份證長度必須是{0}或{1}"); 先注冊校驗(yàn)規(guī)則： /* 如果參數(shù)為true進(jìn)行校驗(yàn)，如果參數(shù)為false不進(jìn)行校驗(yàn),。 * * 進(jìn)行校驗(yàn)時,，長度15：都是數(shù)字；長度18：都是數(shù)字或末尾為X或x * 1）校驗(yàn)規(guī)則名稱：cardformat * 2）校驗(yàn)處理函數(shù)：fn(value , element , params) * * value : 當(dāng)前文本框輸入的內(nèi)容 * * element : 當(dāng)前文本框 * * params : 校驗(yàn)的具體參數(shù),，true * 3）校驗(yàn)提示信息：身份證格式不正確 */ $.validator.addMethod("cardformat",function(value,element,params){ // 參數(shù)必須是boolean if(typeof params != "boolean"){ return false; } //參數(shù)為true,，需要進(jìn)行校驗(yàn) if(params){ if(value.length==15){ //15位：都是數(shù)字 var reg = /^[0-9]{15}$/; return reg.test(value); }else if(value.length==18){ //18位：都是數(shù)字或末尾是X var reg = /^[0-9]{18}|[0-9]{17}[X|x]$/; return reg.test(value); } // 格式不符合 return false; } //參數(shù)為false，不需要進(jìn)行校驗(yàn) return true; },"身份證格式不正確"); 使用校驗(yàn)規(guī)則 $("#formId").validate({ rules:{ username:{ required:true, rangelength:[5,8] }, card:{ required:true, cardlength:[15,18], cardformat:true } } }); $("#formId").validate({ rules:{ username:{ required:true, rangelength:[5,8] }, card:{ required:true, cardlength:[15,18], cardformat:true } }, messages:{ username:{ required:"用戶名不能為空", rangelength:"用戶名的長度是5到8" }, card:{ required:"身份證必須寫", cardlength:"身份證長度{0}位或{1}位", cardformat:"身份證的格式不正確" } } }); 使用jQuery模擬用戶分組,，要求如下： 1.頁面加載不顯示所有分組的列表項(xiàng),。 2.點(diǎn)擊分組名稱，顯示當(dāng)前分組列表,。 3.點(diǎn)擊分組名稱,，將隱藏其他分組的列表項(xiàng)。 函數(shù)名 描述 children() 所有的子元素 prev() 獲得上面的兄弟 nextAll() 獲得下面的所有兄弟 parent() 獲得父元素 siblings() 所有兄弟 find() 查詢指定內(nèi)容 步驟1：html代碼內(nèi)容 <style type="text/css"> div *{ display:block; width:200px; } div span{ background-color : #0f0; } </style> <div> <span>JavaEE組</span> <a>張三</a> <a>李四</a> <a>王五</a> </div> <div> <span>Android組</span> <a>張3</a> <a>李4</a> <a>王5</a> </div> <div> <span>UI組</span> <a>一一</a> <a>二二</a> <a>三三</a> </div> 步驟2：添加js代碼 <script type="text/javascript" src="../js/jquery-1.11.3.js"></script> <script type="text/javascript"> $(function(){ $("div").children("a").hide().prev("span").click(function(){ $(this).nextAll().show(500).parent().siblings().find("a").hide(500); }); }); </script> 在學(xué)習(xí)JavaScript時，我們手動的完成過表單數(shù)據(jù)的校驗(yàn),，此功能在開發(fā)中非常常見,，屬于通用功能范疇，實(shí)際開發(fā)一般使用都是第三方工具,。本案例我們將使用jQuery插件validation進(jìn)行表單的校驗(yàn),。 官網(wǎng)地址：http:///files/jquery-validation-1.15.0.zip 幫助文檔位置：http:///documentation/ 目錄結(jié)構(gòu)： validate是jQuery插件，及必須在jQuery的基礎(chǔ)上進(jìn)行運(yùn)行,。我們將導(dǎo)入jQuery庫,、validate庫、和國際化資源庫（可選） <!--依賴的jQuery庫--> <script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8" /> <!--validation校驗(yàn)庫--> <script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8" /> <!--國際化庫,，中文提示（可選）--> <script src="../js/messages_zh.js" type="text/javascript" charset="utf-8" /> validate需要手動的聲明,，對那個表單進(jìn)行校驗(yàn)，手動方式可以使用以下4種檢驗(yàn)方式,。 <script type="text/javascript"> $().ready(function () { $("#formId").validate(); }); </script> 表單元素的class屬性中,，編寫需要檢驗(yàn)類型，此種校驗(yàn)方式,，校驗(yàn)類型種類有限,。 語法：<標(biāo)簽 class=”類型1 類型2 …..”> //多個類型使用空格隔開 <form id="formId" action=""> 用戶名：<input type="text" name="username" class="required "/> <br/> 密碼：<input type="password" name="password" class="required number"/> <br /> 密碼：<input type="text" name="repassword"/> <br /> <input type="submit" value="提交"/> </form> 使用標(biāo)簽的屬性，可以完成提供所有校驗(yàn)類型,。 語法：<標(biāo)簽 類型=”值” 類型=”值”> 校驗(yàn)類型 取值 描述 required true|false 必填字段 email @ 郵件地址 url 路徑 date 數(shù)字 日期 dateISO 字符串 日期（YYYY-MM-dd） number 數(shù)字（負(fù)數(shù),，小數(shù)） digits 整數(shù) minlength 數(shù)字 最小長度 maxlength 數(shù)字 最大長度 rangelength [minL,maxL] 長度范圍 min 最小值 max 最大值 range [min,max] 值范圍 equalTo jQuery表達(dá)式 兩個值相同 remote url路徑 ajax校驗(yàn) <!--required="true" 可以省略成required，其他屬性值都不能省略--> <form id="formId" action=""> 用戶名：<input type="text" name="username" required="true" minlength="2" maxlength="5"/> <br/> 密碼：<input type="password" name="password" required="true" number="true"/> <br /> 密碼：<input type="password" name="repassword" required="true" equalTo="[name='password']"/> <br /> <input type="submit" value="提交"/> </form> 采用了HTML5 “data-”機(jī)制,，提供數(shù)據(jù),，jQuery提供 data()函數(shù)可以獲得由“data-”設(shè)置的值。 語法：<標(biāo)簽 data-rule-類型=”值”> jQuery獲得語法：$(ele).data(rule類型) ,， 例如：$(ele).data(“ruleRequired”); //去掉前綴“data-”,，每一個橫桿后面的單詞首字母大寫 例如： <!-- 格式：data-rule-校驗(yàn)器名稱="值" * 底層通過 $(ele).data("ruleRequired")獲得數(shù)據(jù) --> <form id="formId" action=""> 用戶名：<input type="text" name="username" data-rule-required="true" data-rule-minlength="2" data-rule-maxlength="5"/> <br/> 密碼：<input type="password" name="password" data-rule-required="true" data-rule-number="true"/> <br /> 密碼：<input type="password" name="repassword" data-rule-required="true" data-rule-equalTo="[name='password']"/> <br /> <input type="submit" value="提交"/> </form> js代碼校驗(yàn)，更佳靈活 語法： $(…).validate({ rules:{}, messages:{} }); rules 規(guī)則語法： rules:{ 字段名:校驗(yàn)器, 字段名:校驗(yàn)器 } 校驗(yàn)器語法： 語法1："校驗(yàn)器" 語法2：{"校驗(yàn)器":"取值","校驗(yàn)器":"取值",...} message 提示語法： message:{ 字段名:{"校驗(yàn)器":"提示","校驗(yàn)器":"提示",...} } $("#formId").validate({ rules:{ username:"required", password:{ required:true, rangelength:[2,5] }, repassword:{ equalTo:"[name='password']" } }, messages:{ username:{ required:"不能為空" }, password:{ rangelength:"長度{0}-{1}之間" } } }); js代碼 <script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8"></script> <script src="../js/messages_zh.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $().ready(function () { $("#formId").validate({ rules:{ loginname:{ required:true, minlength:2, maxlength:5 }, loginpwd:{ required:true, number:true }, reloginpwd:{ equalTo:"[name='loginpwd']" }, email:"email", username:{ required:true, rangelength:[2,5] }, gender:{ required:true }, birthday:"dateISO" /*, verifyCode:{ remote:"t.html" },*/ }, messages:{ gender:{ required:"性別必須勾選" } } }); }); </script> html代碼 <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女 <!--在指定位置顯示錯誤信息 * class 必須是error * for 必須設(shè)置錯誤對象 --> <label for="gender"></label>
|
|
|
