jquery 插件学习（二）
时间：2020-12-16 09:03:35|栏目：jquery|点击： 次
创建全局函数只需通过为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>
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>
栏 目：jquery
下一篇：input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
本文标题：jquery 插件学习（二）
本文地址：http://www.codeinn.net/misctech/33223.html
