本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一、JS的基础事件
鼠标事件：
1.单击事件：onclick
<script>
//获取元素
var obtn = document.getElementsByTagName("button")[0]
//1.onclick单击事件:要执行的内容写在function函数里面
obtn.onclick=function(){
// alert(345)
// obtn.innerText="我是被修改的按钮"
// this表示当前发生事件的元素
this.innerText="我是被修改的按钮"
// console.log(this)
}
</script>
2.双击事件：ondblclick
<script>
//获取元素
var obtn = document.getElementsByTagName("button")[0]
// 2.ondblclick双击事件
// obtn.ondblclick=function(){
// alert(789)
// }
</script>
3.划入事件：onmouseover/onmouseenter
// 获取元素
var odiv = document.getElementsByTagName("div")[0]
// 3.鼠标划入事件
// odiv.onmouseenter = function(){
// // 鼠标划入打印1
// console.log(1);
// }
4.划出事件：onmouseout/onmouseleave
// 获取元素
var odiv = document.getElementsByTagName("div")[0]
// 4.鼠标划出事件
odiv.onmouseleave = function(){
// 鼠标划出打印2
console.log(2);
}
二、JS修改样式
先编写以下页面，在此基础上举例修改样式，具体代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: skyblue;
}
.div1{
width: 300px;
height: 300px;
background-color: orangered;
}
#div1{
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div >我是一个div盒子</div>
<input type="text">
<button>按钮</button>
<script>
//添加修改样式
</script>
</body>
</html>
在script标签中添加JS事件：
1.JS修改：style样式+样式属性+属性值
var odiv = document.getElementsByTagName("div")[0]
// 1.JS修改 style样式+样式属性+属性值
// odiv.onclick = function () {
// 单击后修改盒子颜色
// 1）点方式,注意这里是backgroundColor，而不是 background-color
// odiv.style.backgroundColor = "red"
// 2）中括号方式
// odiv.style["backgroundColor"] = "red"
// 使用中括号可以用变量名 var a ="backgroundColor"
// 然后传入变量a
// var a ="backgroundColor"
// odiv.style[a] = "red"
// 单击后修改字体颜色:直接用color
// odiv.style.color = "green"
// }
2.JS添加class属性：className
// 2.JS添加class属性（div中没有div1属性） className：无则增，有则改
// 先在style里面添加div1样式，然后直接用odiv.className = "div1"
// var obtn = document.getElementsByTagName("button")[0]
// obtn.onclick = function () {
// odiv.className = "div1"
// }
3.JS删除class属性：removeAttribute
// 3.JS删除class属性
// var obtn = document.getElementsByTagName("button")[0]
// obtn.onclick=function () {
// // 这里不是传入属性值，而是传入class，而不是传入div1
// odiv.removeAttribute("class")
// }
4.JS自定义属性：setAttribute
// 4.JS自定义属性:既可以加id，也可以加class，name
// var obtn = document.getElementsByTagName("button")[0]
// obtn.onclick=function (){
// // 给这个盒子加上id值等于div1的属性
// // class同理
// // odiv.setAttribute("id","div1")
// odiv.setAttribute("class","div1")
// }
5.JS查看属性值：hasAttribute
// 5.JS查看属性值
// var obtn = document.getElementsByTagName("button")[0]
// obtn.onclick=function (){
// // 有的话在控制台console处打印true,没有就打印false
// console.log(odiv.hasAttribute("class"));
// }
6.JS获取属性值：getAttribute
// 6.JS获取属性值
// var obtn = document.getElementsByTagName("button")[0]
// obtn.onclick=function (){
// console.log(odiv.getAttribute("class"));
// }
7.JS获取value值：.value
// 7.JS获取value值
// var oipt = document.getElementsByTagName("input")[0]
// var obtn = document.getElementsByTagName("button")[0]
// obtn.onclick = function(){
// // 控制台就会打印输入的value值
// console.log(oipt.value);
// }
8.JS修改样式
// 8.JS修改样式
var obtn = document.getElementsByTagName("button")[0]
obtn.onclick = function(){
odiv.style.cssText = "background-color:red"
}
三、JS数据类型
1.数值类型（包括小数和整数）：number
2.布尔类型（True，Flase）:boolean
3.字符串类型：string
4.对象：object
5.未定义：undefined
6.空值：null
具体使用方法如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script>-->
<!-- // script要写在头部的话必须加上这个语句，表示最后执行-->
<!-- window.onload = function(){-->
<!-- console.log(document.getElementsByTagName("button")[0]);-->
<!-- }-->
<!-- </script>-->
</head>
<body>
<button>按钮</button>
<script>
// 1.字符串类型string
var a = "123"
// 2.数值类型 number
var b = 123
// 3.数组 打印的都是对象类型object python里面叫列表
// var c = [1,2,3]
var c = {"name":123}
// 4.布尔型
var d=false
// 5.未定义undefined
// var e
// 6.空值 object 空对象
var e = null
console.log(typeof e);
</script>
</body>
</html>
