jQuery四、其他方法
1、jQuery 拷贝对象
- 如果想要把某个对象拷贝（合并） 给另外一个对象使用，此时可以使用
$.extend()方法 $.extend([deep], target, object1, [objectN])- deep: 如果设为true 为深拷贝，默认为false 浅拷贝，浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。深拷贝是完全克隆，修改目标对象不会影响被拷贝对象。
- target: 要拷贝的目标对象
- object1:待拷贝到第一个对象的对象。
- objectN:待拷贝到第N个对象的对象。
案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery对象拷贝</title>
<script src="jquery.min.js"></script>
<script>
$(function() {
// 拷贝
// var targetObj = {};
// var obj = {
// id: 1,
// name: "andy"
// };
// $.extend(targetObj, obj);
// console.log(targetObj);
// 会覆盖targetObj 里面原来的数据
// var targetObj = {
// id: 0
// };
// var obj = {
// id: 1,
// name: "andy"
// };
// $.extend(targetObj, obj);
// console.log(targetObj);
// 会覆盖targetObj 里面原来的数据-复杂对象
// var targetObj = {
// id: 0,
// msg: {
// sex: '男'
// }
// };
// var obj = {
// id: 1,
// name: "andy",
// msg: {
// age: 18
// }
// };
// $.extend(targetObj, obj);
// console.log(targetObj);
// 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
// var targetObj = {
// id: 0,
// msg: {
// sex: '男'
// }
// };
// var obj = {
// id: 1,
// name: "andy",
// msg: {
// age: 18
// }
// };
// $.extend(targetObj, obj);
// targetObj.msg.age = 20;
// console.log(targetObj);
// console.log(obj);
// 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起
var targetObj = {
id: 0,
msg: {
sex: '男'
}
};
var obj = {
id: 1,
name: "andy",
msg: {
age: 18
}
};
$.extend(true, targetObj, obj);
console.log(targetObj); // 会覆盖targetObj 里面原来的数据
targetObj.msg.age = 20;
console.log(targetObj); // msg :{sex: "男", age: 20}
console.log(obj);
})
</script>
</head>
<body>
</body>
</html>
2、多库共存
- 问题概述：jQuery使用
$作为标示符，随着jQuery的流行,其他 js 库也会用这$作为标识符，这样一起使用会引起冲突。 - 客观需求：需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
- jQuery解决方案：
- 把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(''div'')
- jQuery 变量规定新全局变量的名称：
var xx = $.noConflict();
案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多库共存</title>
<script src="jquery.min.js"></script>
<script>
$(function() {
function $(ele) {
return document.querySelector(ele);
}
console.log($("div"));
// 1. 如果$ 符号冲突 我们就使用 jQuery
jQuery.each();
// 2. 让jquery 释放对$ 控制权 让用自己决定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
suibian.each();
})
</script>
</head>
<body>
<div></div>
<span></span>
</body>
</html>
3、jQuery 插件
-
jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。
-
注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。
-
jQuery插件常用的网站：
- jQuery 插件库：www.jq22.com/
- jQuery 之家：www.htmleaf.com/
-
jQuery插件使用步骤：
- 引入相关文件。（jQuery 文件 和 插件文件）
- 复制相关html、css、js (调用插件)。
-
jQuery插件演示：
-
瀑布流
-
图片懒加载（EasyLazyload）：（图片使用延迟加载可提高网页下载速度。它也能帮助减轻服务器负载）当我们页面滑动到可视区域，再显示图片。引入js文件和js调用必须写到 DOM元素（图片）最后面。
-
全屏滚动（fullpage.js）
- gitHub： github.com/alvarotrigo…
- 中文翻译网站： www.dowebok.com/demo/2014/7…
-
bootstrap JS插件：bootstrap 框架也是依赖于 jQuery 开发的，因此里面的 js插件使用 ，也必须引入jQuery 文件。
-
（1）瀑布流插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>瀑布流插件</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<style type="text/css">
#gallery-wrapper {
position: relative;
max-width: 75%;
width: 75%;
margin: 50px auto;
}
img.thumb {
width: 100%;
max-width: 100%;
height: auto;
}
.white-panel {
position: absolute;
background: white;
border-radius: 5px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
padding: 10px;
}
.white-panel h1 {
font-size: 1em;
}
.white-panel h1 a {
color: #A92733;
}
.white-panel:hover {
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
margin-top: -5px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
</style>
</head>
<body>
<section id="gallery-wrapper">
<article class="white-panel">
<img src="images/P_000.jpg" class="thumb">
<h1><a href="#">我是轮播图片1</a></h1>
<p>里面很精彩哦</p>
</article>
<article class="white-panel">
<img src="images/P_001.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="images/P_002.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="images/P_003.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="images/P_004.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="images/P_005.jpg" class="thumb">
<h1><a href="#">我是轮播图片1</a></h1>
<p>里面很精彩哦</p>
</article>
<article class="white-panel">
<img src="images/P_006.jpg" class="thumb">
<h1><a href="#">我是轮播图片1</a></h1>
<p>里面很精彩哦</p>
</article>
<article class="white-panel">
<img src="images/P_007.jpg" class="thumb">
<h1><a href="#">我是轮播图片1</a></h1>
<p>里面很精彩哦</p>
</article>
</section>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>
<script type="text/javascript">
$(function() {
$("#gallery-wrapper").pinterest_grid({
no_columns: 5,
padding_x: 15,
padding_y: 10,
margin_bottom: 50,
single_column_breakpoint: 700
});
});
</script>
</body>
</html>
（2）图片懒加载
<!-- 必须在这里引入我们的懒加载插件 -->
<script src="js/EasyLazyload.min.js"></script>
<script>
lazyLoadInit({
showTime: 1100,
onLoadBackEnd: function(i, e) {
console.log("onLoadBackEnd:" + i);
},
onLoadBackStart: function(i, e) {
console.log("onLoadBackStart:" + i);
}
});
</script>
（3）全屏滚动插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全屏滚动插件</title>
<link rel="stylesheet" href="css/fullpage.min.css">
<style>
#fp-nav ul li a.active span,
#fp-nav ul li a span {
background-color: red!important;
}
.section1 {
background: url(http://idowebok.u.qiniudn.com/77/1.jpg) 50%;
}
.section2 {
background: url(http://idowebok.u.qiniudn.com/77/2.jpg) 50%;
}
.section3 {
background: url(http://idowebok.u.qiniudn.com/77/3.jpg) 50%;
}
.section4 {
background: url(http://idowebok.u.qiniudn.com/77/4.jpg) 50%;
}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>
$(function() {
$('#dowebok').fullpage({
sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],
navigation: true
});
});
</script>
</head>
<body>
<div id="dowebok">
<div class="section section1">
<h3>第一屏里面的内容</h3>
</div>
<div class="section section2">
<h3>第二屏</h3>
</div>
<div class="section section3">
<h3>第三屏</h3>
</div>
<div class="section section4">
<h3>第四屏</h3>
</div>
</div>
</body>
</html>
（4）bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bootstrap</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
<li><a href="#">公司简介</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- 模态框 -->
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
里面就是模态框
</div>
</div>
</div>
<!-- 自己定义模态框 -->
<!-- <button data-toggle="modal" data-target="#btn">点击显示模态框</button> -->
<button class="myBtn">点击显示模态框</button>
<div class="modal fade" tabindex="-1" role="dialog" id="btn">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">手机</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">电视</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">手机相关的内容</div>
<div role="tabpanel" class="tab-pane" id="profile">电视相关的内容</div>
</div>
</div>
</div>
<script>
// 当我们点击了自己定义的按钮，就弹出模态框
$(".myBtn").on("click", function() {
// alert(11);
$('#btn').modal()
})
</script>
</body>
</html>
阿里百秀：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 引入bootstrap 样式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- 引入我们自己的首页样式文件 -->
<link rel="stylesheet" href="css/index.css">
<!-- 先引入jquery js文件 -->
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<title>阿里百秀</title>
</head>
<body>
<div class="container">
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">阿里百秀</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">生活馆 <span class="sr-only">(current)</span></a></li>
<li><a href="#">自然汇</a></li>
<li><a href="#">科技湖</a></li>
<li><a href="#">奇趣事</a></li>
<li><a href="#">美食节</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="搜索">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" data-toggle="modal" data-target=".login">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
<!-- 模态框 -->
<div class="modal fade login" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">登录信息</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">邮箱名登录</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住用户名
</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">登录</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div class="row">
<header class="col-md-2">
<div class="logo">
<a href="#">
<img src="images/logo.png" alt="" class="hidden-xs">
<span class="visible-xs">阿里百秀</span>
</a>
</div>
<div class="nav">
<ul>
<li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
<li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
<li><a href="#" class="glyphicon glyphicon-phone">科技湖</a></li>
<li><a href="#" class="glyphicon glyphicon-gift">奇趣事</a></li>
<li><a href="#" class="glyphicon glyphicon-glass">美食杰</a></li>
</ul>
</div>
</header>
<article class="col-md-7">
<!-- 新闻 -->
<div class="news clearfix">
<ul>
<li>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="upload/banner.dpg" alt="...">
<div class="carousel-caption">
阿里百秀1
</div>
</div>
<div class="item">
<img src="upload/banner1.dpg" alt="...">
<div class="carousel-caption">
阿里百秀2
</div>
</div>
<div class="item">
<img src="upload/banner2.dpg" alt="...">
<div class="carousel-caption">
阿里百秀3
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
$('.carousel').carousel({
interval: 2000
})
</script>
</li>
<li>
<a href="#">
<img src="upload/1.jpg" alt="">
<p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
</a>
</li>
<li>
<a href="#">
<img src="upload/2.jpg" alt="">
<p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
</a>
</li>
<li>
<a href="#">
<img src="upload/3.jpg" alt="">
<p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
</a>
</li>
<li>
<a href="#">
<img src="upload/4.jpg" alt="">
<p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
</a>
</li>
</ul>
</div>
<!-- 发表 -->
<div class="publish">
<div class="row">
<div class="col-sm-9">
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
</p>
</div>
<div class="col-sm-3 pic hidden-xs">
<img src="upload/3.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-9">
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
</p>
</div>
<div class="col-sm-3 pic hidden-xs">
<img src="upload/3.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-9">
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
</p>
</div>
<div class="col-sm-3 pic hidden-xs">
<img src="upload/3.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-9">
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
</p>
</div>
<div class="col-sm-3 pic hidden-xs">
<img src="upload/3.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-9">
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
</p>
</div>
<div class="col-sm-3 pic hidden-xs">
<img src="upload/3.jpg" alt="">
</div>
</div>
</div>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</article>
<aside class="col-md-3">
<a href="#" class="banner">
<img src="upload/zgboke.jpg" alt="">
</a>
<a href="#" class="hot">
<span class="btn btn-primary">热搜</span>
<h4 class="text-primary">欢迎加入中国博客联盟</h4>
<p>这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>
</a>
<div style="margin-top: 10px;">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">热搜</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">排名</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">热搜的相关内容</div>
<div role="tabpanel" class="tab-pane" id="profile">排名的相关内容</div>
</div>
</div>
</aside>
</div>
</div>
</body>
</html>
（5）todolist案例
-
需求
- 文本框里面输入内容，按下回车，就可以生成待办事项。
- 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。
- 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。
- 但是本页面内容刷新页面不会丢失。
-
分析
- 刷新页面不会丢失数据，因此需要用到本地存储 localStorage
核心思路：不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据- 存储的数据格式：var todolist = [{ title : ‘xxx’, done: false}]
- 注意点1：本地存储 localStorage 里面只能存储字符串格式 ，因此需要把对象转换为字符串 JSON.stringify(data)。
- 注意点2：获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse() 我们才能使用里面的数据。
-
把新数据添加到本地存储里面
- 切记：页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面。
- 利用事件对象.keyCode判断用户按下回车键（13）。
- 声明一个数组，保存数据。
- 先要读取本地存储原来的数据（声明函数 getData()），放到这个数组里面。
- 之后把最新从表单获取过来的数据，追加到数组里面。
- 最后把数组存储给本地存储 (声明函数 savaDate())
-
本地存储数据渲染加载到页面
- 因为后面也会经常渲染加载操作，所以声明一个函数 load，方便后面调用
- 先要读取本地存储数据。（数据不要忘记转换为对象格式）
- 之后遍历这个数据（$.each()），有几条数据，就生成几个小li 添加到 ol 里面。
- 每次渲染之前，先把原先里面 ol 的内容清空，然后渲染加载最新的数据。
-
删除操作
- 点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。
核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li- 我们可以给链接自定义属性记录当前的索引号
- 根据这个索引号删除相关的数据----数组的splice(i, 1)方法
- 存储修改后的数据，然后存储给本地存储
- 重新渲染加载数据列表
- 因为a是动态创建的，我们使用on方法绑定事件
-
正在进行和已完成选项操作
当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表。- 点击之后，获取本地存储数据。
- 修改对应数据属性 done 为当前复选框的checked状态。
- 之后保存数据到本地存储
- 重新渲染加载数据列表
- load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面
- 如果当前数据的done 为false， 则是待办事项，就把列表渲染加载到 ol 里面
-
统计正在进行个数和已经完成个数
- 在我们load 函数里面操作
- 声明2个变量 ：todoCount 待办个数 doneCount 已完成个数
- 当进行遍历本地存储数据的时候，如果 数据done为 false，则 todoCount++, 否则 doneCount++
- 最后修改相应的元素 text()
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>ToDoList—最简单的待办事项列表</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.min.js"></script>
<script src="js/todolist.js"></script>
</head>
<body>
<header>
<section>
<label for="title">ToDoList</label>
<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
</section>
</header>
<section>
<h2>正在进行 <span id="todocount"></span></h2>
<ol id="todolist" class="demo-box">
</ol>
<h2>已经完成 <span id="donecount"></span></h2>
<ul id="donelist">
</ul>
</section>
<footer>
Copyright © 2023 todolist.cn
</footer>
</body>
</html>
todolist.js
$(function() {
// alert(11);
// 1. 按下回车 把完整数据 存储到本地存储里面
// 存储的数据格式 var todolist = [{title: "xxx", done: false}]
load();
$("#title").on("keydown", function(event) {
if (event.keyCode === 13) {
if ($(this).val() === "") {
alert("请输入您要的操作");
} else {
// 先读取本地存储原来的数据
var local = getDate();
// console.log(local);
// 把local数组进行更新数据 把最新的数据追加给local数组
local.push({ title: $(this).val(), done: false });
// 把这个数组local 存储给本地存储
saveDate(local);
// 2. toDoList 本地存储数据渲染加载到页面
load();
$(this).val("");
}
}
});
// 3. toDoList 删除操作
$("ol, ul").on("click", "a", function() {
// alert(11);
// 先获取本地存储
var data = getDate();
console.log(data);
// 修改数据
var index = $(this).attr("id");
console.log(index);
data.splice(index, 1);
// 保存到本地存储
saveDate(data);
// 重新渲染页面
load();
});
// 4. toDoList 正在进行和已完成选项操作
$("ol, ul").on("click", "input", function() {
// alert(11);
// 先获取本地存储的数据
var data = getDate();
// 修改数据
var index = $(this).siblings("a").attr("id");
console.log(index);
// data[?].done = ?
data[index].done = $(this).prop("checked");
console.log(data);
// 保存到本地存储
saveDate(data);
// 重新渲染页面
load();
});
// 读取本地存储的数据
function getDate() {
var data = localStorage.getItem("todolist");
if (data !== null) {
// 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
return JSON.parse(data);
} else {
return [];
}
}
// 保存本地存储数据
function saveDate(data) {
localStorage.setItem("todolist", JSON.stringify(data));
}
// 渲染加载数据
function load() {
// 读取本地存储的数据
var data = getDate();
console.log(data);
// 遍历之前先要清空ol里面的元素内容
$("ol, ul").empty();
var todoCount = 0; // 正在进行的个数
var doneCount = 0; // 已经完成的个数
// 遍历这个数据
$.each(data, function(i, n) {
// console.log(n);
if (n.done) {
$("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
doneCount++;
} else {
$("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
todoCount++;
}
});
$("#todocount").text(todoCount);
$("#donecount").text(doneCount);
}
})
