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 相关文章推荐
情人节之礼 js项链效果
Feb 13 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 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引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
一分钟理解js闭包
2016/05/04 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
python定时执行指定函数的方法
2015/05/27 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
python为什么要安装到c盘
2020/07/20 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
幼儿教师国培感言
2014/02/19 职场文书
全国文明单位申报材料
2014/05/31 职场文书
幼儿园运动会口号
2014/06/07 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
党校学习党性分析材料
2014/12/19 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
歌咏比赛口号大全
2015/12/25 职场文书