温习日志-13

温习日志

——2023年2月6日下午

学习内容

• Internationalizing Dates(Intl)
  1. 通过new Intl.DateTimeFormat('当地ISO码', 可以对创建的对象具体格式化)创建对象，通过.format(格式化时间)将时间格式化返回字符串
  2. 通过格式化的指定属性分别是year、month、day、hour、minute
  3. 通过2-digit将数字转化为双数字，单数在前面加0
  4. 通过long将月份之类的转化为文字长字符串
  5. 通过short将月份之类的转化为文字短字符串
  6. 通过numeric将年月日转化为数字
  7. 通过navigator.language可以获得浏览器的ISO码
• Internationalizing Numbers(Intl)
  1. 通过new Intl.NumberFormat('当地ISO码', 对数字的格式化)创建对象，通过.format(格式化的数字)
  2. 通过style属性指定格式化为货币currency,再将currency属性设置为当地货币的英文
• setTimeout和setInterval
  1. 通过setTimeout(函数, 毫秒)设置指定时间后触发回调函数，执行一次
  2. 通过setInterval(函数, 毫秒)设置指定时间后触发回调函数，执行无限次
  3. 通过clearTimeout(设置回调的id)和clearInterval(设置回调的id)将回调取消
• 项目 bankist_Website
  1. 介绍项目
• 增删改
  1. 通过document.documentElement访问文档中的html节点
  2. 通过document.body访问html节点中的body节点
  3. 通过document.head访问html节点中的head节点
  4. 通过getElementsByTagName获得相应的节点，用get之类的获取的节点是实时，删除也会跟着删除
  5. 插入节点方法元素节点.prepend()、元素节点.append()、元素节点.after()和元素节点.before()
  6. 通过元素节点.cloneNode(true)则是将该节点克隆新节点，true则是将子节点都复制
  7. 通过元素节点.remove()方法直接将该元素节点删除
  8. 也可以通过元素节点.parentElement.removeChild(指定节点)删除节点
• styles、attributes和classes
  1. 可以通过元素节点.style访问内联式的属性,但是对于外部样式访问不到
  2. 通过getComputedStyle(元素节点).相应的属性可以获取到该元素的属性，不管是否是外部样式
  3. 通过元素节点.style.setProperty(修改属性, 属性大小)设置元素的样式属性
  4. 通过元素节点.src和元素节点.alt访问该属性的值
  5. 访问不了自定义属性
  6. 可以通过getAttribute(需要寻找的属性)获取属性，可以获取自定义属性
  7. 也可以设置自定义属性setAttribute(自定义属性名字， 属性值)
  8. 对于自定义属性data-自定义属性也可以通过元素节点.dataset.自定义属性访问到该属性值
  9. 通过元素节点.className赋值的，会将所有的其他class的覆盖
• 实现平滑翻滚
  1. 通过元素节点.getBoundingClientRect()获取元素节点的当前视窗顶点到该元素的距离也可以通过元素节点.getBoundingClientRect().top获取该元素节点Y轴的相对当前视窗到该元素的距离
  2. 通过window.scrollY和window.scrollX获取滑块的对应的距离
  3. 通过window.scrollTo(X位置, Y位置)将滑块滑到指定位置
  4. 也可以通过window.scrollTo({left: 指定位置， top: 指定位置, behavior: 'smoot'})设置为滑块滑到指定位置且平滑滑动
  5. 通过要滑到的元素.scrollIntoView({behavior: 'smooth'})平滑滑到该元素视窗
  6. 通过onmouseenter添加事件但只能添加一次，多次添加会被覆盖
  7. 通过addEventListener()可以添加多次事件

明日计划

• 明天十二点半起床，十三点开始学习JS基础知识
• 学习至下午五点半
• 晚上六点半学习React知识
• 学习至八点半