今天<强>小码哥强突发兴致想学习jQuery。当正在研究一个不错的<>强插件强的时候,又突然有了一个疑问,那就是为啥很多<强>大拿前辈们在<强>封装强自己写的插件的时候总是按照这个格式:如<强>, <强>(函数($){})(jQuery); 强。或者是这样定义方法对象的?如:<强> .fn.add美元=function(){} 啥的! !尤其是后一个<强>美元。fn 中的<强> fn 是干什么的?(大家不要笑俺,,,小码哥也是初学者,还有很多没有达到深刻理解的境界),因此,偶就上网借鉴了一下别人总结的,然后又加上俺自己的理解,成就了一下的一片博文!
大家都晓得,jQuery是一款即实用又强大的开源的且拥有多种选择器的强大的库,因此,很多前辈们喜欢用它来作为框架来开发自己的插件,因此,偶很羡慕呢,,,,,
下面了解一下插件的种类:
1, <强>封装对象方法
<强> 2,封装全局函数
<强> 3,选择器插件等
<强>封装对象方法:
这种插件是将对象方法封装起来,用于对通过<强>选择器获取的jQuery对象强进行操作,是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式“插”在内核上的,例如:<强>父()方法,appendTo()方法等。这些方法在现在来看都是jQuery本身自带的方法了。平时,我们是可以直接拿来就用的,只需引入jQuery库就行。
<强>封装全局函数:
可以将独立的函数加到jQuery命名空间下,如常用的<强> jQuery.ajax() 强,去首尾空格的<强> jQuery.trim() 强方法等,都是<强> jQuery内部作为全局函数强劲的插件附加到内核上去的。
<强>选择器插件:
虽然jQuery的选择器十分强大,但是在少数情况下,还是会需要用到<强>选择器插件来扩充一些自己喜欢的选择器。
jQuery选择器插件的机制:
其本身并不太难理解,就是利用jQuery提供的<>强jQuery.fn.extend() 和<强> jQuery.extend() 强方法,扩展jQuery的功能。
<强> jQuery.fn.extend() 强方法多用于扩展上面提到的3种类型中的第一种,<强> jQuery.extend() 用于扩展后两种插件。这两个方法都接受一个参数,类型为<强> 。<强>对象对象的“<强>名/值对“分别代表”<强>函数或方法名/函数主体”。
编写jQuery插件的一些提示
1, <强> jQuery插件的文件名推荐命名为jQuery。[插件名)。js,以免和其他js库插件混淆。
<强> 2,
<强> 3,在插件头部上加一个分号,以免他人的不规范代码给插件带来影响。
<强> 4,所有的方法或函数插件,都应当以分号结尾,以免压缩时出现问题。
<强> 5,除非插件需要返回的是一些需要获取的变量,否则插件应该返回一个jQuery对象,以保证插件的可链式操作。
<强> 6,利于jQuery.extend()方法设置插件方法的默认参数,增加插件的可用性。
jQuery插件结构:
代码:
;(函数($){
,,/*这里放插件代码,可以将美元作为jQuery的别名*/
}) (jQuery);
封装jQuery对象方法插件实战
,功能:设置选择的元素的颜色,获取选择的首个元素的颜色
,命名:jquery.color。js
,结构:
代码:
;(函数($){
,,,, .fn美元。扩展({
,,,,,,,,//这里写插件代码
,,,,});
}) (jQuery);
思路:设置一个参数的值,如果调用时传递了价值这个参数,就是设置颜色,否则未获取颜色。获取和设置颜色可以用jQuery提供的CSS方法即可。
完成代码如下:
;(函数($){
,,,, .fn美元。扩展({
,,,,,,,,“颜色”:功能(价值){
,,,,,,,,,,,,如果(value=https://www.yisu.com/zixun/=undefined) {
,,,,,,,,,,,,,,,,返回this.css(“颜色”);
,,,,,,,,,,,,}其他{
,,,,,,,,,,,,,,,,返回this.css(“颜色”,价值);
,,,,,,,,,,,,}
,,,,,,,,}
,,,,});
}) (jQuery);
由于css()方法在获取颜色时已有取第一个元素的判断,所以这里直接用this.css(“颜色”)即可。
如果是一组插件,代码可以如下:
;(函数($){
,,,, .fn美元。扩展({
,,,,,,,,“颜色”:功能(价值){
,,,,,,,,,,,,//插件代码
,,,,,,,,},
,,,,,,,,“边境”:功能(价值){
,,,,,,,,,,,,//插件代码
,,,,,,,,},
,,,,,,“背景”:功能(价值){
