jquery插件学习和门（二）

时间：2012-08-08 编辑：简简单单来源：一聚教程网

除了全局函数外，jquery中的大多数插件都是通过jquery对象的方法提供的。

demo：

代码如下

复制代码

jQuery.fn.test = function(){
alert('这是 jquery 对象方法 ');
}然后，就可以在任何jquery对象中调用该方法了。

$(function(){
    $('h1').click(function(){
        $(this).test();
    });
});

由于这里，并没有任何地方匹配dom节点，所以编写全局函数也是可以的（上一节有讲过哦），但是，在使用jquery对象方法时，函数体内的this关键字总是引用当前的jquery对象，因此我们可以对上面的方法进行重写，实现动态提示信息，代码如下：

代码如下	复制代码
jQuery.fn.test = function(){ alert(this[0].nodeName); //提示当前jquery对象的dom节点名称 }

重点来了，在上面的示例中，可以看到由于jquery选择器返回的是一个数组类型的dom节点集合，this指针就指向当前这个集合，故要显示当前元素的节点名称，就必须在this指针后面指定当前元素的序号。

思考：如果jquery选择器匹配多个元素，我们该如何准确指定当前元素的对象呢？-----

要解决这个问题，我们不妨在当前jquery对象方法的环境中调用each()方法，通过隐式迭代的方式，让this指针依次饮用每一个匹配的dom元素对象，例如，针对上一个示例做进一步的修改

代码如下	复制代码
jQuery.fn.test = function(){ this.each(function(){ //遍历匹配的元素，此处的this表示对象集合 alert(this.nodeName); //提示当前jquery对象的dom节点名称（注意这里与上面的变化哦，下标消失了） }); }

然后，在调用方法时，就不用担心，jquery选择器所匹配的元素有多少了。例如在下面的例子中，当单击不同的元素，会提示当前的节点名称

代码如下

复制代码

$(function(){
    $('body *').click(function(){
        $(this).test();
    });
});

ceshi

div元素