1.jQuery.fn.extend(object);
對jQuery.prototype進得擴展,就是爲jQuery類添加“成員函數”。jQuery類的實例可以使用這個“成員函數”,
比如我們要開發一個星級評分插件,可以這麼做
jQuery.fn.extend({
ratingStars:function(){ }
})
等價與
jQuery.prototype.extend(ratingStars);
還等價於:
jQuery.fn.ratingStars = function( options ) { }
調用時:
$(".rating-stars").ratingStars(ratingOptions);
2. $.extend( { }, defaults, options ); 合併參數對象的寫法
3.星級評分插件實現
步一:頁面搭建
<div class="rating-stars block" id="rating">
<input type="number" readonly class="form-control rating-value" name="rating-stars-value" id="rating-stars-value">
<div class="rating-stars-container">
<div class="rating-star">
<i class="fa fa-star"></i>
</div>
<div class="rating-star">
<i class="fa fa-star"></i>
</div>
<div class="rating-star">
<i class="fa fa-star"></i>
</div>
<div class="rating-star">
<i class="fa fa-star"></i>
</div>
<div class="rating-star">
<i class="fa fa-star"></i>
</div>
</div>
</div>
步二:jQuery插件實現過程1:
jQuery.fn.ratingStars = function( options ) {
//注意:此處爲插件配置參數
var defaults = {
selectors: {
}
};
var settings = $.extend( { }, defaults, options );
//此處爲這個插件的對象方法配置
var methods={
init: function(element){
}
}
/*此處返回值爲一個循環調用methods對象的init方法來實現,this指向方法在外部獲取元素對象實例的HTML: $(".rating-stars"),
調用執行時 $(".rating-stars").ratingStars(ratingOptions)調用後,實現星級評分插件的使用,並且可以實現在HTML一個頁裏調用
很多個重複結構
*/
return this.each(function() {
methods.init($(this));
});
}