9 - jQuery 中的动画、事件、AJAX

一、动画

// jq的动画：
// 1. animate()
// $(selector).animate(target, duration,easing动画效果, after)
let $btn = $('.btn');
$btn.click(function () {
  // 这个事件函数中，如果你要用 this，就不要用箭头函数
  $('.animate').animate({
    width: 400,
    height: 400
  }, 2000)
});
// 2. stop() 停止元素当前正在执行的动画，不管它是否执行完；（用来清除动画），一般用来动画开始前先清除之前的动画；
$btn.click(function () {
  // 这个事件函数中，如果你要用 this，就不要用箭头函数
  $('.animate').animate({
    width: 400,
    height: 400
  }, 2000);
  setTimeout(() => {
    $('.animate').stop();
  }, 1000);
});
// 3. finish() 结束当前动画，忽略当前动画的时间，直接到终点；
$btn.click(function () {
  // 这个事件函数中，如果你要用 this，就不要用箭头函数
  $('.animate').animate({
    width: 400,
    height: 400
  }, 2000);
  setTimeout(() => {
    $('.animate').finish();
  }, 800);
});

二、事件

// jq 绑定事件有两种方式：
// 1. 把事件名中的 on 去掉，变成 jq 对应的方法，事件函数以回调的形式传给对应的方法；如原生的 onclick 事件，在 jq 中变成 click(事件函数) 方法
let $btn2 = $('.btn2');
/*$btn2.click(function () {
  console.log(this); // this 还是绑定当前事件的元素，并且原生的元素对象；
  $(this).css({
    backgroundColor: 'red'
  });
});*/
// 2. jq 中提供了一个 on 方法，on 方法有两个参数，第一个是去掉 on 的事件名，第二个参数是事件函数
$btn2.on('click', function () {
  console.log(this); // this 是绑定当前事件的元素对象（原生）
});
// 3. off() 方法，解绑事件（移除事件）
// $btn2.off('click');
// 4. trigger() 用代码触发事件执行；
$btn2.trigger('click');

三、AJAX

// ajax 方法是 jQ 的静态方法；ajax 定义在 jQ 自己身上，没有定义在原型上，只有 jQuery 自己能调用
$.ajax({
  url: 'json/data.json', // 接口
  method: 'GET', // http method 请求方式，默认'GET'
  async: true, // 是否异步，默认值 true,表示异步；
  dataType: 'json', // 数据类型，因为 jq 的 ajax 帮我们格式化数据，所以告诉它数据类型
  data: {
    id: '17',
    price: 1000
  }, // POST 请求的参数，是发送给服务器的数据
  success (data) {
    // 如果 ajax 请求成功会调用这个函数；这个 data 就是请求回来的数据，并且jq会帮我们处理成对象，不用我们再 JSON.parse()
    console.log(data);
  },
  error (err) { 
    // 如果 ajax 请求失败，会调用这个函数
    console.log(err);
  }
});

四、each

// jq 的 each 可以用来遍历数组和对象
// 1. 遍历一个数组：
let ary = [1, 2, 3, 4, 5];
$.each(ary, function (index, item) {
  // console.log(index, item);
});
// 2. 遍历一个对象
let obj = {
  name: 'mabin',
  age: 18,
  title: 'Commander'
};
$.each(obj, function (key, value) {
  // console.log(key, value);
});
// 3. jq 隐式调用 each 方法
$('.header li').click(function () {
  // $('.header li') 获取来的是一个集合，jq 默认调用 each 方法，给集合中的每一个都绑定事件；
  console.log($(this).index());
});

五、原型挂载原理

(function () {
    var version = '1.1.3',
        jQuery = function (selector, context) {
            return new jQuery.prototype.init(selector, context);
        };
    // 函数有三种角色，其中一种是对象，把 jQuery 当成一个对象，为这个对象增加一个 fn 属性，这个属性的值是 jQuery 的原型；
    jQuery.fn = jQuery.prototype = {
        jquery: version,
        constructor: jQuery, // 给原型重定向后需要重新制定 constructor 属性
        // .... 很多方法
    };
    // 给 jQuery 自身和 jQuery 的原型增加一个属性 extend，值都是一个函数；
    jQuery.extend = jQuery.fn.extend = function () {
        // .....
    }; // extend 是用来给 jQuery 自身或者原型上增加方法的
    var init = jQuery.fn.init = function () {
        // ...
    };
    init.prototype = jQuery.fn; // 让 init 的原型也指向了 jQuery 的原型；此时，init 的实例同样可以访问 jQuery 的原型，此时 init 的实例相当于是 jQuery 的原型；
    window.jQuery = window.$ = jQuery;
})();