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 相关文章推荐
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
js原生map实现的方法总结
Jan 19 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
新版PHP将向Java靠拢
2006/10/09 PHP
实现“上一页”和“下一页按钮
2006/10/09 PHP
php PDO中文乱码解决办法
2009/07/20 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
CI框架常用方法小结
2016/05/17 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
在Python中使用SQLite的简单教程
2015/04/29 Python
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
Python登录注册验证功能实现
2018/06/18 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
详解python算法之冒泡排序
2019/03/05 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
汽车驾驶求职信
2013/10/25 职场文书
鉴定评语大全
2014/05/05 职场文书
党性分析自查总结
2014/10/14 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
培训通知书模板
2015/04/17 职场文书
离婚起诉书范本
2015/05/18 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers