第8章，用jQuery打造個性網站網站結構文件結構 images文件夾用於存放將要用到的圖片 styles文件夾用於存放CSS樣式表，個人更傾向於使用CSS文件夾 scripts文件夾用於存放jQuery腳本，個人更傾向於使用JS文件夾存放所有的js及jQuery腳本編寫CSS樣式推薦首先編 ...

第8章，用jQuery打造個性網站

網站結構

文件結構

images文件夾用於存放將要用到的圖片 styles文件夾用於存放CSS樣式表，個人更傾向於使用CSS文件夾 scripts文件夾用於存放jQuery腳本，個人更傾向於使用JS文件夾存放所有的js及jQuery腳本

編寫CSS樣式

推薦首先編寫全局樣式，接著編寫可大範圍內重用的樣式，最後編寫細節樣式，這樣根據CSS最近優先原則，可以較容易地對網站進行從整體到細節樣式的定義

第9章，jQuery Mobile

jQuery Mobile主要特性

1、基於jQuery構建 2、相容絕大部分手機平臺 3、輕量級的庫 4、模塊化結構 5、HTML5標記驅動的配置 6、漸進增強原則 7、響應設計 8、強大的Ajax導航系統 9、易用性 10、支持觸摸和滑鼠事件 11、統一的UI組件 12、強大的主題化框架

其他框架

1、jqMobi（http://jqmobi.com） 2、Sencha Touch（http://sencha.com） 3、Zepto.js（http://zeptojs.com/）

第10章，jQuery各個版本的變化

講解jQuery的發展史，瞭解瞭解

第11章，jQuery性能優化和技巧

jQuery性能優化

1、使用最新版的jQuery類庫 2、使用合適的選擇器（1、儘量使用id選擇器，2、儘量給選擇器指定上下文） 3、緩存對象（即使用一個變數將需要重覆使用的jQuery對象存下來，以避免多次獲取） 4、迴圈時的DOM操作（減少DOM操作） 5、數組方式使用jQuery對象（儘量使用for或while迴圈來處理jQuery對象，而不是使用$.each()）註：檢查jQuery對象是否存在的方式應該使用length屬性 6、事件代理 7、將代碼轉化為jQuery插件 8、使用join()來拼接字元串，替代使用“+”來拼接 9、合理利用HTML5的Data屬性 10、儘量使用原生的JavaScript方法 11、壓縮JavaScript

jQuery技巧

1、禁用右鍵

$(document).ready(function() {
    $(document).bind("contextmenu",function(e) {
        return false;
    });
});

2、新視窗打開頁面

$(document).ready(function() {
    // ex 1 : href = "http://" 的超鏈接將會在新視窗打開鏈接
    $('a[href^="http://"]').attr('target',"_blank");

    // ex 2 : rel = "external" 的超鏈接將會在新視窗打開鏈接
    $('a[rel$="external"]').click(function() {
        this.target = "_blank";
    });
});

使用：

<a href="http://www.cssrain.cn" rel="external">open link </a>

3、判斷瀏覽器類型

$(document).ready(function() {
    // Firefox2 and above
    if($.browser.mozilla && $.browser.version >= "1.8"){
        // do something
    }
    // Safari
    if($.browser.safari){
        // do something
    }

    // Chrome
    if($.browser.chrome){
        // do something
    }

    // Opera
    if($.browser.opera){
        // do something
    }

    // IE6 and below
    if($.browser.msie && $.browser.version <= 6){
        // do something
    }

    //anything above IE 6
    if($.browser.msie && $.browser.version > 6){
        // do something
    }
});

4、輸入框文字獲取和失去焦點

$(document).ready(function() {
    $("input.text1").val("Enter your search text here");
    textFill($('input.text1'));
});
function textFill(input){ // input focus text function
    var originalvalue = input.val();
    input.focus(function() {
        if($.trim(input.val()) == originalvalue){
            input.val('');
        }
    }).blur(function() {
        if($.trim(input.val()) == ""){
            input.val(originalvalue);
        }
    });
}

5、返回頭部滑動動畫

jQuery.fn.scrollTo = function(speed) {
    var targetOffset = $(this).offset().top;
    $('html.body').stop().animate({scrollTop : targetOffset},speed);
    return this;
};
// use
$("#goheader").click(function() {
    $("body").scrollTo(500);
    return false;
});

6、獲取滑鼠位置

$(document).ready(function() {
    $(document).mousemove(funtion(e) {
        $("#XY").html("X : " + e.pageX + " | Y : " + e.pageY);
    });
});

7、判斷元素是否存在

$(document).ready(function() {
    if($('#id').length){
        // do something
    }
});

8、點擊div也可跳轉

$('div').click(function() {
    window.location = $(this).find("a").attr("href");
    return false;
});

9、根據瀏覽器大小添加不同樣式

$(document).ready(function() {
    function checkWindowSize() {
        if($(window).width() > 1200){
            $('body').addClass('large');
        }else{
            $('body').removeClass('large');
        }
    }
    $(window).resize(checkWindowSize);
});

10、設置div在屏幕中央

