本篇文章给大家带来的内容是关于jquery插件的创建方法有哪些？jquery插件创建的方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
1.通过$.extend()来扩展jQuery
2.通过$.fn 向jQuery添加新的方法
3.通过$.widget()应用jQuery UI的部件工厂方式创建
方法1太简单，创建后通过$.myfunction()方式调用，不能对指定元素调用。
方法3相对于方法2太复杂。
方法2就是常用的创建jq插件的方法。可以对指定元素进行操作。例如$('#title').myfunction();
$.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');
}$.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();
}相关推荐：
以上是jquery插件的创建方法有哪些？jquery插件创建的方法的详细内容。更多信息请关注PHP中文网其他相关文章！
