【前言】
分享个显示更多的插件
原理,将后台数据整个发到前端。所以缺点就是不适用于大数据页面
【主体】
<!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"中,我们看到的是经过压缩和优化的...
jQuery Infinite Scroll,也称为`infinitescroll.js`,是一款广泛使用的JavaScript插件,它实现了网页内容的自动滚动加载,即当用户滚动到页面底部时,新的内容会自动加载,无需手动翻页。这种功能常用于博客、新闻...
首先,jQuery的核心理念是"Write Less, Do More",它的API设计简洁而强大,使得开发者可以以更少的代码完成更多的任务。在描述中提到的“验证方式”,通常是指在前端进行表单验证,这是一种提升用户体验并减轻服务器...
通过封装常见的DOM操作、事件处理、动画效果和Ajax交互等,jQuery让开发者用更少的代码实现更多的功能。在2.1.1这个版本中,它保持了这一特点,并进行了优化,提高了性能和兼容性。 jQuery的引入通常有两种形式:未...
在"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树)、属性操作、事件绑定等。此外,这...
综上所述,jQuery 1.11.1.js 文件作为这个库的一个版本,包含了许多实用的功能,对于理解和使用 JavaScript 进行网页开发有着重要的意义。学习并熟练掌握 jQuery,能显著提高开发效率,简化前端工作流程。