$(document).ready(function() {
    jQuery.fn.center = function() {
        this.css("position","absolute");
        this.css("top",($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
        this.css("left",($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
        return this;
    }

    // use
    $("#XY").center();
});

11、創建自己的選擇器

$(document).ready(function() {
    $.extend($.expr[':'],{
        moreThen500px : function(a) {
            return $(a).width() > 500;
        }
    });
    $('.box:moreThen500px').click(function() {
        // ...
    });
});

12、關閉所有動畫效果

$(document).ready(function() {
    jQuery.fx.off = true;
});

13、檢測滑鼠右鍵和左鍵

$(document).ready(function() {
    $('#XY').mousedown(function(e) {
        alert(e.which); // 1 = 滑鼠左鍵，2 = 滑鼠中鍵，3 = 滑鼠右鍵
    });
});

14、回車提交表單

$(document).ready(function() {
    $("input").keyup(function(e) {
        if(e.which == 13){
            alert("回車提交表單");
        }
    });
});

15、設置全局Ajax參數

$('#load').ajaxStart(function() {
    showLoading(); // 顯示loading
    disableButtons(); // 禁用按鈕
});
$('#load').ajaxComplete(function() {
    hideLoading(); // 隱藏loading
    enableButtons(); // 啟用按鈕
});

16、獲取選中的下拉框

$('#someElement').find('option:selected');
$('#someElement option:selected');

17、切換覆選框

var tog = false;
$('button').click(function() {
    $('input[type=checkbox]').attr('checked',!tog);
    tog = !tog;
});

18、使用siblings()選擇同輩元素

// 不這樣做
$('#nav li').click(function() {
    $('#nav li').removeClass('active');
    $(this).addClass('active');
});
// 替代做法
$('#nav li').click(function() {
    $(this).addClass('active')
            .siblings().removeClass('active');
});

19、個性化鏈接

$(document).ready(function() {
    $("a[href$='pdf']").addClass("pdf");
    $("a[href$='zip']").addClass("zip");
    $("a[href$='psd']").addClass("psd");
});

20、在一段時間之後自動隱藏或關閉元素

// 這是1.3.2中我們使用setTimeout來實現的方式
setTimeout(function() {
    $('div').fadeIn(400);
},3000);
// 而在1.4之後的版本可以使用delay()這一功能來實現的方式
$('div').slideUp(300).delay(3000).fadeIn(400);

21、使用Firefox或Firebug來記錄事件日誌

// $('#someDiv').log('div')
jQuery.log = jQuery.fn.log = function(msg) {
    if(console){
        console.log("%s : %o",msg,this);
    }
    return this;
};

22、為任何與選擇器相匹配的元素綁定事件

// 為table裡面的td元素綁定click事件，不管td元素是一直存在還是動態創建的
// jQuery 1.4.2之前使用的方式
$('table').each(function() {
    $('td',this).live('click',function() {
        $(this).toggleClass("hover");
    });
});
// jQuery 1.4.2 使用方式
$('table').delegate('td','click',function() {
    $(this).toggleClass('hover');
});
// jQuery 1.7.1使用方式
$('table').on('click','td',function() {
    $(this).toggleClass('hover');
});

23、使用CSS鉤子

查看http://github.com/brandonaaron/jquery-cssHooks 24、$.proxy()的使用使用回調方法的缺點之一就是當執行類庫中的方法之後，上下文對象被設置到另外一個元素，如：

<div id="panel" style="display:none">
    <button>Colse</button>
</div>

執行下列代碼

$('#panel').fadeIn(function() {
    $('#panel button').click(function() {
        $(this).fadeOut();
    });
});

buton元素會消失，而不是panel元素消失，可以使用$.proxy()解決

$('#panel').fadeIn(function() {
    // Using $.proxy()
    $('#panel button').click($.proxy(function() {
        // this指向 #panel
        $(this).fadeOut();
    },this));
});

25、限制Text-Area域中的字元個數

jQuery.fn.maxLength = function(max) {
    this.each(function() {
        var type = this.tagName.toLowerCase();
        var inputType = this.type ? this.type.toLowerCase() : null;
        if(type == "input" && inputType == "text" || inputType == "password"){
            // 應用標準的maxLength
            this.maxLength = max;
        }else if(type == "textarea"){
            this.onkeypress = function(e) {
                var ob = e || event;
                var keyCode = ob.keyCode;
                var hasSelection = document.selection ? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
                return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) &&
                    !ob.ctrlKey && !ob.altKey && !hasSelection);
            };
            this.onkeyup = function() {
                if(this.value.length > max){
                    this.value = this.value.substring(0,max);
                }
            };
        }
    });
};
// use
$('#mytextarea').maxLength(10);

26、本地存儲

localStorage.someData = "This is going to be saved";

27、解析json數據時報parseError錯誤

jQuery1.4之後，採用了更嚴格的json解析方式，所有內容必須要有雙引號 28、從元素中出去HTML

(function($) {
    $.fn.stripHtml = function() {
        var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
        this.each(function() {
            $(this).html($(this).html().replace(regexp,''));
        });
        return $(this);
    }
})(jQuery);
// use
$('div').stripHtml();

鋒利的jQuery第2版學習筆記8~11章