jQuery编写设置和获取颜色的插件
分享一下编写设置和获取颜色的插件,首先我将插件的名字命名为jquery.color.js。
该插件用来实现以下两个功能
- 设置元素的颜色。
- 获取元素的颜色。
先在搭建好如下编写插件的框架:
;(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>
测试结果如下图:
OK!测试没问题,全部完成。做这篇分享只是为了分享一下如何实现编写插件的整个过程
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
相关推荐
-
jQuery插件编写步骤详解
本文实例讲述了jQuery插件编写步骤.分享给大家供大家参考,具体如下: 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第 三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下 面就是一个简单扩展Jquery
-
基于jquery编写分页插件
扩展JQuery很容易,作为一个练习,编写一个简单的分页插件,代码量不大,直接看代码好了: $.fn.mypagination = function(totalProperty,opts){ opts = $.extend({ perPage:10, callback:function(){ } },opts||{}); return this.each(function(){ function numPages(){ return Math.ceil(totalProperty/opts.pe
-
基于jquery编写的放大镜插件
本文实例为大家分享了自己动手实现的jquery放大镜插件,供大家参考,具体内容如下 /** *********************************************** **此插件使用须知--------------- ** **滤镜(inner)与其活动区(active)之比要等于 ** **放大区(movequ)与其内部图片之比.如比值不相 ** **等,请改变图片大小.------------------------** **参数介绍 ** **active:滤镜活动区
-
编写自己的jQuery插件简单实现代码
这里只阐述如何编写自己的插件,至于要实现什么功能,要因人而异了...好了,下面开始... jQuery插件主要分为三种 1.封装对象方法的插件 2.封装全局函数的插件 3.扩展选择器的插件 这里只编写前俩种,即比较常见的.. 大多数插件都是已这种形式编写的: 复制代码 代码如下: (function ($) { /* 这里放置代码 */ })(jQuery); 这样的好处是函数内部依然可以使用$作为jQuery的别名,而不影响到其他库使用$ jQuery提供了俩个扩展用于编写插件 $.fn.ex
-
编写自己的jQuery提示框(Tip)插件
对jQuery相信很多同学和我一样平时都是拿来主义,没办法,要怪只能怪jQuery太火了,各种插件基本能满足平时的要求.但是这毕竟不是长久之道,古人云:"授之以鱼,不如授之以渔". 为了方便之前没有接触的同学,先来回顾一下jQuery的插件机制吧. 复制代码 代码如下: //添加check和uncheck插件 jQuery.fn.extend({ check: function() { return this.each(function() { this.checked =
-
基于jquery插件编写countdown计时器
废话不多说,直接上代码: 先展示一下插件调用方式: 1. 需要先加载countdown插件对应的css文件,也就几行代码而已,可以不用引入,自己手写一样啦 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>jquery countdown倒计时插
-
如何编写jquery插件
前面的话 编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,提高开发效率和方便后期维护.本文将详细介绍如何编写jQuery插件 类型 jQuery的插件主要分为3种类型 1.封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件.此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式"插"在内核上的,例如:parent()方法.appe
-
编写简单的jQuery提示插件
很简单的代码,就不多废话了. 代码: 复制代码 代码如下: /** * 2014年11月13日 * 提示插件 */ (function ($) { $.fn.tips = function (text) { var divtipsstyle = "position: absolute; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibilit
-
jQuery弹簧插件编写基础之“又见弹窗”
本文将通过一个实例来引出jQuery插件开发中的一些细节,首先介绍下jQuery插件开发的一些基础知识. jQuery的插件开发主要分为两类: 1. 类级别,即在jQuery类本身上扩展方法,类似与 $.ajax,$.get 等. 2. 对象级别,这里所谓的对象是指通过jQuery选择器选中的jQuery对象,在该对象上添加方法.例如:$('div').css(), $('div').show() 等. 在实际开发中,我们通常选用对象级别的方法来开发插件,jQuery强大的选择器及对象操作是我们
-
Jquery插件编写简明教程
复制代码 代码如下: /* 1.jQuery插件文件名推荐命名为 jquery.[插件名].js 以免和其他javascript库插件混淆.例如命名为jquery.color.js 2.所有的对象方法名都应当附加到jQuery.fn对象上而所有的全局函数都应当附加到jQuery对象本身上. 3.在插件内部,this指向的是当前通过选择器获取的jquery对象,而不像一般方法哪样,例如chick()方法,内部的this指向的dom元素 4.可以通过this.each来遍历所有元素 5.所有的方法或
-
基于编写jQuery的无缝滚动插件
首先来看下html骨架,如下: <div class="box"> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> 结构简单明了,没什么说的. 讲下实现原理: div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出b
随机推荐
- 史上最全的PHP正则表达式(手机号需要加上177-***)
- 详解AngularJS中$http缓存以及处理多个$http请求的方法
- Angular2入门--架构总览
- java面试常见问题之Hibernate总结
- PHP可变函数学习小结
- js中reverse函数的用法详解
- js滚动条平滑移动示例代码
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
- Windows下安装配置Ruby的debug工具ruby-debug-base19
- .NET WinForm实现在listview中添加progressbar的方法
- 浅谈C# 中的委托和事件
- 关于jQuery对象数据缓存Cache原理以及jQuery.data详解
- jquery实现放大镜简洁代码(推荐)
- 基于JavaScript实现轮播图原理及示例
- Android EditText详解及示例代码
- Python获取当前函数名称方法实例分享
- nginx部署访问vue-cli搭建的项目的方法
- element-ui 表格实现单元格可编辑的示例
- python批量设置多个Excel文件页眉页脚的脚本
- 关于nginx+uWsgi配置遇到的问题的解决