python鍓嶇jQuery缁煎悎搴旂敤

Posted 2021-01-25

鏍囩锛?a href='http://www.mamicode.com/so/1/for' title='for'>for   婊戝姩   ogr   鐐瑰嚮浜嬩欢   璇诲彇鏁版嵁   tom   active   timer   瑙ｅ喅   

鐭ヨ瘑鐐归涔?br/>1.骞荤伅鐗囩殑鍒朵綔2.json鏁版嵁鏍煎紡鍙奱jax

01- 杞挱鍥?鑾峰彇鐩稿叧鍏冪礌[mw_shl_code=applescript,true]var $slide = $(鈥?slide鈥?, // 杞挱鍖哄煙鐨刣iv

$slideList = $(鈥?slide_list鈥?, // 杞挱鍒楄〃
$lis = $(鈥?slide_list li鈥?,// 杞挱涓殑鍥涗釜li
$prevBtn = $(鈥?prev鈥?, // 涓婁竴寮犳寜閽?br/>$nextBtn = $(鈥?next鈥?, // 涓嬩竴寮犳寜閽?br/>$pointsList = $(鈥?points鈥?;// 灏忓渾鐐瑰垪琛╗/mw_shl_code]

2- 杞挱鍥?娣诲姞灏忓渾鐐筟mw_shl_code=applescript,true]// 1.鏍规嵁鍥剧墖寮犳暟鍔ㄦ€佹坊鍔犲皬鍦嗙偣
for (var i = 0; i < iPicCount; i++) {
$pointsList.append(鈥?lt;li></li>鈥?;
}
// 1.1 榛樿绗?涓皬鐐归珮浜?br/>$pointsList.children(鈥?first鈥?.addClass(鈥榓ctive鈥?;
[/mw_shl_code]
杞挱鍥?鐩戝惉灏忓渾鐐逛簨浠?- 涓嬩竴寮燵mw_shl_code=applescript,true] // 2.鍔ㄧ敾鍓嶇殑鍑嗗闄や簡绗竴寮?鍏跺畠 閮芥斁鍒?60鐨勪綅缃?br/>$lis.not(鈥?first鈥?.css({ 鈥榣eft鈥? 760 });

var iNowIndex = 0; // 鍗冲皢瑕佷笂鏄剧ず鐨勮繖涓€寮?var iPreviousIndex = 0; // 涓婁竴寮?涔熸槸瑕佽浣嶇疆鐨勮繖涓€寮?
// 2.1 鐐瑰嚮灏忓渾鐐硅繘琛屽浘鐗囩Щ鍔ㄥ姩鐢?$pointsList.delegate(鈥榣i鈥? 鈥榗lick鈥? function () {

    // 璁板綍鍗冲皢瑕佹樉绀虹殑鍥剧墖绱㈠紩
    iNowIndex = $(this).index();
    // 鍔ㄧ敾绉诲姩
    fnMoveAnmation();
});

// 鍏叡鍑芥暟
function fnMoveAnmation() {
          // 灏忓渾鐐归珮浜鐞?          $pointsList.children().eq(iNowIndex).addClass(鈥榓ctive鈥?.siblings().removeClass(鈥榓ctive鈥?;
    // 鏄剧ず涓嬩竴寮?    if (iNowIndex > iPreviousIndex) {

        // 璁╁綋鍓嶆樉绀虹殑鍥剧墖浠?绉诲姩鍒板乏杈?760涓鸿鍑虹幇鐨勮浣嶇疆
        $lis.eq(iPreviousIndex).animate({ 鈥榣eft鈥? -760 });
        // 璁╄鍑虹幇鐨勫浘鐗囦粠鍘熸湰鐨?60浣嶇疆绉诲姩鍒?鐨勪綅缃?        $lis.eq(iNowIndex).animate({ 鈥榣eft鈥? 0 });

        // 璁板綍杩欎竴娆℃樉绀虹殑绱㈠紩 浣滀负涓嬩竴娆″姩鐢绘椂瑕佽浣嶇疆鐨勭储寮?        iPreviousIndex = iNowIndex;
    } 

}[/mw_shl_code]

