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 函数速查表
Feb 07 Javascript
20个最新的jQuery插件
Jan 13 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
动态加载js的方法汇总
Feb 13 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
js中复选框的取值及赋值示例详解
Oct 18 Javascript
JavaScript实现alert弹框效果
Nov 19 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面向对象全攻略 (九)访问类型
2009/09/30 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
javascript 打印页面代码
2009/03/24 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
《Python学习手册》学习总结
2018/01/17 Python
详解Python time库的使用
2019/10/10 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
生物制药专业自我鉴定
2014/02/19 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
企业培训简报范文
2015/07/20 职场文书
python Polars库的使用简介
2021/04/21 Python
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL
centos7安装mysql5.7经验记录
2022/05/02 Servers
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android
LeetCode189轮转数组python示例
2022/08/05 Python