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 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 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将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP 无限级分类
2017/05/04 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
php数组遍历类与用法示例
2019/05/24 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
node.js入门教程
2014/06/01 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
python静态方法实例
2015/01/14 Python
Python聊天室实例程序分享
2016/01/05 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python selenium 弹出框处理的实现
2019/02/26 Python
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
电子商务个人自荐信
2013/12/12 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
党员培训思想汇报
2014/01/07 职场文书
工地安全检查制度
2014/02/04 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
一帮一活动总结
2014/05/08 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
2015初中团委工作总结
2015/07/28 职场文书
中秋节随笔
2015/08/15 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android