一個使用jQuery與JSON的案例
jQuery是一種JavaScript框架，目的是使JavaScript編寫變得更加簡單。jQuery允許您輕松地選擇HTML元素，訪問元素屬性和事件，添加CSS樣式和動畫效果，以及處理AJAX請求。
JSON是JavaScript對象表示法的縮寫，是一種輕量級的數據交換格式。它易于讀寫，易于解析和生成，同時也易于與其他編程語言集成。
案例概述
在這個案例中，我們將使用jQuery和JSON來顯示一組學生成績。JSON數據存儲在一個名為students.json的文件中，并包含每個學生的姓名和三個課程的分數。
HTML代碼
<!DOCTYPE html> <html> <head> <title>學生成績單</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h1>學生成績單</h1> <div id="students"></div> <script> //jQuery和JSON代碼將放置在此處 </script> </body> </html>
jQuery和JSON代碼
$(document).ready(function(){
$.getJSON("students.json", function(data){
var items = [];
$.each(data, function(key, val){
items.push("<li><b>" + val.name + "</b>, 數學：" + val.math + ", 英語：" + val.english + ", 歷史：" + val.history + "</li>");
});
$("<ul/>",{
html: items.join("")
}).appendTo("#students");
});
});代碼解析
首先，在$(document).ready()方法內，我們使用jQuery的getJSON()方法從文件students.json中獲取數據。getJSON方法在獲取數據后立即調用第二個參數中的函數。
接下來，我們創建一個新數組items，然后使用$.each()方法遍歷我們獲取的學生數據。在每個學生對象上，我們調用push()方法將一個字符串添加到items數組中。此字符串包含學生的姓名和三個課程的分數。
最后，我們使用$("<ul/>", {html: items.join("")})方法創建一個新的<il>元素，其中包含我們從items數組中構建的字符串。最后，我們將這個新的<il>元素添加到HTML頁面中id為students的div元素中。
結論
這個案例展示了使用jQuery和JSON顯示數據的基本步驟。使用jQuery可以顯著簡化JavaScript代碼的編寫，而JSON作為一種輕量級數據格式，非常適合于在網頁中傳輸數據。
上一篇航海專業術語縮寫css