杞挱鍥?灏忓渾鐐逛簨浠?- 涓婁竴寮燵mw_shl_code=applescript,true] xxxxxxxxxx else { // 鏄剧ず涓婁竴寮? // 鍔ㄧ敾浠庡乏杈瑰悜鍙崇Щ鍔ㄧ殑鍑嗗 $lis.eq(iNowIndex).css({ 鈥榣eft鈥? -760 }); // 璁╁綋鍓嶆樉绀虹殑鍥剧墖浠?绉诲姩鍒板彸杈?60浣嶇疆 $lis.eq(iPreviousIndex).animate({ 鈥榣eft鈥? 760 }); // 璁╄鏄剧ず鐨勫浘鐗囦粠鍘熸湰-760鐨勪綅缃Щ鍔ㄥ埌0鐨勪綅缃? $lis.eq(iNowIndex).animate({ 鈥榣eft鈥? 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]浠庡彸鍚戝乏杈规粦鍔ㄦ椂
//瑙ｅ喅璺ㄨ秺寮忕偣鍑籅UG :鎶㈠厛涓€姝?灏嗚鍑虹幇鐨勫浘鐗?涓㈠埌浠栬鍑虹幇鐨勪綅缃?760
$lis.eq(iNowIndex).css({"left":760})

浠庡乏鍚戝彸杈规粦鍔ㄦ椂
//瑙ｅ喅璺ㄨ秺寮忕偣鍑籅UG :鎶㈠厛涓€姝?灏嗚鍑虹幇鐨勫浘鐗?涓㈠埌浠栬鍑虹幇鐨勪綅缃?-760
$lis.eq(iNowIndex).css({"left":-760}) [/mw_shl_code]
杞挱鍥?鐩戝惉宸﹁竟鎸夐挳鐨勭偣鍑?br/>[mw_shl_code=applescript,true]// 3.鐐瑰嚮宸﹁竟涓婁竴寮犳寜閽?br/>$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]// 濡傛灉鏈€鍚庝竴寮犲悗缁х画鐐瑰嚮鍙宠竟鎸夐挳,搴旇鍚戝乏绉诲姩鐨勬柟寮忔潵鏄剧ず绗?寮?        if (iNowIndex > iPicCount - 1) {
            // 涓嬩竴寮犳椂:鏈€鍚庝竴寮犵殑涓嬩竴寮犳槸绗?寮?            iNowIndex = 0;
            // 鍔ㄧ敾浠庡彸杈瑰悜宸︾Щ鍔ㄧ殑鍑嗗
            $lis.eq(iNowIndex).css({ 鈥榣eft鈥? 760 });
            // 璁╁綋鍓嶆樉绀虹殑鍥剧墖浠?绉诲姩鍒板乏杈?760涓鸿鍑虹幇鐨勮浣嶇疆
            $lis.eq(iPreviousIndex).animate({ 鈥榣eft鈥? -760 });

    } else if (iNowIndex < 0) { // 濡傛灉鏄0寮犳椂缁х画鐐瑰嚮宸﹁竟涓婁竴寮犳寜閽?
        // 涓婁竴寮犳椂:绗?寮犵殑涓婁竴绗簲璇ユ槸鏈€鍚庝竴寮?        iNowIndex = iPicCount - 1;
        // 鍔ㄧ敾浠庡乏杈瑰悜鍙崇Щ鍔ㄧ殑鍑嗗
        $lis.eq(iNowIndex).css({ 鈥榣eft鈥? -760 });
        // 璁╁綋鍓嶆樉绀虹殑鍥剧墖浠?绉诲姩鍒板彸杈?60浣嶇疆
        $lis.eq(iPreviousIndex).animate({ 鈥榣eft鈥? 760 });
            } else {
            // 鎶婃甯告儏鍐典笅鐨勫乏鍙虫粴鍔ㄤ唬鐮佹斁鍦╡lse閲岄潰
            }[/mw_shl_code]

杞挱鍥? 宸﹀彸鎸夐挳蹇€熺偣鍑荤殑bug
鍔ㄧ敾杩樻病鏈夋墽琛屽畬锛岀偣鍑诲乏鍙虫寜閽粈涔堜簨浠朵篃涓嶅仛
bIsAnmation = false; // 鏄惁姝ｅ湪鍔ㄧ敾涓?br/>宸﹀彸鎸夐挳鐐瑰嚮浜嬩欢涓姞鍏ュ鏋滃姩鐢讳腑鐩存帴杩斿洖
杩涘叆fnMoveAnmation閲屾椂鎶奲IsAnmation鏀逛负true
鏈€鍚庣殑鍔ㄧ敾鎵ц瀹屾垚鐨勫洖璋冧腑鎶奲IsAnmation鍐嶆敼鍥炰负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.榧犳爣鐨勪簨浠?br/>$slide.mouseenter(function () {
clearInterval(oTimer);
});

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

