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 相关文章推荐
页面只能打开一次Cooike如何实现
Dec 04 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
jQuery zTree插件使用简单教程
Aug 16 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中使用XML
2006/10/09 PHP
php去除数组中重复数据
2014/11/18 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python多线程实现同步的四种方式
2017/05/02 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
解决python 上传图片限制格式问题
2019/10/30 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
十八大闭幕感言
2014/01/22 职场文书
我的求职择业计划书
2014/04/04 职场文书
欢迎标语大全
2014/06/21 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
Linux系统下安装PHP7.3版本
2021/06/26 PHP
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL