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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
javascript之AJAX框架使用说明
Apr 24 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
js实现漫天星星效果
Jan 19 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
Php Cookie的一个使用注意点
2008/11/08 PHP
php编写简单的文章发布程序
2015/06/18 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
PHP分享图片的生成方法
2018/04/25 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
JS前端加密算法示例
2016/12/22 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
js实现3D旋转效果
2020/08/18 Javascript
python正则表达式re模块详解
2014/06/25 Python
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python实现带百分比的进度条
2016/06/28 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
教师求职信范文
2014/05/24 职场文书
机器人总动员观后感
2015/06/09 职场文书