js介绍
js运行编写在浏览器上的脚本语言（外挂，具有逻辑性）
脚本语言：运行在浏览器上的独立的代码块（具有逻辑性） 操作BOM 浏览器对象盒子
操作DOM 文本对象
js三种引入方式
（1）行间式：书写在代码块写在全局事件属性中
<div id="box" onclick="this.style.backgroundColor = 'red'; "></div>
（2）内联式：书写在body最下方
<div id="temp"></div>
// js引入
<script>
temp.onclick = function () {
// 完成某一项功能
this.style.width = "400px"; // this => temp
}
</script>
（3）外联式：书写在cs文件中
<script src="1.js"></script> 书写在body最下方
res.onclick = function () {
this.style.backgroundColor = 'red';
}
js选择器（getElementBy() 与 querySelector ）
document ：所有的文件对象
getElement系列选择器
id选择器 ： getElementById("box")
document.getElementById("box").onclick = function () {
this.style.backgroundColor = 'red';
}
var box = document.getElementById("box");
box.onclick = function () {
this.style.backgroundColor = 'red';
}
类选择器：getElementsByClassName('box')
var box = document.getElementsByClassName('box'); //获取标签，得到是数组
box[0].onclick = function () {
this.style.backgroundColor = 'red';
}
box[1].onclick = function () {
this.style.backgroundColor = 'red';
}
标签选择器：getElementsByTagName
var box = document.getElementsByTagName('box'); // 获取标签，得到的是数组
box[1].onclick = function () {
this.style.backgroundColor = 'red';
}
querySelector系列选择器
位置选择器 （跟css选择器一样）
var box = document.querySelector( '.bb' );
var box1 = document.querySelectorAll( 'body .bb' ); 获取的body下的 类名为bb 的所有选择器
js四种调试方式
alert() 弹出框
console.log() 浏览器控制台查看
document.write() 写在html页面中 断点调试
js操作页面文档（三步骤）
（1）获取页面元素对象
（2）为该对象绑定事件
（3）通过事件操作元素对象
var box = document.querySelector(".box"); //获取指定标签
// 绑定事件
box.onclick = function() {
//操作内容
this.innerText = "innerText"; // 不能解析html标签
this.innerHTML = "<i>innerHTML</i>"; // 可以解析html标签
}
js修改标签内容
this.innerText = "innerText"; // 不能解析html标签
this.innerHTML = "<i>inn
js修改css样式
this.style.color = "red";
js修改类名
this.className = "box" 将类名改为box
在原类名上添加类名
Cname = this.className
cName = cName + " " + ".box" 将单类名改为双类名 清除类名
this.className = "" ；
js设置属性
var img = document.querySelector('img');
img.setAttribute("src", "https://www.baidu.com/img/baidu_jgylogo3.gif");
js获取属性值
img.getAttribute("src")
js获取计算后样式 getComputedStyle()（ 获取的是内联式，外联式 ）
var box = document.querySelector( '.box' ); getComputedStyle( 元素对象，伪类 ).属性名
ftSize = getComputedStyle( box,null ).fontSize; //只读内联，外联的样式值
this.style.color = "red"; //修改样式值