jQuery事件代理、事件的绑定和取消、事件的命名空间、事件的合成、jQuery动画

jQuery事件代理

• 把事件绑定在父元素上, 父元素做代理监听事件, 当子元素触发事件时, 事件默认冒泡给父元素,父元素响应事件, jQuery的事件处理函数中的this就是触发事件的子元素.
• jQuery对象.on(事件类型, 子元素, 事件处理函数);

$("ul").on('click', 'li', function () {
    // console.log($(this));
    $(this).css('background', 'blue');
});
// 后添加的子元素同样可以使用该事件
$('ul').append($('<li>newli</li>'));

事件的取消绑定

// 事件的绑定
$('div').on('click mouseenter', function () {
    
    
    console.log('click mouseenter');
});
// 事件的取消
$('div').off('mouseenter'); // 取消mouseenter事件
$('div').off(); // 取消所有的事件

事件命名空间

$('div').on('click.zs', function () {
    
    
    console.log('click--zs');
});
$('div').on('click.ls', function () {
    
    
    console.log('click--ls');
});

$('div').off('click.zs'); // 取消click.zs,保留click.ls

事件绑定one()

// one(): 绑定的事件只执行一次. jQuery对象.one(事件类型, 事件函数)
$('div').one('click', function () {
    console.log('one');
});

// 利用事件的取消实现one效果
$('div').on('click', function () {
    console.log('click');
    $('div').off();
});

事件合成hover()

// jQuery对象.hover(鼠标进入事件函数, 鼠标离开事件函数); 相当于写了mouseenter和mouseleave事件
$("div").on({
    mouseenter: function () {
        console.log('mouseenter');
    },
    mouseleave: function () {
        console.log('mouseleave');
    }
});

$('div').hover(
    function () {
        console.log('hover-enter');
    },
    function () {
        console.log('hover-leave');
    }
);

jQuery动画

show(), hide(), toggle()

// jQuery对象.show(speed, easing, callback): 显示元素
// jQuery对象.hide(speed, easing, callback): 隐藏元素
// jQuery对象.toggle(speed, easing, callback): 显示/隐藏切换
// speed: fast(200ms) normal(400ms) slow(600ms) 数字(单位ms)
// easing: swing(开头结尾慢, 中间快) linear(线性匀速)
// callback: 回调函数
$('button').eq(0).click(function () {
    $('div').show();
});
$('button').eq(1).click(function () {
    $('div').hide();
});
$('button').eq(2).click(function () {
    $('div').toggle();
});
$('button').eq(3).click(function () {
    $('div').show(1000);
});
$('button').eq(4).click(function () {
    $('div').hide(1000);
});
$('button').eq(5).click(function () {
    $('div').toggle(1000, function () {
        console.log('toggle--done');
    });
});

fadeIn(), fadeOut(), fadeTo(), fadeToggle()

// jQuery对象.fadeIn(speed, callback): 淡入
// jQuery对象.fadeOut(speed, callback): 淡出
// jQuery对象.fadeToggle(speed, callback): 淡入/淡出切换
// jQuery对象.fadeTo(speed, 透明度, callback): 淡到多少
$('button').eq(0).click(function () {
    $('div').fadeIn();
});
$('button').eq(1).click(function () {
    $('div').fadeOut();
});
$('button').eq(2).click(function () {
    $('div').fadeToggle();
});
$('button').eq(3).click(function () {
    $('div').fadeTo(1000, 0.5);
});
$('button').eq(4).click(function () {
    $('div').fadeIn(1000);
});
$('button').eq(5).click(function () {
    $('div').fadeOut(1000);
});
$('button').eq(6).click(function () {
    $('div').fadeToggle(1000, function () {
        console.log('toggle');
    });
});

slideDown(), slideUp(), slideToggle()

// jQuery对象.slideDown(speed, callback): 下滑展开
// jQuery对象.slideUp(speed, callback): 上滑收起
// jQuery对象.slideToggle(speed, callback): 下滑展开/上滑收起切换
$('button').eq(0).click(function () {
    
    
    $('div').slideDown();
});
$('button').eq(1).click(function () {
    
    
    $('div').slideUp();
});
$('button').eq(2).click(function () {
    
    
    $('div').slideToggle();
});
$('button').eq(3).click(function () {
    
    
    $('div').slideToggle(1000, function () {
    
    
        console.log('done');
    });
});

animate()

// jQuery对象.animate(动画终点参数json, 动画时间, 运动曲率, 回调函数)
// 动画终点参数json: {left: 300, top: 300}
// 动画时间: 单位ms
// 运动曲率: swing, linear
// 回调函数: 动画完成后调用

// 基本动画: 一次运动一个参数
// $('div').click(function () {
//     // $(this).animate({ left: 300 });
//     // $(this).animate({ left: 300 }, 2000);
//     $(this).animate({ left: 300 }, 2000, 'linear', function () {
//         $(this).css('background', 'red');
//     });
// });

// 动画累加,累减
// $('div').click(function () {
//     $(this).animate({ left: '+=100' }, 2000);
// });

// 多重运动
// $('div').click(function () {
//     $(this).animate({ left: 300, top: 500 }, 1000);
// });

// 链式运动
// $('div').click(function () {
//     $(this)
//         .animate({ left: 500 }, 1000)
//         .animate({ top: 500 }, 1000)
//         .animate({ left: 0 }, 1000)
//         .animate({ top: 0 }, 1000);
// });

// 同一元素动画会排队
$('div').animate({ left: 500 }, 1000);
$('div').animate({ top: 500 }, 1000);

stop(), finish(), delay()

$('div')
    .delay(1000)
    .animate({ left: 500 }, 1000)
    .animate({ top: 500 }, 1000)
    .animate({ left: 0 }, 1000)
    .animate({ top: 50 }, 1000);

// stop(是否清除动画序列, 是否瞬间完成当前动画): 停止动画
$('button').eq(0).click(function () {
    $('div').stop(false, false);
});
$('button').eq(1).click(function () {
    $('div').stop(false, true);
});
$('button').eq(2).click(function () {
    $('div').stop(true, false);
});
$('button').eq(3).click(function () {
    $('div').stop(true, true);
});

// finish(): 完成动画
$('button').eq(4).click(function () {
    $('div').finish();
});

// delay(): 延迟动画

// is()
$('div').is(':animated')

ajax()

/*
$.ajax({
    url: '', // 请求地址
    type: '', // 请求类型 get/post, 默认get
    cache: 布尔值, // 是否缓存,
    data: '', // 参数
    dataType: '', // 服务器返回额数据类型 xml,json,html,script,jsonp,text
    timeout: '', // 设置超时时间, 单位毫秒
    success: function (res) {}, // 成功的回调函数
    error: function (err) {}, // 错误的回调函数
    complete: function () {} // 完成的回调
});
*/
$.ajax({
    
    
    url: 'bendi.json',
    type: 'get',
    success: function (res) {
    
    
        console.log(res);
        console.log(typeof res);
    }
});


// $.get()
// $.get(url, 参数, 回调函数);
$.get('bendi.json', function (res) {
    
    
    console.log(res);
});

// $.post()
// $.post(url, 参数, 回调函数);
$.post('bendi.json', function (res) {
    
    
    console.log(res);
});