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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
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使用mkdir创建多级目录的方法
2015/12/22 PHP
kmock javascript 单元测试代码
2011/02/06 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
python写的一个squid访问日志分析的小程序
2014/09/17 Python
基于Python实现文件大小输出
2016/01/11 Python
Python反射的用法实例分析
2018/02/11 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
对Python信号处理模块signal详解
2019/01/09 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
Django框架表单操作实例分析
2019/11/04 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
python实现文法左递归的消除方法
2020/05/22 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
小学生读书感言
2014/02/12 职场文书
社团活动总结书
2014/06/27 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
旷工检讨书大全
2015/08/15 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python