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>

赞 (0)

相关推荐

  • jquery 插件学习（六）

    复制代码 代码如下: ;(function($){ $.extend($.fn,{ color : function(options){ var options = $.extend({},$.fn.color.defaults,options); return this.each(function(){ $(this).css("color",options.bcolor); $(this).css("background",options.fcolor); })

  • jquery 插件学习（一）

    言归正传拉,开始跟我学习吧:): 1.jquery自定义了 jQuery.extend()和jQuery.fn.extend()方法,其中,jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()能够创建jQuery对象方法.在这里啰嗦讲下:这2个方法,都包含一个参数,改参数仅接受名/值对结构的对象,其中名表示函数或方法名,而值表示函数体. 复制代码 代码如下: jQuery.extend({ minValue : function(a,b){ ret

  • jquery 插件学习（四）

    针对上面的示例,我们可以调用jquery.fn.extend()方法来创建jquery对象方法.具体代码如下> 复制代码 代码如下: jQuery.fn.extend({ test : function(){ return this.each(function(){ alert(this.nodeName); }) } }); 调用跟上面一样哦 复制代码 代码如下: $('body *').click(function(){ $(this).test().html(this.nodeName).

  • jquery 插件学习（五）

    这节封装插件了,进展怎么样呢? 一般对外发布的插件都应该进行封装,封装的插件还应该符合规范,只有这样写的插件才具有推广价值,并得到其他用户的喜爱. 首先第一步,是定义一个独立域,代码如下所示. 复制代码 代码如下: (function($){ //自定义插件代码 })(jQuery) //封装插件 确定创建插件类型,选择创建方式,例如,创建一个设置元素字体颜色的插件,则应该创建jquery对象方法,考虑到jquery提供了插件扩展方法extend(),调用该方法会更为规范. 复制代码 代码如下:

  • jquery 插件学习（三）

    例如: 复制代码 代码如下: $(this).test().hide().height(); 要实现类似的连写行为,就应该在每个插件方法中,返回一个jquery对象,除非方法需要明确返回值.返回的jquery对象通常就是this所引用的对象.如果使用each()方法迭代this,则可以直接返回迭代的结果.针对上一节的示例,进一步修改 复制代码 代码如下: jQuery.fn.test = function(){ return this.each(function(){ //遍历匹配的元素,此处的

  • jQuery插件学习教程之SlidesJs轮播+Validation验证

    SlidesJs(轮播支持触屏)--官网(http://slidesjs.com) 1.简介 SlidesJs是基于Jquery(1.7.1+)的响应幻灯片插件.支持键盘,触摸,css3转换. 2.代码 <!doctype html> <head> <style> /* Prevents slides from flashing */ #slides { display:none; } </style> <script src="http:/

  • jquery 插件学习（二）

    创建全局函数只需通过为jquery对象添加属性即可,而创建jquery对象的方法也可以通过为jquery.fn添加属性来实现,实际上jquery.fn对象就是jquery.prototype原型对象的别名,使用别名更方便引用. demo: 复制代码 代码如下: jQuery.fn.test = function(){ alert('这是 jquery 对象方法 '); } 然后,就可以在任何jquery对象中调用该方法了. 复制代码 代码如下: $(function(){ $('h1').cli

  • Jquery 插件学习实例1 插件制作说明与tableUI优化

    Jquery 插件学习实例1 插件制作说明与tableUI优化

    一. 先对jQuery制作方式,jQuery为开发扩展提拱了两个方法,分别是: jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. 1.1.jQuery.fn.extend(object): 可以参靠jquery参考手册的连个例子: 复制代码 代码如下: $.fn.extend({ check: function() { return this.each(function()

  • 轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）

    轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）

    一.EasyUI创建基础树形网格 树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGrid),可以用在树形网格(TreeGrid)中.为了使用树形网格(TreeGrid),用户必须定义 'treeField' 属性,指明哪个字段作为树节点. 本文将向您展示如何使用树形网格(TreeGrid)组件设置一个文件夹浏览. 创建树形网格(TreeGrid) <table id="test" title

  • jquery插件qrcode在线生成二维码

    随着移动互联网的发展,二维码现在应用得越来越广泛了,随手扫扫就可以浏览网站.加个好友什么的,比起手工输入真的是方便太多了. 前期做了一个综合测评系统,考虑逐步实现移动化,一长串的IP地址用户输入也不方便,借助二维码的话,用户拿起手机扫扫就可以直接进入系统. 基于这个应用场景,就上网研究下了网站二维码的实现方式,归纳起来有以下两种: 1.借助一些二维码生成网站或者二维码生成器生成二维码图片,然后挂在网站上,如码云 QR-Code (二维码) 在线生成器 优点:开发成本为零,能够快速实现多样化的二维

随机推荐