前言:
在我们学习开发插件前,必须先搞懂,以下这些插件的基础知识,直奔主题了。
1.jQuery插件分为3类
(1) 封装对象方法的插件(对象级别的开发)
通过$.fn 向jQuery添加新的方法
(2)封装全局函数的插件(类级别开发)
指可以把独立的函数添加到jQuery命名空间之下。
添加一个全局函数,我们只需要如下定义:
jQuery.foo=function(){
alert('this is a test');
}
也可以添加多个全局函数:
<span > </span>jQuery.foo=function(){
alert('this is a test');
}
jQuery.bar=function(){
alert('this function takes a parameter');
}
调用时和一个函数一样:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');
(3)选择器插件
2.编写JQuery插件需要注意的地方
(1)插件的推荐命名方法:jquery.[插件名].js
(2)所有的对象方法都应该附加到jQuery.fn对象上面,而所有的全局函数都应当附加到jQuery对象本身上。
(3)在插件内部,this指向的是当前选择器获取的jQuery对象,而不像一般方法那样,内部的this指向的是DOM元素。
(4)可以通过this.each来遍历所有的元素。
(5)所有的方法或函数插件,都应当以分好结尾,否则压缩的时候可能会出现问题。为了更加保险写,可以在插件头部添加一个分好(;),以免他们的不规范代码给插件带来影响。
(6)插件应该返回一个jQuery对象,以便保证插件的可链式操作。
(7)避免在插件内部使用$作为jQuery 对象的别名,而应使用完整的jQuery来标示。这样可以避免冲突。
3.jQuery插件的机制
jQuery提供了2个用于扩展jQuery功能的方法。即:
(1)jQurty.fn.extend();
(2)jQuery.extend();
jQuery.extend()在插件中有一个很重要的功能是扩展已经有的object的对象。
比如:
var newSrc=$.extend(dest,src1,src2,src3...)
他的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest。
示例:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
得到的结果是:
result={name:"Jerry",age:21,sex:"Boy"};
4.编写插件的基本语法
<span style="font-size:12px;"> $.fn.myPlugin = function() {
//具体代码
}
$("元素").myPlugin(); //调用编写的插件,类似于jquery一样。</span>
通过上面的代码,不难发现,插件的写法基本上就是往$.fn上面添加一个方法,插件的名字是我们自己命名的,然后我们的插件代码在这个方法里面展开.
将页面上所有连接颜色转成红色,可以这样写:
<span style="font-size:12px;"> $.fn.myPlugin=function(){
this.css('color','red');
//在这里面,this指的是用jQuery选中的元素
//比如:$('a'),则 this=$('a')
}</span>
在插件名字定义的这个函数内部,this指代的是我们在调用该插件时,用jQuery选择器选中的元素,一般是一个jQuery类型的集合。
比如$('a')返回的是页面上所有a标签的集合,且这个集合已经是jQuery包装类型了,也就是说,在对其进行操作的时候可以直接调用调用jQuery的其他方法而
所以上面插件代码中,我们用this调用css(),也就相当于在调用$('a').css().
理解这个this至关重要!!
未完,待续-----