jquery自定義外掛程式

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...