引入JavaScript
1.内部标签
<script> </script>
2.外部引用
<script src="引入JavaScript.js"></script>
浏览器控制台使用
1.alert（弹窗）
alert();
2.console.log(控制台打印)
console.log();
数据类型
1.等于和绝对等于
== 等于（类型不一样，值相等，判断为true）
=== 绝对等于（类型一样，值相等，才会被判断为true）
在JavaScript中多用绝对等于
须知：
1.NaN（not a number）与任何数据===都会得到false
2.判断是否为NaN可以使用isNaN( )方法
3.JavaScript不区分小数和整数
2.浮点数运算
console.log(1/3===(1-2/3));
判断为false
浮点数运算会存在精度损失的问题，导致判断出错，尽量避免浮点数运算
或者将两数相减判断是否小于一个很小的数
console.log(1/3-(1-2/3)<0.0000001);
3.严格检查模式
'use strict'
在JavaScript代码的第一行加上，用来避免JavaScript代码的随意性造成的问题
局部变量都用let来定义
6.字符串
6.1转义字符
6.2多行字符串
var msg=`
nihao
niganma
你好`
Tab键上方的符号
6.3模板字符串
let b="world";
alert(`hello,${b}`);
调用已定义的字符串
6.4大小写转换方法
let a="hello";
a.toUpperCase();
a.toLowerCase();
6.5截取字符串（substring）
alert(b.substring(1,3));
截取下标为1到3的字符组成一个新的字符串，包头不包尾。包含下标为1不包含下标为3的字符
7.数组
7.0.数组定义
var arr=[1,2,3,"hello","world"]
java中的数组元素要为同一类型，而JavaScript的类型都是var，所以数组里面元素随便定义
当数组下标越界时，JavaScript会提示undefined
7.1通过元素获取其下标（indexOf）
let arr = [1,2,3,4,5];
console.log(arr.indexOf(4));
7.2截取数组（slice）
arr.slice(1,3);
类似于substring，也是包头不包尾
7.3在数组尾部操作（push和pop）
arr.push(99,100) ;
arr.pop();
push是在数组尾部加上元素，pop是弹出数组尾部的最后一个元素。
将数组看成一个栈，先进后出，下标小的在下面，下标大的在上面。
7.4在数组头部操作（shift和unshift）
arr.unshift(33,66);
arr.shift();
unshift是在数组头部加上元素，shift是弹出数组头部的一个元素
7.5数组排序跟顺序颠倒（sort和reverse）
arr.unshift("d")
4
arr
Array(4) [ "d", "a", "b", "c" ]
arr.sort()
Array(4) [ "a", "b", "c", "d" ]
arr.reverse()
Array(4) [ "d", "c", "b", "a" ]
7.6合成新数组（concat）
Array(4) [ "d", "c", "b", "a" ]
arr.concat(1,2,3)
Array(7) [ "d", "c", "b", "a", 1, 2, 3 ]
arr
Array(4) [ "d", "c", "b", "a" ]
注意：该方法并没有对原来的数组进行修改，只是将原来的数组和新输入的数组合成了一个新的数组并返回
7.7使用特定连接符拼接数组（join）
arr
Array(4) [ "d", "c", "b", "a" ]
arr.join("$")
"d$c$b$a"
8.对象
8.1对象定义
定义对象用大括号 {}
定义数组用中括号 [ ]
var student={
name="dada",
id=1234,
age=18
}
属性之间用逗号隔开，最后一个不需要逗号
8.2动态删减增加对象属性
var student={
name:"xiao"
}
undefined
delete student.name // 删除
true
student.age=18 // 增加
18
student
Object { age: 18 }
JavaScript中的所有的键都是字符串，值是任意对象
student
Object { age: 18 }
student['age']
18
'age' in student
true
8.3判断属性值是否在对象中
student
Object { age: 18 }
student['age']
18
'age' in student
true
8.4判断一个属性是否是这个对象自身拥有的，而并非来自其父类
'age' in student
true
'toString' in student
true
student.hasOwnProperty('toString')
false
student.hasOwnProperty("age")
true
流程控制
forEach循环和for...in循环
arr.forEach(function (value){
console.log(value);
})
for (let arrKey in arr) {
console.log(arrKey);
alert(arr[arrKey]);
}
for (let arrKey of arr) {
console.log(arrKey);
alert(arr[arrKey]);
}
forEach是一个函数，用来获得数组的每一个元素，遍历数组。
for...in是获取数组的下标索引。
for...of是获取数组的每一个元素的值。
Map和Set(es6新增特性)
Map和Set的基本用法
let map=new Map([["xie",99],["yan",77],["nige",0]]);
let nige=map.get("nige");
alert(nige);
map.set("nige",32);
nige=map.get("nige");
alert(nige);
let set=new Set([1,2,3,1,1,1]);
set.add(4);
set.delete(1);
let is=set.has(2);
alert(is);
set.clear();
Map里面放一个二维数组，可以通过get(key)来获取number的值，set方法可以修改或增加属性。
Set里面是一个无序自动去重复的列表，可以用add和delete方法对其进行增减操作。clear函数清除Set里的所有元素，has函数判断Set里面是否含有某个数字。
遍历Map和Set（iterator迭代器）
for (let mapElement of map) {
alert(mapElement);
}
for (let number of set) {
alert(number);
}
函数
定义函数
function abs(a){
if (a>3){
return 1;
}else {
return 0;
}
}
var abs=function (a){
if (a>3){
return 1;
}else {
return 0;
}
}
第一种跟Java很像，所以多用第一种
第二种是使用了匿名函数，把函数赋值给abs，通过abs来调用函数
调用函数
abs(x);
调用函数跟Java一致。
参数问题：JavaScript可以传递任意个参数，也可以不传递参数。
如何判断参数是否存在？
答：利用arguments函数检查参数的数量并对其进行判断
如何规避参数不存在的情况？
答：进行判断然后抛出一个异常
arguments
用来获取当前函数的所有参数并使其成为一个数组。
function abs(a){
for (let i = 1; i <arguments.length ; i++) {
console.log(arguments[i]);
}
if (a>3){
return 1;
}else {
return 0;
}
}
rest
function abs(a,...rest){
for (let i = 0; i < rest.length; i++) {
console.log(rest[i]);
}
if (a>3){
return 1;
}else {
return 0;
}
}
对剩下的参数进行操作，多余的参数成为一个新的数组。
与arguments相比，少了函数要用到的参数，数组中的元素都是函数未定义的。排除了已定义的参数。
变量的作用域、let、const
function f1() {
var a=3;
var b=2;
function f2() {
var a=1;
console.log(a);
}
console.log(a);
f2();
}
f1();
函数f1()中包含函数f2()，f2()可以访问f1()中的变量，但f1()不能访问f2()中的变量。
当f1()跟f2()的变量重名时，而f2()需要用到重名的变量会优先调用自己的变量，有点像就近原则。
函数查找变量会由内而外的查找，内部函数的变量会屏蔽外部函数的变量。
自动提升变量的作用域
function f1() {
var a="hh";
function f2() {
var a=1;
console.log(a);
}
console.log(a+b);
var b="world"
f2();
}
f1();
输出结果：
hhundefined
1
b的定义是在console.log(a+b);之后，但是最终输出为hhundefined。
JavaScript引擎自动将b提前定义了，但并没有给b赋值。
所有变量的定义都放在函数的头部，便于代码维护。
全局对象window
var a="hello";
var b="world";
window.alert(a+b);
alert就是全局对象的一个全局变量。
"use strict"
var a="hello";
var b="world";
var before_alert=window.alert;
before_alert(123);
window.alert=function () {
}
window.alert(123);
window.alert=before_alert;
window.alert(a+b);
JavaScript实际上只有一个全局作用域，任何变量（函数也可以被视为变量），假设没有在函数作用范围内被找到，函数就会向外查找，如果最终没有在全局作用域找到，就会报错referenceError。
规范
如果将我们所有的全局变量都绑定到window上，那么当引用不同的JavaScript文件时，所用到的全局变量可能会发生冲突。为了减少冲突我们就会自己定义一个唯一的空间用来储存全局变量，把自己的代码全部放入这个空间中，减少全局变量命名冲突的问题。
let和const
for (var i = 0; i < 10; i++) {
console.log(i);
}
console.log(i+1);
for循环中i的值会影响之后的i值
所以我们现在都用let来定义局部变量
for (let i = 0; i < 10; i++) {
console.log(i);
}
console.log(i+1);
let用来定义局部变量，只在其局部作用域有效，不会影响之后的i值
const就是用来定义常量的。
方法的定义和调用、apply
定义方法
var xiebowen={
name: 'xiebowen',
birth: 2003,
age:function () {
var now =new Date().getFullYear();
return now-this.birth;
},
age2:function () {
return 2;
}
}
对象中的函数即为方法，定义方法与定义函数的形式不同，在对象中定义多个方法时中间要用逗号隔开。
方法调用
function age1() {
return 100;
}
var xiebowen={
name: 'xiebowen',
birth: 2003,
age:function () {
var now =new Date().getFullYear();
return now-this.birth;
},
getAge:age1
}
在对象中调用window下的函数作为方法。
getAge:age1是将getAge变成一个方法，而getAge:age1()是将getAge变成一个变量，使用这个变量时会直接调用age1()方法
apply
function getAge(){
var now =new Date().getFullYear();
return now-this.birth;
}
var xiebowen={
name: 'xiebowen',
birth: 2003,
age:getAge
};
getAge.apply(xiebowen,[]);
apply函数可以改变this的指向目标。
在这里如果写成age:getAge()，那么age是一个变量，而且由于getAge()中使用了this且没有指向任何目标，此时就会报错。age这个变量就没有被定义，this也未被定义。
Date日期对象
var now =new Date();
now.getFullYear(); //年
now.getMonth(); //月
now.getDate(); //日
now.getDay(); //星期几
now.getHours(); //时
now.getMinutes(); //分
now.getSeconds(); //秒
now.getTime(); //时间戳 从1970 1.1 00：00至今的毫秒数
new Date(1686364859935 ); //将时间戳转换为当前时间
JSON对象
在JavaScript中万物皆对象，任何JavaScript支持的类型都可以用JSON来表示。
格式：
1.对象都用{}
2.数组都用[]
3.所有的键值对都用key：value
var uesr = {
name:'xiebowen',
age:18
}
var json=JSON.stringify(uesr);
var obj=JSON.parse('{"name":"xiebowen","age":18}');
JSON.stringify就是将string字符串转换成JSON字符串，JSON.parse就是解析。
class继承方法
class people {
constructor(name) {
this.name=name;
}
intro(){
alert(1);
}
}
class kid extends people{
constructor(name,age) {
super(name);
this.age=age;
}
}
var p1=new people('hong');
var k1=new kid('lan',8);
跟Java很像。
在JavaScript中每一个对象都有其prototype原型对象，object是源头。
操作BOM对象
window对象（浏览器窗口）
window.innerHeight
window.outerHeight
获取浏览器的一些属性来进行判断
疑问：难道浏览器的自适应拉伸啥的就是利用了这个属性进行判断然后改变布局的吗？
navigator（封装了浏览器的信息）
navigator.appVersion
"5.0 (Windows)"
navigator.appName
"Netscape"
screen(屏幕)
screen.width
2560
screen.height
1440
屏幕尺寸
location(当前页面的URL信息)
location.assign('https://www.bilibili.com/video/BV1JJ41177dip=19&vd_source=46c106b0d438741a12998552df0f4ce6') //跳转到网址
location.host
"localhost:63342"
location.href
"http://localhost:63342/MyJavaScript/4.%E5%8F%98%E9%87%8F%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F%E3%80%81let%E3%80%81const/index.html?_ijt=s0r5fvt9ee7qj6s0dbe2dtmvrr&_ij_reload=RELOAD_ON_SAVE"
document(当前页面的文档信息)
document.title
"火狐主页"
document.title=111
111
var sn=document.getElementById('li');
var sn1=document.getElementsByClassName();
获取具体的文档树节点
document.cookie
获取cookie
history对象
history.back()
history.forward()
页面前进后退
操作DOM对象
1、BOM是Browser Object Model的缩写，即浏览器对象模型。 BOM和浏览器关系密切。 浏览器的很多东西可以通过JavaScript控制的，例如打开新窗口、打开新选项卡（标签页）、关闭页面，把网页设为主页，或加入收藏夹，等等…这些涉及到的对象就是BOM。 2、DOM是Document Object Model的缩写，即文档对象模型。
其实文档对象模型就是一个树结构模型。
获取dom节点的方法
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
问题：document.getElementById()无效，无法获取到对应的id对象
解决方法：将script标签放到body标签后，这个函数的使用要放在对应id的后面，不然无法获取到对象。
更新dom节点
nav.style.display='block'
nav.style.color='blue'
nav.innerHTML='<strong>321</strong>' //修改HTML元素
nav.innerText=1234101 //修改文本
删除dom节点
<body>
<h1 id="nav">red</h1>
<h2>blue</h2>
<h3>yellow</h3>
</body>
<script>
var son=document.getElementById('nav');
var father=nav.parentElement;
father.removeChild(son);
father.removeChild(father.children[0]);
</script>
先获取你要删除的dom节点，再获取它的父节点，然后通过父节点的removeChild()方法删除目标节点。
删除节点是一个动态的过程，当你删除一个节点时，其children是在变化的。例如其下标就会发生变化。
创建新的dom节点
var newP=document.createElement('p'); //创建一个新的p元素
newP.id='first'; //给这个元素的id赋值为first
newP.innerText='一秒钟的瞬间就已注定' //设置这个元素的文本
var mylink=document.createElement('link');
mylink.setAttribute('type','text/css'); //设置属性，意为type="text/css"
var myStyle=document.createElement('style');
myStyle.innerText='body{background-color:red}';
var myHead=document.getElementsByTagName('head')[0];
myHead.appendChild(myStyle);
第二种设置属性的方法通用性更强。
插入dom节点
使用innerHTML可以对空的dom节点插入一个新的元素，但如果这个dom节点非空，那么这个操作会覆盖原来的元素。
所以我们通常使用append或insertBefore方法来插入节点
var list1=document.getElementById('list_1');
var list2=document.getElementById('list_2');
list2.append(list1);
append方法是将节点插入在目标节点的后面，而insertBefore则是将节点插入在目标节点的前面。
var p1=document.getElementById('a');
var p2=document.getElementById('b');
var p3=document.getElementById('c');
var list=document.getElementById('list');
list.insertBefore(p3,p2);
操作表单
获取表单元素并更改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="main.html" method="get">
账号：<input type="text" name="text" id="1">
密码：<input type="password" name="password" id="2">
<span>性别 ：</span>
<input type="radio" name="sex" id="man" value="man">男
<input type="radio" name="sex" id="women" value="women">女
<input type="submit" value="">
<input type="reset" value="">
</form>
</body>
<script>
var account=document.getElementById('1');
var password=document.getElementById('2');
var boy=document.getElementById('man');
var girl=document.getElementById('women');
account.value=123123;
password.value=12345;
boy.checked=true;
</script>
</html>
当需要对表单进行操作时，可以先获取表单元素，然后通过变量.value来获得以及更改表单元素的值。
当遇到单选框、多选框时，可以通过变量.checked来查看该元素是否被选中，并更改元素的选中。
表单提交验证及前端MD5加密
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
onsubmit是表单属性，为表单绑定一个提交事件，当返回值为false时不予提交。
-->
<form action="main.html" method="get" onsubmit="return check()">
<p>账号：<input type="text" name="account" id="account"></p>
<p>密码：<input type="password" name="input-password" id="input-password"></p>
<p><input type="hidden" name="password" id="password"></p>
<span>性别 ：</span>
<input type="radio" name="sex" id="man" value="man">男
<input type="radio" name="sex" id="women" value="women">女
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
</body>
<script>
function check() {
var pwd=document.getElementById('input-password');
var md5pwd=document.getElementById('password');
md5pwd.value=md5(pwd.value);
// md5加密，将密码用md5加密后再提交。
return true;
}
</script>
</html>
在上述代码中，我定义了两个密码框，第一个密码框是可见的，用户可以在这个密码框输入密码。
第二个密码框是不可见的，用户输入的密码经过MD5加密后通过这个不可见的密码框提交。
jQuery初见
两种引用方式
1.在jQuery官网下载然后导入自己的项目再引用
2.直接引用在线CDNjQuery
jQuery的使用
$('#clk').click(function () {
alert('1234');
})
公式$('selector').action()
jQuery事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<button id="xc">小丑</button>
</body>
<script>
$('#xc').mousedown(function (e) {
var a=document.createElement('p');
a.innerText='小丑';
$('#xc').text('旧小丑');
$('#xc').append(a);
})
</script>
</html>
上述代码的效果是点击小丑按钮，按钮里原来的小丑会变成旧小丑，而且会增加一个小丑。只有第一次点击有效，之后的点击不会再产生变化。
jQuery操作dom元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<button id="xc">小丑</button>
</body>
<script>
$('#xc').mousedown(function (e) {
var a=document.createElement('p');
a.innerText='小丑';
$('#xc').text('旧小丑');
$('#xc').append(a);
})
$('#xc').css('color','red'); //将按钮里的小丑颜色变成红色，毕竟红鼻子小丑
</script>
</html>