【原】jQuery编写插件
分享一下编写设置和获取颜色的插件,首先我将插件的名字命名为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>
测试结果如下图:


OK!测试没问题,全部完成。做这篇分享只是为了分享一下如何实现编写插件的整个过程
【原】jQuery编写插件的更多相关文章
- jquery编写插件
jquery编写插件的方法 版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三 ...
- javascript&&jquery编写插件模板
javascrpt插件编写模板 这里不分享如何编写插件,只留一个框架模板,使用面向对象的形式进行编写,方便管理 ;(function(window,document){ function FnName ...
- jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...
- 再谈:jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...
- 两个jquery编写插件实例
(1) 封装基于jq弹窗插件 相信码友们对于$.fn.extexd();$.extend()以及$.fn.custom和$.custom都有一定的了解:我阐述一下我自己对于$.fn.custom和 ...
- jquery编写插件(转)
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原 ...
- jQuery编写插件--封装全局函数的插件(一些常用的js验证表达式)
上一篇写到了jQuery插件的3种类型,介绍了第一种类型的写法--封装jQuery对象的方法插件.这一篇要介绍第二种插件类型:封装全局函数的插件:这类插件就是在jQuery命名空间内部添加函数:这类插 ...
- jquery 编写插件入门
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <sc ...
- 用jquery编写的分页插件
用jquery编写的分页插件 源码 function _pager_go(total_page) { var page_str = $("#_pager_textbox").val ...
随机推荐
- careercup-树与图 4.9
4.9 给定一颗二叉树,其中每个结点都含有一个数值.设计一个算法,打印结点数值总和等于某个给定值的所有路径.注意,路径不一定非得从二叉树的根节点或叶子节点开始或结束. 类似于leetcode:Path ...
- Windows8下如何使用命令行--转载
原文地址:http://jingyan.baidu.com/article/a501d80ce26fecec630f5ee0.html 命令行可用于实现一些没有图形界面的操作,然而windows8下的 ...
- j2ee学习笔记 javascript 学习
JavaScript 组成: ECMAScript + BOM + DOM Window对象是JS中的顶层对象 ECMAScript: 规定了一些语法,变量,for循环等等结构 BOM: Browse ...
- ajax异步传输
2015.12.7 ajax异步传输 1.ajax :不是一个新的技术. js(XMLHTTPRequest) html css dom xml 这里只是一个新的js的内置对象.这算是js想要变得流行 ...
- 在AngularJS的controller外部直接获取$scope
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/5560843.html ...
- YII缓存Cache
缓存Cache 定义:将数据暂时存放在一个存储速度更快的介质上,下次读取数据时就可以从这个介质上来读取数据 介质:内存.文件.数据库(优化好的数据库) Yii缓存的分类:(framework/cach ...
- JDBC中事务的使用
http://blog.sina.com.cn/s/blog_6f3ca78f01010pmj.html 当Jdbc程序向数据库获得一个Connection对象时,默认情况下这个Connection对 ...
- linux中转换编码
iconv -f gb2312 -t utf-8 文件 -o 输出文件名 iconv -f gb2312 -t utf-8 文件 #直接在终端中显示 enca -L zh_CN file #查看 ...
- Oracle 11g gateways(透明网关)配置
配置要点主要有三点: 1.%GATEWAYS_HOME%(透明网关安装目录)\dg4msql\admin\initdg4msql.ora 内容: HS_FDS_CONNECT_INFO=localho ...
- PHP学习笔记(七)
<wordpress 50个过滤钩子> 11-20 11.gettext: 过滤wordpress的翻译数据. 在wordpress中,使用__(), _e(), _x(), _ex(), ...