jquery 插件学习（二）

时间:2020-05-13 人气:0

创建全局函数只需通过为jquery对象添加属性即可，而创建jquery对象的方法也可以通过为jquery.fn添加属性来实现，实际上jquery.fn对象就是jquery.prototype原型对象的别名，使用别名更方便引用。

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();
});
});

复制代码代码如下:

<h1>ceshi</h1>
<a>dddddddddd</a>
<input type="button" value="test"/>
<div>div元素</div>

加载全部内容