JQuery的入門 二

jquery的遍歷

jquery物件本身就是陣列物件,通過jquery選擇器獲得的都是滿足該選擇器條件的元素物件的集合體,因此在常常需要對jquery物件進行遍歷.這裡有三種遍歷jquery的方法.

傳統迴圈遍歷

var $options =$(「option」);

for(var i=0;i
jquery物件的方法
此方式是jquery特有的遍歷方式，使用jquery集合物件呼叫each方法即可遍歷。
語法： jquery物件.each( function(index,element){} )
each函式引數：每遍歷一次陣列，就是呼叫一次匿名函式
匿名函式引數： 索引，遍歷到的陣列元素。
var $options = $("option");
$options.each(function(index，element))；

此方式是jquery特有的遍歷方式，與上面jquery的物件方法相似，但此處的each方法不是某

個具體jquery物件的，而是jquery的全域性物件的each方法，名字和功能雖然相同，但語法不

同。語法：$.each(遍歷的陣列,function(index,element))

each函式引數：遍歷的陣列，可以是jquery物件，也可以是dom物件

var $options =$(「option」);

$.each($options,function(index,element))；

常用事件

jquery繫結事件與解幫事件

事件函式繫結

jquery物件直接呼叫事件函式，例如：$("#id").click(function()){}

on(events,selector,data,fn)函式繫結

引數events：事件名稱，多個事件之間空格分開。"click mouseover"

引數selector：繫結事件元素的子代元素，不傳遞引數，表示該元素自己繫結事件

引數data：事件中要傳遞給響應函式的引數

引數fn：事件相應的函式

按鈕繫結點選事件

$("#btn").on("click",function () );

//

多個事件的響應函式相同，靈活性差
$("#btn").on("click mouseover",function () );
//每個事件有自己的響應函式
$("#btn").on(,
"mouseover":function () 
});

//

id值是d1的元素的子代d2繫結事件
//如果有多個子代，逗號分開
$("#d1").on("click","#d2",function (data) );

引數：要解除的事件，多個事件空格分開，不傳遞引數表示解除全部事件

$("#btn").click(function () );

左右互選案例

表單校驗外掛程式
網路上有許多成熟的外掛程式共使用者參考，外掛程式就是將jquery實現的常用操作進行封裝，封裝
後的「小框架「就可以叫做外掛程式，按照外掛程式的語法去操作可以實現很多複雜 的功能，而我們需
要做的是學會該外掛程式的使用語法即可。
我們僅是要使用的是jquery關於表單校驗的外掛程式。
validate快速入門
找到validate中的demo目錄下的index.html. 按照提供的演示文件,快速編寫自己的驗證。

$("form表單的選擇器").validate(,

messages:

});常用的校驗規則

自定義表單驗證

注意：當錯誤提示資訊不按照我們預想的位置顯示時，我們可以按照如下方式進行設定自定

義錯誤顯示標籤放在我們需要顯示的位置，當此表單項驗證不通過時會將此資訊自動顯示出

來，jquery驗證外掛程式會自動幫助我們控制它的顯示與隱藏

錯誤資訊

如果設定了錯誤lable標籤就不必在messages中設定此表單項錯誤提示資訊了

自定義校驗規則

如果預定義的校驗規則尚不能滿足需求的話可以進行自定義校驗規則：
自定義校驗規則步驟如下：
使用$.validator.addmethod("**校驗規則名稱",function(value,element,params)){}**
在rules中通過校驗規則名稱使用校驗規則
在messages中定義該規則對應的錯誤提示資訊
其中： value是校驗元件的value值
element是校驗元件的節點物件
params是校驗規則的引數
//身份證號規則
cart:
//引數: 規則名稱. 引數 實現邏輯
//身份證號碼長度
$.validator.addmethod( "cartlength", function(value,element,params)
return
true
; } );
//身份證號碼15位校驗
$.validator.addmethod( "cart15", function(value,element,params)$/;
if(value.trim().length==15)
return
true
; } );
//身份證號碼18位校驗
$.validator.addmethod( "cart18", function(value,element,params)|[0-9]x$/;
if(value.trim().length==18)
return
true
;} );

Jquery屬性操作（入門二）

jquery屬性相關的操作 1 屬性 屬性 如果你的選擇器選出了多個物件，那麼預設只會返回出第乙個屬性 attr 屬性名 屬性值 乙個引數是獲取屬性的值，兩個引數是設定屬性值 點選載入示例 removeattr 屬性名 刪除屬性的值 prop 屬性名 屬性值 屬性的返回值的是布林型別 單選，反選，取...

jQuery入門第二

在文具盒中，有鉛筆 鋼筆和水彩筆，類似於頁面中的 各個元素，雖然同屬於乙個容器，但有各自的功能，jquery中可以根據 元素名查詢元素，格式如下 element 其中element就是 元素的名稱 也就是工具盒中的筆的名稱，找到水彩筆，我們就可畫畫了，通過元素名找到元素就可以對它進行操作了。如下圖所...

jQuery的入門總結

沒有jquery時，用原生的js來獲取頁面元素以及對頁面元素進行操作，很不方便。為了操作dom元素更加方便，便有了jquery庫，庫是預先封裝了很多函式的集合，與框架和元件有區別，主要強調封裝和函式集合。jquery帶來的便利可以類似於樓梯變為電梯的區別。目前主要使用3.x版本，1.x和2.x已不再...