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 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
PHP开发需要注意的安全问题
2010/09/01 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
python实现dijkstra最短路由算法
2019/01/17 Python
python字符串反转的四种方法详解
2019/12/02 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
2014年酒店年度工作总结
2014/12/10 职场文书
刑事辩护词范文
2015/05/21 职场文书
基层党建工作简报
2015/07/21 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
分享几个实用的CSS代码块
2022/06/10 HTML / CSS