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 相关文章推荐
IE与FireFox中的childNodes区别
Oct 20 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
JS运算符简单用法示例
Jan 19 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 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
DSP接收机前端设想
2021/03/02 无线电
php cookie 登录验证示例代码
2009/03/16 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
python定时执行指定函数的方法
2015/05/27 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
kafka-python批量发送数据的实例
2018/12/27 Python
Python基础之文件读取的讲解
2019/02/16 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
Python数组并集交集补集代码实例
2020/02/18 Python
应届生的求职推荐信范文
2013/11/30 职场文书
学校大课间活动方案
2014/01/30 职场文书
小学中秋节活动方案
2014/02/06 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
试用期辞职信范文
2015/03/02 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书