jQuery animation ajax event-JS Tutorial-php.cn

jQuery animation ajax event

小云云

Release： 2018-01-01 10:21:51

Original

1172 people have browsed it

This article mainly brings you an article on jQuery’s animated ajax event (explanation with examples). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

No more nonsense, just go to the code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>
  //ajax
  $.ajax({
   url:&#39;json/test.txt?_=&#39;+Math.random(),
   type:"get",
   dataType:&#39;json&#39;,//"text"、"html"、"jsonp"
   success:function(data){

   }
  })
  //事件
  var $box = $("#box")
  $box.on(&#39;click&#39;,function(){
   console.log(1)//this:当前元素（JS原生对象） $(this)
  })
  $box.on(&#39;click&#39;,function(){
   console.log(2)
  })
  $box.on(&#39;mouseout&#39;,function(){
   console.log(3)
  })
  //工具
  //each:jQuery中有两个each(也有两个map,和each的原理一样，只是可以支持返回值)
  //循环选择器获取到的jQuery集合中的每一项
  $(&#39;p&#39;).each(function(index,value){

  })
  //循环数组、类数组、对象中的每一项
  $.each([12,23,34],function(index,value){

  })
  //$.makeArray ===>相当于listToArray

  //动画
  //$(&#39;#box&#39;).animate({left:xxx,top:xxx,...},duration,"linear/swing",function(){})
  //stop:结束之前正在运行的动画，开启下一个新的动画(结束上一个动画，下一个动画是紧接着当前位置开始运动的)
  //delay:延迟
  //finish:结束上一个动画并且让元素快速的到达目标位置，在开始下一个动画
  /*
   fadeIn(淡入) fadeOut(淡出) fadeToggle
   show hide toggle
   slideUp slideDown slideToggle

  */
 </script>
</body>
</html>

Copy after login

Related recommendations:

Ajax events and get and post request instructions in jquery

Parsing the calling sequence of ajax events_PHP tutorial

Parsing ajax Event calling sequence

The above is the detailed content of jQuery animation ajax event. For more information, please follow other related articles on the PHP Chinese website!