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 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 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
PHP文件上传实例详解!!!
2007/01/02 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
Python绘制热力图示例
2019/09/27 Python
python实现高斯投影正反算方式
2020/01/17 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
python中元组的用法整理
2020/06/15 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
python3中数组逆序输出方法
2020/12/01 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
《风娃娃》教学反思
2014/04/19 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
2014年教务工作总结
2014/12/03 职场文书
神农溪导游词
2015/02/11 职场文书
毕业生自荐信范文
2015/03/05 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
贷款收入证明格式
2015/06/24 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
MySQL分布式恢复进阶
2022/07/23 MySQL