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 相关文章推荐
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
javascript截取字符串小结
Apr 28 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
jQuery异步提交表单实例
May 30 jQuery
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
吃通javascript正则表达式
Apr 21 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抓取页面与代码解析 推荐
2010/07/23 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
PHP7变量处理机制修改
2021/03/09 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
Python中设置变量访问权限的方法
2015/04/27 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
Python socket服务常用操作代码实例
2020/06/22 Python
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
给老师的一封建议书
2014/03/13 职场文书
小学语文业务学习材料
2014/06/02 职场文书
材料化学专业求职信
2014/07/15 职场文书
财务人员岗位职责
2015/02/03 职场文书
毕业论文致谢范文
2015/05/14 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书