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去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
可选择和输入的下拉列表框示例
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提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
javascript中如何处理引号编码"
2013/08/15 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python File(文件) 方法整理
2019/02/18 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
基于python实现从尾到头打印链表
2019/11/02 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
Python 防止死锁的方法
2020/07/29 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
Django xadmin安装及使用详解
2020/10/26 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
魅力教师事迹材料
2014/01/10 职场文书
单位租房协议范本
2014/12/03 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android