注冊用戶即可下載全站資源 關注Java幫幫微信公眾號
 

Web-第四天 jQuery學習【悟空教程】

72
發表時間:2018-11-07 13:57來源:Java幫幫-微信公眾號

jQuery基礎入門1

今日內容介紹

  • 重寫javascript案例:彈出廣告

  • 重寫javascript案例:隔行換色

  • 重寫javascript案例:全選/全不選

今日內容學習目標

  • 列舉常見的五種選擇器,并簡單描述其作用

  • 通過選擇器,獲得jQuery對象

  • 學會給標簽綁定事件

  • 可以實現顯示或隱藏標簽。

第1章 重寫彈出廣告

1.1 案例分析

重寫javascript案例“彈出廣告”

1.2 案例相關的函數

1.2.1 jQuery概述

1.2.1.1 什么是jQuery

jQuery是一個JavaScript框架。它兼容CSS3,還兼容各種瀏覽器。文檔說明很全,應用詳細,成熟插件多。

jQuery2.0及后續版本不再支持IE6/7/8瀏覽器

核心理念是write less,do more(寫得更少,做得更多)


1.2.1.2 下載


1.2.1.3 引入和對象獲取

學習JavaScript時,我們就學習過自定義JS庫的導入,學習jQuery只需要將對應js庫下載,并導入到我們項目下,在html頁面使用<script>導入即可。

<script src="../js/jquery-1.11.0.js" type="text/javascript" ></script>

  • 基本語法:jQuery(選擇器) 或  $(選擇器)

    • 及在 jQuery中 "jQuery == $",區分大小寫

//1 獲得jQuery對象

// * 命名約定:jQuery對象變量名建議以$開頭。

var $demoId = $("#demoId");

  • 注釋:

//單行注釋

/*塊注釋*/


1.2.1.4 jQuery對象和DOM轉換

jQuery對象和DOM對象可以項目轉換,但兩個對象的函數不能彼此混搭使用。及jQuery對象只能使用自己的函數

DOM對象轉換成jQuery對象,語法:jQuery(dom對象)

jQuery對象轉換成DOM對象,語法:$username[index]

//1 原生javascript獲得value

var d1 = document.getElementById("demoId");

//alert(d1.value);

//2 js dom對象 轉換成jQuery對象

// * 語法:$(dom對象) 或  jQuery(dom對象)

var $d2 = $(d1);

//alert($d2.val());

//3 jQuery 轉換成 dom對象

// * jQuery對象內部以數組方式存放所有的匹配數據,如果只匹配到一個,索引號為0

var d3 = $d2[0];

alert(d3.value);

// 總結:jQuery對象和dom對象,函數(api)不能相互調用


1.2.2 基本操作

1.2.2.1 jQuery頁面加載

jQuery提供ready()函數,用于頁面成功加載后執行。與window.onload函數類型。

<script type="text/javascript">

//實際開發中,我們習慣將<script>標簽編寫在<head>標簽體內,

//整個頁面的解析時從上網下的,此時將不能獲得<input>對象

alert($("#demoId").length); //獲得匹配對象的個數,0表示沒有匹配到任何


//1 javascript頁面加載

window.onload = function(){

alert("js頁面加載");

}


//2 jQuery頁面加載

$(document).ready(function () {

alert("jQuery頁面加載");

});

/*

* 注意:

* * jsonload只能賦一個值,如果對此賦值,后面的將覆蓋前的。

* * jQuery ready可以使用多次,多個頁面加載將依次執行。

*/


</script>

<body>

<input type="text" id="demoId" value="悟空教程&Java幫幫&You"/>

</body>

1.2.2.2 基本選擇器

jQuery后續的學習中,“基本選擇器”使用的頻率最大,我們先預先學習一下。

<script type="text/javascript">

$(document).ready(function () {

//1 id選擇器,格式:$("#id")

var $d1 = $("#r01");

alert($d1.length); //1 ,id="r01"只有一個


//2 標簽選擇器,格式:$("標簽名")

var $d2 = $("input");

alert($d2.length); //3,表示3input


//3 類選擇器,格式:$(".class類名")

// * length size() 等效

var $d3 = $(".myClass");

alert($d3.size()); //2,表示兩個input classmyClass

});

</script>

<input type="radio" name="hobby" value="敲代碼" id="r01"/>

<input type="radio" name="hobby" value="調試bug"/>

<input type="radio" name="hobby" value="談需求"/>

本案例中將使用到jQuery的“基本過濾選擇器”、樣式操作、屬性操作等知識,接下來我們下了解這些知識。


1.2.3 效果(了解)

1.2.3.1 基本

  • 通過改變元素 高度和寬度 顯示或隱藏

show(speed ,fn) 顯示

參數1 speed,顯示速度,單位:毫秒。固定字符串:slow, normal, or fast

參數2fn,顯示成功之后回調函數。

hide()  隱藏

toggle() 切換

1.2.3.2 滑動

  • 通過改變元素 高度  顯示或隱藏

slideDown() 顯示,高度變大。

slideUp() 隱藏,高度變小。

slideToggle() 切換

1.2.3.3 淡入淡出

  • 通過改變元素 透明度  顯示或隱藏

fadeIn() 顯示

fadeOut() 隱藏

fadeToggle() 切換

fadeTo(speed,opacity,[fn]) 指定透明度

參數2 opacity :一個01之間表示透明度的數字

1.3 案例實現

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>

<script>

var time;

$(function(){

// 設置定時 5秒后執行一個顯示廣告的函數

time = setInterval("showAd()",5000);

});


// 顯示廣告的函數

function showAd(){

// 獲得廣告的div,顯示

// $("#divAd").show(1000);

// $("#divAd").slideDown(3000);

$("#divAd").fadeIn(3000);

// 清空定時:

clearInterval(time);

// 重新設置定時:

time = setInterval("hideAd()",5000);

}


// 隱藏廣告的函數:

function hideAd(){

// 獲得廣告的div,隱藏

// $("#divAd").hide(3000);

// $("#divAd").slideUp(3000);

$("#divAd").fadeOut(3000);

// 清空定時:

clearInterval(time);

}

</script>


1.4 選擇器總結

1.4.1 基本選擇器

jQuery后續的學習中,“基本選擇器”使用的頻率最大,我們先預先學習一下。

<script type="text/javascript">

$(document).ready(function () {

//1 id選擇器,格式:$("#id")

var $d1 = $("#r01");

alert($d1.length); //1 ,id="r01"只有一個


//2 標簽選擇器,格式:$("標簽名")

var $d2 = $("input");

alert($d2.length); //3,表示3input


//3 類選擇器,格式:$(".class類名")

// * length size() 等效

var $d3 = $(".myClass");

alert($d3.size()); //2,表示兩個input classmyClass

});

</script>

<input type="radio" name="hobby" value="敲代碼" id="r01"/>

<input type="radio" name="hobby" value="調試bug"/>

<input type="radio" name="hobby" value="談需求"/>

1.4.2 層級選擇器

A   B ,獲得A元素內部的所有的B元素。(祖孫)--后代

A > B ,獲得A元素下面的所有B子元素。(父子)

A + B ,獲得A元素同級下一個B元素(兄弟)

A ~ B 獲得A元素之后的所有B元素(兄弟)


1.4.3 基本過濾選擇器

:first  第一個

:last  最后一個

:not(..) 刪除指定內容。例如:1234:not(3)  --> 124

:even 偶數,從 0 開始計數 -- 操作索引號,頁面顯示奇數項

:odd  奇數

:eq(index) 指定第幾個 =

:gt(index) 大于n>

:lt(index) 小于n<

--------------------------------------------------

