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 相关文章推荐
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
使用vant的地域控件追加全部选项
Nov 03 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文本数据库的搜索方法
2006/10/09 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
python实现代码行数统计示例分享
2014/02/10 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
python实现log日志的示例代码
2018/04/28 Python
python3实现高效的端口扫描
2019/08/31 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
Linux内核产生并发的原因
2016/11/08 面试题
挂靠协议书
2015/01/27 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
黄河绝恋观后感
2015/06/08 职场文书
护理培训心得体会
2016/01/22 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis