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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
javascript实现轮显新闻标题链接
Aug 13 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
javascript中this指向详解
2016/04/23 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
浅析Python基础-流程控制
2016/03/18 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
浅谈python标准库--functools.partial
2019/03/13 Python
浅谈Python __init__.py的作用
2020/10/28 Python
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
奥巴马演讲稿
2014/01/08 职场文书
药剂专业自荐书
2014/06/20 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
沈阳故宫导游词
2015/01/31 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
SQL注入详解及防范方法
2021/12/06 MySQL