1-1 声明一个变量

什么是变量   可以将变量看成一个盒子，盒子是放在内存中的(占一定空间)，用来装数据的
使用var关键字声明变量 d1是变量名 = 给变量赋值
var d1 = 0;
console.log(d1);
变量命名规则：规则：语义化

1-2 数据类型 number,string,boolean

1-2-1 基本数据类型

1-2-1-1 number数据类型

var a = 10; number就是数字类型

1-2-1-2 string数据类型

使用单引号或者双引号包裹的字符串就是string类型
var a = 'a';
var b = "b";

1-2-1-3 boolean数据类型

值为 true / false 的数据是Boolean数据类型
var t = true;
var f = false;

1-2-2 引用数据类型 array，object，function tips:使用typeof可以判断数据类型

1-3 数组

1-3-1 如何声明一个数组

//数组是一个有序的集合
1.如何声明一个数组
var arr = [1,2,3];

1-3-2 获取数组中的值 tips: 数组的下标从0开始

1.获取数组中的值
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
2.如何获取数组的长度
console.log(arr.length);
3.获取数组的最后一位
console.log(arr[arr.length-1]);

1-3-3 数组的方法

向数组中加入元素:
    push 添加到数组的末尾--> 上啦刷新，分页
    unshift 添加到数组的头部 --> 历史记录，搜索
    arr.push('js');
    // [1,2,3,'js']
    arr.unshift('html');
    // ['html',1,2,3,'js']
    console.log(arr);

1-4 对象

                // json 对象 {key-键：value-值}
        var cheng = {
            'name':'cheng',
            'age':18,
            'sex':'male'
        }
        var li = {
            name:'lis',
            age:20
        }
        // . 表示'的'的意思 
        console.log(li.name);

1-5 函数

                什么是函数：就是封装特定功能的代码块 接口思想
        function go(){
            // 代码块
            console.log('hellow, world')
        }
        // 函数只有调用的时候才会执行
        // 调用方法：函数名 + ();
        go();

1-6 for循环

for(var i= 0;i<=3;i++){
     console.log(i); //0 1 2 3
 }

1-7 交互效果

// DOM document object model 文档 对象 模型
// 关于对元素进行增删改查的标准
// var d1 = document.getElementsByClassName('d1');
var d1 = document.getElementsByClassName('d1')[0];
var btn = document.getElementById('btn');
var btn1 = document.getElementById('btn1')
console.log(d1,btn,btn1);
//onclick 点击事件
btn.onclick = function(){
// alert('猴赛雷');
//alert(); 页面上的弹窗
    d1.style = 'display:none';
}
btn1.onclick = function() {
    d1.style = 'display:block';
}

1-8 后代选择器拓展

//:nth-child(?)  第几个元素
div:nth-child(1){
      color: red;
  }
  :lash-child //最后一个
  :first-child //第一个
  //tips:必须是同一标签才生效

1-9 倍数选择器

// 注释：不包含第四个元素及四的倍数的元素
## ：not()    不包含
## ：nth-child()    第几个元素
## 4n+4    第四个元素及其它的倍数元素
div:not(:nth-child(2n+2)){
    color: pink;
}
//tips:必须是同一标签才生效