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中eq和get的区别与使用方法
Apr 14 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
微信小程序实现可长按移动控件
Nov 01 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 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的历史和优缺点
2006/10/09 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
PHP经典面试题集锦
2015/03/19 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
简单了解python的一些位运算技巧
2019/07/13 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
python实现猜单词游戏
2020/05/22 Python
python新手学习使用库
2020/06/11 Python
python和go语言的区别是什么
2020/07/20 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
大学四年个人自我小结
2014/03/05 职场文书
酒店管理求职信范文
2014/04/06 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
质量整改通知单
2015/04/21 职场文书