1. 程式人生 > >JQuery外掛上課筆記

JQuery外掛上課筆記

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