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来实现动画导航效果的代码
Dec 16 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
Javascript Web Worker使用过程解析
Mar 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
我的论坛源代码(七)
2006/10/09 PHP
PHP4实际应用经验篇(7)
2006/10/09 PHP
模仿OSO的论坛(一)
2006/10/09 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
JS解析XML的实现代码
2009/11/12 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
档案接收函
2014/01/13 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
寒假安全保证书
2015/02/28 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
公司开除员工通知
2015/04/22 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
python Polars库的使用简介
2021/04/21 Python
Java 在生活中的 10 大应用
2021/11/02 Java/Android
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS