jquery 插件学习(二)


Posted in Javascript onAugust 06, 2012

创建全局函数只需通过为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>
Javascript 相关文章推荐
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
jquery cookie的用法总结
Nov 18 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
ES6对象操作实例详解
May 23 Javascript
jquery 插件学习(一)
Aug 06 #Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 #Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 #Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 #Javascript
基于jquery的时间段实现代码
Aug 02 #Javascript
Javascript this 的一些学习总结
Aug 02 #Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 #Javascript
You might like
第十三节--对象串行化
2006/11/16 PHP
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
Laravel下生成验证码的类
2017/11/15 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
学习jQuey中的return false
2015/12/18 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
服装机修工岗位职责
2013/12/26 职场文书
给分销商的致歉信
2014/01/14 职场文书
房屋买卖协议书
2014/04/10 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android