JavaScript 框架學習（JQuery）

參考： http://www.w3cschool.cc/jquery/jquery-tutorial.html 

參考： http://tool.oschina.net/apidocs/apidoc?api=jquery

// 注意：在JS代碼中，爲保證 JS代碼可以正常運行，須要在HTML代碼加載完畢後，再執行JS代碼。

<script>
    $(document).ready(function(){
        // 代碼放在這 ... ...
        // 好幾一由於這個緣由，jQuery沒法選定DOM，因此沒法執行代碼 ... ...
});
</script>

---

1、JQuery教程

    JQuery是一個JavaScript庫，極大的簡化了JavaScript編程。

    

    想着以後再看 HTML5 ， CSS3  看來須要先看下了 ....   看完再更新這個吧 ...

---

2、AJAX

    jQuery實現ajax仍是比較簡單的。

    （一）AJAX 請求

    （1）jQuery.ajax()

        jQuery.ajax(url, [settings]); 經過HTTP請求加載遠程數據。jQuery底層的實現，簡易高層實現 $.get(), $.post() 等。$.ajax()返回其建立的XMLHttpRequest()。

        ① 回調函數

            若是須要處理 $.ajax() 獲得的數據，須要使用回調函數。

            beforeSend：在發送請求以前調用，而且傳入一個XMLHttpRequest做爲參數。

            error：請求在出錯時調用。傳入XMLHttpRequest對象，描述錯誤類型的字符串以及一個異常對象（若是有的話）。

            dataFilter：在請求成功以後調用。傳入返回數據以及「dataType」參數的值。而且必須返回（經處理的）數據傳遞給success回調函數。

            success：當請求以後調用。傳入返回後的數據，以及包含成功代碼的字符串。

            complete：當請求完成以後調用這個函數，不管成功或失敗。傳入XMLHttpRequest對象，以及一個包含成功或錯誤代碼的字符串。

        ②數據類型

            $.ajax() 函數依賴服務器提供的信息來處理返回數據。

            經過指定 dataType選項還能夠指定不一樣的數據處理方式。出了xml還有html，json，jsonp，script，text。

        ③參數

            url：一個用來包含發送請求的URL字符串。

            async：默認爲true，全部請求均爲異步請求。當設置爲false時，同步請求將鎖住瀏覽器，其餘操做必須等待請求完成以後。

            data：發送到服務器的數據，將自動轉換爲請求字符串格式。必須是Key/Value格式。

            dataType：預期服務器返回的數據類型。

            success(data, textStatus, jqXHR)：請求成功以後回調函數。參數由服務器返回，並根據dataType參數進行處理數據。

            timeout：設置請求超時時間（毫秒）。

            type：默認「GET」，請求方式可爲「POST」或「GET」，如瀏覽器支持還可以使用「PUT」，「DELETE」。

// 示例。加載並執行一個 JS 文件

$.ajax({
    type: "GET",
    url: "test.js",
    dataType: "script"
});

// 一個稍微完整點的例子
<script src="static/jquery-1.11.1.js"></script>

<script>
    $(document).ready(function() {

        $("#submit").click(function () {
            $.ajax({
                type: "POST",
                url: "ajax_resp.php",
                data: "user=" + $("#datePicker").val(),
                success: function (data, status) {
                    $("#resp").html(data);
                }
            });
        });
    });
</script>


<input type="text" name="date" id="datePicker" />
<input type="button" id="submit" value="ajax 提交" />
<br>
<div id="resp"></div>

    （2）load(url, [data], [callback])

        ①概述

            載入遠程HTML文件代碼至DOM中。默認使用GET方式，當data有值時，自動轉換爲POST方式。

        ②參數

            url：待載入HTML地址

            data：發送至服務器Key/Value數據，或字符串。

            callback：載入成功時回調函數。

<script src="static/jquery-1.11.1.js"></script>

<script>
    $(document).ready(function() {
        $("#resp").load("webdictionary.txt");
    });
</script>

<div id="resp"></div>

    （3）jQuery.get(url, [data], [callback], [type])

        經過遠程HTTP GET 請求載入信息。簡單的GET請求，以取代複雜的 $.ajax() 。

$.get(
    "test.php",
    {user: "John"},
    function(data){
        alert(data);
    }
);

    （4）jQuery.getJSON(url, [data], [callbacj])

        經過HTTP GET 請求載入 JSON數據。

$.getJSON("test.js", function(json){
    alert("JSON Data: " + json.users[3].name);
});

    （5）jQuery.getScript(url, [callback])

        經過HTTP GET 請求載入並執行一個 JavaScript文件。

        若是使用 getScript 加入腳本， 請加入延時函數。

        url：待載入 JS 文件地址。 callback：成功載入後回調函數。

$.getScript("test.js", function(){
    alert("腳本加載完畢。");
});

    （6）jQuery.post(url, [data], [callback], [type])

        經過遠程HTTP POST 請求載入信息。簡單的POST請求代替複雜的 $.ajax() 。

$.post(
    "test.php",
    { "func": "getNameAndTime" },
    function(data){
        alert(data.name); // John
        console.log(data.time); //  2pm
    },
    "json"
);

    （二）AJAX 事件

    （1）ajaxComplete(callback)

        AJAX請求完成時，執行函數。XMLHttpRequest 對象和設置做爲參數傳遞給回調函數。