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 相关文章推荐
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
微信小程序 WeUI扩展组件库的入门教程
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第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
php标签云的实现代码
2012/10/10 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
python基于ID3思想的决策树
2018/01/03 Python
python正则中最短匹配实现代码
2018/01/16 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
Django框架安装方法图文详解
2019/11/04 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
python安装sklearn模块的方法详解
2020/11/28 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
入党申请书自我鉴定
2013/10/12 职场文书
九年级英语教学反思
2014/01/31 职场文书
争论的故事教学反思
2014/02/06 职场文书
会员卡清退活动总结
2014/08/27 职场文书
消防安全月活动总结
2015/05/08 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
学习党史心得体会2016
2016/01/23 职场文书
MYSQL常用函数介绍
2022/05/05 MySQL