点击链接走进前端学习：https://blog.csdn.net/qq_53810245/article/details/116831968

JS学习笔记

JavaScript
1、概述
2、基本语法入门
3、函数及面向对象
4、常用对象
- 4.1、Data
- 4.2、JSON
5、操作Dom元素【重点】
6、操作Bom元素【重点】
7、操作表单（验证）

JavaScript

该网站写的笔记较好，建议看看：廖雪峰的官方网站

1、概述

JavaScript是一门世界上最流行的脚本语言，不同于Java。开发周期:网景公司-10days
引入js文件：script标签必须成对出现

<script src="js/qt.js">
	。。。
</script>

不用显示定义type，页面默认是javascript<script type="text/javascript"></script>

2、基本语法入门

2.1 定义变量

变量类型变量名 = 变量值

var num = 1;
var name = "名字";

2.2 浏览器控制台使用在这里插入图片描述

在这里插入图片描述
分别是：
Elements：跑网页
Console：调试JS
Sources：打断点调试
Network：抓包
Application：查看网站的Cookies

2.3 数据类型

1. 变量命名：以$或_开头标识

2. number：

- js不区分小数和整数
- NaN：not a number
- Infinity：表示无限大

3. 字符串：‘abc’，’‘abc’’

3.1、转义字符
在这里插入图片描述
3.2、多行字符串编写

// tab键上esc键下的飘
var msg = `hello
			world
			haha
			哈哈`

3.3、模板字符串

var name = “Mark”;
var msg = `h你好，${
      
      name}`

3.4、字符串长度str.length
3.5、字符串的可变性，不可变性
在这里插入图片描述
3.6、大小写转换
str.toUpperCase()
str.toLowerCase()
3.7、索引下标 str.indexOf('s')
3.8、截取字符串 [ )
str.substring(1,3)

4. 布尔值：true，false

5. 逻辑运算：&&，||，！

6. 比较运算符

- == 等于（类型不一样，值一样，也会判断为true）
- === 绝对等于（类型一样，值也一样，结果为true）`尽量使用这种比较`

须知：

NaN === NaN，这个与所有的数值都不相等，包括自己
只能通过isNaN(NaN)来判断这个数是不是NaN
尽量避免使用浮点数进行运算，存在精度问题

7. null空值和undefined未定义

8. 数组

数组中可以放置不同类型的数据对象，取数组下标越界时报undefined
8.1、长度arr.length
假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失
8.2、获得元素下标索引arr.indexOf(s)
字符串1和数字1是不同的
8.3、截取array的一部分，返回一个新数组slice()，类似于字符串中的str.substring(1,3)
8.4、压入到尾部push，弹出尾部的一个元素pop
8.5、压入到头部unshift，弹出头部的一个元素shift
8.5、排序 sort()
8.6、元素反转 reverse()
8.7、拼接函数concat
concat()并没有修改数组，只是会返回一个新的数组

	arr=["a","b","c"]
(3) ["a", "b", "c"]
	arr.concat([1,2,3])
(6) ["a", "b", "c", 1, 2, 3]
	arr
(3) ["a", "b", "c"]

8.9、连接符 join
打印拼接数组，使用特定的字符串连接

	arr
(3) ["a", "b", "c"]
	arr.join("-")
"a-b-c"

8.10、多维数组

	arr1 = [[1,2],[2,3],[3,4]]
(3) [Array(2), Array(2), Array(2)]0: (2) [1, 2]0: 11: 2length: 
	arr1[2][1]
4

9. 对象，对象是大括号{ }，数组是中括号[ ]

1、js中的对象，格式为{…}，键值对的形式，每个属性之间用逗号隔开，最后一个不需要加逗号
javascript中的所有的键都是字符串，值是任意对象！
2、对象赋值

var person = {
    
    
	name:"string",
	age:3,
	tags:['java','js']
}

使用一个不存在的对象属性，不会报错！undefined

3、动态的删减属性，通过delete删除对象的属性

delete person.name
true

4、动态的添加，直接给新的属性添加值即可

person.haha = “haha”
“haha”

5、判断属性值是否在这个对象中！xx in xxx

'age' in person
true

6、判断一个属性是否在这个对象自身拥有的hasOwnOroperty()

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

2.4 严格检查模式`strict`，必须写在javascript的第一行在这里插入图片描述

在这里插入图片描述
局部变量使用let定义

<script>
// 必须写在javascript的第一行
    'use strict';
    let i;
    i = 1;
</script>

2.5 流程控制

if 判断
循环

while 循环
for 循环

var array = ['a', 'b', 'c'];

for(let i = 0;i<100;i++){
    
    
	console.log(i)
	}

forEach循环【ES5.1特性】

var array = ['a', 'b', 'c'];

array.forEach(function(element) {
    
    
  console.log(element);
});

for…of循环打印值

var x  
var mycars = new Array()  
mycars[0] = "Saab"  
mycars[1] = "Volvo"  
mycars[2] = "BMW"  
  
for (x of mycars)  
{
    
      
    console.log(x + "<br />")  
}

for…in循环打印index，再利用下标index获取值

var x  
var mycars = new Array()  
mycars[0] = "Saab"  
mycars[1] = "Volvo"  
mycars[2] = "BMW"  
  
for (x in mycars)  
{
    
      
    console.log(mycars[x] + "<br />")  
}

2.6 Map和Set

Map

var map = new Map([['tom',100],['jack',95],['haha',28]]);
var name = map.get('tom');// 通过key获得value
map.set('admin',123456);// 新增或修改
map.delete('tom');// 删除
console.log(name); 
// 遍历
for(let x of map){
    
    
	console.log(x);
}

Set：无序不重复的集合

var set = new Set([3,1,1,1,1]);
set.add(2); // 添加
set.delete(1); // 删除
console.log(set.has(3)); // 是否包含某个元素
// 遍历
for(let x of map){
    
    
	console.log(x);
}

2.7、iterator

遍历数组

var arr = [3,4,5,6]  

for (var x of arr)  
{
    
      
    console.log(x)  
}

遍历map

var map = new Map([['tom',100],['jack',95],['haha',28]]);

for(let x of map){
    
    
	console.log(x);
}

遍历set

var set = new Set([3,1,1,1,1]);

for(let x of map){
    
    
	console.log(x);
}

3、函数及面向对象

3.1、函数定义

定义绝对值函数
方法一

function abs(x){
    
    
	if(x<0){
    
    
		return -x;
	}else{
    
    
		return x;
	}
}

一旦执行到return，代表函数结束，返回结果！如果没有执行return，函数执行完也会返回结果，结果就是undefined
方法二

var abs = function abs(x){
    
    
	if(x<0){
    
    
		return -x;
	}else{
    
    
		return x;
	}
}

参数问题：javascript可以传任意个参数，也可以不传递参数
但是可以手动抛出异常：

var abs = function abs(x){
    
    
	if(typeof x !== 'number'){
    
    
		throw 'Not a Number';
	}
	if(x<0){
    
    
		return -x;
	}else{
    
    
		return x;
	}
}

arguments表示传递进来的所有参数，是一个数组！

var abs = function abs(x){
    
    
	for(var i = 0;i<arguments.length;i++){
    
    
		console.log(arguments[i]);
	}
}

问题：因为arguments表示传递进来的所有参数，但是我们想要使用多余的参数来进行附加操作，需要排除已有的参数：
解决：rest获取除去当前变量之外的所有参数。rest参数只能写在最后面，必须用...标识

function aaa(a,b,...rest){
    
    
	console.log("a="+a);
	console.log("b="+b);
	console.log(rest);
}

3.2、变量的作用域

在javascript中，var定义变量是有作用域的，假设在函数体中声明，函数体外不可以使用的。如果两个函数使用了相同的变量名，只要在函数内部，就不冲突。
函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
alert()这个函数本身也是一个window变量

        var x ="xxx";
        window.alert(x);
        var old_alert = window.alert;
        // old_alert(x);
        window.alert=function(){
    
    
        };
        // alert(123)会失败
        window.alert(123);
        // alert() 恢复
        window.alert = old_alert;
        window.alert(454);

规范：由于所有的全局变量都会帮到我们的window上，如果不同的js文件，使用了相同的全局变量，会产生冲突->如何解决呢？我们把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题。

// 唯一全局变量
var space = {
    
    }
// 定义全局变量
space.name = '名字';
space.add = function(a,b){
    
    
	return a+b;
}

局部作用域let，解决局部作用域冲突问题！建议使用
常量const，用全部大写字母命名的变量。

        var x ="xxx";
        window.alert(x);
        var old_alert = window.alert;
        // old_alert(x);
        window.alert=function(){
    
    
        };
        // alert(123)会失败
        window.alert(123);
        // alert() 恢复
        window.alert = old_alert;
        window.alert(454);

3.3、方法

定义方法

方法就是把函数放在对象的里面，对象只有：属性 + 方法

var boy = {
    
    
    name:"小明",
    birth:2020,
    // 方法,今年 - 出生的年份
    age:function () {
    
    
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}
// 属性
boy.name
// 方法一定要带()
boy.age()

上边的代码可以拆分成：

function getAge(){
    
    
        var now = new Date().getFullYear();
        return now-this.birth;
}
var boy = {
    
    
    name:"小明",
    birth:2020,
	age:getAge
};	
// boy.age()  ok
// getAge()   NaN

在js中，可以控制this指向,
getAge.apply(boy,[]); this指向了boy，参数为空

3.4、箭头函数【ES6新特性】

3.5、面向对象编程

原型对象，相当于继承

类：模板，原型对象
对象：具体的实例
原型__proto__：

var Student ={
    
    
	name = "student",
	age = 3,
	run = function(){
    
    
		console.log(this.name+"run..."),
	}
};
	
var xiaoming = {
    
    
	name:"xiaoming"
	};
// 原型对象，设置xiaoming的原型是Student 
xiaoming.__proto__=Student;

var Bird = {
    
    
	fly:function(){
    
    
		console.log(this.name + "fly...");
		}
	};
	//小明的原型 是Student
	xiaoming.__proto__ = Bird;

3.6、class继承【ES6新特性】

1、定义一个类，属性，方法

//定义一个student类
class Student{
    
    
	constructor(name){
    
    
		this.name = name;
	}
	hello(){
    
    
		alter("hello")
		}
	}
class xiaoStudent extends Student{
    
    
	constructor(name,grade){
    
    
		super(name);
		this.grade = grade;
	}
	myGrade(){
    
    
	alert("我是一名小学生")
	}
}	
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong",1);

3.7、原型链——继承【难】

原型链__proto__

4、常用对象

4.1、Data

标准对象：
typeof 132——"number"
typeof '132'——"string"
typeof true——"boolean"
typeof NaN——"number"
typeof []——"object"
typeof {}——"object"
typeof Math.abs——"function"

基本使用

var now = new Date();// 获取当前日期
now.getFullYear(); // 年
now.getMonth();// 月，0-11
now.getDate();// 日
now.getDay();// 星期几
now.getHours();// 时
now.getMinutes();// 分
now.getSeconds();// 秒
now.getTime();// 时间戳，全世界统一

获取星期几的常用方法：
var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
weekday[now.getDay()];// 星期几

now=new Date()
	Fri Aug 06 2021 17:18:24 GMT+0800 (中国标准时间)
now.toLocaleString()//注意：调用的是一个方法，不是一个属性
	"2021/8/6下午5:18:24"
now.toGMTString()
	"Fri, 06 Aug 2021 09:18:24 GMT"

4.2、JSON

JSON，早期所有数据传输习惯使用XML文件！

JSON（JavaScript Object Notation，JS对象简谱），是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
任何JS支持的类型都可以用JSON表示
格式：
对象都用{}
数组都用[]
所有的键值对都用key：value

var xiaoming = {
    
    
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65
};
// 对象转换为json字符串，{"name":"小明","age":14,"gender":true,"height":1.65}
var jsons = JSON.stringify(xiaoming);
// json字符串转换为对象，参数为json字符串
var obj = JSON.parse('{"name":"小明","age":14,"gender":true,"height":1.65}');

5、操作Dom元素【重点】

Dom ：文档对象模型
核心：浏览器网页就是一个Dom树形结构

5.1、遍历Dom节点，获得Dom节点

<div id="father">
	<h1>标题1</h1>
	<p>p1</p>
	<p>p2</p>
</div>
<script>
	// 对应css选择器
	var h1 = document.getElementByTagName('h1');
	var p1 = document.getElementById('p1');
	var p2 = document.getElementByClassName('p2');
	var father = document.getElementById('father');
	
	var childrens = father.children; // 获取父节点下的所有子节点
	father.firstChild; // 获取节点的第几个位置的值或取到相邻节点的值
	father.lastChild ;
</script>

5.2、更新Dom节点

获取Dom节点：var div1 = document.getElementById('div1');

更新节点：操作文本，操作JS

操作文本

修改文本的值：id1.innerText='新值'
解析HTML文本标签id1.innerHTML='<strong>123</strong>'

操作JS，属性使用字符串格式

修改字体颜色：id1.style.color = 'red';
修改字体大小：id1.style.fontsize = '20px';
修改字体内边距：id1.style.padding = '2em';

5.3、删除Dom节点`.removeChild(self);`

删除节点的步骤：现获取父节点，再通过父节点删除自己
删除节点的时候要注意:
在删除多个节点的时候，children是动态变化的，删除第0个位置children，第一个children会动态补上来

<div id="father">
	<h1>标题1</h1>
	<p>p1</p>
	<p>p2</p>
</div>
<script>
	var self = documnet.getElementById('p1');
	var father = p1.parentElement;
	father.removeChild(self);
</script>

5.4、创建和插入Dom节点

在我们获得了某个Dom节点之后，假设这个节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dom节点已经存在元素了，我们的操作就会覆盖原来的元素。

追加.appendChild()

<p id="js">Javascript</p>
<div id ="list">
	<p id="ee">JavaEE</p>
	<p id="se">JavaSE</p>
	<p id="me">JavaME</p>
</div>
<script>
	var js=document.getElementById('js');
	var list=document.getElementById('list');
	list.appendChild(js); //实现追加，追加到后面
</script>

创建一个新的标签，实现插入document.createElement('p');
创建一个标签节点，通过这个标签可以设置任意的值，格式为键值对的形式.setAttribute('type','text/javascript');

<script>
	var js = document.getElementById('js'); //已经存在的节点
	var list = doccument.getElementById('list');
	// 通过js 创建一个新的节点
	var newP = document.createElement('p'); // 创建一个P标签
	newP.innerText = 'Hello,World';
	// 创建一个标签节点，通过这个标签可以设置任意的值
	var myScript= dcument.createElement('script'); // 创建一个空script标签
	myScript.setAttribute('type','text/javascript');  // 设置标签内容
</script>

ee前插入一个新的标签js，.insertBefore(js,ee);
insertBefore(新节点前，插入的目标节点)

<p id="js">Javascript</p>
<div id ="list">
	<p id="ee">JavaEE</p>
	<p id="se">JavaSE</p>
	<p id="me">JavaME</p>
</div>
<script>
	var ee=document.getElementById('ee');
	var js=document.getElementById('js');
	var list=document.getElementById('list');
	list.insertBefore(js,ee); //在list中实现插入，在ee前插入js
</script>

6、操作Bom元素【重点】

BOM ：浏览器对象模型

6.1、window 代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
210
window.innerWidth
1488
window.outerHeight
824
window.outerWidth
1536

6.2、navigator 封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
navigator.platform
"Win32"

大多数时候，我们不会使用navigator对象，因为会被人修改，不建议使用

6.3、screen 代表屏幕的尺寸

screen.width
1536 px
screen.height
864 px

6.4、location 代表当前页面的URL信息

host: "www.baidu.com" //主机
href: "https://www.baidu.com/" //当前跳转的网页
protocol: "https://" //协议
reload:f reload() //重新加载，刷新页面
location.assign('https://自己的网页') //设置新的地址

6.5、Document 代表当前页面

document.title
"百度一下，你就知道"
document.title='lalalalalla'
"lalalalalla"

获取具体的文档树节点，动态增加、删除文档树节点v

<dl id="app">
	<dt>Java</dt>
	<dd>JavaSE</dd>
	<dd>JavaEE</dd>
</dl>
<script>
	var dl=document.getElementById('app');
</script>

获取cookie

document.cookie

劫持cookie原理：恶意人员获取你的cookie上传到他的服务器上。例如：淘宝账户登录之后天猫会自动登录你的账号
解决办法：服务器端可以设置cookie：httpOnly

6.6、history 代表浏览器的历史记录

网页中实现的前进和后退网页，不建议使用

history.back() //后退
history.forward() //前进

7、操作表单（验证）

7.1 表单种类

文本框 text
密码框 password
下拉框 select
单选框 radio
多选框 checkbox
隐藏域 hiddem
…

7.2 表单目的：提交信息

得到输入框的值：var input_text = document.getElementById('username');
修改输入框的值：input_text.value ='新值';

7.3 表单提交验证及前端密码MD5加密

表单绑定提交事件，
onsubmit = 绑定一个提交检测的函数：true,false
将结果返回给表单，使用 onsubmit 接受！
onsubmit = “return aaa()”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="https:www.baidu.com/" method="post" onsubmit="return f()">
    <p>
        <span>用户名：</span>
        <input type="text" id="username" name="username">
    </p>
    <p>

        <span>密&emsp;码：</span>
        <input type="password" id="input-password">
    </p>
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">提交</button>
</form>
<script>
    function f() {
      
      
        alert(1);
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');
        md5pwd.value = md5(pwd.value);
        // 可以校验判断表单内容，true表示通过提交，false 表示阻止提交
        return true;
    }
</script>

</body>
</html>

点击走进 jQuery学习：https://blog.csdn.net/qq_53810245/article/details/119512930

走进JavaScript