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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
js右键菜单效果代码
Jul 21 Javascript
js 设置选中行的样式的实现代码
May 24 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 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注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
python定义类self用法实例解析
2020/01/22 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
MySQL面试题目集锦
2016/04/14 面试题
信息管理员岗位职责
2013/12/01 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
励志演讲稿500字
2014/08/21 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
小学班主任评语
2014/12/29 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
python基础之停用词过滤详解
2021/04/21 Python