截取一部分数组

               console.log('原数组: ', list)
            // var res = list.splice(3, 3)  // 会导致原数组的数据被剪切掉, 所以不能使用
            // var res = list.slice('开始下标', '结束下标')
             var res = list.slice(4, 8)  // 参数特点: 包前不包后, 包含开始下标, 不包含结束下标   所有截取下标包括4，5，6，7
            // console.log(res)
            // console.log('截取后的数组: ', list)

关于分页截取数据

       设计
        var currentNum = 1  // 默认在 第一页
        var pageSize = 4    // 默认每页展示 4 条数据
        var totalNum = 0    // 计算总页码
          /**
         *  0.1 截取部分数据, 渲染页面
         * 
         *      假设 当前是第 1 页  每页展示 4 条
         *              页码 === 1          =>      [0]~[3]
         *              页码 === 2          =>      [4]~[7]
         *              页码 === 3          =>      [8]~[11]
         * 
         *      我们假设 当前页的数字存储在 currentNum 中, 每页展示多少条的数字存储在 pageSize 中  第一版理解， 第二版与第三版使用
         * 
         *          第一版
         *          开始下标: (currentNum - 1) * pageSize
         *          结束下标: currentNum * pageSize - 1
         * 
         *      但是 我们用的截取的方法参数有一个特点: 包前不包后, 所以开始下标不变, 结束下标 需要 + 1
         * 
         *          第二版
         *          开始下标: (currentNum - 1) * pageSize
         *          结束下标: currentNum * pageSize - 1 + 1
         * 
         *      所以最终的优化版本
         * 
         *          第三版
         *          开始下标: (currentNum - 1) * pageSize
         *          结束下标: currentNum * pageSize
        */
        var newArr = list.slice((currentNum - 1) * pageSize, currentNum * pageSize)

改变事件

     获取标签名.onchange = function () {
    onchange 事件会在域的内容改变时发生。
    onchange 事件也可用于单选框与复选框改变后触发的事件。
             
            }

点击事件

    获取标签名.onclick = function () {
       
       
    }

浏览器的滚动事件

    window.onscroll = function () {
        console.log('当前函数也不需要调用, 会在浏览器发生滚动事件的时候执行')
    }

浏览器延迟加载事件

        window.onload = function () {
            /**
             *  在以前开发的时候, 我们会将 所有的 JS 代码, 全都放在这个函数中运行
             * 
             *  因为在这个函数中运行的时候, 可以保证页面所有的资源已经加载完毕了, 比如  标签, 图片
            */
            console.log('当前函数不需要调用, 会在当前页面的所有资源加载完毕的时候执行')
        }

渲染函数

      function bindHtml() {
      
      }
      bindHtml() 
   页面渲染就是浏览器将HTML变成人眼看到的图像的全过程。

字符串扩展 ，与${}

/**
         *  扩展:
         *      字符串需要使用 '' 或者 "" 包裹, 但是不能换行, 内部也不能书写变量
         * 
         *      如果想要书写换行或者书写变量, 那么需要使用 `` 反引号
         * 
         *      如果需要在 `` 内 书写换行, 那么直接换行就行
         *      如果需要在 `` 内书写变量 需要使用 ${} 将变量包裹
        */

    /**
     *  创建一个渲染函数, 页面打开的时候调用
    */

    function bindHtml() {
        var str = ``
        for (var i = 0; i < dataList.length; i++) {
            str += `
                <li>
                    <img src="${dataList[i].imgurl}" alt="">
                    <p>${dataList[i].title}</p>
                </li>
            `
        }
        // console.log(str)
        document.querySelector('ul').innerHTML = str
    }

    bindHtml()

通过 属性名 是能够获取到 对象中的 属性值

                // console.log(dataKeys[k]) // 获取到 对象中的 所有属性名
                // console.log(data[i])    // 获取到 每一个对象

                /**
                 *  data[i] === {id: 1, name: '张三', age: 25, city: '北京'}
                 *  dataKeys[k] ===  他的值就是上述对象的某一个 属性名
                 * 
                 *  通过 属性名 是能够获取到 对象中的 属性值
                 *
                 *      语法: 对象[属性名]
                 *      根据语法并结合当前 案例:        data[i][dataKeys[k]]
                */

创建标签，添加到父元素 createElement ， appendChild

// 1. 创建一个 tr 标签, 后续用于追加到 table
                    var myTr = document.createElement('tr')
// 创建 td
                    var myTd = document.createElement('td')
// 将 处理好的 td 追加到 tr 中 //  就是创建的子元素 添加到父元素中
                    myTr.appendChild(myTd)

innerHTML 与 appendChild 的区别

  appendChild 必须与 document.createElement('') 搭配使用
  document.createElement('') 是创造了一个Dom节点，也就新的标签
  innerHTML = 与他拼接的内容必须是'字符串' ，他也可以识别字符串中的标签 ，反应到页面上
  这俩无论用哪一个都可以把元素反应到页面上

e.target

  /**
         *  e.target    点击谁就是谁, 触发的事件源
         *  e.target.parentNode 触发的事件源的父级
         *  e.target.parentNode.parentNode  触发的事件源的父级的父级
         *  e.target.parentNode.parentNode.classList.add('editing')     给触发的事件源的父级的父级添加一个类名
         */