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 相关文章推荐
JS获取父节点方法
Aug 20 Javascript
学习ExtJS 访问容器对象
Oct 07 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
input框中的name和id的区别
Nov 16 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
vue开发拖拽进度条滑动组件
Sep 21 Javascript
js实现div色块碰撞
Jan 16 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
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
关于Javascript 的 prototype问题。
2007/01/03 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
windows下python安装pip图文教程
2018/05/25 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
python 回溯法模板详解
2020/02/26 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
化学教师教学反思
2014/01/17 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
企业新年寄语
2014/04/04 职场文书
班长演讲稿范文
2014/04/24 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js