jquery $.fn $.fx是什么意思有什么用

下面是关于jquery $.fn $.fx的详细讲解。

1. $.fn

1.1 意义

$.fn是jQuery的原型对象，它是所有jQuery对象的共享原型。通过给$.fn对象添加成员，可以为jQuery对象添加方法和属性，jQuery插件就是通过这种方式来实现的。

1.2 用途

通过给$.fn对象添加方法，我们就可以自定义jQuery插件，从而拓展jQuery的功能。比如，我们可以通过添加$.fn对象中的方法来实现自定义的动画，比如打字机效果，照片墙等等。

1.3 示例说明

比如，我想实现一个在页面中随机移动的小球，就可以使用$.fn对象来定义一个名为RandomMove的插件，代码如下：

// 将页面中的所有小球添加一个名为 RandomMove 的插件
$.fn.RandomMove = function () {
  return this.each(function () {
    var $this = $(this);
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    var top = randomNumber(0, windowHeight - $this.height());
    var left = randomNumber(0, windowWidth - $this.width());

    $this.css({
      position: 'absolute',
      top: top + 'px',
      left: left + 'px'
    }).animate({
      top: randomNumber(0, windowHeight - $this.height()) + 'px',
      left: randomNumber(0, windowWidth - $this.width()) + 'px'
    }, 3000, 'linear', function () {
      $this.RandomMove();
    });
  });
};

// 生成指定范围的随机数（包括最小值，不包括最大值）
function randomNumber(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

它的使用方法非常简单：

// 获取所有小球元素并添加 RandomMove 插件
$('.ball').RandomMove();

这样，我们就可以在页面中使用这个插件，给小球动画效果添加随机移动的功能，让页面变得更加有趣。

2. $.fx

2.1 意义

$.fx是jQuery中的一个动画函数，它用于在页面元素上添加动画效果。通过$.fx对象，我们可以自定义各种动画效果，并添加到jQuery中。

2.2 用途

通过自定义$.fx函数，我们可以实现一些炫酷的动画效果，比如翻转、旋转、渐变等。

2.3 示例说明

比如，我想实现一个翻转动画，就可以使用$.fx.step来自定义这个动画效果，代码如下：

// 自定义翻转动画
$.fx.step.flip = function (fx) {
  var $this = $(fx.elem);
  var deg = fx.now;

  $this.css({
    transform: 'rotateY(' + deg + 'deg)'
  });
};

// 点击按钮触发翻转动画
$('.flip-button').click(function () {
  $('.flip-box').animate({
    flip: '+=180'
  }, {
    duration: 1000,
    step: function (now, fx) {
      $(this).css('transform', 'rotateY(' + now + 'deg)');
    }
  });
});

这个示例中，我们首先使用了$.fx.step对象来自定义翻转动画，在$.fx.step.flip函数中，我们使用了CSS3的rotateY来实现翻转的效果。

然后我们使用了$('.flip-box').animate()函数来触发这个动画效果，在animate函数中，我们设置了flip: '+=180'，表示每次转动180度。除此之外，我们还设置了动画的时间为1000毫秒，并且设置了step函数来触发动画效果，最终实现了一个基于jQuery的翻转动画效果。