day 033 JQuery进阶3

今天是近期前端学习的最后一天，讲了一个幻灯片的实例制作，以及json,ajax及jsonp的初步了解。

幻灯片实例

$(function(){
    // 1.图片每两秒钟向左滑动一张
    // 2.点击向左箭头，图片向右滑动一张
    // 3.点击向右箭头，图片向左滑动一张
    // 4.圆点和图片一一对应，点击当前圆点左边的圆点，图片向右滑动，点击当前圆点右边的圆点，图片向左滑动
    // 5.鼠标放在幻灯片上，幻灯片停止滑动，移开后，恢复滑动

    // 点击产生的移动过动画是否开始
    var bIsAnim = false;
    console.log("yes");

    // 由于新的切换效果
    // 要求初始时，第 0 张图片显示在left：0的位置
    // 第1-5显示在left：760 的位置

    // 获取当前所有图片的li对象
    var $lis = $('.slidelist li');
    // 排除第一个li 剩下的1-5张图片的li
    var $li1_5 = $lis.not(':first');
    // 第1-5张图片显示在left:760的位置
    $li1_5.css({left:760});


    // 获取图片的数量
    var length = $lis.length;

    for (var i=0; i<length; i++){
        // 循环生成小圆点
        var $newLi = $('<li>');

        if (i==0){
            // 第一个小圆点高亮
            $newLi.addClass('current');
        }
        // 把小圆点添加到列表里
        $('.points').append($newLi);
    }

    var nowIndex = 0;// 当前的索引
    var clickIndex = 0;// 点击的圆点的索引


    // 注意设置圆点点击事件，放在生成小圆点后
    $('.points li').click(function(){
        // 记录点击的索引
        clickIndex = $(this).index();
        // 移动
        move();
    })

    // 左箭头点击
    $('.leftarrow').click(function(){
        // 如果动画开始，就不允许再次执行点击的逻辑
        if (bIsAnim){
            return
        }
        bIsAnim = true;

        // clickIndex 每次-1
        clickIndex--;
        if (clickIndex<0){
            clickIndex==length-1
        }
        // 一直向右移动
        move2(-1);        
    })

    // 右键按点击
    $('.rightarrow').click(function(){
        // 点击动画开始，bIsAnm置为true
        // 如果动画开始，就不允许再次执行点击的逻辑
        if(bIsAnim){
            return;
        }
        bIsAnim = true; 

        // 点右箭头 clickIndex每次加1
        clickIndex++;
        if(clickIndex>length-1){
            clickIndex = 0;
        }
        // 这里一直向左移动
        move2(1)
    })

    // 每两秒向左移动一次
    var timeId = setInterval(function(){
        // 相当于每两秒点击一次右箭头
        $('.rightarrow').click();
    }, 2000)

    // 鼠标移动上去和移动出去
    $('.slide-con').hover(
        function(){
            //mouseenter
            // 取消定时器
            clearInterval(timeId)
        },
        function(){
            // mouseleave
            // 开启定时器
            timeId = setInterval(function(){
                //相当于每2秒 点击一次右箭头
                $('.rightarrow').click();
            }, 2000)
        }
    )

    // 图片移动
function move(){
    if (clickIndex==nowIndex){
        // 点击当前圆点 什么都不做
    }
    // 当前点击的圆点的索引，如果大于当前的索引，向左移动
    // 当前点击的圆点的索引，如果小于当前的做引，向右移动
    if (clickIndex>nowIndex){
        // 向左移动
        move2(1);
    }else if(clickIndex<nowIndex){
        // 向右移动
        move2(-1);
    }
}

//移动方法
// direction = 1 向左移动
// direction = -1 向右移动
function move2(direction){
    // 获取点击的Li
    var clickli = $lis.eq(clickIndex);
    // 获取当前的li
    var nowli = $lis.eq(nowIndex);

    // 向左移动
    clickli.css({left:760*direction});// 把要向左移动的图片 放到760的位置
    clickli.animate({left:0}, animStop);// 向左移动到显示的位置
    nowli.animate({left:-760*direction}, animStop);//当前图片移动出去

    //移动完成后，更新当前的索引值
    nowIndex = clickIndex

    // 小圆点高亮
    $('.points li').eq(nowIndex).addClass('current').siblings().removeClass('current');

}

    // 动画结束执行的方法
    function animStop(){
        // 把bIsAnim置为false 可以下一次点击
        bIsAnim = false;
    }

})

json

• json，JavaScript Object Notation的缩写，JavaScript对象表示法，是类似于JavaScript对象的一种数据格式
• 前后台传输的数据都是字符串，json是一种有格式的字符串，还有其他格式如xml等
• JavaScript自定义对象

var $oMan = {
    name:'tom',
    age:16,
    talk:function(){
        alert('巴拉拉小魔仙')
    }
}

• json格式的数据

{
    "name":"tom",
    "age":18
}

• 与js对象不同的是，json数据格式的属性名称和字符串值需要加双引号，用单引号或者不用引号会导致读取数据错误，可以在百度上搜索“json格式验证”等关键字使用网页小工具验证json文件格式是否正确
• json的另外一种数据格式是数组，和JavaScript中的数组字面量相同
  ["jerry","michael",15]

ajax

• 是一种可以让JavaScript发送HTTP请求，与后台通信，获取数据和信息的技术。

异步

• ajax通讯过程是异步的

局部刷新

• ajax可以实现局部刷新，也叫无刷新，是指整个页面不刷新，只是局部刷新。ajax可以自己发送HTTP请求，不用通过浏览器的地址栏。所以页面不会整体刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面的局部刷新，如，百度搜索框每输入一个字符都会局部刷新建议搜索项

同源策略

• ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时出于安全考虑的，可以通过jsonp技术解决

使用方法

• 常用参数：

  1. url ：请求地址
  2. type ：请求方式，默认是‘get’,也可以改成’post’
  3. dataType ：设置返回的数据格式，常用的时’json’格式，可以设置成’html’
  4. data : 设置发送给服务器的数据
  5. success : 设置请求成功后的回调函数
  6. error ： 设置请求失败后的回调函数
  7. async ： 设置是否异步，默认值是’true’,表示异步

  // ajax 本身不支持file的本地获取
  <script>
      $.ajax({
          url:"http://192.168.47.79:8888/data.json",
          type:'get',
          dataType:'json',
          data:{'name':"xiaoming"},// 传输给服务器的数据
          success:function(data){
              console.log("请求成功");
              console.log(data.name);
          },
          error:function(){
              console.log("请求失败");
          }
      })
  </script>
  

jsonp

• 是一种让Ajax可以跨域请求数据的技术
• Ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术
• 需要更改的知识在Ajax格式代码中将dataType:’json’改成dataType:’jsonp’

<script>
        $.ajax({
            url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",//请求数据的服务器地址
            type:'get',
            dataType:'jsonp',// 返回数据的类型为json
            succecc:function(data){
                console.log("请求成功");
                console.log(data.s);
            },
            error:function(){
                console.log("请求失败");
            },
            json:"cb"// 百度的限制
        })

    </script>