python前端jQuery综合应用

知识点预习
1.幻灯片的制作2.json数据格式及ajax

01- 轮播图-获取相关元素[mw_shl_code=applescript,true]var $slide = $('.slide'), // 轮播区域的div

$slideList = $('.slide_list'), // 轮播列表
$lis = $('.slide_list li'),// 轮播中的四个li
$prevBtn = $('.prev'), // 上一张按钮
$nextBtn = $('.next'), // 下一张按钮
$pointsList = $('.points');// 小圆点列表[/mw_shl_code]

2- 轮播图-添加小圆点[mw_shl_code=applescript,true]// 1.根据图片张数动态添加小圆点
for (var i = 0; i < iPicCount; i++) {
$pointsList.append('<li></li>');
}
// 1.1 默认第0个小点高亮
$pointsList.children(':first').addClass('active');
[/mw_shl_code]
轮播图-监听小圆点事件 - 下一张[mw_shl_code=applescript,true] // 2.动画前的准备除了第一张 其它 都放到760的位置
$lis.not(':first').css({ 'left': 760 });

var iNowIndex = 0; // 即将要上显示的这一张
var iPreviousIndex = 0; // 上一张,也是要让位置的这一张

// 2.1 点击小圆点进行图片移动动画
$pointsList.delegate('li', 'click', function () {

    // 记录即将要显示的图片索引
    iNowIndex = $(this).index();
    // 动画移动
    fnMoveAnmation();
});

// 公共函数
function fnMoveAnmation() {
          // 小圆点高亮处理
          $pointsList.children().eq(iNowIndex).addClass('active').siblings().removeClass('active');
    // 显示下一张
    if (iNowIndex > iPreviousIndex) {

        // 让当前显示的图片从0移动到左边-760为要出现的让位置
        $lis.eq(iPreviousIndex).animate({ 'left': -760 });
        // 让要出现的图片从原本的760位置移动到0的位置
        $lis.eq(iNowIndex).animate({ 'left': 0 });

        // 记录这一次显示的索引 作为下一次动画时要让位置的索引
        iPreviousIndex = iNowIndex;
    } 

}[/mw_shl_code]

