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实现计算两个日期的间隔天数
Aug 14 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
详解JS数值Number类型
Feb 07 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
微信小程序实现锚点跳转
Nov 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
YII框架http缓存操作示例
2019/04/29 PHP
javascript 写类方式之八
2009/07/05 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
Python 如何在字符串中插入变量
2020/08/01 Python
python里反向传播算法详解
2020/11/22 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
高中毕业自我鉴定
2013/12/16 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
司法建议书范文
2014/05/13 职场文书
父亲去世追悼词
2015/06/23 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript