jquery 插件学习(五)


Posted in Javascript onAugust 06, 2012

这节封装插件了,进展怎么样呢?

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

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

(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");
Javascript 相关文章推荐
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 Javascript
jquery 插件学习(四)
Aug 06 #Javascript
jquery 插件学习(三)
Aug 06 #Javascript
jquery 插件学习(二)
Aug 06 #Javascript
jquery 插件学习(一)
Aug 06 #Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 #Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 #Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 #Javascript
You might like
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
php header功能的使用
2013/10/28 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
Python 字符串与数字输出方法
2018/07/16 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
远程教育心得体会
2014/01/03 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
k-means & DBSCAN 总结
2021/04/27 Python