JavaScript
JavaScript
大纲
1、JS 基本使用
JavaScript基本写法
第一种：在Script标签里写入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 基本使用 </title>
</head>
<body>
<!--JavaScript基本写法-->
<!--第一种：在Script标签里写入-->
<script>
// 输出的一种模式，在浏览器控制台显示内容
console.log("hello world")
</script>
</body>
</html>
第二种： 外部的js文件引入
新建 js 文件
// 输出的一种模式，在浏览器控制台显示内容
console.log("人生苦短，我用Python")
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 基本使用 </title>
<!--如果是标准库，一般会在这里引入-->
</head>
<body>
<!--JavaScript基本写法-->
<!--第二种：在外部的js文件引入-->
<script src="demo.js"></script>
</body>
</html>
标准库：https://www.runoob.com/js/js-reserved.html
JS 基本写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 基本写法</title>
</head>
<body>
<div> hello world </div>
<script>
// var 声明、定义 obj 变量名，随意取 document 文档
// getElementsByTagNameNS 获取多个标签 [0] 通过下标获取第一个标签
var obj = document.getElementsByTagName("div")[0];
// 通过对象修改源文件 innerText 获取标签内的文字 innerHTML 不仅能获取到标签内的文字，还能获取到标签 修改后的内容:"你好，世界"
obj.innerText = "你好，世界"
</script>
</body>
</html>
JS书写的规范
1、严格区分大小写
2、每一段代码写完，分号；结尾
3、不使用关键字命名
4、代码缩进，保持可读性
JS 获取元素
第一种：通过id获取标签内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 获取元素</title>
</head>
<body>
<div class="box" id="div1">我是第一个div盒子</div>
<div class="box" id="div2">我是第二个div盒子</div>
<input type="text" name="hello" placeholder="请输入">
<!--获取元素-->
<script>
// 第一种通过id获取标签
var ID = document.getElementById("div1");
// 通过标签对象获取标签，查看是否获取到标签
console.log(ID);
// 修改标签内的文本
ID.innerText = "获取第一个盒子成功"
</script>
</body>
</html>
第二种：通过class获取标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 获取元素</title>
</head>
<body>
<div class="box" id="div1">我是第一个div盒子</div>
<div class="box" id="div2">我是第二个div盒子</div>
<input type="text" name="hello" placeholder="请输入">
<!--获取元素-->
<script>
// 第二种：通过class获取标签
// class获取的是全部，如果要改变当中的某一个，可以加上对应的索引
var dcm = document.getElementsByClassName("box")[1];
console.log(dcm);
dcm.innerText = "获取第二个盒子成功"
</script>
</body>
</html>
第三种：通过标签名获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 获取元素</title>
</head>
<body>
<div class="box" id="div1">我是第一个div盒子</div>
<div class="box" id="div2">我是第二个div盒子</div>
<input type="text" name="hello" placeholder="请输入">
<!--获取元素-->
<script>
// 第三种：通过标签名获取
// 标签名取到的是全部，要改变当中某个，可以加上对应的索引
var Name = document.getElementsByTagName("div")[0];
console.log(Name);
Name.innerText = "改变第一个盒子成功"
</script>
</body>
</html>
第四种：通过name属性获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 获取元素</title>
</head>
<body>
<div class="box" id="div1">我是第一个div盒子</div>
<div class="box" id="div2">我是第二个div盒子</div>
<input type="text" name="hello" placeholder="请输入">
<!--获取元素-->
<script>
// 第四种：通过name属性获取
// name 取到的是全部，要改变当中某个，可以加上对应的索引
var Name = document.getElementsByName("hello")[0];
console.log(Name);
Name.innerText = "改变输入信息成功"
</script>
</body>
</html>
第五种：通过css选择器获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 获取元素</title>
</head>
<body>
<div class="box" id="div1">我是第一个div盒子</div>
<div class="box" id="div2">我是第二个div盒子</div>
<input type="text" name="hello" placeholder="请输入">
<!--获取元素-->
<script>
// 第五种：通过css选择器获取
// 取出第一个标签
var Select = document.querySelector(".box");
console.log(Select)
// 取出所有标签
var SelectAll = document.querySelectorAll(".box");
console.log(SelectAll)
</script>
</body>
</html>
2、JS 简单事件
单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单击事件</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
background-color: hotpink;
}
</style>
</head>
<body>
<div class="box">原盒子内容</div>
<!--单击事件-->
<script>
var oBox = document.getElementsByClassName("box")[0];
console.log(oBox)
// 调用单击事件的方法
oBox.onclick = function (){
// this 代表当前这个对象 oBox
this.innerText = "盒子内容改变成功";
}
</script>
</body>
</html>
双击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双击事件</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">原盒子内容</div>
<!--双击事件-->
<script>
var rebox = document.getElementsByClassName("box")[0];
console.log(rebox);
// ondblclick 双击事件
rebox.ondblclick = function (){
rebox.innerText = "修改盒子内容成功"
}
</script>
</body>
</html>
鼠标划入划出事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标划入划出事件</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">原盒子内容</div>
<!--鼠标划入划出事件-->
<script>
var oBox = document.getElementsByClassName("box")[0];
// onmouseenter 鼠标划入
oBox.onmouseenter = function (){
oBox.innerText = "鼠标划入显示"
}
// onmouseleave 鼠标划出
oBox.onmouseleave =function (){
oBox.innerText = "鼠标划出显示"
}
</script>
</body>
</html>
窗口变化事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>窗口变化事件</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">原盒子内容</div>
<!--窗口变化事件-->
<script>
var oBox = document.getElementsByClassName("box")[0];
// 窗口变化
window.onresize = function (){
console.log("窗口发生变化时显示")
oBox.innerText = "窗口正在发生变化"
}
</script>
</body>
</html>
改变下拉框事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变下拉框事件</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<!--下拉框-->
<select name="" id="">
<option value="">广州</option>
<option value="">长沙</option>
<option value="">湖南</option>
<option value="">北京</option>
</select>
<!--改变下拉框事件-->
<script>
var sl = document.getElementsByTagName("select")[0];
// onchange 下拉框
sl.onchange = function (){
console.log("下拉框变化时显示")
}
</script>
</body>
</html>
3、JS 修改样式
直接修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 修改样式 </title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var oBox = document.getElementById("box");
// 方法一：
// 修改宽度
oBox.style.width = "100px";
// 修改高度
oBox.style.height = "100px";
// 修改背景颜色
oBox.style.background = "red";
// 方法二：
oBox.style.cssText = "width:200px;height:200px;background:yellow";
// 修改外边距
oBox.style["margin-left"] = "50px";
// 或者另一种写法
oBox.style.marginLeft = "200px";
</script>
</body>
</html>
使用变量写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 修改样式 </title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var oBox = document.getElementById("box");
// 用变量写
var a = "width"
var b = "10px"
// 或者 var a = "width";b = "10px";
oBox.style[a] = b
</script>
</body>
</html>
修改属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 修改属性</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<!--target="_blank"在新窗口打开 xy="myself" 自定义属性,当其他属性不可用时，用自定义属性-->
<a href="https://www.baidu.com" id="ID" target="_blank" class="rap" xy="myself">走马观花一朵花</a>
<script>
var obj = document.getElementById("ID");
// 修改属性 更改打开方式 从新窗口打开改成 _self 在当前网页打开
obj.target = "_self"
// 获取id
console.log(obj.id)
// 修改属性
obj.className = "wrap"
console.log(obj.className)
// 修改自定义属性 setAttribute 有则改，无则增
obj.setAttribute("xy","yourself")
// 添加属性
obj.setAttribute("name","keai")
</script>
</body>
</html>
4、JS 数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 数据类型</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<script>
// number类型
var a = 2
var b = 2.5
// object 数组
var c = []
// object 字典
var d = {}
// boolean 布尔
var e = true
// object 空
var f = null
// undefined 未被定义
var g
// 查看数据类型
alert(typeof a)
alert(typeof b)
alert(typeof c)
alert(typeof d)
alert(typeof e)
alert(typeof f)
alert(typeof g)
</script>
</body>
</html>
