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 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 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
信用卡效验程序
2006/10/09 PHP
paypal即时到账php实现代码
2010/11/28 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
[20:30]职业巡回赛回顾
2018/08/09 DOTA
深入理解python try异常处理机制
2016/06/01 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
python中二分查找法的实现方法
2020/12/06 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
本科毕业生的求职信范文
2013/11/20 职场文书
火车的故事教学反思
2014/02/11 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
个人委托书范本
2014/09/13 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
小石潭记导游词
2015/02/03 职场文书
寻找成龙观后感
2015/06/12 职场文书
致运动员加油稿
2015/07/21 职场文书