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.#/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]