jQuery核心知識以及JSON、AJAX的詳解

JSON

什麼是JSON?
    1.JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
    2.JSON 是輕量級的文本數據交換格式
    3.JSON 獨立於語言
        即JSON使用JavaScript 語法來描述數據對象，但是JSON 仍然獨立於語言和平臺。
        JSON解析器和JSON 庫支持許多不同的編程語言)
    4.JSON 具有自我描述性，更易理解

類似XML
    JSON 是純文本
    JSON 具有“自我描述性”（人類可讀）
    JSON 具有層級結構（值中存在值）
    JSON 可通過 JavaScript 進行解析
    JSON 數據可使用 AJAX 進行傳輸
與XML不同之處
    沒有結束標籤
    更短
    讀寫的速度更快
    使用數組
    不使用保留字

JSON 語法規則:
    數據在名稱/值對中
    數據由逗號分隔
    花括號保存對象
    方括號保存數組

JSON的使用:    
    通過JS自帶的JSON.parse可以把JSON格式的字符串轉化爲對象
    也可以通過JQ $.parseJSON把JSON格式的字符串轉化爲對象

jQuery

獲取元素:
    $("選擇器") 獲取和選擇器相匹配的所有元素
修改樣式:
    $("選擇器").css("屬性名","屬性值");
    設置多個屬性:
        $("選擇器").css({"屬性名":"屬性值","屬性名":"屬性值","屬性名":"屬性值"})
獲取/修改內容:
    html()、text()、val()用法與JS相同

通過JQ的選擇器獲取到的是JQ對象 通過原生方法獲取到的是原生對象
JQ對象只能調用JQ的方法 原生對象只能調用原生的方法 但是JQ可以和JS混編
原生對象與JQ對象可以相互轉化:
    例如:
        <div class="item"></div>

        var item = document.getElementsByClassName('item')[0];
        // 原生對象 --> JQ對象
        $(item).css("color", "red");
        // JQ對象 --> 原生對象
        1.$(".item")[0].innerHTML = "JQ轉原生";
        2.$(".item").get(0).innerHTML = "也是JQ轉原生"

eq表示獲取第幾個 獲取到的是JQ對象
    例如:$(".item").eq(0).html("這是一個");

end()方法的定義和用法:
    end()方法能夠回到最近的一個"破壞性"操作之前，即將匹配的元素列表變爲前一次的狀態
    如果沒有破壞性操作將返回一個空集。
破壞性操作的概念:指任何改變所匹配元素的操作。
    例如:
        $(".item").css("background-color", "pink").parent().css("border", "5px red solid")
        要想繼續對item進行修改就要使用end()回到破壞性操作之前
        $(".item").css("background-color", "pink").parent().css("border", "5px red solid").end().css("height", "500px")

移交$的控制權:
    jQuery(".item") 等價於 $(".item")
    var pp = jQuery.noConflict(); 從此以後不再使用$代表JQ 使用pp代表JQ
    pp(".item");

創建元素:
    $("<div></div>").html("新的JQ對象").appendTo($("body"));
添加元素:
    A.append(B)      A裏面添加B A是父級
    A.appendTo(B)    把A加到B裏面 B是父級
    A.after(B)       A後面添加B A在前面
    A.insertAfter(B) 把A插入到B後面 B在前面
刪除元素:
    1.remove() 刪除元素 同時清空綁定的事件
    2.empty()  刪除元素內容 元素本身還在
    3.detach()  刪除元素 不清空綁定事件

JQ對象設置屬性:
    attr設置的屬性都會被添加到標籤上 也能讀取到標籤上的自定義屬性  prop則不能
    $(".item").attr("title","這是提示");
    $(".item").prop("title","這是提示");
    prop可以讀取到原生對象的一些自帶屬性 和自定義屬性 attr不能

JQ綁定事件:
    JQ支持的事件,元素可以直接綁定
    JQ不支持的事件 使用on來綁定 移除用off

AJAX

什麼是AJAX?
AJAX = 異步 JavaScript 和 XML
AJAX 是一種用於創建快速動態網頁的技術。
通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。
這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

ajax的使用:
    JS:
        // 創建請求對象
        var request = new XMLHttpRequest();
        // 設置請求  併發送
        request.open("GET","test.json",true)
        request.send();
        request.onreadystatechange = function(){
            if (request.readyState==4 && request.status==200){
                console.log(request.responseText)
            }
        }
    JQ:
        $.ajax({
            url:"test.json", // 請求目標
            type:"GET", // 請求類型 POST 或者 GET(默認)
            async:true, // true 代表異步(默認) false 同步(不支持)
            beforeSend:function(obj){
                // 在發送請求之前執行此函數
                // 檢查一下請求是否是想要的
                // 如果return false 則取消發送
                console.log(obj);
                // return false;
            },
            // 可以把success裏面的this 改變指向
            context:document.getElementsByTagName("body")[0],
            timeout:5000, // 設置超時的時間
            // 設置請求對象
            // xhr:function(){
            //  var obj = new XMLHttpRequest()
            //  return obj;
            // },
            cache:true,// true代表緩存 false不緩存
            success:function(res){
                this.innerHTML += res;
            }
        });