遇到的一些问题

1.ul 里面的 li 不能紧靠ul左侧

解决方法：给ul设置padding-left:0;

2.ul 与其他盒子之间有间隙

解决方法：给ul的父级设置overflow:hidden;

添加之前：

添加后

3.修改之后li与ul上面还是有边距

解决方法：给ul添加font-size:0;
注意：给li添加margin:0;不能解决

补充：最近学习过程中发现123问题的出现是没有清除浏览器外边距，应该设置*{margin:0;padding:0;},当时写小案例想着难得写（难受.jpg）

4.js点击背景图片切换

js代码

<script>
        var images = document.querySelector('.nav').querySelectorAll('img'); //获取nav下面的 所有img
        for (var i = 0; i < images.length; i++) { //循环
            images[i].onclick = function() { //images里面的第 i 个 点击事件
                console.log(this.src);
                document.body.style.backgroundImage = 'url(' + this.src + ')';
                // this.src 就是我们点击图片的路径   images/2.jpg
                // 把这个路径 this.src 给body 就可以了
                //body的背景图片 url(images/1.jpg) 更换为 '+this.src+';
            }
        }
    </script>

参考来源：
 [link](https://blog.csdn.net/llt299022/article/details/113793980).

pink老师也是用的这种方法，但是我得浏览器测试出来始终不对，苦苦寻觅之后，找到一个大佬的解决方案：把var换成let。然后真的成功了！！！感动天地

参考来源：[link](https://blog.csdn.net/Harlynn_/article/details/109081735).

至于let和var的区别，还是要再去看看，但是最后发现换成了let，this.src还是不行。只能用i+1的方法更换图片。

5. unexpected token u in json at position 0报错

在写todoList的时候遇到了这个报错，先看代码：

//2.读取本地存储函数
    function getData() {
        var data = localStorage.getItem('todolist');
        if (data !== null) {
            return JSON.parse(data);
        } else {
            return [];
        }
        // return JSON.parse(data || '[]');
    }

//3.将数据存到本地存储
    function saveData(obj) {
        localStorage.setItem('todolist', JSON.stringify(obj));
    }

我存储的对象:

var todolist = [{
        title: '吃饭',
        done: false
    }, {
        title: '睡觉',
        done: true
    }, ];

刚开始还行，但是写着写着就有这个问题了。应该 没有写错，主要是最后也没找到问题，然后又不报错了。。。
stringify（）：里面只能传对象或者字符串，然后将传入的对象解析成JSON字符串。
parse（）：传入被解析成 JavaScript 值的字符串
相关文档说明：

JSON.parse() 不允许用逗号作为结尾
// both will throw a SyntaxError
JSON.parse("[1, 2, 3, 4, ]");
JSON.parse('{"foo" : 1, }');

6.id属性无法获取元素

解决：用class来获取
html

<input type="text " class="title " name="title " placeholder="添加ToDo " required="required " autocomplete="off " />

js代码

 $('.title').on('keydown', function(event) {
        if (event.keyCode === 13) {
            if ($(this).val() === '') {
                alert('请先输入数据');
            } else {
                var local = getData(); //获取本地存储中的数据
                //把local数组进行更新数据
                console.log($(this).val());
                local.push({ title: $(this).val(), done: false });
                //把更新后的数据再存储到本地数据
                saveData(local);
                //将本地数据渲染加载到页面
                load();
                $(this).val('');
            }
        }

不知道为什么id不能获取，然后后台测试一直不能获取表单里的内容，找了很久之后才发现id的问题，然后改成用class来获取就行了，之前用传统js方法获取元素的时候也出现过这种问题。

7.echars.js文件报错

今天刚好学到数据可视化了，去官方下载echars.min.js文件，好几个版本的引进去源代码都是疯狂报错


明天再解决了…
解决方法：直接从资料包里面把老师的文件嫖过来！

8.overflow:hidden设置无效

我的问题是没有没有给盒子设置高度。

9.动画跟着盒子跑

html:
一个盒子里面装了很多内容，想让这个内容滚动起来
css动画：
直接给这个盒子设置的动画，当时没想明白怎么内容一直往上跑，而且我的盒子有overflow:hidden，内容也在网上走，检查结果是：因为我给是给这个盒子设置动画，所以一直都是盒子在往上跑，所以内容肯定也要跑。
解决方法：用两个盒子装：第一个盒子固定位置，第二个盒子才来做动画。