jquery學習筆記補充

2021-07-26 05:32:09 字數 4059 閱讀 1697

1,工具函式:全域性函式

字串處理:

$.trim()

物件和陣列操作:

$.each()  遍歷陣列

var arr = [1,2,3,4];

$.each(arr,functon(index,value));

$.each(window,function(name, value));

$.each($.ajax(),function(name, value));

2. $.grep()資料篩選

var ar = [1,2,3,4,5];

var arrgrep = $.grep(arr, function(element,index));

3,$.map()修改資料

var arr = [1,2,3];

var arrmap = $.map(arr, function(element,index));

4,$.inarray()獲取查到的元素的下標

var arr = [1,2,3];

va arrinarray = $.inarray(1,arr);

alert(arrinarray);

//從0開始計算

5,$.merge(); 合併兩個陣列

var arr1 = ;

var arr2 = ;

var arr = $.merge(arr1, arr2);

6, $.unique()

刪除重複的dom元素

$('div').get()//獲取div陣列

7,$.isarray(obj)

判斷是否為陣列物件,是返回true

$.isfunction(obj)

判斷是否為函式,是返回true

$.isemptyobject(obj)

判斷是否為空物件

$.isplainobject(obj)

判斷是否為純粹物件

$.contains(obj)

判斷乙個dom是否包含另乙個dom節點

$.type(data)

判斷資料型別

$.isnumeric(data)

判斷是否為數值型資料

$.iswindow(data)

判斷是否為window物件

8,$.param()

將物件的值轉換成url鍵值對

var obj = {};

$.param(obj);

name=abc&age=1

9,$.browser()

瀏覽器檢測

10,$.support()

判斷瀏覽器支援哪些功能

$.support.opacity === true

...11,$.proxy()

解決外部事件觸發呼叫物件是this的指向問題

12,外掛程式

1,必須先引入jquery.js,而且是在所有外掛程式之前引入

2,引入外掛程式

3,引入外掛程式的周邊,比如css**,中文語言包等等

13,jquery.validate.js

jquery.validate.message_zh.js中文語言包,可以自己修改

表單驗證外掛程式

js中:

//給表單新增驗證

$('form').validate();

input新增以下屬性:

class='required',不能為空

minlength='2'

最小不少於2位

class='email'

必須為點子郵件格式

class='url'

必須為**格式

14,自定義外掛程式的開發

15, 表單驗證外掛程式:

2,輔助檔案:additional-method.js(控制項class方式)

message_zh.js(提示漢化)

外掛程式使用方法:

$('#formid').validate();

然後在表單的input上新增class

validate.js的預設驗證規則有兩種方式:1,控制項屬性方式 2,js傳值方式

required:true

必須輸入字段

email:true

必須輸入正確的點子郵件

url:true

必須輸入正確格式的**

date:true

必須輸入正確的日期

dateiso:true

必須輸入正確格式的日期(iso)(只驗證格式,不驗證有效)

number:true

必須輸入合法的數字(包括負數、小數)

digits:true

必須輸入正整數

creditcard:true

必須輸入合法的信用卡號,例如:....

equalto:"#field"

輸入值必須和#field相同

主要用於密碼確認

minlength:5

輸入長度最小是5的字串(漢字算乙個字元)

maxlength:10

輸入長度最大是5的字串(漢字算乙個字元)

rangelength:[5,10]

輸入長度5-10

range:[5,10]

輸入值介於5到10之間

min:5

輸入值不能小於5

max:10

輸入值不能大於10

remote:'check.php'

使用ajax方法呼叫chech.php驗證輸入值

1,使用控制項驗證:

上述預設值為boolean的,直接寫入class即可,如果是數字或者區間,使用 屬性=值的方式即可

2,使用js物件鍵值對傳參設定:推薦用法(避免在htnl中寫太多東西)

$(#formid").validate(,

url:,

num:

},messages

}});

equalto的用法:必須加上id

$(#formid").validate(

},messages:

}});

16,validate.js格式化提示資訊

$(#formid").validate(,

num:

},messages位') //$.format可以省略,0表示第0個數字

}num:-之間'}}

});17,開啟除錯模式:

$(#formid").validate(,

messages:{}

});多個表單設定debug

//所有預設行為都可以在此處設定

$.validator.setdefaults()

18,使用其他方式代替預設提交:

$(#formid").validate(

});19,忽略某個欄位的驗證

$(#formid").validate(

messages:{} 

});20,群組錯誤提示,並群組顯示:

$(#formid").validate(

rules:{}

messages:{},

focusinvalid:false,

errorplacement:function(error, index));

}});

21,設定驗證成功後載入的class

success : 'success'

使用方法載入class並新增文字

success : function(label)

22,高亮顯示有錯誤的元素

highlight: function(errorelement,errorlass)

unhighlight: function(errorelement,errorlass)

23,使用ajax驗證

//伺服器端輸出true和false即可

$(#formid").validate( }}

}messages:}})

24, form.js驗證外掛程式

兩個核心方法:ajaxform()和ajaxsubmit()方法

25,實現表單自動提交

$('form').submit();//true自動false不自動

《鋒利的jQuery》補充筆記

壓縮 uglifyjs jquery物件轉化為dom物件使用 index 或者get index dom物件轉化為jquery物件使用 dom物件 jquery.noconflict 是將變數的控制權移交給其他庫,如果jquery想要自定義乙個快捷方式的話,就給它賦值乙個變數。如果還想繼續使用 又不...

2017 7 14 學習心得 jquery補充

1 鏈式程式設計和隱式迭代 1 鏈式程式設計 底層原理 return this end 結束當前鏈最近的一次過濾操作,並且返回匹配元素之前的狀態 2 隱式迭代 jq物件實際是乙個陣列,在方法內部會為匹配到的所有元素進行迴圈遍歷,執行相應方法,不用我們再進行迴圈,簡化我們操作。例如 classname...

jQuery 其他補充

1.鏈式程式設計 end 補充 當執行的jquery鏈式程式設計斷掉的時候,如果能把鏈在鏈上就好了 end 結束當前的鏈式程式設計的鏈,回到最原始的鏈上去時 2.隱式迭代 在預設情況下,會自動迭代執行jquery選擇出來的所有的dom元素操作 如果獲取的是多元素的值,預設返回的是第乙個元素的值 eg...