[/mw_shl_code]
JSON姒傝堪鍜屼功鍐欐牸寮?br/>JSON鏄?JavaScript Object Notation 鐨勯瀛楁瘝缂╁啓锛屽崟璇嶇殑鎰忔€濇槸JavaScript瀵硅薄琛ㄧず娉曪紝杩欓噷璇寸殑JSON鎸囩殑鏄被浼间簬JavaScript瀵硅薄鐨勪竴绉嶆暟鎹牸寮忥紝鐩墠杩欑鏁版嵁鏍煎紡姣旇緝娴佽锛岄€愭笎鏇挎崲鎺変簡浼犵粺鐨刋ML鏁版嵁鏍煎紡銆?br/>JSON鏍煎紡鐨勬暟鎹細
[mw_shl_code=applescript,true]{
"name":"tom",
"age":18
}[/mw_shl_code]
涓嶫avaScript瀵硅薄涓嶅悓鐨勬槸锛孞SON鏁版嵁鏍煎紡鐨勫睘鎬у悕绉板拰瀛楃涓插€奸渶瑕佺敤鍙屽紩鍙峰紩璧锋潵锛岀敤鍗曞紩鍙锋垨鑰呬笉鐢ㄥ紩鍙蜂細瀵艰嚧璇诲彇鏁版嵁閿欒銆?br/>[mw_shl_code=applescript,true]["tom",18,"programmer"][/mw_shl_code]
3- ajax鍔犺浇JSON鏁版嵁
$.ajax浣跨敤鏂规硶
甯哥敤鍙傛暟锛?br/>1銆乽rl 璇锋眰鍦板潃2銆乼ype 璇锋眰鏂瑰紡锛岄粯璁ゆ槸鈥楪ET鈥橈紝甯哥敤鐨勮繕鏈夆€楶OST鈥? 3銆乨ataType 璁剧疆杩斿洖鐨勬暟鎹牸寮忥紝甯哥敤鐨勬槸鈥榡son鈥樻牸寮忥紝涔熷彲浠ヨ缃负鈥榟tml鈥? 4銆乨ata 璁剧疆鍙戦€佺粰鏈嶅姟鍣ㄧ殑鏁版嵁 5銆乻uccess 璁剧疆璇锋眰鎴愬姛鍚庣殑鍥炶皟鍑芥暟 6銆乪rror 璁剧疆璇锋眰澶辫触鍚庣殑鍥炶皟鍑芥暟 7銆乤sync 璁剧疆鏄惁寮傛锛岄粯璁ゅ€兼槸鈥榯rue鈥橈紝琛ㄧず寮傛

浠ュ墠鐨勫啓娉曪細
[mw_shl_code=applescript,true]$.ajax({
url: 鈥榡s/data.json鈥?
type: 鈥楪ET鈥?
dataType: 鈥榡son鈥?
data:{鈥榓a鈥?1}
success:function(data){
alert(data.name);
},
error:function(){
alert(鈥樻湇鍔″櫒瓒呮椂锛岃閲嶈瘯锛佲€?;
}
});
[/mw_shl_code]
鏂扮殑鍐欐硶(鎺ㄨ崘)锛?br/>[mw_shl_code=applescript,true]$.ajax({
url: 鈥榡s/data.json鈥?
type: 鈥楪ET鈥?
dataType: 鈥榡son鈥?
data:{鈥榓a鈥?1}
})
.done(function(data) {
alert(data.name);
})
.fail(function() {
alert(鈥樻湇鍔″櫒瓒呮椂锛岃閲嶈瘯锛佲€?;
});

    // data.json閲岄潰鐨勬暟鎹細 {"name":"tom","age":18}[/mw_shl_code]

ajax澶╁ぉ鐢熼矞灞€閮ㄥ埛鏂?br/>鍑嗗濂借璇锋眰鐨凧SON鏁版嵁
璇锋眰鍚庡厛楠岃瘉鏁版嵁锛屽啀鍐欏姛鑳戒唬鐮?/p>

15- jsonp鐨勫師鐞?br/>ajax鍙兘璇锋眰鍚屼竴涓煙涓嬬殑鏁版嵁鎴栬祫婧愶紝鏈夋椂鍊欓渶瑕佽法鍩熻姹傛暟鎹紝灏遍渶瑕佺敤鍒癹sonp鎶€鏈紝jsonp鍙互璺ㄥ煙璇锋眰鏁版嵁锛屽畠鐨勫師鐞嗕富瑕佹槸鍒╃敤浜唖cript鏍囩鍙互璺ㄥ煙閾炬帴璧勬簮鐨勭壒鎬с€俲sonp鍜宎jax鍘熺悊瀹屽叏涓嶄竴鏍凤紝涓嶈繃jQuery灏嗗畠浠皝瑁呮垚鍚屼竴涓嚱鏁般€?/p>

16- jsonp璺ㄥ煙璇锋眰
[mw_shl_code=applescript,true] xxxxxxxxxx $.ajax({ url:鈥榡s/data.js鈥? type:鈥榞et鈥? dataType:鈥榡sonp鈥? jsonpCallback:鈥榝nBack鈥榼).done(function(data){ alert(data.name);}).fail(function() { alert(鈥樻湇鍔″櫒瓒呮椂锛岃閲嶈瘯锛佲€?;});// data.js閲岄潰鐨勬暟鎹細 fnBack({"name":"tom","age":18});[/mw_shl_code]
浠?60鎼滅储
[mw_shl_code=applescript,true] $(function(){
$(鈥?txt01鈥?.keyup(function(){
var sVal = $(this).val();
$.ajax({
url:鈥?a href="https://sug.so.360.cn/suggest" rel="nofollow">https://sug.so.360.cn/suggest鈥?
type:鈥榞et鈥?
dataType:鈥榡sonp鈥?
//缁欐湇鍔″櫒浼犻€掑弬鏁?br/>data: {word: sVal}
})
.done(function(data){
var aData = data.s;
$(鈥?list鈥?.empty();
for(var i=0;i<aData.length;i++)
{
var $li = $(鈥?lt;li>鈥? aData +鈥?lt;/li>鈥?;
$li.appendTo($(鈥?list鈥?);
}
})
})
})[/mw_shl_code]