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一般方法介绍 入门参考
Jun 21 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 Javascript
JSON stringify方法原理及实例解析
Oct 23 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 HTML代码串 截取实现代码
2009/06/29 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
学习JavaScript的最佳方法分享
2011/10/21 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
JavaScript中Function详解
2015/02/27 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
python比较两个列表大小的方法
2015/07/11 Python
python如何在循环引用中管理内存
2018/03/20 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
python利用opencv保存、播放视频
2020/11/02 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
大学生未来职业生涯规划书
2014/02/15 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
Pytest之测试命名规则的使用
2021/04/16 Python
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
Go Plugins插件的实现方式
2021/08/07 Golang