开始之前我得先声明关于几点jQuery的概念:
1、$是jQuery的简写,任何出现$()的地方你都可以转换成jQuery()。
2、jQuery.fn只是jQuery.prototype的一个别名而已。但前提是你要知道JavaScript里面prototype是什么意思。JavaScript prototype整理
OK,如果你清楚上面两个概念,那么我们进入正题:
jQuery提供两种实现插件机制:jQuery.extend(object)、jQuery.fn.extend(object)。
一、jQuery中的$.extend
$.extend也就是支撑起jQuery插件半天边吧,所以我们还是得先了解一下他:
$.extend(object) 将object对象逐个复制给jQuery对象。
问题:
- $.extend({ showMsg: function(msg) { } });
和
- $.showMsg = function(msg) { }
这两者是没有区别,只是第二种方式看起来更加简洁(至少我喜欢这样子写),当然$.extend支持更加复杂操作,比如:
- $.extend({
-
- min: function(a, b) {
-
- max: function(a, b) {
-
- });
当然还可以提供另一个对象,并不一定非要复制给jQuery对象,比如:jQuery.extend({ args:’我是args属性’ }, options); // 将args复制给options对象
理解上面这些将对我们后面写插件很有帮助。
二、jQuery.extend(object)
扩展jQuery对象本身,意思就是说在jQuery对象本身增加新函数。
当然这是针对jQuery做的一个扩展,实际上你也可以这么写:
- jQuery.extend({ pluginName: function(args) { } });
当然还有更简洁、更漂亮的办法:
- jQuery.pluginName = function(args) {}
它的使用方法非常简单:$.pluginName(‘我就是这么被调用的’);
jQuery官网就提供一个cookie插件,她就是使用这种插件机制实现的,感兴趣的同学可以看看。
三、jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法,绝大部分我们都需要通过jQuery筛选出来一些元素集,然后对元素集进行操作,所以呢,这种插件机制也成了首选。
- jQuery.fn.extend({
- check: function() {
- return this.each(function() { this.checked = true; });
- },
- uncheck: function() {
- return this.each(function() { this.checked = false; });
- }
- });
实现全选和非全选两个插件。
使用方法:$(“input[type=checkbox]“).check(); // 全选所有checkbox选项框
其中:$(“input[type=checkbox]“) 是一个元素集。
四、我需要很多参数
很多情况下,我们需要传递很多参数,但是绝大部分又是可选的,比如一个基于FLASH来切换图片效果示例(这在大部分网站里面都会出现的):
- $.fn.SwfSlide = function(options) {
-
- options = $.extend({
- swfFile: '/images/pixviewer.swf?1',
- fwidth: 200,
- fheight: 160,
- theight: 18,
- files: '',
- links: '',
- texts: ''
- }, options || {});
-
- }
这里面有七个参数,但是当你在调用的时候你不需要七个全指明,也许你只要三个,像这样:$(‘div’).SwfSlide({ files:”, links:”, texts:” });
五、可不是这么就完了
JavaScript脚本框架非常多,最经典像是prototype、yui、mootools等等,如果说一个项目运用多套框架的话,遇到最多关于$冲突问题。jQuery本身提供一些多库共存的解决方案。但是做为我们基于jQuery来写插件,我们还是要考虑到这个多库共存带来的问题。
其实也只是非常简单的一个技巧,将插件代码放到一个包裹器里面:
- (function($) {
-
-
-
- })(jQuery);
转载处:http://asdfblog.com/technology/ready-jquery-plugin.html
分享到:
相关推荐
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
jquery 插件jquery 插件jquery 插件jquery 插件
JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...
jquery 插件,实现多种不同的滚屏操作,
图片懒加载文件jquery插件库EasyLazyload
jquery插件.rar
非常好用的清除html格式的jquery插件,使用起来也比较方便,可以看下源代码学习下。
jquery插件大全--打包下载 jquery插件大全--打包下载 jquery插件大全--打包下载 jquery插件大全--打包下载
jQuery-doubleTap是一款非常有用的鼠标双击事件或移动设备的触摸双击事件检测jQuery插件。该插件通过对“click”和“touch”的简单代码优化来实现鼠标双击或触摸双击事件的检测
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
java源代码,主要是jquery插件的利用 java源代码,主要是jquery插件的利用 java源代码,主要是jquery插件的利用
jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...
jQuery插件开发及常用插件大全PDF;jQuery插件开发.pdf、jQuery常用插件大全.pdf
常用的jquery插件大全 jquery-json.js jquery-validate.js jquery.js, jquery.form.js, jquery.jscrollpane.css jquery.mousewheel.js 等等
240多个jQuery插件
这里提供最基础的jquery插件编辑方法,为jquery插件学习者提供帮助。
struts2-jquery插件源码。版本号3.0.1