jQuery加载更多1：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<div>
test-123
<div id = "showdiv" style="display:none;">test-456</div>
<br/>
<a href="#" onclick="showHideCode()">查看更多</a>
</div>
<script>
function showHideCode(){
$("#showdiv").toggle();
}
</script>
</body>
</html>
~~~
jQuery加载更多2：
~~~
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS显示前面文字</title>
<style>
#box button{
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
}
</style>
</head>
<body>
<div id="box">
<h2>JS显示前面文字</h2>
<p>JS显示前面文字JS显示前面文字JS显示前面文字JS显示前面文字</p>
<p>JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-</p>
<p><strong>JS显示前面文字-</strong></p>
<p>JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-</p>
<p>JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-</p>
<p>JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-JS显示前面文字-</p>
</div>
<script>
function show(){
var box = document.getElementById("box");
var text = box.innerHTML;
var newBox = document.createElement("div");
var btn = document.createElement("a");
newBox.innerHTML = text.substring(0,200);
btn.innerHTML = text.length > 200 ? "<center><button>显示全部</button></center>" : "";
btn.href = "###";
btn.onclick = function(){
if (btn.innerHTML == "<center><button>显示全部</button></center>"){
btn.innerHTML = "<center><button>收起</button></center>";
newBox.innerHTML = text;
}else{
btn.innerHTML = "<center><button>显示全部</button></center>";
newBox.innerHTML = text.substring(0,200);
}
}
box.innerHTML = "";
box.appendChild(newBox);
box.appendChild(btn);
}
show();
</script>
</body>
</html>
~~~
jQuery加载更多3：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<body>
<div class="loaddown">
<div class="hidden">
<div class="title1">123-1</div>
<div class="title1">456-1</div>
<div class="title1">123-2</div>
<div class="title1">456-2</div>
<div class="title1">123-3</div>
<div class="title1">456-3</div>
</div>
<ul class="list">数据加载中，请稍后...</ul>
<div class="more"><a href="javascript:;" onClick="loaddown.loadMore();">加载更多</a></div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var _content = []; //临时存储li循环内容
var loaddown = {
_default:2, //默认显示图片个数
_loading:2, //每次点击按钮后加载的个数
init:function(){
var lis = $(".hidden .title1");
$("ul.list").html("");
for(var n=0;n<loaddown._default;n++){
lis.eq(n).appendTo("ul.list");
}
$("ul.list img").each(function(){
$(this).attr('src',$(this).attr('realSrc'));
})
for(var i=loaddown._default;i<lis.length;i++){
_content.push(lis.eq(i));
}
$(".hidden").html("");
},
loadMore:function(){
var mLis = $("ul.list li").length;
for(var i =0;i<loaddown._loading;i++){
var target = _content.shift();
if(!target){
$('.more').html("<p>我们会持续更新。。</p>");
break;
}
$("ul.list").append(target);
$("ul.list img").eq(mLis+i).each(function(){
$(this).attr('src',$(this).attr('realSrc'));
});
}
}
}
loaddown.init();
</script>
</body>
</body>
</html>
~~~
- 前端开发概要
- Vue
- Vue.js
- Vue的模板
- Vue的属性绑定和双向数据绑定
- Vue的计算属性和侦听器
- v-show和v-if
- Vue简单to do list
- Vue简单to do list组件拆分
- Vue简单to do list组件和实例
- Vue简单to do list的删除功能
- Vue的点击事件，侧重操作数据
- vue中定时器设置和关闭页面时关闭定时器
- axios
- Vue Element-ui
- HTML转Vue
- Vue3
- Vue开发简易权限认证
- demo
- Vue常用命令
- Vue项目1
- 前端面试
- 算法题
- Vue框架原理
- 前端基础
- 安全
- 模拟面试一面
- JavaScript和MySQL
- JavaScript和Redis
- HTML+CSS入门到案例
- 无限级导航栏案例开发
- iframe嵌套网页全屏显示
- CSS定位显示图片不同部分
- Select option 跳转
- 网页显示JavaScript
- 简单文本编辑器
- 用纯js实现一个文本编辑器
- 视频，音频
- frame包住目标网站
- Web重定向
- HCJ
- HTML
- CSS
- jQuery
- Bootstrap
- CSS实例
- 【CSS3】8款好看的纯CSS3搜索框
- 小工具
- menu_icon
- JavaScript
- JS获取屏幕尺寸
- JavaScript简易录播图
- 预设select option的值
- HTML和CSS基础
- APP开发
- uni-app
- nw.js
- CSS基础
- CSS hover 菜单
- CSS Menu
- CSS Menu 2
- Bootsrtap
- 图片展示
- 固定topbar
- JavaScript
- 当前页select option value跳转页面
- JavaScript点击一级菜单打开和关闭二级菜单
- JavaScript json无限分级导航菜单
- JavaScript獲取url
- 其他
- JS获取复选框中当前选中的值
- JS array 遍歷
- JavaScript無刷新修改url
- localStorage
- js版的in_array的实现方法
- JavaScript修改URL參數
- JSON
- jQuery教程
- 用PHP+MySQL+jQuery+Ajax拖放排序修改数据库
- jQuery实例
- jQuery
- jQuery实例1
- jQuery slider实例
- jQuery加载更多功能
- jQuery前后元素移动
- datatables前端搜索功能
- jQuery select value跳转页面
- jQuery局部刷新
- jQuery点击自身以外关闭弹出窗
- 点击增加class
- 点击增加和删除class
- 固定向右menu
- jQuery多級menu
- 用Jquery和Json实现多语言切换
- jQuery to do list
- jQuery slideToggle
- jQuery点击显示和隐藏CSS
- js如何获取点击标签里的值
- JavaScript和JQuery获取DIV的值
- jQuery加载公用文件
- createElement添加内容
- createElement添加内容 - 复制案例
- jQuery 遍历案例
- HBuilder
- 案例
- Slider
- html5 video
- Ajax
- Ajax案例1： 无优化XMLHttpRequest
- Ajax案例2： json的XMLHttpRequest
- Ajax案例3： jQuery json的XMLHttpRequest
- Ajax案例4： H5 jQuery的XMLHttpRequest
- Ajax案例5：无跳转刷新容器获取外部内容
- Ajax搜索
- 两种Ajax获取数据方式
- Cookie
- 微信小程序
- 基础的GET和POST页面
- Node.js
- AngularJS
- AngularJS案例
- AngularJS案例1
- ReactJS
- React native
- API
- Postman API
- Web前端常用图标
- Photoshop
- 前端cnd
- 前端工具
- 前端模板
- Export data
- 前端工程化
- 固定菜單
- 404頁面
- test
- JavaScript框架
- 瀏覽器兼容性