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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 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 获取文件权限函数介绍
2013/07/11 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
详解Python中break语句的用法
2015/05/14 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
python游戏地图最短路径求解
2019/01/16 Python
python之array赋值技巧分享
2019/11/28 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
办公室文秘岗位职责
2013/11/15 职场文书
初三学生评语大全
2014/04/24 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
营业员岗位职责范本
2015/04/14 职场文书
安全第一课观后感
2015/06/18 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
nginx中proxy_pass各种用法详解
2021/11/07 Servers