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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
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
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
php的curl封装类用法实例
2014/11/07 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
php动态函数调用方法
2015/05/21 PHP
一个实用的php验证码类
2017/07/06 PHP
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
我们是伦敦女孩:WalG
2018/01/08 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
工程承包协议书
2014/04/22 职场文书
和睦家庭事迹
2014/05/14 职场文书
十佳党员事迹材料
2014/08/28 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书