轮播图-小圆点事件 - 上一张[mw_shl_code=applescript,true] xxxxxxxxxx else { // 显示上一张 // 动画从左边向右移动的准备 $lis.eq(iNowIndex).css({ 'left': -760 }); // 让当前显示的图片从0移动到右边760位置 $lis.eq(iPreviousIndex).animate({ 'left': 760 }); // 让要显示的图片从原本-760的位置移动到0的位置 $lis.eq(iNowIndex).animate({ 'left': 0 }); // 记录这一次显示的索引 作为下一次动画时要让位置的索引 iPreviousIndex = iNowIndex; }[/mw_shl_code]
轮播图-跨越式点击的BUG解决
重复点击同一个小点时bug
[mw_shl_code=applescript,true] function fnMoveAnmation() {
// 如果重复点击小点什么也不做
if (iNowIndex == iPreviousIndex) return;[/mw_shl_code]
[mw_shl_code=applescript,true]从右向左边滑动时
//解决跨越式点击BUG :抢先一步 将要出现的图片 丢到他该出现的位置 760
$lis.eq(iNowIndex).css({"left":760})

从左向右边滑动时
//解决跨越式点击BUG :抢先一步 将要出现的图片 丢到他该出现的位置 -760
$lis.eq(iNowIndex).css({"left":-760}) [/mw_shl_code]
轮播图-监听左边按钮的点击
[mw_shl_code=applescript,true]// 3.点击左边上一张按钮
$prevBtn.click(function () {

    iNowIndex--;
    fnMoveAnmation();
})

[/mw_shl_code]
轮播图-右侧按钮的点击
[mw_shl_code=applescript,true] // 4.点击右边下一张按钮
    $nextBtn.click(function () {  
        iNowIndex++;
        fnMoveAnmation();
    })[/mw_shl_code]
fnMoveAnmation函数的调整
[mw_shl_code=applescript,true]// 如果最后一张后继续点击右边按钮,应该向左移动的方式来显示第0张
        if (iNowIndex > iPicCount - 1) {
            // 下一张时:最后一张的下一张是第0张
            iNowIndex = 0;
            // 动画从右边向左移动的准备
            $lis.eq(iNowIndex).css({ 'left': 760 });
            // 让当前显示的图片从0移动到左边-760为要出现的让位置
            $lis.eq(iPreviousIndex).animate({ 'left': -760 });

    } else if (iNowIndex < 0) { // 如果是第0张时继续点击左边上一张按钮

        // 上一张时:第0张的上一第应该是最后一张
        iNowIndex = iPicCount - 1;
        // 动画从左边向右移动的准备
        $lis.eq(iNowIndex).css({ 'left': -760 });
        // 让当前显示的图片从0移动到右边760位置
        $lis.eq(iPreviousIndex).animate({ 'left': 760 });
            } else {
            // 把正常情况下的左右滚动代码放在else里面
            }[/mw_shl_code]

轮播图- 左右按钮快速点击的bug
动画还没有执行完，点击左右按钮什么事件也不做
bIsAnmation = false; // 是否正在动画中
左右按钮点击事件中加入如果动画中直接返回
进入fnMoveAnmation里时把bIsAnmation改为true
最后的动画执行完成的回调中把bIsAnmation再改回为false;
轮播图-自动播放
[mw_shl_code=applescript,true] // 自动滚动
function fnAutoMove() {
iNowIndex++;
fnMoveAnmation();
}

// 5.定时器自动滚动
var oTimer = setInterval(fnAutoMove, 3000);[/mw_shl_code]

轮播图-鼠标事件
[mw_shl_code=applescript,true]//6.鼠标的事件
$slide.mouseenter(function () {
clearInterval(oTimer);
});

$slide.mouseleave(function () {
    oTimer = setInterval(fnAutoMove, 3000);
})

[/mw_shl_code]
JSON概述和书写格式
JSON是 JavaScript Object Notation 的首字母缩写，单词的意思是JavaScript对象表示法，这里说的JSON指的是类似于JavaScript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的XML数据格式。
JSON格式的数据：
[mw_shl_code=applescript,true]{
"name":"tom",
"age":18
}[/mw_shl_code]
与JavaScript对象不同的是，JSON数据格式的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。
[mw_shl_code=applescript,true]["tom",18,"programmer"][/mw_shl_code]
3- ajax加载JSON数据
$.ajax使用方法
常用参数：
1、url 请求地址2、type 请求方式，默认是'GET'，常用的还有'POST' 3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html' 4、data 设置发送给服务器的数据 5、success 设置请求成功后的回调函数 6、error 设置请求失败后的回调函数 7、async 设置是否异步，默认值是'true'，表示异步

以前的写法：
[mw_shl_code=applescript,true]$.ajax({
url: 'js/data.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
success:function(data){
alert(data.name);
},
error:function(){
alert('服务器超时，请重试！');
}
});
[/mw_shl_code]
新的写法(推荐)：
[mw_shl_code=applescript,true]$.ajax({
url: 'js/data.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
})
.done(function(data) {
alert(data.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});

    // data.json里面的数据： {"name":"tom","age":18}[/mw_shl_code]

ajax天天生鲜局部刷新
准备好要请求的JSON数据
请求后先验证数据，再写功能代码

15- jsonp的原理
ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了script标签可以跨域链接资源的特性。jsonp和ajax原理完全不一样，不过jQuery将它们封装成同一个函数。

16- jsonp跨域请求
[mw_shl_code=applescript,true] xxxxxxxxxx $.ajax({ url:'js/data.js', type:'get', dataType:'jsonp', jsonpCallback:'fnBack'}).done(function(data){ alert(data.name);}).fail(function() { alert('服务器超时，请重试！');});// data.js里面的数据： fnBack({"name":"tom","age":18});[/mw_shl_code]
仿360搜索
[mw_shl_code=applescript,true] $(function(){
$('#txt01').keyup(function(){
var sVal = $(this).val();
$.ajax({
url:'https://sug.so.360.cn/suggest',
type:'get',
dataType:'jsonp',
//给服务器传递参数
data: {word: sVal}
})
.done(function(data){
var aData = data.s;
$('.list').empty();
for(var i=0;i<aData.length;i++)
{
var $li = $('<li>'+ aData +'</li>');
$li.appendTo($('.list'));
}
})
})
})[/mw_shl_code]