jQuery中$.fn的用法示例介绍


Posted in Javascript onNovember 05, 2013

$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。
如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了.
那么你可以这样子:$("#div").abc();

jQuery为开发插件提拱了两个方法,分别是:

jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。

fn是什么东西呢。查看jQuery代码,就不难发现。

jQuery.fn = jQuery.prototype ={ 
 init: function( selector, context ){//....  

 //...... 
};

原来 jQuery.fn =jQuery.prototype.对prototype肯定不会陌生啦。
jQuery便是一个封装得非常好的类,比如我们用语句 $("#btn1") 会生成一个 jQuery类的实例。

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

$.extend({ 
add:function(a,b){returna+b;} 
});

便为 jQuery 添加一个为add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
$.add(3,4); //return 7

jQuery.fn.extend(object);对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert当前编辑框里的内容。可以这么做:

jQuery代码

$.fn.extend({ alertWhileClick:function(){ 
$(this).click(function(){ 
alert($(this).val()); 
}); 
} 
});
Javascript 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
jQuery构造函数init参数分析
May 13 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
可选择和输入的下拉列表框示例
Nov 05 #Javascript
js函数返回多个返回值的示例代码
Nov 05 #Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 #Javascript
查看大图功能代码jquery版
Nov 05 #Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 #Javascript
iframe子页面获取父页面元素的方法
Nov 05 #Javascript
jquery统计复选框选中示例
Nov 05 #Javascript
You might like
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
php 函数使用方法与函数定义方法
2010/05/09 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
html文本框提示效果的示例代码
2014/06/28 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
详解Vite的新体验
2021/02/22 Javascript
python3.0 字典key排序
2008/12/24 Python
Django自定义分页效果
2017/06/27 Python
vscode 远程调试python的方法
2017/12/01 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
python实现xml转json文件的示例代码
2020/12/30 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
中国文明网签名寄语
2014/01/18 职场文书
文案策划求职信
2014/04/14 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
项目投资意向书范本
2015/05/09 职场文书
放假通知怎么写
2015/08/18 职场文书
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL