jQuery编写设置和获取颜色的插件


Posted in Javascript onJanuary 09, 2017

分享一下编写设置和获取颜色的插件,首先我将插件的名字命名为jquery.color.js。

该插件用来实现以下两个功能

  1. 设置元素的颜色。
  2. 获取元素的颜色。

先在搭建好如下编写插件的框架:

;(function($){
 //这里编写插件代码
})(jQuery);

我这里采用jQuery.fn.extend().这种方法来编写,代码如下:

;(function($){
 $.fn.extend({
 "color":function(value){
 //这里写插件代码
 }
 });
})(jQuery);

这个方法可里面有一个value.参数,当给color().这个传入了参数那么就用来设置color.值,不传参数就是获取color().值。代码如下:

;(function($){
 $.fn.extend({
 "color":function(value){
 if(value==undefined){
 return this.css('color');
 }
 else{
 return this.css('color',value);
 }
 
 }
 });
})(jQuery);

最后我们来测试一下:

<body>
<script>
 $(function(){
 alert($('#div1').color());
 $('#div2').color('#333');
 });
</script>
 <div id="div1" style="color:blue">blue</div>
 <div id="div2" style="color:#ccc">#ccc</div>
</body>

测试结果如下图:

jQuery编写设置和获取颜色的插件

jQuery编写设置和获取颜色的插件

OK!测试没问题,全部完成。做这篇分享只是为了分享一下如何实现编写插件的整个过程

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript:void(0)的真正含义实例分析
Aug 20 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
第一篇初识bootstrap
Jun 21 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
关于vue-router路径计算问题
May 10 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
图片懒加载插件实例分享(含解析)
Jan 09 #Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 #Javascript
简单实现jQuery多选框功能
Jan 09 #Javascript
微信小程序开发之Tabbar实例详解
Jan 09 #Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 #Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 #Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 #Javascript
You might like
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
iView框架问题整理小结
2018/10/16 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
python游戏地图最短路径求解
2019/01/16 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
英国电器零售商:PRC Direct
2018/06/21 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
公司培训欢迎词
2014/01/10 职场文书
调解协议书
2014/04/16 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
绿色环保倡议书
2015/04/28 职场文书
原告代理词范文
2015/05/25 职场文书