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代码在页面加载时的执行顺序介绍
May 03 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
简单学习vue指令directive
Nov 03 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
jstree的简单实例
Dec 01 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
JS数组方法slice()用法实例分析
Jan 18 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
图片懒加载插件实例分享(含解析)
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中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
php 图片上传类代码
2009/07/17 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
PDO::rollBack讲解
2019/01/29 PHP
js身份证验证超强脚本
2008/10/26 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
总经理任命书范本
2014/06/05 职场文书
中学生运动会口号
2014/06/07 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
机关作风建设自查报告
2014/10/22 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
暑期社会实践证明书
2014/11/17 职场文书
商业门面租房协议书
2014/11/25 职场文书
优秀护士事迹材料
2014/12/25 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
深入理解go slice结构
2021/09/15 Golang