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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 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
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
javascript add event remove event
2008/04/07 Javascript
FLASH 广告之外的链接
2008/12/16 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
南京青奥会口号
2014/06/12 职场文书
个人党性分析材料
2014/12/19 职场文书
质量保证书格式
2015/02/27 职场文书
出国导师推荐信
2015/03/25 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
结婚典礼主持词
2015/06/29 职场文书
大一新生军训新闻稿
2015/07/17 职场文书