jquery 列表展示

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在列表展示方面，jQuery 提供了多种方法来动态创建、修改和显示列表。

基础概念

列表：在 HTML 中，列表通常是通过 <ul>（无序列表）或 <ol>（有序列表）元素来实现的，列表项则由 <li> 元素表示。

jQuery：是一个 JavaScript 库，它允许开发者使用更少的代码实现更多的功能。

类型

静态列表：页面加载时就已经存在的列表。
动态列表：通过 JavaScript 或 jQuery 在页面加载后动态生成的列表。

应用场景

数据展示：如新闻列表、商品列表等。
导航菜单：网站的侧边栏或顶部导航。
搜索结果：根据用户输入动态显示的搜索结果。

示例代码

以下是一个简单的 jQuery 动态生成列表的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery List Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<ul id="myList"></ul>

<script>
$(document).ready(function(){
    var items = ["Apple", "Banana", "Cherry", "Date"];
    $.each(items, function(index, value){
        $('#myList').append('<li>' + value + '</li>');
    });
});
</script>

</body>
</html>

在这个例子中，我们首先在 HTML 中定义了一个空的 <ul> 元素，并给它一个 ID myList。然后在 jQuery 的 $(document).ready() 函数中，我们创建了一个数组 items，并使用 $.each() 函数遍历这个数组，为每个元素创建一个 <li> 标签，并将其添加到 #myList 中。