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 相关文章推荐
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
小程序实现左滑删除效果
Jul 25 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
可选择和输入的下拉列表框示例
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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
php结合js实现多条件组合查询
2019/05/28 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
Python 多线程实例详解
2017/03/25 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
生产总经理岗位职责
2013/12/19 职场文书
仓管岗位职责范本
2014/02/08 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
员工工作及收入证明
2014/10/28 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
心灵点滴观后感
2015/06/02 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers