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对象可以相互转化:
    例如:
        
"item">

        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");

创建元素:
    $("
").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;
            }
        });