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 对象和设置做为参数传递给回调函数。