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获取当前路径的简单示例代码
Jan 08 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
js编写三级联动简单案例
Dec 21 Javascript
json数据处理及数据绑定
Jan 25 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 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
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
python对html代码进行escape编码的方法
2015/05/04 Python
Python递归函数定义与用法示例
2017/06/02 Python
Python遍历pandas数据方法总结
2018/02/09 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
python eventlet绿化和patch原理
2020/11/21 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
承诺书范本大全
2015/05/04 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
python使用pymysql模块操作MySQL
2021/06/16 Python