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笔记一 js以及json基础使用说明
May 22 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
Javascript 面试题随笔
Mar 31 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 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
如何开发一个虚拟域名系统
2006/10/09 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
php学习笔记之面向对象
2014/11/08 PHP
php实现插入排序
2015/03/29 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
pygame学习笔记(4):声音控制
2015/04/15 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Python的logging模块基本用法
2020/12/24 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
数学系毕业生的自我评价
2014/01/10 职场文书
省三好学生申请材料
2014/01/22 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
双十佳事迹材料
2014/01/29 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
开会通知短信大全
2015/04/20 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
Python anaconda安装库命令详解
2021/10/16 Python