jQuery外掛程式開發

2022-08-14 08:09:14 字數 1762 閱讀 9373

1.jq外掛程式是用來擴充套件jq原型物件的乙個方法

2.外掛程式的使用方式就是jq物件方法的呼叫

jq內部定義了乙個jquery.fn物件 jquery.fn = jquery.prototype 也就是說 jquery.fn 物件是jquery的原型物件,方法定義在jquery.fn物件上

$.fn.changestyle = function

(colorstr)

//使用方法

$(".p1").changestyle("red")

外掛程式在呼叫時 外掛程式內部的this就是呼叫外掛程式的jquery物件

這樣每個$()在呼叫外掛程式的時候都會使用外掛程式內的jq方法

鏈式呼叫其實是jquery的一大特色 乙個通用外掛程式應該遵循jquery風格

滿足鏈式呼叫的要求 所以外掛程式在呼叫結束以後 需要 return this

即在外掛程式執行完以後 會把當前的jq物件返回

方便在外掛程式的後面繼續呼叫其他jquery方法

使用鏈式呼叫的方法改寫上面的外掛程式

$.fn.changecolor = function(color)

$(".p2").changecolor("yellow").addclass("large");

為了避免$.fn物件受到其他使用$變數的js庫的影響,可以使用立即執行函式通過傳參的方式封裝外掛程式

使用立即執行函式,$只屬於這個立即執行的函式的作用域

這樣就可以避免$符的汙染

注意 外掛程式前加分號 避免無法解析為函式

;(function($)

}(jquery));

$(".p3").changescolors("green")

;(function($)

}(jquery))

$(".p4").changestyles()

把引數放到乙個物件中傳給外掛程式還有乙個好處 就是 我們可以在外掛程式內部為一些引數定義一些預設值

;(function($) 

var setting = $.extend(defaultsetting,options)

this.css()

return this;

}}(jquery))

$(".p5").changesstyle()

$(".p5").changesstyle()

即 合併兩個物件 把後面乙個物件存在的屬性值賦值給第乙個物件

$.extend 還可以用來擴充套件jquery物件本身

這樣定義的外掛程式 我們在使用時 如果不傳引數 那麼就會使用這個外掛程式內部的預設值

注意 在為外掛程式定義預設引數時 一定要把預設引數寫在引數方法內部

這樣預設引數的作用域就在外掛程式內部

;(function($);

var setting = $.extend(defaultsetting,option);

this.css()

return this;}})

}(jquery))

$(".p6").styleset()

$.extend方法和$.fn.extend方法都可以用來擴充套件jquery功能

$.extend方法是在jquery全域性物件上擴充套件方法 $.fn.extend方法是在$選擇符選擇的jquery物件上擴充套件方法

所以 擴充套件jquery的公共方法一般用 $.extend方法 定義外掛程式一般使用$.fn.extend方法

jQuery 外掛程式開發

一 類級別的外掛程式開發 即給jquery新增新的全域性函式,相當於給jquery類本身新增方法,jquery的全域性函式就是屬於jquery命名空間的函式。1 新增全域性函式 方法一 jquery.onetest function jquery.twotest function 方法二 jquer...

jquery 外掛程式開發

自定義主要通過兩種方式實現 extend fn.extend 呼叫的方法分別是 aa this aa 注意 建立函式時不要放在 function 中,呼叫時候要放在事件裡面 this click function jquery.extend 函式詳解 jquery的extend擴充套件方法 jque...

jquery 外掛程式開發

jquery外掛程式開發一般通過兩種框架方式 一種是在jquery物件上直接定義新成員,形成外掛程式 另一種是封裝完整的外掛程式 然後將jqeury作為引數自身呼叫,達到給jquery物件擴充套件功能目的,形成外掛程式。其實兩種方式都是給jqeury物件擴充套件成員來實現外掛程式功能的,所以本質上功...