Jquery插件开发Ⅰ
来源:互联网 发布:淘宝如何提高售后评分 编辑:程序博客网 时间:2024/05/29 10:08
jQuery插件开发方式主要有三种:
1、通过$.extend()来扩展jQuery
2、通过$.fn 向jQuery添加新的方法
3、通过$.widget()应用jQuery UI的部件工厂方式创建
通常我们使用第二种方法来进行简单插件开发,说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的,而第一种方式又太简单,仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而已。所以我们调用通过.extend()添加的函数时直接通过$符号调用($.myfunction())而不需要选中DOM元素($(“#example”).myfunction())。
1.第一种方式 $.extend()来扩展jQuery
请看下面的例子。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
运行结果
上面代码中,通过
已经完成了一个简单的jQuery插件了。但如你所见,这种方式用来定义一些辅助方法是比较方便的。
比如一个自定义的console,输出特定格式的信息,定义一次后可以通过jQuery在程序中任何需要的地方调用它。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
运行结果
但这种方式无法利用jQuery强大的选择器带来的便利,要处理DOM元素以及将插件更好地运用于所选择的元素身上,
还是需要使用第二种开发方式。你所见到或使用的插件也大多是通过此种方式开发。
2.第二种方式 $.fn 向jQuery添加新的方法
下面我们就来看第二种方式的jQuery插件开发。
基本方法
先看一下它的基本格式:
- 1
- 2
- 3
- 1
- 2
- 3
基本上就是往$.fn上面添加一个方法,名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。
比如我们将页面上所有P标签颜色转成红色,则可以这样写这个插件:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
运行结果
下面进一步,在插件代码里处理每个具体的元素,而不是对一个集合进行处理,这样我们就可以针对每个元素进行相应操作。
我们已经知道this指代jQuery选择器返回的集合,那么通过调用jQuery的.each()方法就可以处理合集中的每个元素了,但此刻
要注意的是,在each方法内部,this指带的是普通的DOM元素了,如果需要调用jQuery的方法那就需要用$来重新包装一下。
比如现在我们要在每个P标签后面显示title属性的值,首先通过each遍历所有P标签,然后获取title属性的值再加到文本后面。
更改后我们的插件代码为:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
运行结果
下面开始jQuery插件编写中一个重要的部分,参数的接收。
支持链式调用
我们都知道jQuery一个非常优雅的特性是支持链式调用,选择好DOM元素后可以不断地调用其他方法。
要让插件不打破这种链式调用,只需return一下即可。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
让插件接收参数
我们不想让其只变成红色,让插件接收参数可以自定义颜色和其他属性
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
现在,我们调用的时候指定颜色,字体大小未指定,会运用插件里的默认值15px。
- 1
- 2
- 3
- 1
- 2
- 3
运行结果
同时指定颜色与字体大小:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
保护好默认参数
注意到上面代码调用extend时会将defaults的值改变,这样不好,因为它作为插件因有的一些东西应该维持原样,
另外就是如果你在后续代码中还要使用这些默认值的话,当你再次访问它时它已经被用户传进来的参数更改了。
一个好的做法是将一个新的空对象做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,
这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值。
- Jquery插件开发Ⅰ
- JQuery插件开发 + 插件
- Jquery系列---Jquery插件开发
- 【jquery】jquery插件的开发
- 【jQuery】jQuery自定义插件开发
- jQuery插件开发-(function($){...})(jQuery)
- jquery开发:jquery插件编写
- jquery 插件开发小组
- jquery插件开发方法
- Jquery插件开发
- jquery插件开发方法
- jQuery插件开发(转载)
- jquery插件开发方法
- JQuery插件开发
- JQuery插件开发
- jquery 插件开发方法
- jQuery插件开发方法
- jquery 插件开发详解
- Cpp判断是否为局域网IP
- 股票学习前言
- Java
- 【树形dp】有线电视网
- Java程序员进阶学习,你知道多少?
- Jquery插件开发Ⅰ
- POJ 3468 A Simple Problem with Integers(线段树,延迟标记)
- COM 参数有in, out ,retval
- TOP100summit:【分享实录-Microsoft】基于Kafka与Spark的实时大数据质量监控平台
- react-native的原生传参到rn
- duilib+win32:对时间的操作
- 【bzoj1593】[Usaco2008 Feb]Hotel 旅馆
- Java进阶学习路线图
- DHCP和IP地址冲突