jquery自定義外掛程式

2021-08-01 20:04:59 字數 2402 閱讀 2848

jquery自定義外掛程式的幾種常用的方法:

// 第一種方法    

$.fn.fun = function() ;

$('target').fun();

// 第二種方法

$.fn.extend(

});$('target').fun();

// 第三種方法

$.extend(

});$.fun();

*在這裡需要詳細解釋一下jquery的api: $.extend();
var obj1 =  

}var obj2 =

}var obj3 = $.extend(obj1, obj2);

console.log(obj1);

// object }

console.log(obj3);

// object }

var obj4 = $.extend(true, 0bj1, 0bj2);

console.log(obj4);

// object }

console.log(obj4);

// 接著我們再把上面的語句換成:

var obj5 = $.extend({}, obj1, obj2);

console.log(obj1);

// object }

console.log(obj5);

// object }

// 接著我們把上面的語句換成下面的語句:

var obj6 = $.extend(true, {}, 0bj1, 0bj2);

console.log(obj1);

// object }

console.log(0bj6);

// object }

從上面控制台裡面列印的訊息可以看出:

$.extend可以拓展當前物件;

$.extend({}, obj1, obj2, objn...);如果沒有傳入乙個新的物件做為目標物件,會影響當前物件;

$.extend(true, {}, obj1, obj2, objn...);如果沒有傳入true, 則不會進行深拷貝,即相同屬性直接替換,而不會對屬性裡面的差異進行替換;

首先設定頁面的基本布局:

class="accordion">

class="item">

class="title">item1h3>

class="list">

1li>

2li>

3li>

4li>

5li>

6li>

ul>

div>

class="item">

class="title">item2h3>

class="list">

1li>

2li>

3li>

4li>

5li>

6li>

ul>

div>

class="item">

class="title">item3h3>

class="list">

1li>

2li>

3li>

4li>

5li>

6li>

ul>

div>

div>

// 然後給頁面設定基本樣式:

.item

.item > h3

.item > ul

.item > ul > li

.item > ul > li:nth-child(even)

// 接著進行外掛程式的編寫: 

;(function

($, window, document, undefined)

// 這裡傳入自定義的外掛程式屬性,即自定義的標題和列表的類名

var options = $.extend({}, defaults, options);

// 返回this是為了鏈式呼叫

return

this.each(function

() function

reset

() else

}function

init

(lists)

});}

})(jquery, window, document);

$('.accordion').accordion();

這裡只是展示乙個外掛程式的實現,**還需要優化;

jquery自定義外掛程式

實現方法 jquery為開發外掛程式提拱了兩個方法,分別是 jquery.fn.extend object 給jquery物件新增方法。jquery.extend object 為擴充套件jquery類本身.為類新增新的方法,可以理解為新增靜態方法。這兩個方法都接受乙個引數,型別為object,ob...

Jquery 自定義外掛程式

jquery外掛程式分三種 1.給jquery原型新增全域性函式 2.給jquery物件新增擴充套件 3.擴充套件器擴充套件 自定義jquery外掛程式的一些規約 1.命名 jqurey.pluginname.js 2.擴充套件規則 新方法新增到 jquery.fn上 新功能新增到jquery上 3...

jquery 自定義外掛程式

jquery學堂是乙個很不錯的地方。如果想要自己學一些jquery的外掛程式。而不想去每次都寫那些複雜的函式。那麼下面的方法可以幫助你。下面就自己寫乙個jquery.yangzhi.js.function var options extend defaults,options var this th...