jQuery的ajax、事件、工具、动画（4-4）

jQuery

jQuery两种调用方式

  • $.ajax(); $.Callbacks相同都是定义在jQuery身上的属性
  • $('#mydiv').css(); jQuery执行的结果再调用方法

jQuery的ajax

  • [x] ajax是一个相对独立的方法，不用jQuery的实例去调用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $.ajax({
        url: 'json.txt?_=' + Math.random(), //到哪里去拿数据的接口
        async: false, //同步
        type: 'get/post',
        dataType: 'text/json/jsonp',
        success: function(data) { //data就是获取回来的数据
            console.log(data);
        }
    });//jQuery直接调用方法

jQuery的事件

  • [x] on事件 ( 原生的这样写会覆盖 ) 

    1
    2
    3
    4
    5
    6
    7
    8
    var $mydiv = $('#mydiv');
     $mydiv.on("click",function(){
     	console.log(this);//this->是原生对象
     });
     $mydiv.on("click",function(){//与原生不同，不会覆盖上一个click事件
     	console.log(2);
     });

  • [x] 其他事件

    1
    2
    3
    4
    5
    6
    $mydiv.on("mouseover",function(){
     	console.log("mouseover");
     });
     $mydiv.on("mouseout",function(){
     	console.log("mouseout");
     });

jQuery常用工具

  • [x] each （两种定义方法map和each的原理一样，只是支持返回值）

  • [ ] each定义在jQuery对象上的

    • 循环选择器获取的jQuery集合的结果
      1
      2
      3
      $('#mydiv').each(function(index, item) {
          console.log(item);
      });

  • [ ] each定义在jQuery这个类的属性身上

    • 循环数组、类数组，对象中的项
      1
      2
      3
      4
      5
      6
      7
      8
      9
          $.each($('#mydiv'), function(index, item) {
      	    console.log(item);//这种方式与上面$('#mydiv').each结果相同
      });
      $.each(document.getElementsByTagName('*'), function(index, item) {
      	console.log(item);
      });
      $.each({name:"li",age:7}, function(index, item) {
      	console.log(item);//index-->key   item-->value
      });item

  • [x] makeArray （类数组–>数组）

1
$.makeArray(document.getElementsByTagName("div"));

jQuery的动画

  • [x] animate

    1
    2
    3
    4
    5
    6
    7
    $("#mydiv").stop().animate({},300,'linear/swing',function (){})
    $("#mydiv").on('click', function() {
        $(this).stop().animate({ top: 600, height: 50, width: 50 }, 1000, function() {
        $(this).css("background", "red");
        })
    });

  • [x] 出现、消失

    • [ ] hide(300).show(300).toggle()
    • [ ] fadeOut(‘slow’).fadeIn(‘fast’).fadeToggle(2000)
    • [ ] slideUp(500).slideDown(500).slideToggle()

  • [x] 延迟、停止

    • [ ] delay()
    • [ ] finish()
      • 停止当前正运行动画，达到上一动画目标值再开启下一个新动画
    • [ ] stop();
      • 停止当前正运行动画，开启下一个新动画
        1
        2
        3
        $("#mydiv").fadeOut(500).fadeIn(500);
        $("#mydiv").fadeOut(500).stop().fadeIn(500);//下次动fadeIn以fadeout的开始位置接着执行（还没开始），
        $("#mydiv").fadeOut(500).finish().fadeIn(500);//下次动画fadeIn以fadeOut的结束结果接着执行