js 引入与选择器；对文档修改；数据类型基础语法；计算后样式

js 属于编写运行在浏览器的脚本语言

js 采用的是ECMAScript语法

可以操作文档对象DOM

操作浏览器对象模型BOM

外联式内联式行间式

行间式 <div class='box' onclick='this.style.borderRadius="10PX"'></div>

内联式

id.onclick=function（）{this.style.background-color=red}

</script>

外联式

<script src="js/1.js">
    // 有src链接外部js的script标签相当于单标签, 会自动屏蔽标签内部代码块
</script>

res.onclick = function () { // res点击会触发一个功能
this.style.height = "100px"; // this => res
this.style.backgroundColor = "yellow";
this.style.borderRadius = "50%";
}

一般放在body后面使得被识别到

变量

//命名规范：
// 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
// 区分大小写
// 不能出现关键字及保留字
// var var = 30;  // 出错

js 选择器

结合变量 id两个重复不报错但是只能找到一个

var box = document.getElementById('box');
// [] | [.box1] | [.box1, ..., .box1]
var boxs = document.getElementsByClassName('box1');
// [] | [div] | [div, ..., div]
var divs = document.getElementsByTagName('div');

// 参数: css语法的选择器

var box2s = document.querySelectorAll('body .box2');

console.log(box2s);

var box2 = document.querySelector('body .box2');

console.log(box2);

// 总结: 参数采用的是id名或类名或标签名,不需要带符号(#|.)

后面就可以跟函数比如 .onclick.func（）{}

基础语法

事件

元素对象.事件名=函数

// 1. 通过选择器获取页面元素对象(指定的标签)
// 2. 为该对象绑定事件
// 3. 通过事件中的功能操作元素对象
// i) 修改内容: innerText | innerHTML
// ii) 修改样式
// iii) 修改类名

var box = document.querySelector('.box'); // 获取页面元素
box.onclick = function () { // 绑定事件
// 修改内容
// this.innerText = "innerText"; // 不能解析html标签
// this.innerHTML = "<i>innerHTML</i>"; // 可以解析html标签

// 修改样式 => 修改的是行间式 => 优先级高于所有内联外联样式(没有设置!important)
// this.style.color = "green";
// this.style.fontSize = "12px";

// 修改类名
// this.className = "box1"; // 直接修改类名, 会丢失之前类名下的属性们
// 在原类名基础上添加类型
this.className += " box1"; // 多类名之间用空格隔开, 所有做字符串拼接时一定需要添加空格
// 清除类名
this.className = ""; // 将类名等于空字符串就是置空类名
}

计算后样式

内联外联这种

获取样式属性

var box=document.querySelector('box')；先用选择器找到标签对象

var ftsize=getComputedStyle(box,null)通常取null然后 .属性

console.log（ftsize）;

数据类型

值类型Number

var a=3

字符串String

var s='yu'

未定义：Undefined

var a;

var a=underfined

布尔类型Boolean

var a=true

typeof()查看类型

引用类型

Object

var obj={};

```js
// Object
var obj = {};

// Function
var func = function(){}

// Null
var n = null;

 // 5.Function
    a = function () {
        return 0;
    }
    console.log(a, typeof(a));


    // 6.Object => 当做字典
    a = {
        name: "Bob",
        age: 18
    }
    console.log(a, typeof(a));

    // 7.Null => 空对象
    a = null;
    console.log(a, typeof(a));


    // 其他
    // 数组对象
    a = new Array(1, 2, 3, 4, 5);
    console.log(a, typeof(a));
    a = [5, 4, 3, 2, 1];  // 语法糖
    console.log(a, typeof(a));

    // 时间对象 (cookie)
    a = new Date(); // 当前时间
    // a = new Date("2019-3-1 12:00:00");  // 设定的时间
    console.log(a, typeof(a));
    var year = a.getFullYear();
    console.log(year)
    console.log(a.getDay())  // 周几
    console.log(a.getMonth())  // 月份(从0)
    console.log(a.getDate())  // 几号

    // 正则
    var re = new RegExp('\d{3}', 'g');
    var res = "abc123abc123".match(re);
    console.log(res);

    re = /d{2}/g;
    res = 'a1b23c456'.match(re);
    console.log(res);

    re = /[abc]/gi;
    res = 'aBc'.match(re);
    console.log(res);
    // 总结:
    // 1.正则 /正则语法/
    // 2.参数g 全文匹配
    // 3.参数i 不区分大小写


    // 数组与对象(字典)的使用
    var arr = [3, 5, 2, 1, 4];
    console.log(arr[2]);

    var dic = {
        "name": "Bob",
        age: 18,
        "little-name": "b"
    }

    console.log(dic['name']);
    console.log(dic['age']);
    console.log(dic.name);
    console.log(dic.age);
    console.log(dic["little-name"])
    // dic中所有的key都是string类型, value可以为任意类型
    // dic中key可以通过中括号及.语法访问值,但key不满足js命名规范时,只能使用中括号语法

</script>
</html>