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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
基于vue实现分页效果
Nov 06 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
vuex的module模块用法示例
Nov 12 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实现与ASP Banner组件相似的类
2006/10/09 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
使用PYTHON创建XML文档
2012/03/01 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
python 有效的括号的实现代码示例
2019/11/11 Python
python实现126邮箱发送邮件
2020/05/20 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
一份创业计划书范文
2014/02/08 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
假期安全教育广播稿
2014/10/04 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
升学宴家长致辞
2015/07/27 职场文书
小学中队委竞选稿
2015/11/20 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers