【前言】
分享个显示更多的插件
原理，将后台数据整个发到前端。所以缺点就是不适用于大数据页面
【主体】
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery.more.js 显示更多</title>
<style>
*{margin:0;padding:0}
ul,li{list-style:none}
.box{width:400px;margin:0 auto;}
.box h2{text-align:center;font: 22px/2.7 "Microsoft Yahei"}
.box li {background:#c2ccc2;padding: 0 5px; border-bottom:1px solid #ddd;margin-bottom:10px;display:none}
.box .showMorehandle{ text-align:center; cursor:pointer;margin-bottom: 20px;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.more.js"></script>
</head>
<body>
<div class="box">
<h2>jquery.more.js插件 显示更多</h2>
<ul class="showMoreNChildren" pagesize="3">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>l</li>
<li>m</li>
<li>n</li>
<li>o</li>
<li>p</li>
<li>q</li>
<li>r</li>
<li>s</li>
<li>t</li>
<li>u</li>
<li>v</li>
<li>w</li>
<li>x</li>
<li>y</li>
<li>z</li>
</ul>
<ul class="mynews" pagesize="4">
<li>news 11</li>
<li>news 12</li>
<li>news 13</li>
<li>news 14</li>
<li>news 21</li>
<li>news 22</li>
<li>news 23</li>
<li>news 24</li>
<li>news 31</li>
<li>news 32</li>
<li>news 33</li>
<li>news 34</li>
</ul>
</div>
<script type="text/javascript">
//调用显示更多插件。参数是标准的 jquery 选择符
$.showMore(".showMoreNChildren,.mynews");
</script>
</body>
</html>
(function () {
var showMoreNChildren = function ($children, n) {
//显示某jquery元素下的前n个隐藏的子元素
var $hiddenChildren = $children.filter(":hidden");
var cnt = $hiddenChildren.length;
for ( var i = 0; i < n && i < cnt ; i++) {
$hiddenChildren.eq(i).slideDown();
}
return cnt-n;//返回还剩余的隐藏子元素的数量
}
//对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为
$.showMore = function (selector) {
if (selector == undefined) { selector = ".showMoreNChildren" }
$(selector).each(function () {
var pagesize = $(this).attr("pagesize") || 10;
console.log(pagesize);
$(this).find("li:lt("+pagesize+")").show();
var $children = $(this).children();
if ($children.length > pagesize) {
for (var i = pagesize; i < $children.length; i++) {
$children.eq(i).hide();
}
$("<div class='showMorehandle'>显示更多</div>").insertAfter($(this)).click(function () {
if (showMoreNChildren($children, pagesize) <= 0) {
//如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”
$(this).hide();
};
});
}
});
}
})()
至于jquery版本，1.8以上即可
.
相关推荐
`js`目录则包含了除`jquery.more.js`之外的其他JavaScript文件，比如可能有一些辅助脚本或自定义的业务逻辑。 总的来说，这个项目展示了如何将前端交互（jQuery的下拉加载功能）与后端处理（PHP和MySQL）相结合，...
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的...
首先，jQuery的核心理念是“Write Less, Do More”，即通过提供一系列简洁的API，让开发者可以更高效地处理DOM操作、事件处理、动画效果以及Ajax交互。在"jquery-3.5.1.js/min.js"中，我们看到的是经过压缩和优化的...
通过封装常见的DOM操作、事件处理、动画效果和Ajax交互等，jQuery让开发者用更少的代码实现更多的功能。在2.1.1这个版本中，它保持了这一特点，并进行了优化，提高了性能和兼容性。 jQuery的引入通常有两种形式：未...
jQuery Infinite Scroll，也称为`infinitescroll.js`，是一款广泛使用的JavaScript插件，它实现了网页内容的自动滚动加载，即当用户滚动到页面底部时，新的内容会自动加载，无需手动翻页。这种功能常用于博客、新闻...
首先，jQuery的核心理念是"Write Less, Do More"，它的API设计简洁而强大，使得开发者可以以更少的代码完成更多的任务。在描述中提到的“验证方式”，通常是指在前端进行表单验证，这是一种提升用户体验并减轻服务器...
在"jquery-2.1.4.js"中，包含了完整的jQuery库，提供了所有可用的功能和插件支持。这个版本的jQuery修复了一些已知问题，增强了性能，同时保持了向后兼容性，是开发阶段的理想选择，因为其便于调试和测试。 而...
`jQuery.InfiniteScroll`是一个流行的JavaScript插件，用于实现网页内容的无限滚动效果。这个插件主要用于提升用户体验，当用户滚动页面到底部时，它会自动加载更多内容，无需手动点击“加载更多”按钮。这种技术常...
"jquery.min-1.3.2.js"是经过压缩和混淆后的版本，体积更小，加载速度更快，适用于生产环境。而"jquery-1.3.2.js"则是未压缩的源码版本，更适合学习和调试。这两个文件在项目中根据需求进行选择。 jQuery的事件处理...
这些插件进一步扩展了jQuery的功能，提供了更多实用的组件和功能，以满足Web开发中的各种需求。 1. **zTree**：zTree是一个强大的基于jQuery的树形插件，广泛应用于网站的导航菜单、数据展示、文件目录管理等场景。...
jQuery的核心理念是"Write Less, Do More"，即用更少的代码实现更多的功能。它的设计目标是使JavaScript编程变得更加简单，通过封装JavaScript常用的功能代码，提供了一种更方便的操作DOM（文档对象模型）、处理事件...
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的...
6. **插件生态**：jQuery拥有丰富的插件生态系统，如jQuery UI、jQuery Validate等，它们为开发者提供了更多扩展功能，满足多样化的需求。 三、jQuery 1.10.2.min.js的版本意义 版本号1.10.2表明这是一个稳定版，...
今天我们将详细探讨一个自编的jQuery插件——jquery.loadmore.js，尽管它在实际应用中的效果并不尽如人意，但我们可以从中学习到一些基础原理和技巧，为以后的开发积累经验。 一、jQuery插件的基本结构 jQuery插件...
jQuery的核心理念是"Write Less, Do More"，它通过简洁的API使得开发者能够用更少的代码实现更多的功能。 **版本解析** 在提供的文件中，我们有两个版本的jQuery：`jquery-1.7.2.min.js`和`jquery-1.7.2.js`。这两...
《jQuery内容显示与隐藏插件readmore.js详解》 在网页设计中，处理大量文本的显示与隐藏是一项常见的需求。为了提升用户体验，开发者们通常会采用"阅读更多"的交互方式，让页面保持简洁，同时给予用户选择是否展开...
Bootstrap.js和jQuery.js是Web开发中的两个重要框架，它们极大地简化了前端开发的复杂性，提高了效率。这里我们主要探讨这两个库的中文文档及其在CHM格式中的内容。 首先，让我们了解一下jQuery.js。jQuery是一个轻...
**jQuery移动端下拉刷新、上拉加载更多插件——dropload.js详解** 在移动设备上，用户经常需要滚动页面以查看更多的内容或者刷新数据。为了提高用户体验，许多开发者引入了下拉刷新（Pull-to-Refresh）和上拉加载更...
jQuery的核心理念是"Write Less, Do More"，即用更少的代码实现更多的功能。在jQuery 1.2.1这个版本中，它提供了许多实用的功能，如选择器（用于查找HTML元素）、遍历（遍历DOM树）、属性操作、事件绑定等。此外，这...
在这个案例中，我们有两个相关的JavaScript文件：`jquery-1.7.2.min.js`是基础的jQuery库，而`jquery.resizableColumns.js`则是实现列宽调整功能的插件。 `jquery.resizableColumns.js`插件的工作原理是监听用户的...