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 相关文章推荐
javascript 模拟点击广告
Jan 02 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
js实现有趣的倒计时效果
Jan 19 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
php win下Socket方式发邮件类
2009/08/21 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
关于JavaScript中string 的replace
2013/04/12 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
详解Python中time()方法的使用的教程
2015/05/22 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
python使用thrift教程的方法示例
2019/03/21 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
营销与策划个人求职信
2013/09/22 职场文书
化学学院毕业生自荐信范文
2013/12/17 职场文书
入职担保书怎么写
2014/05/12 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
525心理健康活动总结
2015/05/08 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
如何写通讯稿
2015/07/22 职场文书
小学美术教学反思
2016/02/17 职场文书