創建jq插件步驟
阿新 • • 發佈:2018-08-14
三種 pro 復雜 end 一個 就是 UNC function 使用
無意看了這篇《jQuery插件開發精品教程,讓你的jQuery提升一個臺階》文章,現在做一下總結。
一、jQuery插件的創建可以有三種方法
1.通過$.extend()來擴展jQuery
2.通過$.fn 向jQuery添加新的方法
3.通過$.widget()應用jQuery UI的部件工廠方式創建
方法1太簡單,創建後通過$.myfunction()方式調用,不能對指定元素調用。
方法3相對於方法2太復雜。
方法2就是常用的創建jq插件的方法。可以對指定元素進行操作。例如$(‘#title‘).myfunction();
二、jQuery插件創建格式
$.fn.myfunction = function() { //在這裏面,this指的是用jQuery選中的元素 //example :$('a'),則this=$('a') this.css('color', 'red'); }
如果想要支持鏈式調用只需return一下即可。
$.fn.myfunction = function() {
//在這裏面,this指的是用jQuery選中的元素
//example :$('a'),則this=$('a')
return this.css('color', 'red');
}
三、讓插件接受參數,使用$.extend方法
$.fn.myPlugin = function(options) { var defaults = {//設置默認值 'color': 'red', 'fontSize': '12px' }; var settings = $.extend(defaults, options);//這種方法會使第一個參數會被修改,為了保持變量defaults的值不變應該使用以下代碼 //var settings = $.extend({},defaults, options);//在extend方法的第一個參數添加一個空對象。 return this.css({ 'color': settings.color, 'fontSize': settings.fontSize }); }
四、面向對象的插件開發
為了以後代碼維護和可讀性我們可以進行面向對象的方法開發插件。
var Beautifier = function(ele, opt) { this.$element = ele, //獲取當前選中的jq對象。 this.defaults = { 'color': 'red', 'fontSize': '12px' }, this.options = $.extend({}, this.defaults, opt) } //定義Beautifier的方法 Beautifier.prototype = { beautify: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize }); } } //在插件中使用Beautifier對象 $.fn.myPlugin = function(options) { //創建Beautifier的實體 var beautifier = new Beautifier(this, options); //調用其方法 return beautifier.beautify(); }
創建jq插件步驟