零、文章目录

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="data:images/P_000.jpg" class="thumb"><h1><a href="#">我是轮播图片1</a></h1><p>里面很精彩哦</p></article><article class="white-panel"><img src="data:images/P_001.jpg" class="thumb"><h1><a href="#">Title 1</a></h1><p>Description 1</p></article><article class="white-panel"><img src="data:images/P_002.jpg" class="thumb"><h1><a href="#">Title 1</a></h1><p>Description 1</p></article><article class="white-panel"><img src="data:images/P_003.jpg" class="thumb"><h1><a href="#">Title 1</a></h1><p>Description 1</p></article><article class="white-panel"><img src="data:images/P_004.jpg" class="thumb"><h1><a href="#">Title 1</a></h1><p>Description 1</p></article><article class="white-panel"><img src="data:images/P_005.jpg" class="thumb"><h1><a href="#">我是轮播图片1</a></h1><p>里面很精彩哦</p></article><article class="white-panel"><img src="data:images/P_006.jpg" class="thumb"><h1><a href="#">我是轮播图片1</a></h1><p>里面很精彩哦</p></article><article class="white-panel"><img src="data: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">&times;</span></button><h4 class="modal-title">Modal title</h4></div><div class="modal-body"><p>One fine body&hellip;</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">&times;</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="data: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">&laquo;</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">&raquo;</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 &copy; 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四、其他方法相关推荐

  1. jQuery 往table添加新内容有以下四个方法：

    Query 添加新内容有以下四个方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() ...

  2. Jquery源码中的Javascript基础知识（四）— jQuery.fn.init方法

    $() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) {return new jQuery.fn.init( selector ...

  3. Jquery调用webService的四种方法 【转载】

    本文转载自:http://space.itpub.net/221062/viewspace-580298 我总结几个关键点 1. 服务必须声明为ScriptService(否则会出现下面的问题) 2. ...

  4. jQuery中slice()方法用法实例

    本文实例讲述了jQuery中slice()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以选取匹配元素集的子集. 语法结构: 复制代码 代码如下: $(selector).slice(sta ...

  5. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...

  6. jquery中Live方法不可用，Jquery中Live方法失效

    jquery中Live方法不可用,Jquery中Live方法失效 >>>>>>>>>>>>>>>>> ...

  7. html获取data-*值,html5 获取和设置data-*属性值的四种方法讲解

    1.获取id的对象 2.需要获取的就是data-id 和 dtat-vice-id的值 一:getAttribute()方法 const getId = document.getElementById ...

  8. jQuery easing 使用方法

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...

  9. mvc ajax提交html标签,Mvc提交表单的四种方法全程详解

    Mvc提交表单的四种方法全程详解 2019-01-05 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了Mvc提交表单的四种方法全程详解,编程之家小编觉得挺不错的 ...

最新文章

  1. 第1课第4.4节_Android硬件访问服务编写HAL代码
  2. 从小白到精通python要多久-超适合小白的python新手教程
  3. python+opencv获取最小外接矩形
  4. pyhanlp 提取关键词、自动摘要
  5. jenkins换服务器找不到包,服务器重启后Jenkins项目部分丢失问题解决方法
  6. vector 删除指定元素_std::vector简介
  7. RabbitMQ实现多系统间的分布式事务，保证数据一致性
  8. 分析频域滤波和空域滤波的各自特点_同态滤波原理及其matlab实现
  9. 三元运算符 python_Python三元运算符
  10. 检测同心圆_两“心”携手，共抗心衰——“同心圆”心衰俱乐部走进临安图书馆~...
  11. matlab求smith标准型
  12. kettle使用经验01
  13. 为何腾讯一直在推广“低配版”的QQ
  14. python实现定位附近的_c#教程之使用GPS经纬度定位附近地点(某一点范围
  15. 万科集团：掌握采购主动权，实现采购流程精细化管理
  16. php与阿里云短信接口接入
  17. es6模板字符串里用html标签,为ES6模板字符串计算标签函数
  18. 错误排查：packet_write_wait: Connection to XXX XXX XXX XXX port 22: Broken pipe
  19. echarts折线图 - 区域图 -如何设置填充色
  20. MATLAB与数学建模：初阶绘图

热门文章

  1. 人脸识别API接口 活体检测 人证比对 人身核验
  2. ls的a l i r R s t 功能的实现
  3. 企业微信应用设置可信域名_企业微信 可信域名问题
  4. 05- 泰坦尼克号海难生死预测 (机器学习集成算法) (项目五)
  5. 20_ue4进阶末日生存游戏开发[AI基础框架搭建]
  6. Nginx集成FastDFS模块实现图片上传
  7. 定个外卖都能被骗 999元，我想回火星
  8. 【微电网调度】考虑需求响应的基于改进多目标灰狼算法的微电网优化调度研究（Matlab代码实现）
  9. 互联网技术架构——有备无患
  10. opencv最大值滤波（不局限于图像）