第21章 0113-jQuery常用DOM操作与Ajax，学心心得、笔记（jQuery实现留言本案例(todolist)，$.ajax实现，$.get,$.post，$.ajax实现jsonp跨域请求
16lz
2021-01-26
今天所学心得、笔记
1、jQuery实现留言本案例(todolist)
示例截图
示例代码
<body><header><div class="header"><label for="add">ToDoList</label><input type="text" id="add" placeholder="添加计划项目......" autofocus></div></header><main><div class="todo"><div class="title"><span class="titleText">正在进行</span><span class="titleTip">0</span></div><ul class="todoList"><!-- <li>--><!-- <div class="left">--><!-- <input type="checkbox" name="">--><!-- <span>111111111111111</span>--><!-- </div>--><!-- <a href="#" class="right">-</a>--><!-- </li>--></ul></div><div class="done"><div class="title"><span class="titleText">已完成</span><span class="titleTip">0</span></div><ul class="doneList"><!-- <li>--><!-- <div class="left">--><!-- <input type="checkbox" name="">--><!-- <span>111111111111111</span>--><!-- </div>--><!-- <a href="#" class="right">-</a>--><!-- </li>--></ul></div></main><footer><span>Copyright © 2021 16lz.com中文网</span></footer><script src="jquery-3.5.1.js"></script><script>// 启动时，读取缓存数据，并渲染到页面loadToPage();// 获取input框输入的数据$("input#add").on("keydown", function (ev) {let addText = $(this).val();if(addText !== '') {// console.log(ev.keyCode);if(ev.keyCode == 13) {// console.log(addText);//获取本地存储的数据let localData = getData();localData.push({title: addText, done: false});//存储入本地缓存saveData(localData);loadToPage();$(this).val('');}}});//渲染数据，至页面function loadToPage() {// 总数，计数器let todoCount = 0;let doneCount = 0;//渲染前，先清空页面数据$(".todoList, .doneList").empty();// 获取本地缓存数据let localData = getData();// console.log(localData);// // 循环数据，渲染数据，至页面(原生写法)// localData.forEach((item, index) => {// // console.log(item);// $(".todoList").prepend(`<li><div class='left'><input type='checkbox'><span>${item}</span></div><a href='#' class='right' id="${index}">-</a></li>`);// });// 循环数据，渲染数据，至页面(jQuery写法, 要注意：数据与index在括号中的位置，与原生相反)$.each(localData, (index, item) => {if(!item.done) {$(".todoList").prepend(`<li><div class='left'><input type='checkbox' data-id="${index}"><span>${item.title}</span></div><a href='#' class='right' id="${index}">-</a></li>`);todoCount++;}else {$(".doneList").prepend(`<li><div class='left'><input type='checkbox' data-id="${index}" checked><span>${item.title}</span></div><a href='#' class='right' id="${index}">-</a></li>`);doneCount++;}})$(".todo .titleTip").text(todoCount);$(".done .titleTip").text(doneCount);}//存储列表数据，入本地缓存function saveData(data) {// 将列表数据，由对象格式转换成，字符串格式，存储到本地localStorage.setItem('todoList', JSON.stringify(data));}//读取本地存储列表数据function getData() {let data = localStorage.getItem('todoList');if(data) {// 本地存储里面的数据，由字符串格式转换成，对象格式return JSON.parse(data);}else {return [];}}// 删除列表中的数据$(".todoList, .doneList").on("click", "a", function () {// 获取a标签idlet id = $(this).val("id").get(0).id;// console.log(id);// 获取本地缓存数据let localData = getData();// 删除数据localData.splice(id, 1);//存储数据，并接着重新渲染数据saveData(localData);// 重新渲染页面loadToPage();});//进行中，已完成，分组设置（修改done的值），在loadToPage()函数中进行分组显示$(".todoList, .doneList").on('click', 'input', function () {// 获取本地缓存数据let localData = getData();// console.log(localData);// 获取选中li的idlet id = $(this).data("id");// console.log(id);// 修改对应数据的，done值localData[id].done = $(this).prop("checked");// console.log(localData);//存储数据，并接着重新渲染数据saveData(localData);// 重新渲染页面loadToPage();});</script></body>
2、$.ajax实现，$.get,$.post，$.ajax实现jsonp跨域请求
示例截图
示例代码
<body><div><button class="get">1. $.get(): 请求数据</button><button class="post">2. $.post(): 请求数据</button><button class="jsonp">3. $.ajax():JSONP: 跨域请求数据</button></div><script src="jquery-3.5.1.js"></script><script>// 1. $.get(请求url,查询参数,成功回调)$('.get').click(function (ev) {$.get('users.php?id=2', function (data) {$(ev.target).after("<div></div>").next().html(data);})})// 2. post()$(".post").click(function (ev) {$.post("users.php", { id: 3 }, function (data) {console.log(data);$(ev.target).after("<div></div>").next().html(data);});});// 3. $.ajax实现jsonp跨域请求$(".jsonp").click(function (ev) {$.ajax({type: "get",url: "http://www.mycors.com/test.php?id=2&jsonp=?",dataType: "jsonp",// 告诉跨域访问的服务器需要返回的函数名称// jsonpCallback: "show",success: function (data) {console.log(data);$("button:last-of-type").after("<div>").next().html(`${data.name} [${data.email}}]`);},});});</script></body>
更多相关文章
- 如何通过 Saltstack pillar组件定义与被控主机相关的任何数据？
- SpringBoot 2.0 中 HikariCP 数据库连接池原理解析
- 一句话锁定MySQL数据占用元凶
- Android中SQLite数据库介绍和使用
- Content Provider 基础
- Android的App列表之拖拽ListView(上)
- 微软Webcast课程下载软件iReaper正式登陆Android平台
- Sqlite的使用和一个简单的书籍管理系统（上）
- android 组件化架构读书笔记（六）数据存储