jquery动态绘制列表

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。动态绘制列表是指在网页上根据数据动态生成 HTML 列表元素。

类型

基于数组的数据动态列表：根据数组中的数据动态生成列表项。
基于对象的数据动态列表：根据对象数组中的数据动态生成列表项。
基于用户输入的动态列表：根据用户的输入动态生成列表项。

应用场景

数据展示：在网页上展示从服务器获取的数据列表。
用户交互：根据用户的操作动态添加或删除列表项。
实时更新：在实时数据更新时，动态更新列表内容。

示例代码

以下是一个基于数组的数据动态绘制列表的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 动态绘制列表</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul id="dynamic-list"></ul>

    <script>
        $(document).ready(function() {
            // 示例数据
            var data = [
                { id: 1, name: 'Item 1' },
                { id: 2, name: 'Item 2' },
                { id: 3, name: 'Item 3' }
            ];

            // 动态生成列表项
            $.each(data, function(index, item) {
                $('#dynamic-list').append('<li>' + item.name + '</li>');
            });
        });
    </script>
</body>
</html>