jQuery中的$.fx与$.fn

￡神魔★判官ぃ 2022-02-24 13:44 283阅读 0赞

## $.fx ##

`$.fx`是jQuery的特效。  
如果使用显示，滑动，淡入淡出，动画等，可以用`$.fx.stop`停止动画。

## $.fn ##

`$.fn`是jQuery的方法的命名空间`function namespace`。  
添加到`$.fn`上的成员，会对用`$(selector)`宣导的每一个jQuery实例有效(可调用)。

通常使用两个方法进行`编写jQuery插件|jQuery扩展`  
`jQuery.extend(obj)` 相当于扩展类层次的静态成员。  
`Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.`  
将对象的内容合并到jQuery原型上，以提供新的jQuery实例方法。

`jQuery.fn.extend(target, obj1, ..., objN)` 扩展对象层次的实例成员。  
`Merge the contents of two or more objects together into the first object.`  
将两个或多个对象的内容合并到第一个目标对象中。

查看源码可知：`$.fn`就是jQuery的原型`$.prototype`。  
所以向`$.fn`添加成员就是向jQuery对象添加可调用的成员。

jQuery.fn = jQuery.prototype = {
    	constructor: jQuery,
    	init: ...
    }

## code ##

*  `$.extend(object)`

$.asdfg
    undefined
    $.extend({asdfg: function() {console.log("类层次的静态方法");}});
    ƒ (e,t){return new b.fn.init(e,t,r)}
    $.asdfg()
    类层次的静态方法

*  `$.fn.extend(target, obj1, ..., objN)`

$("p:first").instancehhh
    undefined
    $.fn.instancehhh = function() {console.log("对象层次的方法 - prototype");};
    ƒ () {console.log("对象层次的方法 - prototype");}
    $("p:first").instancehhh()
    对象层次的方法 - prototype

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]: /images/20220224/d918624bd0b44617a5c05a845fde251c.png