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 相关文章推荐
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
基于JavaScript实现数码时钟效果
Mar 30 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 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实现腾讯短网址生成api接口实例
2020/12/08 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
python七夕浪漫表白源码
2019/04/05 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
python 表格打印代码实例解析
2019/10/12 Python
python 调试冷知识(小结)
2019/11/11 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
python缩进长度是否统一
2020/08/02 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
小学教师师德承诺书
2014/05/23 职场文书
大学新闻系求职信
2014/06/03 职场文书
企业法人授权委托书
2014/09/25 职场文书
前台岗位职责
2015/02/13 职场文书
学术研讨会主持词
2015/07/04 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS