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页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
js 获取时间间隔实现代码
May 12 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
原生js实现碰撞检测
Mar 12 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 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 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
Python实现股市信息下载的方法
2015/06/15 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
软件配置管理有什么好处
2015/04/15 面试题
实习生自荐信范文
2013/11/13 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
代理协议书
2014/04/22 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
争先创优公开承诺书
2014/08/30 职场文书
高中学校对照检查材料
2014/08/31 职场文书
离婚协议书标准格式
2014/10/04 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android