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学习笔记之jQuery的事件
Dec 22 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
js实现图片无缝滚动
Dec 23 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 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正则验证Email的方法
2015/06/15 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
JavaScript门面模式详解
2017/10/19 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python交换变量
2008/09/06 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
Python中return self的用法详解
2018/07/27 Python
Python制作动态字符图的实例
2019/01/27 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
董事长秘书岗位职责
2013/11/29 职场文书
行政专员的岗位职责
2014/03/10 职场文书
大学生活动总结模板
2014/07/02 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
预备党员转正意见
2015/06/01 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
Python OpenCV超详细讲解基本功能
2022/04/02 Python
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis