正文

学会jQuery，轻松实现网页动态列表效果全攻略

/0 浏览量
0707

在网页设计中，动态列表效果能够极大地提升用户体验，使网页内容更加生动和互动。jQuery作为一款流行的JavaScript库，极大地简化了网页开发过程。本文将详细介绍如何使用jQuery轻松实现网页动态列表效果。

一、了解动态列表效果

动态列表效果指的是在用户与网页交互时，列表内容能够根据用户的操作进行改变，如排序、筛选、分页等。这些效果能够提升网页的可用性和用户体验。

二、准备工作

在开始之前，请确保你的项目中已经引入了jQuery库。可以通过以下代码将jQuery库引入到你的HTML页面中：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

三、实现动态列表效果

以下是一些常见的动态列表效果实现方法：

1. 列表排序

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>列表排序</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $("#sortBtn").click(function() {
        var rows = $("#listTable tr").get();
        rows.sort(function(a, b) {
            var A = $(a).find("td:nth-child(2)").text().toUpperCase();
            var B = $(b).find("td:nth-child(2)").text().toUpperCase();
            return A > B ? 1 : A < B ? -1 : 0;
        });
        $.each(rows, function(index, row) {
            $("#listTable").append(row);
        });
    });
});
</script>
</head>
<body>
<table id="listTable" border="1">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>30</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>28</td>
        </tr>
    </tbody>
</table>
<button id="sortBtn">排序</button>
</body>
</html>

2. 列表筛选

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>列表筛选</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $("#filterBtn").click(function() {
        var filter = $("#filterInput").val();
        $("#listTable tr").each(function() {
            var name = $(this).find("td:nth-child(2)").text();
            if (name.indexOf(filter) > -1) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
});
</script>
</head>
<body>
<input type="text" id="filterInput" placeholder="输入姓名筛选">
<button id="filterBtn">筛选</button>
<table id="listTable" border="1">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>30</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>28</td>
        </tr>
    </tbody>
</table>
</body>
</html>

3. 列表分页

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>列表分页</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    var pageSize = 2;
    var currentPage = 1;
    function showPage(page) {
        $("#listTable tr").hide();
        $("#listTable tr").slice((page - 1) * pageSize, page * pageSize).show();
        currentPage = page;
        $("#pageInfo").text("当前页：" + page + "，共 " + Math.ceil($("#listTable tr").length / pageSize) + " 页");
    }
    showPage(currentPage);
    $("#nextPage").click(function() {
        if (currentPage < Math.ceil($("#listTable tr").length / pageSize)) {
            showPage(currentPage + 1);
        }
    });
    $("#prevPage").click(function() {
        if (currentPage > 1) {
            showPage(currentPage - 1);
        }
    });
});
</script>
</head>
<body>
<table id="listTable" border="1">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>30</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>28</td>
        </tr>
        <tr>
            <td>4</td>
            <td>赵六</td>
            <td>32</td>
        </tr>
        <tr>
            <td>5</td>
            <td>钱七</td>
            <td>29</td>
        </tr>
    </tbody>
</table>
<button id="prevPage">上一页</button>
<button id="nextPage">下一页</button>
<div id="pageInfo"></div>
</body>
</html>

四、总结

通过本文的介绍，相信你已经掌握了使用jQuery实现网页动态列表效果的方法。在实际开发中，可以根据需求灵活运用这些方法，为用户带来更好的体验。

-- 展开阅读全文 --