jquery 插件学习（五）

这节封装插件了，进展怎么样呢？

一般对外发布的插件都应该进行封装，封装的插件还应该符合规范，只有这样写的插件才具有推广价值，并得到其他用户的喜爱。

首先第一步，是定义一个独立域，代码如下所示。


代码如下:

(function($){
//自定义插件代码
})(jQuery) //封装插件

确定创建插件类型，选择创建方式，例如，创建一个设置元素字体颜色的插件，则应该创建jquery对象方法，考虑到jquery提供了插件扩展方法extend()，调用该方法会更为规范。


代码如下:

(function($){
//自定义插件代码
$.extend($.fn,{ //jquery对象扩展方法

})
})(jQuery) //封装插件

一般插件都会接受参数，用来控制插件的 行为，例如，对于设置颜色的插件，应该允许用户设置字体颜色，同时，应该考虑如果用户没有设置颜色，则应该保持默认色进行设置。


代码如下:

(function($){
//自定义插件代码
$.extend($.fn,{
color : function(options){
var options = $.extend({bcolor :"white",fcolor:"black"},options);
//
}
})
})(jQuery) //封装插件

最后完善插件


代码如下:

;(function($){
$.extend($.fn,{
color : function(options){var options = $.extend({bcolor :"white",fcolor :"black"},options);
//函数体
return this.each(function(){
$(this).css("color",options.bcolor);
$(this).css("background",options.fcolor);
});
}//color==end
})
})(jQuery);

调用看看


代码如下:

$("h1").color({bcolor : "#ccc",fcolor:"#eee"});
$('a').color("#fff");

赞 (0)

相关推荐

  • jquery 插件学习（一）

    言归正传拉,开始跟我学习吧:): 1.jquery自定义了 jQuery.extend()和jQuery.fn.extend()方法,其中,jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()能够创建jQuery对象方法.在这里啰嗦讲下:这2个方法,都包含一个参数,改参数仅接受名/值对结构的对象,其中名表示函数或方法名,而值表示函数体. 复制代码 代码如下: jQuery.extend({ minValue : function(a,b){ ret

  • jquery 插件学习（六）

    复制代码 代码如下: ;(function($){ $.extend($.fn,{ color : function(options){ var options = $.extend({},$.fn.color.defaults,options); return this.each(function(){ $(this).css("color",options.bcolor); $(this).css("background",options.fcolor); })

  • jquery 插件学习（三）

    例如: 复制代码 代码如下: $(this).test().hide().height(); 要实现类似的连写行为,就应该在每个插件方法中,返回一个jquery对象,除非方法需要明确返回值.返回的jquery对象通常就是this所引用的对象.如果使用each()方法迭代this,则可以直接返回迭代的结果.针对上一节的示例,进一步修改 复制代码 代码如下: jQuery.fn.test = function(){ return this.each(function(){ //遍历匹配的元素,此处的

  • jquery 插件学习（四）

    针对上面的示例,我们可以调用jquery.fn.extend()方法来创建jquery对象方法.具体代码如下> 复制代码 代码如下: jQuery.fn.extend({ test : function(){ return this.each(function(){ alert(this.nodeName); }) } }); 调用跟上面一样哦 复制代码 代码如下: $('body *').click(function(){ $(this).test().html(this.nodeName).

  • jquery 插件学习（二）

    创建全局函数只需通过为jquery对象添加属性即可,而创建jquery对象的方法也可以通过为jquery.fn添加属性来实现,实际上jquery.fn对象就是jquery.prototype原型对象的别名,使用别名更方便引用. demo: 复制代码 代码如下: jQuery.fn.test = function(){ alert('这是 jquery 对象方法 '); } 然后,就可以在任何jquery对象中调用该方法了. 复制代码 代码如下: $(function(){ $('h1').cli

  • jQuery插件学习教程之SlidesJs轮播+Validation验证

    SlidesJs(轮播支持触屏)--官网(http://slidesjs.com) 1.简介 SlidesJs是基于Jquery(1.7.1+)的响应幻灯片插件.支持键盘,触摸,css3转换. 2.代码 <!doctype html> <head> <style> /* Prevents slides from flashing */ #slides { display:none; } </style> <script src="http:/

  • jquery 插件学习（五）

    这节封装插件了,进展怎么样呢? 一般对外发布的插件都应该进行封装,封装的插件还应该符合规范,只有这样写的插件才具有推广价值,并得到其他用户的喜爱. 首先第一步,是定义一个独立域,代码如下所示. 复制代码 代码如下: (function($){ //自定义插件代码 })(jQuery) //封装插件 确定创建插件类型,选择创建方式,例如,创建一个设置元素字体颜色的插件,则应该创建jquery对象方法,考虑到jquery提供了插件扩展方法extend(),调用该方法会更为规范. 复制代码 代码如下:

  • Jquery 插件学习实例1 插件制作说明与tableUI优化

    Jquery 插件学习实例1 插件制作说明与tableUI优化

    一. 先对jQuery制作方式,jQuery为开发扩展提拱了两个方法,分别是: jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. 1.1.jQuery.fn.extend(object): 可以参靠jquery参考手册的连个例子: 复制代码 代码如下: $.fn.extend({ check: function() { return this.each(function()

  • 轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）

    轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）

    一.EasyUI创建基础树形网格 树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGrid),可以用在树形网格(TreeGrid)中.为了使用树形网格(TreeGrid),用户必须定义 'treeField' 属性,指明哪个字段作为树节点. 本文将向您展示如何使用树形网格(TreeGrid)组件设置一个文件夹浏览. 创建树形网格(TreeGrid) <table id="test" title

  • 详解jquery插件jquery.viewport.js学习使用方法

    详解jquery插件jquery.viewport.js学习使用方法

    介绍 Viewport 是一个简单的jQuery插件,为元素添加自定义伪选择器和处理程序,以便在可视窗口内外进行简单的元素检测. 使用方法 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.viewport.js" type="text/javascript"></script&g

随机推荐