python前端jQuery綜合應(yīng)用

知識點預習
1.幻燈片的制作2.json數(shù)據(jù)格式及ajax

01- 輪播圖-獲取相關(guān)元素[mw_shl_code=applescript,true]var $slide = $('.slide'), // 輪播區(qū)域的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.根據(jù)圖片張數(shù)動態(tài)添加小圓點
for (var i = 0; i < iPicCount; i++) {
$pointsList.append('<li></li>');
}
// 1.1 默認第0個小點高亮
$pointsList.children(':first').addClass('active');
[/mw_shl_code]
輪播圖-監(jiān)聽小圓點事件 - 下一張[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();
});

// 公共函數(shù)
function fnMoveAnmation() {
          // 小圓點高亮處理
          $pointsList.children().eq(iNowIndex).addClass('active').siblings().removeClass('active');
    // 顯示下一張
    if (iNowIndex > iPreviousIndex) {

        // 讓當前顯示的圖片從0移動到左邊-760為要出現(xiàn)的讓位置
        $lis.eq(iPreviousIndex).animate({ 'left': -760 });
        // 讓要出現(xiàn)的圖片從原本的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 :搶先一步 將要出現(xiàn)的圖片 丟到他該出現(xiàn)的位置 760
$lis.eq(iNowIndex).css({"left":760})

從左向右邊滑動時
//解決跨越式點擊BUG :搶先一步 將要出現(xiàn)的圖片 丟到他該出現(xiàn)的位置 -760
$lis.eq(iNowIndex).css({"left":-760}) [/mw_shl_code]
輪播圖-監(jiān)聽左邊按鈕的點擊
[mw_shl_code=applescript,true]// 3.點擊左邊上一張按鈕
$prevBtn.click(function () {

    iNowIndex--;
    fnMoveAnmation();
})

[/mw_shl_code]
輪播圖-右側(cè)按鈕的點擊
[mw_shl_code=applescript,true] // 4.點擊右邊下一張按鈕
    $nextBtn.click(function () {  
        iNowIndex++;
        fnMoveAnmation();
    })[/mw_shl_code]
fnMoveAnmation函數(shù)的調(diào)整
[mw_shl_code=applescript,true]// 如果最后一張后繼續(xù)點擊右邊按鈕,應(yīng)該向左移動的方式來顯示第0張
        if (iNowIndex > iPicCount - 1) {
            // 下一張時:最后一張的下一張是第0張
            iNowIndex = 0;
            // 動畫從右邊向左移動的準備
            $lis.eq(iNowIndex).css({ 'left': 760 });
            // 讓當前顯示的圖片從0移動到左邊-760為要出現(xiàn)的讓位置
            $lis.eq(iPreviousIndex).animate({ 'left': -760 });

    } else if (iNowIndex < 0) { // 如果是第0張時繼續(xù)點擊左邊上一張按鈕

        // 上一張時:第0張的上一第應(yīng)該是最后一張
        iNowIndex = iPicCount - 1;
        // 動畫從左邊向右移動的準備
        $lis.eq(iNowIndex).css({ 'left': -760 });
        // 讓當前顯示的圖片從0移動到右邊760位置
        $lis.eq(iPreviousIndex).animate({ 'left': 760 });
            } else {
            // 把正常情況下的左右滾動代碼放在else里面
            }[/mw_shl_code]

輪播圖- 左右按鈕快速點擊的bug
動畫還沒有執(zhí)行完，點擊左右按鈕什么事件也不做
bIsAnmation = false; // 是否正在動畫中
左右按鈕點擊事件中加入如果動畫中直接返回
進入fnMoveAnmation里時把bIsAnmation改為true
最后的動畫執(zhí)行完成的回調(diào)中把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對象的一種數(shù)據(jù)格式，目前這種數(shù)據(jù)格式比較流行，逐漸替換掉了傳統(tǒng)的XML數(shù)據(jù)格式。
JSON格式的數(shù)據(jù)：
[mw_shl_code=applescript,true]{
"name":"tom",
"age":18
}[/mw_shl_code]
與JavaScript對象不同的是，JSON數(shù)據(jù)格式的屬性名稱和字符串值需要用雙引號引起來，用單引號或者不用引號會導致讀取數(shù)據(jù)錯誤。
[mw_shl_code=applescript,true]["tom",18,"programmer"][/mw_shl_code]
3- ajax加載JSON數(shù)據(jù)
$.ajax使用方法
常用參數(shù)：
1、url 請求地址2、type 請求方式，默認是'GET'，常用的還有'POST' 3、dataType 設(shè)置返回的數(shù)據(jù)格式，常用的是'json'格式，也可以設(shè)置為'html' 4、data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù) 5、success 設(shè)置請求成功后的回調(diào)函數(shù) 6、error 設(shè)置請求失敗后的回調(diào)函數(shù) 7、async 設(shè)置是否異步，默認值是'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('服務(wù)器超時，請重試！');
}
});
[/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('服務(wù)器超時，請重試！');
});

    // data.json里面的數(shù)據(jù)： {"name":"tom","age":18}[/mw_shl_code]

ajax天天生鮮局部刷新
準備好要請求的JSON數(shù)據(jù)
請求后先驗證數(shù)據(jù)，再寫功能代碼

15- jsonp的原理
ajax只能請求同一個域下的數(shù)據(jù)或資源，有時候需要跨域請求數(shù)據(jù)，就需要用到j(luò)sonp技術(shù)，jsonp可以跨域請求數(shù)據(jù)，它的原理主要是利用了script標簽可以跨域鏈接資源的特性。jsonp和ajax原理完全不一樣，不過jQuery將它們封裝成同一個函數(shù)。

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('服務(wù)器超時，請重試！');});// data.js里面的數(shù)據(jù)： 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.#/suggest',
type:'get',
dataType:'jsonp',
//給服務(wù)器傳遞參數(shù)
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]