bootstrap组件

bootstrap

案例：toDoList 文本框里面输入内容，按下回车，就可以生成待办事项 点击待办事项复选框，就可以把当前数据添加到已完成的事项里面
点击已完成事项复选框，就可以把当前数据添加到待办事项里面 但是本页面内容刷新页面数据不会丢失

toDoList不如内地存储数据渲染加载到页面
因为后面会经常渲染加载操作，所以声明一个人函数 local 方便以后使用
先要读取本地存储数据，（数据不要方剂转化为对象格式）
之后遍历这个数据（$.each()）有几条数据，就生成几个小li,添加到ol里面
每次渲染之前，先把原先里面ol的内容清空，然后加载最新的数据

案例：toDoList删除操作
点击里面的小li，不是删除li,是删除本地存储对应的数据
核心原理：先获取本地存储的数据，删除对应的数据，保存本地存储，重新渲染列表li
我们可以给链接自定义属性记录当前的索引号
根据这个索引号，删除相关数据–数组的splice（i,1）方法
存储修改后的数据，然后存储给本地存储
重新渲染加载数据列表
因为a是动态创建的，我们使用on方法绑定事件

案例：toDoList正在进行和已经完成选项操作
点击之后，获取本地存储数据
修改对应数据的done为当前复选框的checkbox的状态
之后保存数据到本地存储
重新渲染加载数据列表
load加载函数里面，新增一个条件，如果当前数据的done值是true，就把列表渲染加载到ul里面

案例“toDoList统计正在进行个数和已经完成个数
在我们的load函数里面操作
声明2个变量：todoCount待个数 doneCount已经完成个数
当遍历存储数据的时候，如果数据done为false 则todoCount++,否则doneCount++

<script src="js/jquery.min.js"></script>
<script>
//刷新不会丢失数据，因此需要用到本地存储localStorage
//不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据
//存储数据格式：var todolist = [{title:"xxx",done:false}]
//注意点：本地存储localStorage里面只能存储字符串，因此需要把对象转换成字符串JSON.stringify(data)
	$(function(){
		load();
		var todoList = [{
		title:'今天学完jq',
		done:false
	},{
		title:'该吃午饭了',
		done:false	
	}];
	//localStorage.setItem("todo",todolist);
	//1.本地存储里面只能存储字符串的数据格式  我们把数组对象转换为字符串格式  JSON.stringify()
	localStorage.setItem("todo",JSON.stringify(todolist));
	var data = localStorage.getItem("todo");
	//console.log(typeof data);
	console.log(data[0].title);
	//2.获取本地存储的数据我们需要把里面的字符串数据传华为 对象格式  JSON.parse()
	data = JSON.parse(data);
	console.log(data); 
	//①利用事件对象.keyCode()判断用户按下回车（13）
	//②声明一个数组，保存数据
	//③先读取本地存储原来的数据（声明函数getData）放到这个数组里面
	//④之后吧最新数据从表单获取过来，追加到数组里面
	//⑤最后把数组存储给本地存储(声明savaDate())
	$("#title").on("keydown",function(event){
	
		if(event.keyCode === 13){
			if($(this).val() === ""){
				alert("请输入事件");
			}else{
				//读取本地存储的数据
			var local = getDate();	
			//把local数组进行更新数据 把最新的数组追加给local数组
			local.push({title:$(this).val(),done:false});
			//把这个数组local 存储到给本地存储
			//调用保存的函数  local局部变量
			saveDate(local);
			//2.todoList  本地存储数据渲染加载到页面
			load();
			$(this).val("");	
			}
		}
	});
	//3.toDoList  删除事件
	$("ol,ul").on("click","a",function(){
		//先获取本地存储
		var data = getDate();
		//修改数据
		var index = $(this).attr("id");
		//splice()从哪个位置开始删除  删除几个元素
		data.splice(index,1)
		//保存到本地存储
		saveDate(data);
		//data = saveDate();
		//重新渲染页面
		local();
	});
	//4.toDoList  正在进行和已完成选项操作
	//事件委托
	$("ol, ul").on("click","input",function(){	
	//先获取本地存储的数据
	var data= getDate();
	//修改数据   自定义属性attr()获取	 固有属性用prop()获取
	var index= $(this).siblings("a").attr("id");
	data[index].done = $(this).prop("checked")
	//保存到本地存储 
	saveDate(data);
	//重新渲染页面
	load();
	
	})
	//读取本地存储的数据
	function getDate(){
		var data = localStorage.getItem("todolist");
		if(data !== null){
			//本地存储里面的数据是字符串格式的  但是我们需要的是对象格式的
			return JSON.parse(data);
		}else{
			return[];	
		}
	}
	//保存本地存储数据
	function saveDate(data){
		localStrage.setItem("todolist",JSON.stringfy(data))	
	}
	//渲染加载数据
	function load(){
		var data = getDate();	
		//遍历之前，先要请空ol里面的元素内容
		$("ol ,ul").empty();
		var todoCount= 0; // 正在进行
		var doneCount = 0;  //已经完成
		//遍历这个数据
		$.each(data,function(i,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);
	}
	})
</script>
<section>
	<label for= "title" >ToDoList</label>
	<input type="text" id= "title" name="title" placeholder="添加ToDo">
</section>
<section>
	<h2>正在进行<span id="todocount"></span><h2>
	<ol id="todolist" class="demo-box">
		<li>
			<input type="checkbox"name="" id="">
			<p></p>
			<a href="#"></a>
		</li>
	</ol>
	<h2>已经完成<span id="donecount"></span></h2>
	<ul id="donelist"></ul>
</section>

<script>
	$("input").click(function(){
		var checkbox =  true 
		//判断input 的checkbox的值，如果为false,渲染到ol
		getDate().val()
	})
</script>

本地存储的数据是字符串格式 但是我们需要对象格式
JSON.parse()