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 相关文章推荐
js函数在frame中的相互调用详解
Mar 03 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
js实现带积分弹球小游戏
Jul 21 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的Yii 2框架的开发优势
2015/07/03 PHP
PHP会话控制实例分析
2016/12/24 PHP
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
python函数返回多个值的示例方法
2013/12/04 Python
python实现bucket排序算法实例分析
2015/05/04 Python
python实现数据图表
2017/07/29 Python
Python类的继承和多态代码详解
2017/12/27 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
爽歪歪广告词
2014/03/20 职场文书
会计演讲稿范文
2014/05/23 职场文书
团队拓展活动总结
2014/08/27 职场文书
校外活动方案
2014/08/28 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL
python blinker 信号库
2022/05/04 Python
Android实现图片九宫格
2022/06/28 Java/Android