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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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
重置版宣传动画
2020/04/09 魔兽争霸
1 Tube Radio
2021/03/02 无线电
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
jquery中EasyUI实现异步树
2015/03/01 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
js数组去重的hash方法
2016/12/22 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
基于vue展开收起动画的示例代码
2018/07/05 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
项目考察欢迎辞
2014/01/17 职场文书
先进员工获奖感言
2014/08/14 职场文书
开会通知
2015/04/20 职场文书
爱国之歌(8首)
2019/09/29 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
python 算法题——快乐数的多种解法
2021/05/27 Python
python cv2图像质量压缩的算法示例
2021/06/04 Python