css JavaScript小记

环境对象this

谁调用指向谁 

遇到的问题

水平居中

 e.preventDefault()组织表单提交跳转

info为表单form元素

模板字符串

可以以此来生成带有逻辑的字符串结果

for (let i = 0; i < arr.length; i++) {
    // 生成 tr 
    const tr = document.createElement('tr')
    tr.innerHTML = `
    <tr>
    <td>${arr[i].time}</td>
    <td>${arr[i].task}</td>
    <td>${arr[i].type}</td>
    <td><input type="checkbox" class="completed" ${arr[i].completed===true?"checked":''}></td>
    <td><a href="javascript:" data-id=${i}>删除</a></td>
  </tr>
    `
    // 追加元素  父元素.appendChild(子元素)
    tbody.appendChild(tr)

向下滚动显示导航(顶部导航栏自动滑出)

JavaScript的offset、client、scroll家族属性 - 知乎

//顶部导航栏自动滑出
    (function () {
      const sticky = document.querySelector('.sticky');
      const header = document.querySelector('.xtx_header .wrapper');
      const headerTop = header.offsetTop;
      const heaerHeight = header.clientHeight;
      const top = headerTop + heaerHeight;
      window.addEventListener('scroll', function () {
        const n = document.documentElement.scrollTop;
        if (n >= top) {
          sticky.style.top = '0px';
        } else {
          sticky.style.top = '-80px';
        }
      })
    })();

二维数组转一维数组

 let list = [
           [1,2,3],[4,5],[6,7,8],[9]
        ]
        let lists = list.flat()
        console.log(lists)

正则表达式赋值给变量

不需要加双引号

js querySelector() 说明 属性类名

js querySelector() 说明_js queryselector css选择 某一属性等于-CSDN博客

• 如果要通过name选择元素，需要在选择器中加上[name=“value”]格式的属性选择器，如：

document.querySelector('[name="abc"]'); // 选择name为"abc"的元素

js函数执行问题 给事件添加函数

confirmBut.addEventListener('click',a())

这样写会直接触发且不能添加成功

JavaScript 匿名函数的坑

如果加了花括号，但是没有 return 语句，默认会返回 undefined

dataItem.sort((next,pre)=>pre.date.getTime()-next.date.getTime()``)

  dataItem.sort((next,pre)=>{
        return pre.date.getTime()-next.date.getTime()

    })

css

多类名类

css选择器写法.xtx-header.fixed 连在一起