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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
javascript实现微信分享
Dec 23 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
keep-alive保持组件状态的方法
Dec 02 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
留言板翻页的实现详解
2006/10/09 PHP
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
javascript 冒号 使用说明
2009/06/06 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
快速入门Vue
2016/12/19 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
Python类的专用方法实例分析
2015/01/09 Python
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python中使用dom模块生成XML文件示例
2015/04/05 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
Python 内存管理机制全面分析
2021/01/16 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
经典演讲稿开场白
2014/08/25 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server