jQuery四、其他方法
零、文章目录
文章地址
- 个人博客-CSDN地址：https://blog.csdn.net/liyou123456789
- 个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn
代码仓库地址
- Gitee：https://gitee.com/bluecusliyou/TechLearn
- Github：https://github.com/bluecusliyou/TechLearn
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. 如果$ 符号冲突 我们就使用 jQueryjQuery.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 插件库：http://www.jq22.com/
- jQuery 之家：http://www.htmleaf.com/
-
jQuery插件使用步骤：
- 引入相关文件。（jQuery 文件 和 插件文件）
- 复制相关html、css、js (调用插件)。
-
jQuery插件演示：
-
瀑布流
-
图片懒加载（EasyLazyload）：（图片使用延迟加载可提高网页下载速度。它也能帮助减轻服务器负载）当我们页面滑动到可视区域，再显示图片。引入js文件和js调用必须写到 DOM元素（图片）最后面。
-
全屏滚动（fullpage.js）
- gitHub： https://github.com/alvarotrigo/fullPage.js
- 中文翻译网站： http://www.dowebok.com/demo/2014/77/
-
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);}
})
相关文章：
jQuery四、其他方法
零、文章目录 文章地址 个人博客-CSDN地址：https://blog.csdn.net/liyou123456789个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn 代码仓库地址 Gitee：https://gitee.com/bluecusliyou/TechLearnGithub：https:…...
2023年先进无人飞行系统国际会议(ICAUAS 2023) | IOP JPCS独立出版
会议简介 Brief Introduction 2023年先进无人飞行系统国际会议(ICAUAS 2023) 会议时间：2023年7月13日-16日 召开地点：中国哈尔滨&加拿大多伦多双会场 大会官网： ICAUAS 2023-2023 International Conference on Advanced Unmanned Aerial …...
2022蓝桥杯省赛——修剪灌木
问题描述 爱丽丝要完成一项修剪灌木的工作。 有 N 棵灌木整齐的从左到右排成一排。爱丽丝在每天傍晩会修剪一棵灌木, 让灌木的高度变为 0 厘米。爱丽丝修剪灌木的顺序是从最左侧的灌木开始, 每天向右修剪一棵灌木。当修剪了最右侧的灌木后, 她会调转方向, 下一天开始向左修剪…...
Spring Boot Aop初接触
AOP（面向切面编程），或多或少都听过一点。名字比较怪，切面，不容易理解，但其中真正含义，无非就是旁路控制，非侵入式编码之类。比如我想加个操作日志功能，利用AOP࿰…...
【创作赢红包】LeetCode：232. 用栈实现队列
🍎道阻且长，行则将至。🍓 🌻算法，不如说它是一种思考方式🍀算法专栏： 👉🏻123 一、🌱232. 用栈实现队列 题目描述：请你仅使用两个栈实现先入先出队…...
Mybatis+Mysql 实现向下递归查询
介绍 说到递归查询，大家可以想到的技术实现方式主要如下几种： 1、各种主流应用开发语言本身通过算法实现 2、各种数据库引擎自身提供的算法实现 本文提到主要是针对第二种和第一种的结合 主要技术栈 1、ORM：Mybatis 2、DB：MyS…...
python@调用系统命令行@os.system@subprocess@标准输入输出@sys.stdin@sys.stdout@input@print
文章目录python调用系统命令行os.system标准输入输出sys.stdinsys.stdoutinputprint概要os.systemdemoswindows命令解释器ComSpecsubprocessrecommended🎈基本用法demos标准输入输出sys.stdininput()sys.stdin.inputinput()交互模式小结sys.stdoutsys.stdout.wirte(…...
手握数据智能密钥，诸葛智能打开数字化经营“三重门”
科技云报道原创。 如果说上世纪传统麦迪逊大街上的“广告狂人”吸金立足之本，还主要是基于“Big Idea”的话，那么在当下，数据正在成为企业营销和运营的金矿。 这是一个“人与机器共同进化”的时代，技术作为延伸人类感觉的媒介之…...
C语言可以实现各种滤波算法
C语言可以实现各种滤波算法，以下是一些常见的滤波算法： 均值滤波（Mean Filter）：将图像中每一个像素周围一定区域内的灰度值取平均值作为该像素的新灰度值，用于去除高斯噪声等随机噪声。 下面是一个简单的 C…...
使用Netty，当然也要了解它的连接闲置处理
连接闲置网络连接的闲置指的是当前网络连接处于空闲状态，即没有正在进行的数据传输或通信活动。当我们的某个连接不再发送请求或者接收响应的时候，这个连接就开始处于闲置状态。网络连接的闲置时间越长，说明该连接越不活跃。此时，…...
2、K-Planes
运行配置 主页：https://sarafridov.github.io/K-Planes/ 代码：https://github.com/sarafridov/K-Planes 预训练权重：https://drive.google.com/drive/folders/1zs_folzaCdv88y065wc6365uSRfsqITH Neural_3D_Video_Dataset：htt…...
张文海教授课题组在国际高水平期刊《Cerebral Cortex》发表研究成果
调节悲伤情绪对于维持伴侣间的浪漫关系至关重要。人际情绪调节策略包括情感参与（AE）和认知参与（CE），这两种策略在浪漫关系中效用如何？它们是如何通过情感纽带调节伴侣情绪的？其背后的脑际神经互…...
ffmpeg4.1 源码学习之-转封装
前言 ffmpeg 的源码量非常的多，而且非常繁杂，非常多的函数，如果一个函数一个函数看的话要花费比较多的时间。所以本文通过跟踪ffmpeg转封装的过程来学习ffmpeg的源码具体转封装的命令：ffmpeg -i 1_cut.flv -c copy -f mp4 1.mp4在…...
ChatGPT写作文章-快速使用ChatGPT不用注册方式
如何更好地使用ChatGPT批量生成文章：详细教程 作为一款强大的文本生成器，ChatGPT可以帮助您快速、高效地批量生成文章。但如果您还不知道如何更好地使用ChatGPT，那么这篇详细的列表教程将会指导您如何使用它来生成高质量的文章，提…...
Nginx配置ip白名单（服务权限控制）
Nginx服务器权限控制：Nginx 是一款高性能的 HTTP 和反向代理服务器。它可以通过配置文件实现权限控制，从而限制或允许特定的 IP 地址、网络或用户访问指定的资源。这里是一些基本的 Nginx 权限控制方法： 1. 基于 IP 地址的访问控制 在 Ngin…...
Vue 核心（二）
文章目录Vue 核心（二）八、 绑定样式1、 class2、 style九、 条件渲染1、 渲染指令2、 使用示例十、 列表渲染1、 基本语法2、 key原理3、 列表过滤4、 列表排序5、 数组更新检测6、 大总结十一、 收集表单数据十二、 内置指令1、 v-text2、 v-html3、 v-…...
犯罪现场还原虚拟vr训练平台突破各种教学限制
在当今社会矛盾日益凸显、各式犯罪层出不穷的背景下，创新改革公安院校实战化教学方式，强化对基层公安队伍实战化应用型人才的供给能力具有重要性、紧迫性。 案件现场勘查是门技术活，如何让民警快速有效提升技能、服务实战? 常规刑侦专业现场…...
LeetCode 617. 合并二叉树 | C++语言版
LeetCode 617. 合并二叉树 | C语言版LeetCode 617. 合并二叉树题目描述解题思路思路一：使用递归代码实现运行结果参考文章：思路二：减少遍历节点数代码实现运行结果参考文章：LeetCode 617. 合并二叉树 题目描述 题目地址…...
Python量化交易08——利用Tushare获取日K数据
总有同学问我要数据...很多第三方接口都能直接获取数据的，本次介绍怎么用Tushare库获取A股日k线行情的数据。 Tushare有两个版本，老版现在快弃用了。 新版的官网链接在这：Tushare数据 需要注册一个账号，然后改一下资料࿰…...
30张精美可视化大屏，无需代码直接套用，解决你95%的大屏需求！
通常制作可视化大屏，一般有两种方式 代码开发：写代码调用数据和图表库，比如写JSEcharts ； 可视化工具：用现成的数据可视化工具 前者简单直接，直接写代码就完事。但对于大部分人来说门槛较高，维…...
TCP网络事件模型的封装1.0
TCP网络模型的封装 最近学习了TCP网络模型的封装，其中运用的封装技术个人感觉有点绕 在反复读代码、做思维导图下初步理解了这套封装模型，不禁感叹原来代码还能这样写？神奇！ 为此将源码分享出来并将流程图画出，方便…...
NC271.二叉搜索树的后序遍历序列
文章目录一、题目描述二、示例三、主要思路一、题目描述 输入一个整数数组，判断该数组是不是某二叉搜索树的后序遍历的结果。如果是则返回 true ,否则返回 false 。假设输入的数组的任意两个数字都互不相同。 提示： 1.二叉搜索树是指父亲节点大于左子树中…...
研究fastdds v2.8.0 1之 基础模块
阅读 dds 协议 1.4 版本 ， 结合fastdds 2.8 的代码理解dds。 Entity 理解 DCPS基础设施模块由以下类组成： Entity DomainEntity QosPolicy Listener Status WaitSet Condition GuardCondition StatusCondition1、Entity 是所有DCPS 对象的基础类 virt…...
ElasticSearch系列 - SpringBoot整合ES：精确值查询 term
文章目录01. ElasticSearch term 查询？02. ElasticSearch term 查询数值型数据？03. ElasticSearch term 查询字符串类型数据？04. ElasticSearch term 查询日期型数据？05. ElasticSearch term 查询日期型数据的注意事项？…...
关于async/await、promise和setTimeout执行顺序
关于async/await、promise和setTimeout执行顺序 async function async1() {console.log(async1 start);await async2();console.log(asnyc1 end); } async function async2() {console.log(async2); } console.log(script start); setTimeout(() > {console.log(setTimeOut…...
2023-03-31：如何计算字符串中不同的非空回文子序列个数？
2023-03-31：给定一个字符串 s，返回 s 中不同的非空 回文子序列 个数， 通过从 s 中删除 0 个或多个字符来获得子序列。 如果一个字符序列与它反转后的字符序列一致，那么它是 回文字符序列。 如果有某个 i , 满足 ai ! bi ÿ…...
D. The Number of Imposters(二分图染色)
Problem - D - Codeforces Theofanis开始玩名为“Among them”的新网络游戏。然而，他总是和塞浦路斯球员一起踢球，他们都有一个相同的名字:“安德烈亚斯”(塞浦路斯最常见的名字)。在每个游戏中，Theofanis和n个其他玩家一起玩。因为它们都有相…...
图片太大怎么改小kb？简单的图片压缩方法分享
平时当我们在朋友圈分享一些有趣的照片或者使用图片素材进行上传的时候，经常遇到图片大小kb超出平台限制的情况，这时就无法正常上传了，遇到这种情况我们就需要想办法降低图片大小kb，那么有什么办法能够压缩图片大小呢？…...
【python-leecode刷题】动态规划类问题----以53. 最大子数组和为例
作者：20岁爱吃必胜客（坤制作人），近十年开发经验, 跨域学习者，目前于海外某世界知名高校就读计算机相关专业。荣誉：阿里云博客专家认证、腾讯开发者社区优质创作者，在CTF省赛校赛多次取得好成绩。…...
Idea常用快捷键设置
设置来源于尚硅谷宋红康老师 第1组：通用型 说明 快捷键 复制代码-copy ctrl c 粘贴-paste ctrl v 剪切-cut ctrl x 撤销-undo ctrl z 反撤销-redo ctrl shift z 保存-save all ctrl s 全选-select all ctrl a 第2组：提高编写速度（上…...