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 setTimeout和setInterval 的区别
Dec 08 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
谈一谈javascript闭包
Jan 28 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 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入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
php中Smarty模板初体验
2011/08/08 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python定时执行之Timer用法示例
2015/05/27 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
python用插值法绘制平滑曲线
2021/02/19 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
python help函数实例用法
2020/12/06 Python
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
电大毕业自我鉴定
2014/02/03 职场文书
导游个人求职信范文
2014/03/23 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
孟佩杰观后感
2015/06/17 职场文书
论语读书笔记
2015/06/26 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
python实现手机推送 代码也就10行左右
2022/04/12 Python