:header  獲得標題 (<h1> /<h2> ....

:animated 獲得動畫的

:focus 獲得焦點


1.4.4 屬性選擇器

[屬性名]  獲得有屬性名的元素。例如:<xxx name="username">  | <xxx name=" "> | <xxx name>

[屬性名=] 獲得屬性名 等于 值 元素。

[屬性名!=] 獲得屬性名 不等于 值 元素。

[...][...][...] 復合屬性選擇器,多個屬性同時過濾。where .. and ... and ...

----------------------------------

[屬性名^=] 獲得屬性名 以 值  開頭 元素。

[屬性名$=] 獲得屬性名 以 值  結尾 元素。

[屬性名*=] 獲得屬性名 含有 值 元素。

1.4.5 表單屬性選擇器

:enabled  可用

:disabled  不可用。<xxx  disabled="disabled"> | <xxx  disabled=" ">  | <xxx  disabled>

:checked  選中(單選radio ,多選checkbox)  <input type="..."  checked="checked">

:selected  選擇(下列列表 <select>)  <option selected="selected">


第2章 隔行換色

2.1 案例介紹

重寫JavaScript案例“隔行換色”

2.2 案例相關技術

2.2.1 class操作:

  • <xxx class=””>

addClass() 給指定標簽的class屬性追加樣式

removeClass() 將標簽指定的class屬性移除

toggleClass() 切換class屬性樣式。及沒有時添加,有的時候刪除。


2.3 案例實現

CSS樣式:

.even  { background:#FFF38F;}  /* 偶數行樣式*/

.odd  { background:#FFFFEE;}  /* 奇數行樣式*/

JavaScript代碼

<script>

$(function(){

// 找奇數行:

//$("tr:odd").addClass("odd");

// 偶數行:

//$("tr:even").addClass("even");

//tr索引號大于1的所有tr

$("tr:gt(1):odd").addClass("odd");

$("tr:gt(1):even").addClass("even");

});

</script>

第3章 全選和全不選

3.1 案例介紹

重寫JavaScript時案例“全選/全不選”

3.2 案例相關的函數

3.2.1 屬性操作:prop() attr()

  • prop() 操作的標簽的特性。JQ1.6新特性,獲得一些第一次分配undefined屬性值的標簽時,如果拋異常,將忽略瀏覽器生成的任何錯誤。

  • removeProp() 移除標簽的特性。

  • attr() 設置標簽屬性

  • removeAttr() 移除標簽的屬性。

  • 注意:prop() 和 attr() 使用時容易混淆,建議先使用prop() 沒有效果,再使用attr()。

3.3 案例實現

// 復選框的全選和全不選:

$(function(){

// 步驟一:為上面的復選框綁定單擊事件:

$("#selectAll").click(function(){

/*if(this.checked == true){

// 如果上面的復選框被選中:

$("input[name='ids']").prop("checked",true);

}else{

// 上面的復選框沒有被選中

$("input[name='ids']"). prop ("checked",false);

}*/

$("input[name='ids']").prop("checked",this.checked);

});

});

第4章 總結

jQuery基礎入門擴展

第5章 案例:隔行換色(另一種實現)

5.1 擴展(課外閱讀)

5.1.1 相關知識點

5.1.1.1 CSS樣式操作:css()

  • <xxx style="k:v">

css(name)  獲得css

css(name,value) 設置一對值

css(prop) 設置一組值 --> { k:v, k:v , ....}


5.1.1.2 事件綁定

jQuery提供更靈活的方式用于綁定事件,只要獲得jQuery對象,就可以直接綁定事件,jQuery使用的事件與javascript使用的事件名稱雷同,jQuery將js事件前面的on去掉了。例如:javascript點擊稱為onclick,jQuery稱為click。

<script type="text/javascript">

$(document).ready(function () {

// 格式:對象.事件名(fn);

// * jQuery事件名將js的之間前面的on去掉,例如:事件onclickjQueryclick

$("#bId").click(function(){

alert("被點擊");

});

});

</script>


5.1.1.3 鼠標事件:mouseovermouseout

$("#e02").mouseover(function(){

$("#divMsg").html("鼠標移上:mouseover");

}).mouseout(function(){

$("#divMsg").html("鼠標移出:mouseout");

})


5.1.2 實現

<script type="text/javascript">

$(document).ready(function () {

//數據展示中,偶數行的顏色設置成#FFFAE8

$("tr:gt(1):odd").css("backgroundColor","#FFFAE8");

//鼠標移上和移除變色 E8DFC4

$("tr:gt(1)").mouseover(function () {

//記錄之前的顏色

$(this).attr("bgc" , $(this).css("backgroundColor"));

//設置移上背景色

$(this).css("backgroundColor","#E8DFC4");

}).mouseout(function () {

//獲得之前記錄的背景色

var bgc = $(this).attr("bgc");

//設置移除后之前的顏色

$(this).css("backgroundColor",bgc);

});

});

</script>


第6章 案例:全選/全不選,反選

6.1 反選:循環checkbox,依次取反

<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>

6.2 反選:回調函數,自身取反

<script type="text/javascript">

$(function(){

// 全選

$("#selectAllId").click(function(){

$(".itemSelect").prop("checked" , this.checked);

});

// 反選

$("#reverseId").click(function(){

// 給每一個input設置與自己相反的狀態

// 使用函數進行數據返回  function(){ return ...}

// 函數內部this,就是當前操作的對象 ,需要就是與自己相反 !this.checked

$(".itemSelect").prop("checked", function(){

return !this.checked;

});

});

});

</script>


6.3 點擊列表項后,全選按鈕是否選中

<script type="text/javascript">

$(function(){

// 全選

$("#selectAllId").click(function(){

$(".itemSelect").prop("checked" , this.checked);

});

// 每一個列表項綁定事件,如果不是全部勾選,那么“全選”按鈕不勾選

$(".itemSelect").click(function(){

$("#selectAllId").prop("checked",$(".itemSelect").length ==$(".itemSelect:checked").length);

});

});

</script>


jQuery基礎入門2

今日內容介紹

  • 重寫javascript案例:省市聯動

  • 重寫javascript案例:左右選擇

  • 重寫javascript案例:表單校驗

今日內容學習目標

  • 能夠使用jQuery為標簽添加屬性或樣式

  • 能夠為指定標簽添加子標簽或兄弟標簽

  • 學會給標簽綁定事件


第7章 省市聯動

7.1 案例分析

重寫javascript案例“省市聯動”


7.2 案例相關的函數

本案例需要對標簽的value屬性值,標簽體內容進行操作,并需要遍歷所有的市。

7.2.1 屬性操作:valtexthtml

val()  獲得value屬性的值

val(...) value屬性設置值

html()  獲得html代碼,如果有標簽,一并獲得。

html(....)  設置html代碼,如果有標簽,將進行解析。

text()  獲得文本,如果有標簽,忽略。

text(....)  設置文本,如果含有標簽,不進行解析。原樣輸出。

7.2.2 遍歷函數:each

  • 方式1:$(ele).each( fn );

  • 方式2:$.each( $ele , fn );

  • 回調函數fn:function(index , docEle)

    • 參數1:遍歷索引號

    • 參數2:遍歷當前對象 docEle == this  (dom對象)

// each(fn) 函數

$("input:hidden").each(function(){

//alert( this.value );

alert( $(this).val() );

});

// $.each(對象,fn) 全局函數

// * each回調函數

// ** 參數1:遍歷索引號

// ** 參數2:遍歷當前對象 docEle == this

$.each($("input:hidden"), function(index,docEle){

alert( index  + " -- " + docEle.value );

});

7.2.3 文檔處理:內部插入

A.append(B) , B插入到A內部后面。

<A>

....

<B></B>

</A>

A.prepend(B) , B插入到A內部前面。

<A>

<B></B>

....

</A>

---------------------------------------------------

A.appendTo(B) ,將A插入到B內部后面

A.prependTo(B) ,將A插入到B內部前面。


7.3 案例實現

<script type="text/javascript">

// 定義二維數組:

var cities = new Array(4);

cities[0] = new Array("市轄區","");

cities[1] = new Array("長春市","吉林市","松原市","延邊市");

cities[2] = new Array("濟南市","青島市","煙臺市","濰坊市","淄博市");

cities[3] = new Array("石家莊市","唐山市","邯鄲市","廊坊市");

cities[4] = new Array("南京市","蘇州市","揚州市","無錫市");


$(document).ready(function () {

// 給省綁定change事件

$("#provinceId").change(function () {

//獲得省value,及索引號

var pIndex = $(this).val();

// 獲得對應的市

var allCity = cities[pIndex];

// 遍歷

$("#cityId").html("<option value=''>-----------</option>");

$(allCity).each(function (i) {

$("#cityId").append( "<option value=’’>"+allCity[i]+"</option>");

});

});

});

</script>

第8章 左右選擇

8.1 案例分析

本案例我們jQuery的“層級選擇器”、“表單屬性過濾選擇器”、“文檔處理”。通過“層級選擇器”獲得需要的操作對象,通過“表單屬性過濾選擇器”從已有的對象中篩選出需要的,最后通過“文檔處理”將篩選后的內容追加到指定的位置。

8.2 案例實現

<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>

8.3 總結

8.3.1 常見事件

8.3.2 事件切換

hover( over , out )  簡化方法

A.hover( fn1 ,  fn2)  等效  A.mouseover( fn1 ).mouseout( fn2 )

toggle( fn1 , fn2 , .... )  click事件增強版,輪回。(1.8.3版本可用,其他高版本不可用)


第9章 表單校驗

9.1 案例介紹

在學習JavaScript時,我們手動的完成過表單數據的校驗,此功能在開發中非常常見,屬于通用功能范疇,實際開發一般使用都是第三方工具。本案例我們將使用jQuery插件validation進行表單的校驗。

9.2 案例相關知識:validation校驗

9.2.1 下載

  • 官網地址:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip

  • 幫助文檔位置:http://jqueryvalidation.org/documentation/

  • 目錄結構:

9.2.2 導入

validate是jQuery插件,及必須在jQuery的基礎上進行運行。我們將導入jQuery庫、validate庫、和國際化資源庫(可選)

<!--依賴的jQuery-->

<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8" />

<!--validation校驗庫-->

<script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8" />

<!--國際化庫,中文提示(可選)-->

<script src="../js/messages_zh.js" type="text/javascript" charset="utf-8" />


9.2.3 使用前提

validate需要手動的聲明,對那個表單進行校驗,及需要手動調用validate()方法。

<script type="text/javascript">

$().ready(function () {

$("#formId").validate();

});

</script>

校驗類型

取值

描述

required

true|false

必填字段

email

email

郵件地址

url


路徑

date

數字

日期

dateISO

字符串

日期(YYYY-MM-dd

number


數字(負數,小數)

digits


整數

minlength

數字

最小長度

maxlength

數字

最大長度

rangelength

[minL,maxL]

長度范圍

min


最小值

max


最大值

range

[min,max]

值范圍

equalTo

jQuery表達式

兩個值相同

remote

url路徑

ajax校驗


9.3 檢驗方式:js 代碼方式

語法:

$(…).validate({

rules:{},

messages:{}

});

rules 規則語法:

rules:{

字段名:校驗器,

字段名:校驗器

}


校驗器語法:

語法:{校驗器:,校驗器:,...}

message 提示語法:

message:{

字段名:{校驗器:"提示",校驗器:"提示",...}

}

$("#formId").validate({

rules:{

username:{

requiredtrue

},

password:{

required:true,

rangelength:[2,5]

},

repassword:{

equalTo:"[name='password']"

}

},

messages:{

username:{

required:"不能為空"

},

password:{

rangelength:"長度{0}-{1}之間"

}

}

});


9.4 案例實現

  • 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 必須設置錯誤對象

-->

<label for="gender"></label>


9.5 高級:自定義校驗

9.5.1 概述

jquery.validate.js jQuery插件,對jQuery進行增強,添加了validate()函數,用于對表單進行校驗。validate()函數內部,調用的是$.validator定義函數進行處理,如果希望自定義校驗規則,需要使用$.validator.addMethod完成。

$.validator.addMethod(name , method , message);

參數1name,校驗規則的名稱。例如:required

參數2method,執行校驗時使用的處理函數。返回true表示校驗通過,返回false表示校驗未通過。

function(value , element , params ){} ,處理函數被調用時,可以獲得3個參數。

參數value:表單項的value值。例如:<input value="">

參數element:被校驗的表單項對象。

參數params:使用當前校驗規則傳遞的值。例如:rules : { 參數1Method : 參數params }

參數3message,校驗未通過時的提示信息。


9.5.2 提供表單

<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>


9.5.3 編寫自定義校驗規則

  • 先注冊校驗規則:長度校驗器 cardlength

/* 1)校驗規則名稱:cardlength

* 2)校驗處理函數:fn(value , element , params)

* * value : 當前文本框輸入的內容

* * element : 當前文本框

* * params : 校驗的具體參數,[15,18]

* 3)校驗提示信息:身份證長度必須是{0}{1}

* * {0} 可以獲得 params第一個參數

*/

$.validator.addMethod("cardlength",function(value,element,params){

if(value.length==15 || value.length==18){

return true;//校驗通過

}

return false;//未通過

},"身份證長度必須是{0}{1}");


  • 先注冊校驗規則:

/* 如果參數為true進行校驗,如果參數為false不進行校驗。

* * 進行校驗時,長度15:都是數字;長度18:都是數字或末尾為Xx

* 1)校驗規則名稱:cardformat

* 2)校驗處理函數:fn(value , element , params)

* * value : 當前文本框輸入的內容

* * element : 當前文本框

* * params : 校驗的具體參數,true

* 3)校驗提示信息:身份證格式不正確

*/

$.validator.addMethod("cardformat",function(value,element,params){

// 參數必須是boolean

if(typeof params != "boolean"){

return false;

}

//參數為true,需要進行校驗

if(params){

if(value.length==15){

//15位:都是數字

var reg = /^[0-9]{15}$/;

return reg.test(value);

}else if(value.length==18){

//18位:都是數字或末尾是X

var reg = /^[0-9]{18}|[0-9]{17}[X|x]$/;

return reg.test(value);

}

// 格式不符合

return false;

}

//參數為false,不需要進行校驗

return true;

},"身份證格式不正確");

  • 使用校驗規則

$("#formId").validate({

rules:{

username:{

required:true,

rangelength:[5,8]

},

card:{

required:true,

cardlength:[15,18],

cardformat:true

}

}

});

9.5.4 編寫自定義提示

$("#formId").validate({

rules:{

username:{

required:true,

rangelength:[5,8]

},

card:{

required:true,

cardlength:[15,18],

cardformat:true

}

},

messages:{

username:{

required:"用戶名不能為空",

rangelength:"用戶名的長度是58"

},

card:{

required:"身份證必須寫",

cardlength:"身份證長度{0}位或{1}",

cardformat:"身份證的格式不正確"

}

}

});


第10章 總結


jQuery基礎入門2案例

第11章 模擬用戶分組

11.1 案例介紹

使用jQuery模擬用戶分組,要求如下:

1.頁面加載不顯示所有分組的列表項。

2.點擊分組名稱,顯示當前分組列表。

3.點擊分組名稱,將隱藏其他分組的列表項。

11.2 案例相關知識:

函數名

描述

children()

所有的子元素

prev()

獲得上面的兄弟

nextAll()

獲得下面的所有兄弟

parent()

獲得父元素

siblings()

所有兄弟

find()

查詢指定內容

11.3 案例實現

  • 步驟1:html代碼內容

<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>


jQuery基礎入門案例擴展--校驗

第12章 表單校驗加強

12.1 案例介紹

在學習JavaScript時,我們手動的完成過表單數據的校驗,此功能在開發中非常常見,屬于通用功能范疇,實際開發一般使用都是第三方工具。本案例我們將使用jQuery插件validation進行表單的校驗。


12.2 案例相關知識:validation校驗

12.2.1 下載

  • 官網地址:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip

  • 幫助文檔位置:http://jqueryvalidation.org/documentation/

  • 目錄結構:



12.2.2 導入

validate是jQuery插件,及必須在jQuery的基礎上進行運行。我們將導入jQuery庫、validate庫、和國際化資源庫(可選)

<!--依賴的jQuery-->

<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8" />

<!--validation校驗庫-->

<script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8" />

<!--國際化庫,中文提示(可選)-->

<script src="../js/messages_zh.js" type="text/javascript" charset="utf-8" />

12.2.3 使用前提

validate需要手動的聲明,對那個表單進行校驗,手動方式可以使用以下4種檢驗方式。

<script type="text/javascript">

$().ready(function () {

$("#formId").validate();

});

</script>


12.2.4 檢驗方式1:類class (了解)

表單元素的class屬性中,編寫需要檢驗類型,此種校驗方式,校驗類型種類有限。

語法:<標簽 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>


12.2.5 檢驗方式2:屬性attr(了解)

使用標簽的屬性,可以完成提供所有校驗類型。

語法:<標簽  類型=”  類型=””>

校驗類型

取值

描述

required

true|false

必填字段

email

@

郵件地址

url


路徑

date

數字

日期

dateISO

字符串

日期(YYYY-MM-dd

number


數字(負數,小數)

digits


整數

minlength

數字

最小長度

maxlength

數字

最大長度

rangelength

[minL,maxL]

長度范圍

min


最小值

max


最大值

range

[min,max]

值范圍

equalTo

jQuery表達式

兩個值相同

remote

url路徑

ajax校驗

<!--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>


12.2.6 檢驗方式3html5 data(了解)

采用了HTML5 data-”機制,提供數據,jQuery提供 data()函數可以獲得由“data-”設置的值。

語法:<標簽  data-rule-類型=”>

jQuery獲得語法:$(ele).data(rule類型)

例如:$(ele).data(“ruleRequired”);  //去掉前綴“data-”,每一個橫桿后面的單詞首字母大寫

例如:

<!--

格式:data-rule-校驗器名稱=""

* 底層通過 $(ele).data("ruleRequired")獲得數據

-->

<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代碼校驗,更佳靈活


12.3 檢驗方式4js 代碼

語法:

$(…).validate({

rules:{},

messages:{}

});

rules 規則語法:

rules:{

字段名:校驗器,

字段名:校驗器

}


校驗器語法:

語法1"校驗器"

語法2{"校驗器":"取值","校驗器":"取值",...}

message 提示語法:

message:{

字段名:{"校驗器":"提示","校驗器":"提示",...}

}

$("#formId").validate({

rules:{

username:"required",

password:{

required:true,

rangelength:[2,5]

},

repassword:{

equalTo:"[name='password']"

}

},

messages:{

username:{

required:"不能為空"

},

password:{

rangelength:"長度{0}-{1}之間"

}

}

});


12.4 案例實現

  • 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 必須設置錯誤對象

-->

<label for="gender"></label>

支付寶贊助-Java幫幫社區
微信贊助-Java幫幫社區
Java幫幫公眾號生態

Java幫幫公眾號生態

總有一款適合你

Java幫幫-微信公眾號

Java幫幫-微信公眾號

將分享做到極致

Python幫幫-公眾號

Python幫幫-公眾號

人工智能,爬蟲,學習教程

大數據驛站-微信公眾號

大數據驛站-微信公眾號

一起在數據中成長

九點編程-公眾號

九點編程-公眾號

深夜九點學編程

程序員生活志-公眾號

程序員生活志-公眾號

互聯網,職場,程序員那些事兒

Java幫幫學習群生態

Java幫幫學習群生態

總有一款能幫到你

Java學習群

Java學習群

與大牛一起交流

大數據學習群

大數據學習群

在數據中成長

九點編程學習群

九點編程學習群

深夜九點學編程

python學習群

python學習群

人工智能,爬蟲

測試學習群

測試學習群

感受測試的魅力

Java幫幫生態承諾

Java幫幫生態承諾

一直堅守,不負重望

初心
勤儉
誠信
正義
分享
合作品牌 非盈利生態-優質內容分享傳播者
關于我們
友鏈申請
友鏈交換:加幫主QQ2524138991 留言即可 24小時內答復  
全站內容非商業用途,內容來源于網友,并遵循 許可,如有異議請聯系客服。
會員登錄
獲取驗證碼
登錄
登錄
我的資料
留言
回到頂部