jQuery事件与动画

jQuery绑定事件的方法

//以click事件为例
$('.box').click( function(){
    console.log(1)
})

• .on()

$('.box').on('click', function(){
    console.log(1)
})

$('.box').on('click.hello', function(){
    console.log(1)
})

为其传递数据时只需在事件类型后添加json数据即可

$('.box').on('click', {name: 'aaa'}, function(){
    console.log(1)
})

• 解绑事件.off()

$('.box').on('click.hello', function(){
    console.log(1)
})
$('.box').off('click.hello')

• .one()
  用法与.on()相同，但是只执行一次
• trigger()

$('ul').eq(0).trigger(click)

为绑定的元素执行所有处理程序和行为，不一定是浏览器默认事件，也可以是自定义事件

• .bind() 不常用
• 直接绑定

$('.box li').on('click', function(){
  var str = $(this).text()
  $('#wrap').text(str)
})

• 使用事件代理

$('.box li').on('click', 'li',function(){
  var str = $(this).text()
  $('#wrap').text(str)
})

jQuery动画

常用方法

• .hide()隐藏

$('#book').hide(300, 'linear', function() {
    alert('Animation complete.');
  })

• .show()展示
  用法与.hide()相同
• .toggle()切换
  用法与.hide()相同
• 渐进
  • .fadeIn()淡入

  $('#book').fadeIn('slow', function() {
  // Animation complete
  });
  

  • .fadeOut()淡出
    .fadeOut( [duration ] [, easing ] [, complete ] )
    用法与.fadeIn()相同
  • .fadeTo()调整匹配元素的透明度

  $('#book').fadeTo('slow', 0.5, function() {
    // Animation complete.
  });
  

  • .fadeToggle()淡入淡出切换

  $("button:first").click(function() {
    $("p:first").fadeToggle("slow", "linear");
  });
  

• 滑动
  • .slideDown()

  $('#book').slideDown('slow', function() {
     // Animation complete.
  });
  

  • .slideUp()
    .slideUp( [duration ] [, easing ] [, complete ] )
    用法与.slideDown()相同
  • .slideToggle()
    用滑动动画显示或隐藏一个匹配元素

  $('#clickme').click(function() {
   $('#book').slideToggle('slow', function() {
   // Animation complete.
   });
  });
  

动画队列

• jQuery动画是异步
• 在jQuery中所有的动画都是依赖.animate()执行的
• 当你需要执行很多个动画效果时，这些动画效果函数会被放进一个名为‘fx’的队列，按照先入先出的顺序执行。非动画函数不会被放入，并且会先于动画函数执行。

常用方法

• .animate()
  .animate（properties [，duration] [，easing] [，complete]）
  properties是一个CSS属性和值的对象

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

• clearQueue()清除队列中未执行的动画

• .finish()
  停止当前动画，并清除动画队列中未完成的动画，并展示最终完成动画队列

• .stop()
  停止当前正在运行的动画
  .stop( [clearQueue ] [, jumpToEnd ] )
  参数均为boolean类型

Ajax

• jQuery.ajax( [settings ] )

$.ajax({
    url: 'xxx.php',
    method: 'GET',
    data: {
        name: 'Byron',
        age: 24,
        sex: 'Male'
    }
}).done(function(result){

    console.log(result);

}).fail(function(jqXHR, textStatus){

    consloe.log(textStatus);

});

async：默认设置下，所有请求均为异步请求（也就是说这是默认设置为 true ）。如果需要发送同步请求，请将此选项设置为 false

beforeSend：请求发送前的回调函数，用来修改请求发送前jqXHR对象，此功能用来设置自定义 HTTP 头信息，等等。该jqXHR和设置对象作为参数传递

cache：如果设置为 false ，浏览器将不缓存此页面。注意: 设置cache为 false将在 HEAD和GET请求中正常工作。它的工作原理是在GET请求参数中附加"_={timestamp}"

context：这个对象用于设置Ajax相关回调函数的上下文。 默认情况下，这个上下文是一个ajax请求使用的参数设置对象

data：发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后面，POST请求作为表单数据

headers：一个额外的{键:值}对映射到请求一起发送。此设置会在beforeSend 函数调用之前被设置 ;因此，请求头中的设置值，会被beforeSend 函数内的设置覆盖

method：HTTP 请求方法 (比如："POST", "GET ", "PUT"，1.9之前使用“type”)

• jQuery.get( [settings] ) / jQuery.post( [settings ] )处理GEt和POST请求

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

dataType：从服务器返回的预期的数据类型。默认：智能猜测（xml, json, script, 或 html）

$.get('/ajax.json').done(function(ret){
        console.log(ret)
})

• jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )
  相当于在$.ajax()内将dataType设置为json
• .load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素中
  $('#result').load('ajax/test.html')