jQuery为开发插件提拱了两个方法,分别是:
1. jQuery.fn.extend(object); 【对jQuery对象的扩展】包装器方法
例子:
(function($){
$.fn.makeItBlue = function() {
return this.css('color','blue');
}
})(jQuery);
在这里, this代表的是包装集。如果使用this.each方法,那么在each方法中的this则代表DOM元素。
2. jQuery.extend(object); 【对jquery类的扩展】自定义帮助方法
例子:
(function($){
$.say = function(what) { alert('I say '+what); }
})(jQuery);
调用只能以$.say(“are u ok?”)
3. 把握复杂的参数列表
如果一个function含有两个参数,那么判断参数是否没有传入,是一件很容易的事情,我们可以为没有传入的属性赋一个默认值,但是如果有很多参数,比如:
function complex(p1,p2,p3,p4,p5,p6,p7)
我们想要p2保持默认值,而传入p1,p7选项的话,就非常复杂了,需要按照下面的形式调用:
complex(valueA,null,null,null,null,null,valueB)
为了解决这个方法,可以把参数包装成一个JS对象,即
complex(valueA, {p7: valueB});
就可以轻松解决问题了
另外,为了更好的将选项传入function,可以用下面这个方法,更加好的实现,利用$.extend()
function complex(p1,options) {
var settings = $.extend({
option1: defaultValue1,
option2: defaultValue2,
option3: defaultValue3,
option4: defaultValue4,
option5: defaultValue5,
option6: defaultValue6
},options||{});
options||{}是为了避免options为空的情况
这样,默认值就会被options中的值覆盖,其余的将保持默认值
说明:
插件命名规则jquery.插件名.js 例如:jquery.check.js
命名规则不一定需要遵守也可以随意为插件命名. 遵守命名规则可以使你的插件更规范,更容易使人理解。
对于插件中的返回值返回的是jquery对象,返回值不是必须的。
由于不知道使用jQuery的用户是否应用了 $.noConflict() 方法,所以不能直接使用$
根据前面介绍的方法,可以使用以下这个方式:
(function($){
//
// Plugin definition goes here
//
})(jQuery);
1. jQuery.fn.extend(object); 【对jQuery对象的扩展】包装器方法
例子:
(function($){
$.fn.makeItBlue = function() {
return this.css('color','blue');
}
})(jQuery);
在这里, this代表的是包装集。如果使用this.each方法,那么在each方法中的this则代表DOM元素。
2. jQuery.extend(object); 【对jquery类的扩展】自定义帮助方法
例子:
(function($){
$.say = function(what) { alert('I say '+what); }
})(jQuery);
调用只能以$.say(“are u ok?”)
3. 把握复杂的参数列表
如果一个function含有两个参数,那么判断参数是否没有传入,是一件很容易的事情,我们可以为没有传入的属性赋一个默认值,但是如果有很多参数,比如:
function complex(p1,p2,p3,p4,p5,p6,p7)
我们想要p2保持默认值,而传入p1,p7选项的话,就非常复杂了,需要按照下面的形式调用:
complex(valueA,null,null,null,null,null,valueB)
为了解决这个方法,可以把参数包装成一个JS对象,即
complex(valueA, {p7: valueB});
就可以轻松解决问题了
另外,为了更好的将选项传入function,可以用下面这个方法,更加好的实现,利用$.extend()
function complex(p1,options) {
var settings = $.extend({
option1: defaultValue1,
option2: defaultValue2,
option3: defaultValue3,
option4: defaultValue4,
option5: defaultValue5,
option6: defaultValue6
},options||{});
options||{}是为了避免options为空的情况
这样,默认值就会被options中的值覆盖,其余的将保持默认值
说明:
插件命名规则jquery.插件名.js 例如:jquery.check.js
命名规则不一定需要遵守也可以随意为插件命名. 遵守命名规则可以使你的插件更规范,更容易使人理解。
对于插件中的返回值返回的是jquery对象,返回值不是必须的。
由于不知道使用jQuery的用户是否应用了 $.noConflict() 方法,所以不能直接使用$
根据前面介绍的方法,可以使用以下这个方式:
(function($){
//
// Plugin definition goes here
//
})(jQuery);