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 相关文章推荐
15 个 JavaScript Web UI 库
May 19 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
JavaScript实现雪花飘落效果
Dec 27 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 IP转换整形(ip2long)的详解
2013/06/06 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
浅谈js中的this问题
2017/08/31 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
Python中如何添加自定义模块
2020/06/09 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
采购文员岗位职责
2013/11/20 职场文书
岗位职责怎么写
2014/03/14 职场文书
学历公证委托书
2014/04/09 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
工作表现证明
2015/06/15 职场文书