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对象和属性的创建方法
Jan 15 Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 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初学者们头痛的十四个问题
2007/01/15 PHP
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
如何在Python中编写并发程序
2016/02/27 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
英文简历自荐信范文
2013/12/11 职场文书
公益广告宣传方案
2014/02/28 职场文书
数学系毕业生求职信
2014/05/29 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
大学生自荐材料范文
2014/12/30 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python