任务阶段小结

L枫林

已于 2023-03-26 17:21:29 修改

阅读量55

点赞数

于 2023-03-26 16:14:57 首次发布

本文链接：https://blog.csdn.net/2201_75409899/article/details/129779547

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

本周知识总结

盒子隐藏的几种方式

display:none; 将盒子隐藏起来,并且放弃之前占有的位置
visibility:hidden; 盒子隐藏起来,不放弃自己占有的位置
overflow:hidden; 一般用于针对盒子内的东西,如果超出盒子的大小就对超出的部分进行隐藏,也可以对超出的部分进行,滚动浏览

querySelector与getElementBy等的区别

querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素。该方法只返回匹配指定选择器的第一个元素。如果要返回所有匹配元素，需要使用querySelectorAll() 方法替代．
由于querySelector是按css规范来实现的，所以它传入的字符串中第一个字符不能是数字.

eg：var rightCondentOrder = document.querySelector(‘.rightCondentOrder’);

query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的（即：当页面增加了标签，这个集合中也就增加了元素）。静态的就是说选出的所有元素的数组，不会随着文档操作而改变．

元素节点

document.getElementById(‘idname’); //按照id查找，拿到的是一个标签对象
document.getElementsByClassName(‘classname’); //按照class标签去找，得到的是一个数组里存放的标签
document.getElementsByTagName(‘tagname’); //通过标签名去找，拿到的也是一个数组 var a = document.getElementsByName(‘yuan’);
按照name属性去找,拿到的也是一个数组

parentElement:返回当前元素的父元素节点
children:只返回当前元素的元素子节点
childElementCount或children.length:当前元素节点子元素的个数
firstElementChild:返回的是第一个元素节点（IE不兼容，IE9以下）
lastElementChild:返回的是最后一个元素节点（IE不兼容，IE9以下）
nextElementSibling:返回后一个兄弟元素节点
previousElementSibling:返回前一个兄弟元素节点

获取文本节点的值：innerText、innerHTML

innerText：不管是赋值还是取值，只能识别纯文本；
innerHTML：既可以识别纯文本，也可以识别标签；

webstorage本地存储

webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage
localStorage生命周期是永久，需要用户手动在浏览器提清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它也仅在客户端（即浏览器）中保存，不参与和服务器的通信。
存储内容类型：
localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。
localStorage的删除

将localStorage的所有内容清除： window.localStorage.clear();
将localStorage中的某个键值对删除: window.localStorage.removeItem(‘key’)
具体参考:

https://blog.csdn.net/qq_42098849/article/details/104632898

接口写删除功能

// 删除功能
var del = document.getElementsByClassName('del')[0];
function delFood(id) {
    $.ajax({
        type: "POST",
        url: "http://118.195.129.130:3000/food/del",
        data: {
            _id: id,
        },
        success: function (result) {
            console.log(result, 'result')
            getfoodPage(2, 5);
        },
        error: function (err) {
            console.log("输入错误！")
        }
    })
}

  var foodDel = document.getElementsByClassName('foodDel');
            for (var i = 0; i < foodDel.length; i++) {
                foodDel[i].onclick = function () {
                    console.log('删除功能', foodDel);
                    // 找到id所在位置
                    var obj = JSON.parse(this.parentElement.parentElement.lastElementChild.innerHTML)
                    // 获取id
                    var id = obj._id
                    console.log(id);
                    // 确定是否删除 confirm
                    if (confirm('确定要删除吗')) {
                        delFood(id);
                    }
                }
            }

提交文件到仓库流程:

在github中创建仓库
Git Bash Here命令窗
- 初始化：git init
- 连接远程仓库：git remote add origin 仓库地址
- 添加到仓库： git add 文件名+后缀（添加所有：git add --all）
- 提交并注释： git commit -m “注释内容”
- 上传文件到码云：git push -u origin master

本周感悟

本周任务主要写登录注册、页面后台页面并实现增删改查，搜索框、翻页等的实现。其中存在很多的不足，比如输入登录信息，应该判断信息正确与否，并弹出一个确定取消（confirm）框，增删改之后应该有成功与否的提示。当然还有很多细节问题，整个页面的布局、颜色，都需要很大的改进。另外，学姐还说，应该更多的站在用户的角度去写这个页面，以提供给他们最大的便利和舒适感。
后期需要好好复习一下js，很多功能的实现是没有思路的，多搜多敲吧。坚持！加油！