jquery 写page

jQuery是一个流行的JavaScript库，它简化了JavaScript的编写并且拥有很多高效而强大的特性。在网页开发中，经常需要进行分页显示数据的操作，使用jQuery可以使得分页的实现变得更加简单。

首先，创建一个可以容纳分页的HTML结构。例如：

<div class="pagination">
</div>

接下来，在jQuery中编写分页的代码:

$(function() {
  var list = $("ul#my-list li");
  var numPerPage = 10; // 每页显示的条目数量
  var numPages = Math.ceil(list.length / numPerPage); // 计算总页数
  var pagination = $(".pagination");

  var pageNum = 1;
  for (var i = 0; i < numPages; i++) { // 循环创建分页的HTML结构
    pagination.append("<a class='page-link' href='#'>" + (i+1) + "</a>");
  }

  pagination.find(".page-link").first().addClass("active"); // 给第一页添加active类

  function showPage(pageNum) { // 显示相应的页码的条目
    list.hide();
    var startIndex = (pageNum - 1) * numPerPage;
    var endIndex = startIndex + numPerPage;
    list.slice(startIndex, endIndex).show();
  }

  showPage(pageNum); // 初始显示第一页

  pagination.find(".page-link").click(function() { // 点击页码时改变active类和显示的内容
    pagination.find(".active").removeClass("active");
    $(this).addClass("active");
    pageNum = parseInt($(this).text());
    showPage(pageNum);
    return false;
  });
});

代码解释:

首先，在HTML中定义了一个空的`div`元素，并且在jQuery中获取了需要进行分页的数据（在这个例子中是一个id为`my-list`的`ul`元素的所有`li`子元素），设置每页显示的数量，计算总页数，并创建分页的HTML结构。其中`addClass`和`removeClass`用来添加和删除`active`类，这个类用来标识当前所在的页码。

接下来，定义了一个`showPage`函数，它接收一个页码作为参数，根据该页码显示相应的条目，其他的条目则隐藏。在`pagination.find(".page-link").click()`事件中，处理了每个页码链接的点击事件，改变当前的`active`类和显示的内容，并且调用`showPage`函数展示对应的条目。

最后，调用`showPage`函数，初始显示第一页。