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选择器的工作原理和优化分析
Jul 25 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
Javascript基础之数组的使用
May 13 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
详解webpack 热更新优化
Sep 13 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
介绍Python中几个常用的类方法
2015/04/08 Python
python中解析json格式文件的方法示例
2017/05/03 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
python设置表格边框的具体方法
2020/07/17 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
如何填写个人简历自我评价
2013/12/10 职场文书
借款担保书范文
2014/05/13 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
Java实现带图形界面的聊天程序
2022/06/10 Java/Android