切换元素状态和循环语句

匿名函数

/*没有名字的函数叫做匿名函数，可用作函数声明中的函数表达式，其中函数表达式中的具名函数只作用于函数体内部*/
title.addEventListener('click', function () {
    if (panel.style.display == 'block') {
        panel.style.display = 'none';
        title.style.background = '#fff';
    } else {
        panel.style.display = 'block';
        title.style.background = '#eee';
    }
});

使用class表达状态

• 第一步：选中需要添加active的元素，添加class属性

$0 /*获得该元素*/

• 第二步：判断是否有active class属性

$0.classList.contains('active'); /*判断是否有active class，true表示有，false表示没有*/

• 第三步：根据判断结果添加或移除active class

$0.classList.add('active'); /*结果为false，添加active class*/
$0.classList.remove('active'); /*结果为true，移除active class*/

优化元素选择，document表示从页面中去查找元素

/*优化选择前代码/
var box = document.querySelector('.user-center');
var title = document.querySelector('.user-center .title');
var panel = document.querySelector('.user-center .panel');

/*优化选择后代码,从已经选择出的box当中精确选择元素/
var box = document.querySelector('.user-center');
var title = box.querySelector('.user-center .title');
var panel = box.querySelector('.user-center .panel');

正确使用for语句 for语句 mdn文档

/*基本格式，变量i可改，并且从0开始索引，n表示语句执行的次数*/
for (var i = 0; i < n; i ++) {
  循环代码
}

/*注意：不能直接在循环语句内部绑定事件，要通过一个函数来绑定事件，只能在循环语句后面定义一个函数来绑定事件，参数是循环变量，为保证循环语句单一，参数需另外命名*/

ul-li js知识

var li = menu.querySelector('li');  /*只会查找第一个li*/
var lis = menu.querySelectorAll('li');  /查找全部li*/

console.log(li); /*只会输出第一个li*/
console.log(lis); /输出全部li*/

console.log(lis[0]); /*输出第一个li*/
console.log(lis[4]); /*输出第五个li*/

console.log(lis.length); /*length属性，输出li的个数*/