jQuery动画+ajax

淩亂°似流年 2023-06-05 08:16 21阅读 0赞

##### 一、 jQuery动画 #####

> 除过`fadeTo()`方法，其他下面所有方法：无论显示效果是否有变化（有可能当前元素是显示状态用户又按下一个调用show()方法的按钮），回调函数立刻执行（而不是等待响应时间后执行）

###### 1. `show(speed,easing,fn)` ######

> `speed`有三个指定速度：`slow、normal、fast`或表示动画的毫秒数  
> `fn`在动画完成时执行的函数。  
> `easing`用来指定切换效果，默认是`swing`，可写`linear`  
> 当调用该方法的对象有宽和高时，是以宽高逐渐扩大的。

###### 2. `hide(speed,easing,fn)` ######

> `speed`有三个指定速度：`slow、normal、fast`或表示动画的毫秒数  
> `fn`在动画完成时执行的函数  
> `easing`用来指定切换效果，默认是`swing`（摇摆），可写`linear`(匀速)
> 
> > 当调用该方法的对象有宽和高时，是以宽高逐渐缩小的（即宽和高逐渐变小，对象的子元素的位置也会相应的发生变化）。

###### 3. `toggle(speed,easing,fn)` ######

> `show()`与`hide()`的结合体，当该对象显示时调用该方法会隐藏，反之。

###### 4. `slideDown(speed,easing,fn)` ######

> 通过高度变化动态地显示所有匹配元素  
> 三个参数介绍与1,2相同

###### 5. `slideUp(speed,easing,fn)` ######

> 通过高度变化动态地隐藏所有匹配元素

###### 6. `slideToggle(speed,easing,fn)` ######

> `slideDown`和`slideUp`的结合体。当该对象显示时调用该方法会隐藏，反之。

###### 7. `fadeIn(speed,easing,fn)` ######

> 通过不透明度的变化来实现所有匹配元素的淡入效果。

###### 8. `fadeOut(speed,easing,fn)` ######

> 通过不透明度的变化来实现所有匹配元素的淡出效果。

###### 9. `fadeToggle(speed,easing,fn)` ######

> 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。  
> 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

###### 10.`fadeTo(speed,opacity,easing,fn)` ######

>  *  把所有匹配元素的不透明度以渐进方式调整到指定的不透明度（即第二个参数的值为临界值）。
>  *  无论显示效果是否有变化，回调函数在动画结束后（即都会等待一小段时间）都会调用
>  *  该方法不会让元素`display:none`，哪怕`opacity:0`，即元素不会消失，只会变化其透明度。

###### 11. `animate(params,speed,easing,fn)` ######

> `params`：包含一组样式属性和动画结束其取值的集合  
> 第一个参数若某一属性取值为百分数，需要用引号引起来。  
> 属性可带引号也可不带引号  
> 属性取值可为`toggle`、`show`、`hide`

###### 12. `stop(是否清空队列，是否让当前正在执行的动画立即完成)` ######

> 第一个参数：若为true，则立即结束所有动画，即清空动画队列。最终状态是清空动画队列时的状态。  
> 第二个参数：若为true，则立即执行完当前正在执行的动画，但对动画队列上的下一个动画没有影响  
> 若第一个参数为true,第二个参数为true,则立即执行完当前正在执行的动画且动画队列上的后续动画不再执行。  
> 当什么参数也不写时，默认是参数为`false,false`的情况

###### 13. `delay(duration,queueName)` ######

> 在一个动画执行完后延迟`duration`毫秒后执行动画队列中的下一个动画  
> `duration`为延迟时间  
> `queueName`为动画队列

###### 14. `finish(queue)` ######

>  *  `queue`为停止动画队列中的名称
>  *  该方法与`stop(true,true)`类似。但是与其不同的是，该方法不仅清除动画队列且样式变为所有动画的最终值。
>  *  当`finish`后面还有动画时，并不会影响其在`finish`执行完后执行

###### 二、 ajax ######

> https://blog.csdn.net/hwhsong/article/details/84070918  
> https://www.cnblogs.com/zhangruiqi/p/7880642.html  
> https://www.sojson.com/blog/121.html  
> https://blog.csdn.net/dk2290/article/details/78857632

###### 1. `$.get(url,data,cb,type)` ######

> 1.  url：目标地址
> 2.  data：待发送的key:value参数
> 3.  cb：载入成功时的回调函数
> 4.  type：返回内容格式：xml,html,script,json,text,\_default

###### 2. `$.post(url,data,cb,type)` ######

###### 3. `$.getJson(url,data,cb)`（JSONP方式（通过查资料。。。自己并未试验成功。。）） ######

> 1.  get`JSON`形式的数据
> 2.  在jQuery 1.2中，可以通过使用jsonp形式的回调函数来加载其他网域的JSON数据。如 “myurl?callback=?”。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 注意：此行以后的代码将在这个回调函数执行前执行。

###### 4. `$.getScript(url,cb)` ######

> jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。

//跨域调用
    jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){ 
      $("#go").click(function(){ 
        $(".block").animate( {  backgroundColor: 'pink' }, 1000)
          .animate( {  backgroundColor: 'blue' }, 1000);
      });
    });

//同域调用
    $.getScript("test.js", function(){ 
      alert("Script loaded and executed.");
    });

###### 5. `$.ajax({})` ######

> method：post、get  
> url  
> dataType：xml,text,json,jsonp,html,script  
> jsonpCallback：“回调函数名称”（在发送请求前定义该函数，否则找不到。且该函数在Ajax请求自身的回调函数前进行调用）。该名称会取代jQuery自动生成的随机函数名称  
> jsonp：这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如\{jsonp:‘onJsonPLoad’\}会导致将"onJsonPLoad=?"传给服务器。  
> success：请求成功回调函数  
> error：请求失败回调函数  
> complete：请求无论成功或失败都会调用  
> async：是否异步  
> contentType：发送信息至服务器的内容编码

$.ajax({ 
            method:"get",
            url:"http://sax.sina.com.cn/newimpress?adunitid=PDPS000000047325&rotate_count=36",
            dataType:"jsonp",
            jsonpCallback:"callback_fn",
            success:function (res){ 
            //res 成功返回值
            //console.log(JSON.parse(res));
            console.log(res);
            },
            error:function (res){ 
            //res 失败返回值
                console.log(222)
            }
            });