<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

<div id="mydiv">hello</div>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // 獲取div元素
    var div = $("#mydiv"); // 正確的方式
    var div2 = jQuery("#mydiv"); // 也可以使用jQuery代替$，兩者效果相同
    console.log(div.text()); // 輸出div內(nèi)的文本 "hello"
</script>

// 通過document獲取div
var divDom = document.getElementById("mydiv");
console.log(divDom); // 輸出的是一個原生的DOM元素對象

// jQuery包裝集對象：通過jQuery選擇器獲取div
var divJquery = $("#mydiv");
console.log(divJquery);

console.log("==== jQuery包裝集對象與DOM對象互相轉(zhuǎn)換 ====");

// 將DOM對象轉(zhuǎn)換成jQuery對象，使用$()將dom對象括起來
var domToJquery = $(divDom);  // 使用$(domObject)來包裹DOM對象
console.log(domToJquery);  // 輸出轉(zhuǎn)換后的jQuery對象

// 將jQuery對象轉(zhuǎn)換成DOM對象，獲取jQuery包裝集對象的下標(biāo)
var jqueryToDom = divJquery[0];   // 或者使用 divJquery.get(0)
console.log(jqueryToDom);   // 輸出原始的DOM對象

var divDom = document.getElementById("mydiv");
console.log(mydiv)

// 通過jQuery選擇器獲取div
var div = $("#mydiv"); // 注意這里的$符號兩邊沒有空格，且字符串要用英文雙引號或單引號
console.log(div); // 輸出的是一個jQuery對象，包含了匹配到的所有元素

<script type="text/javascript">
    // ID選擇器  $("#id屬性值")
    var mydiv1 = $("#mydiv1");
    console.log("ID選擇器:", mydiv1);

    // 類選擇器  $(".class屬性值")
    var clas = $(".blue");
    console.log("類選擇器:", clas);

    // 元素選擇器   $("標(biāo)簽名/元素名")
    var divs = $("div");
    console.log("元素選擇器:", divs);

    // 通用選擇器   $("*")
    var all = $("*");
    console.log("通用選擇器:", all);

    // 組合選擇器  $("選擇器1,選擇器2,...")
    var group = $("#mydiv1, .blue, div");
    console.log("組合選擇器:", group);
</script>

$(document).ready(function(){
    // 后代選擇器（空格）
    var hd = $("#food li");
    console.log("后代選擇器選中的元素：", hd);

    // 子代選擇器（大于號 `>`）
    var zd = $("#food > li"); 
    console.log("子代選擇器選中的元素：", zd);

    // 相鄰選擇器（加號 `+`）
    var xl = $("#mydiv + div"); // 選擇緊跟在#mydiv之后的div
    console.log("相鄰選擇器選中的元素：", xl);

    // 同輩選擇器（波浪號 `~`）
    var tb = $("#mydiv ~ div"); // 選擇#mydiv之后的所有同級div
    console.log("同輩選擇器選中的元素：", tb);
});

  var hd = $("#food li");

  var zd = $("#food > li");

  var xl = $("#mydiv + div");

  var tb = $("#mydiv ~ div");

<script type="text/javascript">
    // 選擇所有輸入元素
    var forms = $(":input");
    console.log(forms);

    // 僅選擇<input>標(biāo)簽元素
    var inputs = $("input");
    console.log(inputs);

    // 獲取所有的單選框
    var radios = $(":radio");
    console.log(radios);
</script>

<script type="text/javascript">
    // [屬性名]  $("[屬性值]")
    var test = $("[name]");  //選擇所有設(shè)置了name屬性的元素
    console.log(test);

    // [屬性名='屬性值']   $([屬性名='屬性值']")
    var test2 = $("[name='ufav']");  //選擇所有設(shè)置了name屬性且值為'ufav'的元素
    console.log(test2);

    /* 獲取name為'usex'的被選中的單選框 */
    // 注意此處應(yīng)該是:checked
    var test3 = $(":radio[name='usex']:checked");
    console.log(test3);
</script>

// 獲取屬性 - 使用 attr()
var name1 = $("#ck1").attr("name");
console.log(name1); // 輸出 ck1 的 name 屬性值

// 設(shè)置屬性 - 使用 prop() 推薦用于布爾類型的屬性
$("#ck2").prop("checked", true); // 設(shè)置為選中狀態(tài)


// 獲取屬性 - 使用 prop()
var name2 = $("#ck1").prop("name");
console.log(name2); // 輸出 ck1 的 name 屬性值

// 設(shè)置屬性 - 使用 attr()
$("#ck2").attr("checked", "checked"); // 不推薦用于布爾類型的屬性

// 設(shè)置屬性 - 使用 prop()
$("#ck2").prop("checked", true); // 推薦用于布爾類型的屬性

// 獲取布爾類型屬性 - 使用 attr() （不推薦）
var cked1 = $("#ck1").attr("checked");
console.log(cked1); // 可能返回 'checked' 或 undefined，取決于是否選中

// 獲取布爾類型屬性 - 使用 prop() （推薦）
var cked2 = $("#ck1").prop("checked");
console.log(cked2); // 返回 true 或 false

var classList = $("#elementId").attr("class");
console.log(classList); // 輸出元素的所有類名

$("#elementId").css("color", "red"); // 將文本顏色設(shè)置為紅色

$("#elementId").addClass("newClass"); // 添加一個名為 'newClass' 的新類

  $("#elementId").css("background-color", "blue"); // 設(shè)置背景色為藍(lán)色

  $("#elementId").css({
      "font-size": "20px", // 設(shè)置字體大小為20px
      "border": "1px solid black" // 設(shè)置邊框樣式
  });

$("#elementId").removeClass("oldClass"); // 移除名為 'oldClass' 的類

$("#elementId").removeClass(); // 移除所有類

var classList = $("#elementId").attr("class");
console.log(classList); // 輸出元素的所有類名

$("#elementId").css("color", "red"); // 將文本顏色設(shè)置為紅色

$("#elementId").addClass("newClass"); // 添加一個名為 'newClass' 的新類

$("#elementId").removeClass("oldClass"); // 移除名為 'oldClass' 的類

$("#elementId").removeClass(); // 移除所有類

<input type="text" name="uname" id="uname" value="oop" />
<div id="html"></div>
<div id="text"></div>

<script type="text/javascript">
    /* val() 操作表單元素的值 */
    
    // 通過原生 JavaScript 獲取值
    console.log(document.getElementById("uname").value);
    // 使用原生 JavaScript 賦值
    document.getElementById("uname").value = "面向?qū)ο?;
    
    // 通過 val 方式獲取值
    console.log($("#uname").val());
    // 通過 val 方式獲賦值
    $("#uname").val("面向?qū)ο?);
    
    /* html() 操作非表單元素的內(nèi)容（包含 HTML 標(biāo)簽） */
    // 賦值
    $("#html").html("Hello");
    $("#html").html("<h2>Hello</h2>");
    // 取值
    console.log($("#html").html());

	/* text()操作非表單元素的文本內(nèi)容 (不包含html標(biāo)簽) */
    // 賦值
    $("#text").html("Hello");
    $("#text").html("<h2>Hello</h2>");
    // 取值
    console.log($("#html").text());
</script>

// 定義html字符串
var htmlTxt = "<p>這是一個段落</p>"; 
console.log(htmlTxt); // 輸出原始的HTML字符串

// 將html字符串轉(zhuǎn)換成jQuery對象
var htmlJquery = $(htmlTxt); 
console.log(htmlJquery); // 輸出jQuery對象

// 輸出html字符串中的內(nèi)容（即<p>標(biāo)簽內(nèi)的文本）
console.log(htmlJquery.html()); // 輸出<p>標(biāo)簽內(nèi)的文本內(nèi)容

<span class="red">泰山</span>
<span class="blue">偶像</span>
<script type="text/javascript">
console.log("----- 同級追加 -----");
    // 得到目標(biāo)對象
    var ts = $(".red");

    // 準(zhǔn)備要追加的內(nèi)容
    var span = "<span class='pink'>女神</span>";

    // 將內(nèi)容追加到指定元素前面
    ts.before(span);

    // 將內(nèi)容追加到指定元素后面
    ts.after(span);

    // 得到要追加的元素（已存在的元素）
    var blue = $(".blue");

    // 追加已有元素
    ts.before(blue);  // 在 .red 元素之前插入 .blue 元素
    ts.after(blue);   // 在 .red 元素之后插入 .blue 元素

    // 如果需要打印日志來確認(rèn)操作結(jié)果
    console.log(ts);
    console.log($(".pink")); // 打印新添加的 span 元素
    console.log(blue);       // 打印 .blue 元素
</script>

<script type="text/javascript">
console.log("----- 子元素追加 -----");
    // 準(zhǔn)備要追加的元素
    var sp = "<span>老臘肉</span>";
    var sp2 = "<span>小奶狗</span>";

    // prepend()：在選定元素的最前面追加子元素
    $(".green").prepend(sp);

    // append()：在選定元素的最后面追加子元素
    $(".green").append(sp2);

    // prependTo()：將新元素插入到選定元素的最前面
    $(sp).prependTo($(".green"));

    // appendTo()：將新元素插入到選定元素的最后面
    $(sp2).appendTo($(".green"));

    // 追加已存在的元素（例如帶有 .blue 類的元素）
    $(".green").append($(".blue"));

    // 打印日志來確認(rèn)操作結(jié)果
    console.log($(".green"));
</script>

// 刪除class屬性為green的元素
$(".green").remove(); 

// 清空元素（移除class屬性為blue的元素內(nèi)部的所有內(nèi)容）
$(".blue").empty();

$(".green").each(function(index, element) {
    // 'this' 是當(dāng)前遍歷到的DOM對象
    console.log(this); // 輸出當(dāng)前的DOM對象

    // 輸出當(dāng)前DOM對象的innerHTML屬性，顯示其內(nèi)部HTML內(nèi)容
    console.log(this.innerHTML);

    // 使用$(this)將DOM對象包裝成一個jQuery對象，并輸出其html內(nèi)容
    console.log($(this).html());

    // 輸出當(dāng)前元素的下標(biāo)（索引）
    console.log("下標(biāo)：" + index);

    // 輸出當(dāng)前遍歷到的DOM對象
    console.log(element);

    // 將當(dāng)前的DOM對象轉(zhuǎn)換為jQuery對象并輸出
    console.log($(element));
});

ready()類似于onLoad()事件
ready()可以寫多個，按順序執(zhí)行

$(document).ready(function(){}) 
等價于 
$(function(){})

$(document).ready(function(){

});

$(document).ready(function(){
    console.log("ready加載事件...");
});

$(function(){
    console.log("ready加載事件2...");
});

window.onload=function() {
}

window.onload = function() {
    console.log("load加載事件...");
};

    $(選擇器).bind("事件名", function() {
        // 事件處理代碼
    });

$(selector).bind(eventType[,eventData],handler);

方式一：為某一個元素綁定不同的事件，執(zhí)行不同的函數(shù)
$(選擇器).bind("事件名1", function() {
    // 事件處理函數(shù)1
}).bind("事件名2", function() {
    // 事件處理函數(shù)2
});
方式二：為某一個元素綁定不同的事件，執(zhí)行相同的函數(shù)（多個事件用空格隔開）
$(選擇器).bind("事件名1 事件名2", function(event) {
    // 共享的事件處理邏輯
    console.log('觸發(fā)了 ' + event.type + ' 事件');
});
方式三：為某一個元素綁定不同的事件，執(zhí)行不同的函數(shù)（使用JSON對象格式）
$(選擇器).bind({
    "事件名1": function() {
        // 事件處理函數(shù)1
    },
    "事件名2": function() {
        // 事件處理函數(shù)2
    }
});

$(選擇器).on('事件名', [eventData], function(event) {
    // 事件處理代碼
});

// 綁定點擊事件
$('#myButton').on('click', function() {
    console.log('按鈕被點擊了');
});

// 使用 eventData 傳遞額外數(shù)據(jù)
var eventData = { message: 'Hello World' };
$('#myButton').on('click', eventData, function(event) {
    console.log(event.data.message);  // 輸出 "Hello World"
});

<!-- HTML部分 -->
<button id="btnA">按鈕A</button>
<button id="btn6">按鈕B</button>

<!-- 確保正確引入jQuery庫 -->
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // 綁定單個點擊事件到按鈕A
    $("#btnA").click(function(){
        console.log("按鈕A被點擊了...");
    });

    // 為按鈕B同時綁定多個事件（點擊和鼠標(biāo)移出）
    $("#btnB")
        .click(function(){
            console.log("按鈕B被點擊了...");
        })
        .mouseout(function(){
            console.log("鼠標(biāo)從按鈕B移開了...");
        });
</script>

<!-- HTML部分 -->
<button onclick="console.log('按鈕C被點擊了...')">按鈕C</button>

   $(document).on('click', '#dynamicBtn', function(){
       console.log('動態(tài)加載的按鈕被點擊了...');
   });

   $('#element').on('click', function() {
       console.log('元素被點擊');
   });

<script type="text/javascript">
    /**
     * 同步請求
     */
    function test01() {
        // 得到XMLHttpRequest對象
        var xhr = new XMLHttpRequest();
        // 打開請求
        xhr.open("GET", "js/data.json", false); // 第三個參數(shù)設(shè)為false表示同步請求
        // 發(fā)送請求
        xhr.send(null);
        // 判斷響應(yīng)狀態(tài)
        if (xhr.status == 200) {
            console.log(xhr.responseText);
        } else {
            console.log("狀態(tài)碼：" + xhr.status + "，原因：" + xhr.responseText);
        }
    }
</script>

/**
 * 異步請求
 */
function test02() {
    // 得到XMLHttpRequest對象
    var xhr = new XMLHttpRequest();
    // 打開請求
    xhr.open("GET", "js/data.json", true); // 第三個參數(shù)設(shè)為true表示異步請求
    // 發(fā)送請求
	xhr.send(null);
	// 判斷響應(yīng)狀態(tài)
	if(xhr.ststus == 200){
            // 獲取響應(yīng)結(jié)果
            console.log(xhr.responseText);
        } else {
            console.log("狀態(tài)碼：" + xhr.status + "，原因：" + xhr.responseText);
        }
    }
}

$.ajax({
    type: "GET", // 請求類型，例如："POST"、"GET"
    url: "js/data.json", // 請求路徑
    data: {
        "paramName1": "value1", // 參數(shù)名：值
        "paramName2": "value2"  // 另一個參數(shù)名：值
    },
    async: true, // 默認(rèn)是true，可以省略
    dataType: "json",
    // dataType: "json", // 文本，字符串

    success: function(response) { // 形參名可以任意 函數(shù)的形參：響應(yīng)結(jié)果
        // 在這里處理成功獲取的數(shù)據(jù)
        console.log(response);
    }
});

$.get("請求路徑");

$.get("請求路徑", "請求參數(shù)");

$.get("請求路徑", function(返回結(jié)果) {
    // 處理返回結(jié)果
});

$.get("請求路徑", "請求參數(shù)",function(返回結(jié)果) {
    // 處理返回結(jié)果
});

$.get("js/data.json", {"uname": "zs", "upwd": "123"}, function(data) {
    console.log(data);
});

$.post("請求路徑");

$.post("請求路徑", "請求參數(shù)");

$.post("請求路徑", function(返回結(jié)果) {
    // 處理返回結(jié)果
});

$.post("請求路徑", "請求參數(shù)",function(返回結(jié)果) {
    // 處理返回結(jié)果
});

$.getJSON("js/data.json", {"uname": "zs", "upwd": "123"}, function(data) {
    console.log(data);
});

<!DOCTYPE html>
<html>
<head>
    <title>AJAX 數(shù)據(jù)表格示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        table {
            width: 80%;
            margin-top: 20px;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div id="result"></div>

    <script>
        // 發(fā)送 AJAX 請求，獲取數(shù)據(jù)
        $.ajax({
            type: "GET",
            url: "js/user.json",
            dataType: "json", // 明確指定響應(yīng)類型
            data: {
                "name": "aa",
                "pwd": "123"
            },
            success: function(result) {
                console.log("請求成功:", result);
                testData(result);
            },
            error: function(xhr, status, error) { // 新增錯誤處理
                console.error("請求失敗:", status, error);
                $('#result').html('<p style="color: red">數(shù)據(jù)加載失敗，請稍后重試</p>');
            }
        });

        // 數(shù)據(jù)處理函數(shù)
        function testData(data) {
            // 增強(qiáng)數(shù)據(jù)校驗
            if (!data || data.code !== 1 || !Array.isArray(data.list)) {
                console.error("數(shù)據(jù)格式異常:", data);
                $('#result').html('<p style="color: orange">數(shù)據(jù)格式異?；驗榭?lt;/p>');
                return;
            }

            try {
                // 創(chuàng)建表格對象
                const table = $('<table>').addClass('data-table');
                
                // 創(chuàng)建表頭
                const headerRow = $('<tr>').append(
                    $('<th>').text('用戶編號'),
                    $('<th>').text('用戶姓名'),
                    $('<th>').text('注冊時間') // 新增列示例
                );
                $('<thead>').append(headerRow).appendTo(table);
                
                // 創(chuàng)建表格體
                const tbody = $('<tbody>');
                data.list.forEach(function(user) {
                    const row = $('<tr>').append(
                        $('<td>').text(user.id),
                        $('<td>').text(user.name),
                        $('<td>').text(user.registerDate || 'N/A') // 處理可能不存在的字段
                    );
                    tbody.append(row);
                });
                table.append(tbody);

                // 渲染到頁面
                $('#result').empty().append(table);
            } catch (e) {
                console.error("表格渲染失敗:", e);
                $('#result').html('<p style="color: red">數(shù)據(jù)處理異常</p>');
            }
        }
    </script>
</body>
</html>

{
    "code": 1,
    "message": "success",
    "list": [
        {
            "id": 1001,
            "name": "張三",
            "registerDate": "2023-01-15"
        },
        {
            "id": 1002,
            "name": "李四",
            "registerDate": "2023-02-20"
        }
    ]
}