一、JavaScript介绍
作用：如果把HTML比做一个人，那么CSS就是衣服，那JS就是指人的动作和行为；
书写：JS代码可以直接写在script标签里面，或者写在其他的.js后缀文件中，并通过script标签引入。
要求：1. 一般把script标签写在head或者body里；2. 要注意的是是否需要加上window.onload；3. 如果没有特殊要求，一般script标签放在body结束之前。
1. 在body之前书写；2. 在head中书写；3. 在js文件中书写。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的使用方式</title>
<!-- 2. 写在head标签里面,需要以window.onload引入-->
<script>
/*加载完当前页面的HTML元素后再加载这个方法里面的代码*/
window.onload = function () {
alert(456)
console.log(456)
console.log(456);
}
</script>
</head>
<body>
<!-- 1. 写在body标签里面 ！！！推荐使用！！！-->
<script>
alert(123)
console.log(123)
</script>
<!-- 3. 写在外部js文件里面，用script标签引入-->
<script src="js/demo_js.js"></script>
</body>
</html>
二、JS获取元素
意义：在js中想要操作元素，或者说执行一些行为，首先需要获取到对应的元素。才能进行下一步的操作，所以要首先学会如何获取元素。
JS获取独有标签：
document.title 获取标题
document.head 获取头部信息
document.body 获取body内容
其他标签的获取：
1. 通过id获取元素：document.getElementById("idname");
2. 通过class获取元素：document.getElemnetByClassName("classname");
3. 通过标签名获取元素：document.getElementByTagName("tagname");
4. 表单中的name：document.getElementsByName("name");
5. selector选择器（不兼容IE7及以下）：
①. document.querySelector(" "); 通过CSS选择器获取一个
②. documnet.querySelectorAll(" "); 通过CSS选择器获取所有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1">山有木兮木有枝，心悦君兮君不知</p>
<p class="p2">人生若只如初见，何事秋风悲画扇</p>
<p>只愿君心似我心，定不负相思意。</p>
<p class="p2">入我相思门，知我相思苦。</p>
<p>玲珑骰子安红豆，入骨相思知不知。</p>
<p class="p2">愿得一心人，白头不相离。</p>
<p>玲珑骰子安红豆，入骨相思知不知。</p>
<label for="username">用户名</label>
<input type="text" name="username" id="username" placeholder="请输入用户名" value="lili">
性别：<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<input type="radio" name="sex" value="-1">保密
<ul>
<li id="li1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
/*通过id获取元素，只有id不需要加下标*/
var p_id = document.getElementById("p1") /*通过var定义一个变量接受获取到的元素*/
console.log(p_id)
p_id.innerText='十年生死两茫茫，不思量，自难忘'
/*通过class获取元素*/
var p_class=document.getElementsByClassName("p2")[2]
console.log(p_class)
//通过标签名获取元素
var p_tag=document.getElementsByTagName("p")[4]
console.log(p_tag)
//通过name属性获取元素
var ipt_name=document.getElementsByName('username')[0]
console.log(ipt_name)
//获取元素的值（ipt_name.value）
var ipt_value=ipt_name.value
console.log(ipt_value)
/*通过css选择器获取元素（只能获取选择器的第一个元素，且只能获取第一个元素，加下标没有作用）*/
var p_123=document.querySelector('.p2')
console.log(p_123)
//通过CSS选择器获取所有元素
var p_234=document.querySelectorAll('.p2')
console.log(p_234[0])
/*了解即可*/
var uli=document.getElementsByTagName('ul')
// var li2=uli[0].getElementsByTagName('li')[0]
// console.log(li2)
// var li1=document.getElementById('li1')
var li1=uli[0].getElementById('li1')
console.log(li1)
</script>
</body>
</html>
三、JS基础事件
含义：所谓事件，是指Javascript捕获到用户的操作，并做出正确的响应
使用：在事件函数里，有一个关键字this，代表当前事件的这个元素
鼠标事件：
1. 左键单击 onclick
2. 左键双击 ondbclick
3. 鼠标移入 onm ouseover/onmouseenter
4. 鼠标移出 onm ouseout/onmouseleave
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js事件</title>
</head>
<body>
<p id="p1">山有木兮木有枝，心悦君兮君不知</p>
<p class="p2">人生若只如初见，何事秋风悲画扇</p>
<p>只愿君心似我心，定不负相思意。</p>
</body>
<script>
var p_id = document.getElementById('p1')
<!-- 鼠标点击事件-->
p_id.onclick = function () {
p_id.innerText = "玲珑骰子安红豆，入骨相思知不知"
}
/*鼠标双击事件*/
p_id.ondblclick = function () {
/*this代表事件发生的当前元素*/
/*style. 修改单个css样式*/
/*样式中存在用-连接的。例：background-color需要用中括号或者用驼峰命名法。改-为大写backgroundColor*/
this.style.backgroundColor = "blue"
}
var p_class=document.getElementsByClassName('p2')[0]
/*鼠标移入事件*/
p_class.onmouseenter=function (){
this.style["color"]="red"
p_class.style["font-size"]="24px"
}
/*鼠标移出事件*/
p_class.onmouseout=function (){
console.log(555)
//修改多个css样式 分号结束 属性跟属性值直接用冒号隔开
p_class.style.cssText='color:blue;font-size:16px;'
}
</script>
</html>
四、JS修改样式
解释：js可以修改规范和不规范的标签样式，也可以配合点击事件等一起使用
规范标签：
1. 规范标签属性：符号直接操作（可读可写）
2. 不规范（自定义）标签属性：
① 获取：.getAttribute()
② 设置：.setAttribute()
③ 移除：.removeAttribute()
注意项：
1. 所有的路径、颜色获取的结果不一定是你写的内容
2. 通过id获取的元素赋值给变量后，假设修改了id，这个变量还是表示这个元素
3. 自定义标签属性的操作方式，同样可以操作符合规范的标签属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS修改式样</title>
<style>
.p1{
background-color: cornflowerblue;
font-size: 24px;
}
</style>
</head>
<body>
<p class="p1">山有木兮木有枝，心悦君兮君不知</p>
<ul>
<li class="li1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var p_id=document.getElementsByClassName('p1')[0]
/*获取属性值*/
console.log(p_id.getAttribute("class"));
var uli=document.getElementsByTagName("li")[0]
/*有则改 无则增*/
//设置属性
uli.setAttribute('class','p1')
//移出属性
p_id.removeAttribute("class")
var uli2 = document.getElementsByTagName("li")[1]
uli2.setAttribute('class', 'p2') //增，增加class属性
uli2.setAttribute('class', 'p2-2') //改，修改class属性
console.log(uli2.hasAttribute('class')) //查是否有class属性
uli2.removeAttribute('class', 'p2-2') //删，删除class属性
// 增、改、删依次进行后仍然没有，即代码依次执行
var a=10
/*js的基本数据类型*/
console.log(typeof 123)
console.log(typeof 12.3)
console.log(typeof 'lili')
console.log(typeof true)
console.log(typeof [1,2,3,4])
console.log(typeof null)
console.log(typeof a)
</script>
</body>
</html>
通过变更元素属性名，调用不同属性设置，从而达到变更表示样式，或者直接变更对应属性设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:200px;
height:200px;
background: cadetblue;
}
.box1{
width:100px;
height:100px;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
// 方式1修改
<script>
var OBox = document.querySelector("div");
OBox.onclick = function (){
OBox.style.width = "100px";
// OBox.style["width"] = "100px"; //效果一样，但该种用法可接受来自form的属性信息
OBox.style.height = "100px";
OBox.style.background = "red";
};
</script>
// 方式2修改
<script>
var OBox = document.querySelector("div");
OBox.onclick = function (){
OBox.className = 'box1';
// OBox.setAttribute('class', 'box1');
};
</script>
</body>
</html>
五、JS基本数据类型
number：数字，在js里面的小数和整数统一都是数字，-2^53~2^53超出范围之后精度就会不精确
boolean：布尔值（True、False）
undefined：未定义，一个变量声明之后没有赋值就是undefined
string：字符串
null：空值，在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单一类的数据类型null
object：对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS数据类型</title>
</head>
<body>
<script>
// number 数字
var a =123;
console.log(typeof a);
// string 字符串
var b ='123';
console.log(typeof b);
// boolean 布尔型
var c = true;
console.log(typeof c);
//undefined 未定义
var d;
console.log(typeof d);
// null 空
var e = null;
console.log(typeof e);
// object 对象
var f = [1,2,3,4]
console.log(typeof f);
</script>
</body>
</html>
六、JS操作符
1. 算数运算符：+、 -、 * 、 / 、 % 、 加减乘除求余
① 当不是数字之间的运算的时候，+号两边一旦有字符串（引号引起的部分），那么+号就不在是数学运算了，而是拼接，最终结果是字符串
② - / * % 尽量将字符串转换成数字（隐式类型转换，会自行进行强制转换）
③ NaN： Not a Number number、
2. 赋值运算符：+=、 -=、 *=、 /=、 = 、++、--、**、//
z这些是基本的赋值运算符，除此之外还有++、 --，这两个都存在隐式类型转换，会全部转成数字
3. 逻辑运算符：&&（and）、||（or）、！（not） 来表示。
&& 和|| 不会进行类型转换，！则会进行类型转换，将后面的数据线转换为布尔型在取反
4. 比较运算符：>、<、 !=、 >=、 <=、 ==、 ===
① 如果等号两边是boolean、string、number三者中任意两者进行比较时，优先转换为数字进行比较
② 如果等号两边出现了null或undefined，null和undefined除了和自己相等，就彼此相等
③ NaN==NaN 返回False，Nan和所有值包括自己都不相等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS运算符</title>
</head>
<body>
<script>
// document.write() 直接在页面上显示最终结果
// 算术运算符
document.write(1+'2'+ "<br>"); // 按数字与字符串拼接
document.write(1-'2'+ "<br>"); // 将’2‘隐式转换为数字后在相减
document.write(1+true+ "<br>"); // true为1
document.write(1+null+ "<br>"); // null为空
document.write(1+undefined+ "<br>"); // undefined为定义，无法相加
document.write(1+NaN+ "<br>"); // NaN 无法相加
// /、*、% 同 -
// 赋值运算符
var a = 1;
var b = null;
document.write(a++ +"<br>"); // 结果为1，先执行a打印，再执行a++
document.write(a +"<br>"); // 结果为2，上一步计算完成的a值进行打印
document.write(++a +"<br>"); //结果为3，先执行++a，在执行a值打印
document.write(++b +"<br>"); //结果为1，先执行++b，在执行b值打印
// 其他同样用法
// 比较运算符
document.write((2 == '2') +"<br>"); //等于，不全等（只判断值是否相等）
document.write((2 === '2') +"<br>"); //全等（先判断类型是否一致，再判断值是否相等）
</script>
</body>
</html>
七、JS流程控制
JS中流程控制是if判断和switch选择。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制语句</title>
</head>
<body>
<script>
var weather = 'cloudy'
if (weather == 'sunny') {
console.log('照常上班')
} else if (weather == 'cloudy') {
console.log('去湖南省植物公园')
} else {
console.log('在家休息')
}
switch (weather) {
case "cloudy":
console.log('去湖南省植物公园');
break;
case "sunny":
console.log('照常上班');
break;
case "rain":
console.log('在家休息');
break;
case "thunder":
console.log("在家睡觉");
break;
case "snow":
console.log("出去看雪景");
break
default:
console.log("捉迷藏")
}
var a=1
//判断条件 问号 为真的结果 冒号 为假的结果
console.log(a > 4 ? 2 : 3);
</script>
</body>
</html>
八、JS循环
1. for循环，JS中的for循环相当于while的简写，更加方便。for(initialize；test；increment){statment}
2. while循环，while是一个基本的循环语句，expression、为真的时候，就会执行循环体。while(expression){statement}
3. for in循环，JS中的for也支持类似于python中的用法，可以遍历对象所有的属性
4. do/while循环，do/while和while类似，只是会先执行一个循环。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js循环</title>
</head>
<body>
<script>
//for循环
/*多行注释快捷键 Ctrl+shift+/*/
//单行注释快捷键 Ctrl+/
for (var i=0;i<10;i++){
if(i==6){
continue; // 跳出本次循环，继续下次循环
}
document.write(i + '<br>')
}
//while循环
var i=5
while (i<10){
i++
document.write(i + '<br>')
}
//for循环跟while循环都是先判断再执行
//已知循环次数用for 未知循环次数用while
for (var i=0;i<3;i++){
var age=prompt("你今年多大了","请在这里输入年龄")
document.write(age + '<br>')
}
var age=prompt("你今年多大了","请在这里输入年龄")
while (age<0 || age>100){
age=prompt("你今年多大了","请在这里输入年龄")
document.write(age + '<br>')
}
//do/while循环
var i=5
do {
i++
document.write(i + '<br>')
}while (i<3)
//先执行再判断 不管对错 至少先执行一次
//for in循环
var arry=[1,2,3,4,5,6,7]
for (var i in arry){
document.write(i,arry[i] + '<br>')//跟python不一样 得到的是下标值 不是数组里面的内容
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<body>
<script>
var OL = document.querySelectorAll("ul li");
// console.log(OL)
// var没有块级作用域的概念，let具备，故按alert(i)时，var一直显示OL.lenght，let才会依次显示下标
/* for(let i=0;i<OL.length;i++){
OL[i].onclick = function (){
alert(this.innerText);
alert(i);
}
}*/
// 另一种解决方式,提前存储下标值
for(var i=0;i<OL.length;i++){
OL[i].index_num = i // 提前存储下标值
OL[i].onclick = function (){
alert(this.index_num);
}
}
</script>
</body>
</html>
九、JS字符串方法
length：长度
slice：切片
indexOf：索引
split：分割
substr：截取
replace：替换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串常用方法</title>
</head>
<body>
<script>
var str='qwertyuiop123451678190'
document.write(str.length + '<br>')//获取字符串的长度
document.write(str[19] + '<br>')//通过下标获取值
document.write(str.substring(1,7) + '<br>')//左闭右开 下标为7的字符获取不到
document.write(str.slice(1,7) + '<br>')
document.write(str.slice(-7,-1) + '<br>')
document.write(str.substr(1,9) + '<br>')//第一个参数为下标，第二个参数为数值
document.write(str.split('t') + '<br>')//分割
document.write(str.indexOf('i') + '<br>')//通过字符串里面的字符获取到对应的下标值
document.write(str.replace('1',"****") + '<br>')//默认替换第一个
document.write(str.replaceAll("1","###") + '<br>')//替换所有
document.write(Object.keys(str) + '<br>')//获取所有的键 也就是下标
document.write(Object.values(str) + '<br>')//获取所有的值
var num=123
document.write(typeof toString(num) + '<br>')//数字转换成字符串
var str1='123'
document.write(typeof parseInt(str1) + '<br>')//字符串转数字
</script>
</body>
</html>
十、数组方法
length：长度
push：追加
unshift：添加
pop/shift：删除
indexOf：查找
slice/join/sort/reverse：改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的数组方法</title>
</head>
<body>
<script>
var arry=["葡萄","西瓜","桃子","草莓","芒果"]
console.log(arry.length)
arry.push("橘子","火龙果")//在后头添加
console.log(arry)
arry.unshift("香蕉","车厘子")//在前面添加
console.log(arry)
arry.shift()//删除前面的
console.log(arry)
arry.pop()//删除后面的
console.log(arry)
console.log(arry[2])//通过下标查找内容
console.log(arry.indexOf("草莓"))
// console.log(arry.slice(1,5))//切片
// console.log(arry.splice(4))//删除到数组只剩下四个内容
// console.log(arry)
// console.log(arry.splice(1,2))//第一个参数为下标，第二个为删除的个数
// console.log(arry)
console.log(arry.splice(1,0,"枇杷"))//不改变原有的数组的组成 插入一个值
console.log(arry)
var li=[8,2,6,3,5]
console.log(li.sort())//排序
console.log(li.reverse())//反向 单纯的反方向排列
console.log(li.join("**"))//拼接
</script>
</body>
</html>
十一、JS的内置对象
JS内置对象：JS内部已经内置了不少对象，类似于Python中的内置模块，可以直接使用，并且对象一般不需要导入，可以直接使用
Math对象：Math对象是一个处理数学相关的对象，可以用来执行在数学相关的内容
Math.pow(2, 4) 2的4次方
Math.round(5.5) 四舍五入
Math.ceil(1.5) 向上取整
Math.floor(1.5) 向下取整
Math.max() 取参数中的最大值
Math.min() 取参数中的最小值
Math.random() 0-1的随机数[0,1)
Math.random()*m+n 生成n~ （m+n）
Math.PI π
Math.abs() 求绝对值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math对象</title>
</head>
<body>
<script>
console.log(Math.sqrt(9))//开平方
console.log(Math.pow(4,2))//幂运算 x的y次方
console.log(Math.abs(-5))//绝对值 负数的绝对值为正数 正数的绝对值为正数
console.log(Math.PI)//数学中的π
console.log(Math.round(3.9))//四舍五入
console.log(Math.ceil(3.2))//向上取整
console.log(Math.floor(3.9))//向下取整
console.log(Math.random()*10)//随机数 默认生成0~1
console.log(Math.round(Math.random()*10))//0~10的随机整数
console.log(Math.random()*40+30)//30~70的随机数 生成n~m+n
//0*40=0+30=30 1*40=40+30=70
console.log(Math.max(1,5,6,9,2))//最大值
console.log(Math.min(1,5,6,9,2))//最小值
</script>
</body>
</html>
日期对象：日期也是常用对象之一，基本和常用的方法都是需要了解和熟悉
var data = new Data();
var strap = data.getTime();
var year = data.getFullYear();
var month = data.getMonth();
var date = data.getDate();
var hour = data.getHours();
var min = data.getMinutes();
var sec = data.getSeconds();
var day = data.getDay();
document.body.innerHTML = year + "年" + month + "月" + date + "日" + hour + "时" + min + "分" + sec + "秒‘ + “星期” + day；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date对象</title>
</head>
<body>
<script>
var time=new Date()
console.log(time.getFullYear())//年
console.log(time.getMonth()+1)//月
console.log(time.getDate())//日
console.log(time.getDay())//星期
console.log(time.getHours())//时钟
console.log(time.getMinutes())//分钟
console.log(time.getSeconds())//秒钟
console.log(time.getTime())//时间戳
</script>
</body>
</html>
十二、JS的Window对象
Window对象：即所有客户端JS特性和API的主要接入点。它表示Web浏览器的一个窗口或者窗体，并且可以用标识符window来引用它
Window属性和方法：Window对象定义了一些属性和方法，比如：alert()方法、非常重要的document属性等
计时器：就是Window中的一个方法，可以用来实现计时的一些操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window对象（定时器）</title>
</head>
<body>
<span class="text">我在</span>
<span id="num">5</span>
<span class="text">秒之后就要去其他网页了</span>
<script>
//在指定的时间之后执行一次，且只执行一次
var timer1=setTimeout(function (){
console.log(666)
},5000)
//以指定的时间为周期，一个周期就执行一次
var timer2=setInterval(function (){
console.log(111)
},1000)
//清楚定时器
clearTimeout(timer1)
clearInterval(timer2)
// var text=document.getElementsByClassName("text")
var numer=document.getElementById("num")
var num=5
var timer3=setInterval(function (){
num--
numer.innerText=num
if (num==0){
clearInterval(timer3)
// window.location.href="https://www.veer.com/"//传统方式在当前窗口进行页面跳转
window.open("https://www.veer.com/")//会新建一个窗口打开
}
},1000)
</script>
</body>
</html>
十三、JS的函数
JS函数介绍：JS的函数包裹在花括号当中，使用关键词function来定义。函数可以挂载在一个对象上，作为一个对象的属性，称为对象的方法
JS函数特性：在JS中，函数即对象，程序可以随意操控它们。比如，JS可以把函数赋值变量，或者作为参数传递给其他的函数，甚至可以设置属性，调用它们的方法
JS有名函数和匿名函数：
有名函数：有名字的函数，使用时是：函数名加上括号执行，充当时间函数执行
匿名函数：没有名字的函数，匿名函数不能单独出现，一般充当事件函数，比如点击事件调用的函数
十四、JS异常
标签：console,log,0003,JavaScript,JS,write,var,document From： https://www.cnblogs.com/lxinghua/p/16899091.html