JS入门

1.什么是JS？

js属于编写运行在浏览器上的脚本语言，js采用ECMAScript语法。

操作BOM：浏览器对象模型，浏览器的历史记录

操作DOM：文档对象类型，修改页面内容

2.JS引入

<style>
    #box, #wrap, #temp, #res {
         200px;
        height: 200px;
        background-color: red;
        margin-top: 10px;
    }
</style>
<!--1.行间式: 就是代码块书写在全局事件属性中-->
<!--this就是激活该代码块(脚本)的页面标签(页面元素对象)-->
<div id="box" onclick="this.style.borderRadius = '10px'"></div>
<div id="wrap" ondblclick="this.style.backgroundColor = 'orange'"></div>

<div id="temp"></div>
<!--2.内联式-->
<script>
    // id为标签的唯一标识, 使用可以识别到html的具体标签
    temp.onclick = function () { // 完成某一项功能
        this.style.width = "400px";  // this => temp
    }
</script>

<div id="res"></div>
<!--3.外联式-->
<script src="js/1.js">

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

3.JS选择器

<div id='box' class="bb"></div>
<div class='box1 bb'></div>
<div class='box1 bb'></div>
<script>
// getElement系列
// box
var box = document.getElementById('box');
// [] | [.box1] | [.box1, ..., .box1]
var boxs = document.getElementsByClassName('box1');  
// [] | [div] | [div, ..., div]    
var divs = document.getElementsByTagName('div');  
    
// 总结: 参数采用的是id名或类名或标签名,不需要带符号(#|.)
</script>

<script>
// 只能获取检索到的第一个满足条件的标签(元素对象)
var div = document.querySelector('.bb');  
// 获取的是满足条件的有双类名的.box1.bb
var divs = document.querySelectorAll('body .box1.bb');
    
// 总结: 参数采用的就是css选择器语法
</script>

4.事件

元素.on事件名 = function() {}

box.onclick = function() {}

var box = document.querySelector('.box');

// 元素对象.事件名 = 函数
box.onclick = function() {
    // 具体功能代码块; this代表就是激活该事件的元素对象
    this.style.color = 'red'; // 将box的字体颜色修改为红色
}

5.操作页面文档

// 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"; // 多类名之间用空格隔开, 所有做字符串拼接时一定需要添加空格

　　// var cName = this.className;
　　// console.log(cName);
　　// cName = cName + " " + "box1";
　　// console.log(cName);
　　// this.className = cName;

　　// 清除类名
    this.className = "";  // 将类名等于空字符串就是置空类名
}

6.计算后样式

// 内联或外联设置的(行间式设置getComputedStyle也能获取到)
.box {
    font-size: 100px;
}

// 如何获取计算后样式
// getComputedStyle(元素对象, 伪类).属性名
var box = document.querySelector('.box');
var ftSize = getComputedStyle(box, null).fontSize;
console.log(ftSize);  // 100px

7.定义变量

//定义变量
var num = 10;
var s = 'hello js';

//将字符串赋值给页面元素对象
box.innerText = s;

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

8.数据类型

1.值类型

// Number: 数字类型
var a1 = 10;
var a2 = 3.14

// String: 字符串
var s1 = "123";
var s2 = '456';

// undefined: 未定义
var u1;
var u2 = undefined;

// Boolean: 布尔
var b1 = true;
var b2 = false;

// typeof() 来查看类型

2.引用类型

// Object 当作字典
var obj = {
　　name: 'bob',
　　age: 18
};

// Function
var func = function(){
　　return: 0;
}

// Null 空对象
var n = null;

数组与对象（字典）的使用：

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命名规范时,只能使用中括号语法

3.其他类型

//数组对象
a = new Array(1,2,3,4,5);
a = [1,2,3,4,5]; # 语法糖，字面量，笑笑语法

//时间对象（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 不区分大小写