jQuery外掛程式的封裝

2021-10-05 22:52:00 字數 1695 閱讀 3635

jquery外掛程式的封裝

$.fn上面新增乙個方法

當需要給jquery物件 增加方法時,可以設定$.fn下面新增乙個方法

這樣新增好以後,jquery物件就有這個方法了

div

<

/div>

"divs"

>

<

/div>

<

/div>

<

/div>

<

/p>

<

/p>

<

/p>

// 當需要給jquery物件 增加方法時,可以設定$.fn下面新增乙個方法

// 這樣新增好以後,jquery物件就有這個方法了

(function()

; $.fn.

pos=

function

(posobj);}

this

.css()

}})(

);// $("div").width(100).height(100).bg("red");

// $("div").width(100).height(100).bg("pink");

// $("p,div").width(100).height(100).bg("pink");

// $("#divs").width(100).height(100).bg("red");

// console.log($("div").bg());

// $("div").pos();

// console.log($("div").pos());

// $("#divs").width(100).height(100).bg("blue");

$.extend()向jquery中新增函式
// var arr=[1,2,3,4];

// var arr=;

// $.each(arr,function(index,item))

// console.log(new arr.constructor());

// $.extend()向jquery中新增函式

// filter方法物件陣列都可以使用

$.extend

(// 遍歷list

for(

var prop in list)

else}}

// 陣列轉換為jquery物件

if(list.constructor===jquery)

return newlist;},

randomcolor:

function()

return color;}}

);var arr=[2

,4,3

,1,5

,6];

var arr=

var list=$.

filter($

("div"),

function

(prop,item)

)console.

log(list)

;list.

css(

"backgroundcolor"

,"red");

$("div").

bg($.

randomcolor()

);

封裝簡單的jquery外掛程式

1.定乙個閉包區域,防止外掛程式 汙染 閉包限定命名空間 function window.jquery 2.jquery.fn.extend object 擴充套件jquery 方法,製作外掛程式 閉包限定命名空間 function window.jquery 3.給外掛程式預設引數,實現 外掛程式...

封裝自己的jquery外掛程式

第一步 要想封裝自己的jq外掛程式,要先了解jquery外掛程式執行機制。jquery使用無new的構造方式,直接 進行構造,相當於new jquery 看下面例子。jquery將jquery.prototype賦值給jquery.prototype.init的prototype作為中轉站,最終re...

jQuery外掛程式封裝入門

jquery外掛程式我們用的很多,也很好用,我在生產任務中也碰到了很多冗餘 我就想把他們封裝起來,一直百思不得其解,現在捅破了這個窗戶紙,分享給大家。首先大家對prototype這個方法應該不陌生,array.prototype.say function str 這樣就給陣列增加了乙個新的方法,用的...