jquery $.fn $.fx是什么意思有什么用


Posted in Javascript onNovember 04, 2013

$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。
如扩展$.fn.abc()
那么你可以这样子:$("#div").abc();
通常使用extend方法扩展,详细请看API.
$.fx是指jquery的特效。
如果使用显示、滑动、淡入淡出、动画等。
$.fx.off可以关闭动画,其实是直接显示结果。

jquery的extend和fn.extend

jQuery为开发插件提拱了两个方法,分别是:
jQuery.fn.extend(object);
jQuery.extend(object);
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。

fn 是什么东西呢。查看jQuery代码,就不难发现。
jQuery.fn = jQuery.prototype = {

 init: function( selector, context ) {//.... 

 //......
};
原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。
虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。
jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:
$.extend({

add:function(a,b){return a+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()); 
}); 
} 
}); 
$("#input1").alertWhileClick();

页面上为:<input id="input1" type="text"/>
$("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。

jquery(function(){})与(function(){}(jQuery)的区别
1.
jQuery(function(){});
全写为
jQuery(docunemt).ready(function(){
});
意义为在DOM加载完毕后执行ready()方法
2.
(funtion(){
}(jQuery);
实际执行()(para)匿名方法,只不过传递了jQuery对象。

总结:jQuery(funtion(){});用于存放DOM对象的代码,执行其中代码时DOM对象已经存在。不可用于存放开发插件代码。因为jQuery对象没有得到传递,外部通过jQuery.methodye调用不来其中方法。
(funtion(){
}(jQuery);
用于存放开发插件的代码,执行其中代码DOM不一定存在,直接自动执行DOM操作代码请小心使用

Javascript 相关文章推荐
aspx中利用js实现确认删除代码
Jul 22 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 #Javascript
jQuery列表拖动排列具体实现
Nov 04 #Javascript
利用cookie记住背景颜色示例代码
Nov 04 #Javascript
判断滚动条到底部的JS代码
Nov 04 #Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 #Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 #Javascript
jquery监听div内容的变化具体实现思路
Nov 04 #Javascript
You might like
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
JSON相关知识汇总
2015/07/03 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
法学专业本科生自荐信范文
2013/12/17 职场文书
大学军训感言300字
2014/03/09 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
企业晚会策划方案
2014/05/29 职场文书
生活部的活动方案
2014/08/19 职场文书
公司经营目标责任书
2015/01/29 职场文书
中秋晚会致辞
2015/07/31 职场文书
2015年度女工工作总结
2015/10/22 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python