$.fn与$.fx什么意思; $.extend与$.fn.extend用法区别; $(function(){})和(function(){})(jQuery)

时间:2022-09-15 13:14:44

$.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 当前编辑框里的内容。可以这么做:

Java
代码 $.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.first

jQuery(function(){});

全写为

jQuery(docunemt).ready(function(){

});

意义为在DOM加载完毕后执行ready()方法

2.

(funtion(){

}(jQuery);

实际执行()(para)匿名方法,只不过传递了jQuery对象。

总结:jQuery(funtion(){});用于存放DOM对象的代码,执行其中代码时DOM对象已经存在。

不可用于存放开发插件代码。因为jQuery对象没有得到传递,外部通过jQuery.methodye

调用不来其中方法。

(funtion(){

}(jQuery);用于存放开发插件的代码,执行其中代码DOM不一定存在,直接自动执行DOM操作代码请小心使用

随机推荐

  1. RESTful 接口调试分享利器 restc

    这个工具来自于https://elemefe.github.io/restc/  这里对Abp进行了一次封装 1.在项目中添加nuget包 Abp.Web.Api.Restc 2.在项目Abp模块的D ...

  2. IOS(SystemConfiguration&rpar;框架中关于测试连接网络状态相关方法

    1. 在SystemConfiguration.famework中提供和联网相关的function, 可用来检查网络连接状态. 2. SC(SystemConfiguration)框架中关于测试连接网 ...

  3. 使用 Override 和 New 关键字进行版本控制

    使用 Override 和 New 关键字进行版本控制 C# 语言经过专门设计,以便不同库中的基类与派生类之间的版本控制可以不断向前发展,同时保持向后兼容. 这具有多方面的意义.例如,这意味着在基类中 ...

  4. TexturePacker的使用

    一.为什么要使用TexturePacker 这是应为我们做的游戏最终要运行在Android手机或者苹果手机上,而Android或者ios系统使用的是OpenGL ES来渲染.所以我们要针对OpenGL ...

  5. Codeforces 328A-IQ Test&lpar;数列&rpar;

    A. IQ Test time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  6. &lbrack;LeetCode&rsqb;&lbrack;Python&rsqb;15:3Sum

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 15: 3Sumhttps://oj.leetcode.com/problem ...

  7. c&plus;&plus; 深浅拷贝

    对于普通类型的对象来说,它们之间的复制是很简单的,例如:int a=88;int b=a;而类对象与普通对象不同,类对象内部结构一般较为复杂,存在各种成员变量.下面看一个类对象拷贝的简单例子. #in ...

  8. 拓展Unity3D编辑器

    /*** * * 编辑器创建新窗口,并设置窗口布局 * * * * * */ using System.Collections; using System.Collections.Generic; u ...

  9. linux----------wdcp(是一款集成的linux环境)中的各种坑。

    1.刚买的空间客服给安装了wdcplinux,结果上去一看PHP是5.2版本的,这不是搞笑嘛.然后就有了下面的升级: 复制这条命令回车然后敲Y就可以: wget http://soft.itbulu. ...

  10. 【日常训练】 Help Greg the Dwarf(CodeForces-99E)

    题意与分析 题意是这样的,问你把一个长方形从一个L型街道的一端移动到另一端,固定了该长方形的长,求他的最大宽. 这种问题我是第一次独立解决(以前都是抱队友大腿QAQ),现在没法子只好自己硬着头皮做,看 ...