JQuery外掛上課筆記
阿新 • • 發佈:2018-12-10
1.JQuery外掛機制簡介
簡單來說,往jQuery類庫裡面去擴充套件方法,這類方法就是jQuery外掛
2.json的三種編寫格式
①.物件格式
example: { 列名 : 值 }
$(function(){
//設定json物件,給其初始屬性
var json = {
sid : "01",
sname : "程式設計師"
}
console.log(json);//在網頁控制檯列印json字串
})
②.json列表、陣列格式
example: [值1,值2,.....]
$(function(){
//定義json陣列,在其後直接給值
var jsonArray = [1,2,3,4];
console.log(jsonArray);
})
③混合模式(物件、陣列)
example: {列名 : 值 , 列名 : [1,2,3,4]}
$(function(){ //混合模式jsonFix,同時定義物件和陣列 var jsonFix = { all : "hello jsonFix", array : [1,2,3,4] } console.log(jsonFix); })
3.理解$.extend和$.fn.extend
①$.extend()方法用來擴充jQuery類屬性或者方法
擴充類屬性:
example: $(function(){ //定義類屬性sname var str1 = { sname : "是" } //定義不同類屬性sid var str2 = { sid : "01" } //使用$.extend(擴充套件str1類的屬性sid) /* $.extend(str1,str2); console.log(str1);//控制檯列印結果{sname: "是", sid: "01"} */ var str3 = { sname : "否" } //多擴充 $.extend(str1,str2,str3); console.log(str1);//控制檯列印結果{sname: "否", sid: "01"} })
注:方法擴充物件為引數1的位置;該方法支援多擴充但應注意值覆蓋問題
擴充方法(定義新方法):
example: $(function(){ //定義jQuery方法sayHello() $.extend({ sayHello:function(){ alert("Hello jQuery...."); } }); //呼叫定義方法 $.sayHello(); })
②$.fn.extend()方法用來擴充例項的屬性或者方法
擴充例項方法 :(將整個頁面dom裡的標籤看作例項物件,給其定義方法)
$(function(){ //擴充例項方法speak() $.fn.extend({ speak:function(){ alert("Hello p....How are you?"); } }); //頁面類的屬性標籤呼叫定義的speak()方法 $("p").speak(); })
4. jQuery外掛的新增
源哩:其實就是給jQuery新增新的例項方法或類方法,然後將功能封閉在其中,實現程式碼優化。
接下來大家來編寫自己的jQuery外掛例項吧!!!
------Giraffe_it