JavaScript（狂神说学习笔记）
2021/9/29 9:10:58
本文主要是介绍JavaScript（狂神说学习笔记），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
JavaScript
文章目录
- JavaScript
- @[toc]
- 1. 概括
- 2. 快速入门
- 2.1 导入JavaScript
- 2.2 基本语法
- 2.3 数据类型
- 3. 数据类型
- 3.1 字符串
- 3.2 数组
- 3.3 对象
- 3.4 Map和Set
- 4. 流程控制
- 4.1 条件判断
- 4.2 循环判断
- 5. 函数
- 5.1 定义函数
- 5.2 变量作用域
- 5.3 方法
- 6. 内部对象
- 6.1 Date
- 6.2 JSON
- 6.3 Ajax
- 7. 面向对象编程
- 7.1 面向对象原型继承
- 7.2 面向对象class继承
- 8. 操作BOM对象
- 9. 操作DOM对象
- 9.1 获得DOM节点
- 9.2 更新DOM节点
- 9.3 删除节点
- 9.4 插入节点
- 10. 表单操作
- 11. jQuery
- @[toc]
- 1. 概括
- 2. 快速入门
- 2.1 导入JavaScript
- 2.2 基本语法
- 2.3 数据类型
- 3. 数据类型
- 3.1 字符串
- 3.2 数组
- 3.3 对象
- 3.4 Map和Set
- 4. 流程控制
- 4.1 条件判断
- 4.2 循环判断
- 5. 函数
- 5.1 定义函数
- 5.2 变量作用域
- 5.3 方法
- 6. 内部对象
- 6.1 Date
- 6.2 JSON
- 6.3 Ajax
- 7. 面向对象编程
- 7.1 面向对象原型继承
- 7.2 面向对象class继承
- 8. 操作BOM对象
- 9. 操作DOM对象
- 9.1 获得DOM节点
- 9.2 更新DOM节点
- 9.3 删除节点
- 9.4 插入节点
- 10. 表单操作
- 11. jQuery
1. 概括
Ant Design
JavaScript的历史
JavaScript是最流行的的脚本语言
Java和JavaScript语言风格相差甚远，只是为了蹭热度
一个合格的后端人员，必须精通JavaScript
2. 快速入门
2.1 导入JavaScript
- 内部标签
- 外部引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部引用-->
<!--注意：必须成对出现，不要改成自闭合标签-->
<script src="js/action.js"></script>
<!--不写type默认为text/javascript-->
<script type="text/javascript"></script>
</head>
<body>
<!--html直接使用js，但不推荐
<script>
alert("hello,world!");
</script>
-->
</body>
</html>
alert("hello,world!");
2.2 基本语法
js中只有三种变量：let（局部变量）、var（全局变量）、const（常量）
js严格区分大小写
浏览器必备调试须知
console.log()
// 1. 变量定义
var score = 60;
// 2. 条件控制
if (score >= 90 && score <= 100){
alert("A");
}else if (score >= 80 && score < 90){
alert("B");
}else if (score >= 70 && score < 80){
alert("C");
}else if (score >= 60 && score < 70){
alert("D");
} else if (score >= 0 && score < 60){
alert("E");
}else {
alert("输入成绩有误！")
}
2.3 数据类型
数值、文本、图形、音频、视频…
变量
var
let
命名规范与其他语言一样
局部变量建议使用let去定义
number
js不区别小数和整数
123 //整数 123.1 //浮点数 1.123e3 //科学计数法 -99 //负数 NaN // not a number Infinity //表示无限大
字符串
"abc"
'abc'
布尔值
true
false
逻辑运算
&&
||
!
比较运算符
= == 等于（类型不一样，值一样，也会判断为true） === 绝对等于（类型和值都一样，才会判断为true）
注意事项：1. NaN与所有的数值都不相等，包括自己；只能通过isNaN()来判断是否是NaN
2. 浮点数存在精度缺失的问题，尽量避免浮点数运算
null和undefined
null 空
undefined 未定义
数组
var arr = [1,2,3,'hello'];
对象
var person = {
name: "JayNier",
age: 21,
tags:['js','ad',1,2]
}
‘use strict’; //严格检查模式
需要设置IDEA支持ES6语法，必须卸载js的第一行预防js的随意性导致的一些问题
3. 数据类型
3.1 字符串
- 正常字符串使用
''和“”包裹 - 注意转义字符</kbd>的使用
\u4e2d unicode字符 \x41 Ascll字符
- 多行字符串使用`编写
let msg = `hello world !`;
- 模板字符串使用`和${}编写
let name = "Jay";
let age = 20;
let msg = `hello, ${name}`;
console.log(msg);
- 字符串长度
str.length
- 字符串不可变
- 大小写转换
//这是方而不是属性 str.toUpperCase(); str.toLowerCase();
- 获取字符串指定字符下标
str.indexOf('t');
- 获取子字符串（包头不包尾）
str.substring(1); str.substring(1,3); str.substring[1,3);//测试后发现会报错
3.2 数组
Array可以包含任意的数据类型
- 长度
arr.length
注意：可以通过改变arr.length的值来调整大小。
2. indexOf()通过元素获得下表索引
3. slice()截取Array的一部分，返回新数组(包头不包尾)
4. pop()，push()出入栈
shift()，unshift()
sort()排序reverse()元素反转concat()数组拼接，获得新数组join()连接符
打印拼接数组，使用指定的字符链接- 多维数组
3.3 对象
var 对象名 ={
属性名：属性值,
属性名：属性值,
属性名：属性值
}
{…}表示一个对象，键值对描述属性，多个属性间用逗号隔开，最后一个不加逗号
JavaScript中的键都是字符串，值是任意类型
- 对象赋值
person.name = “Jay”；
- 使用一个不存在的对象属性，不会报错
undefined - 动态的删减属性
delete
delete person.name
- 判断属性是否在这个对象中
in
'age' in person; -> true 'toString' in person; -> true //继承
- 判断属性是否是这个对象自己拥有
hasOwnProperty
person.hasOwnProperty('age');
->true
person.hasOwnProperty('toString');
->false
3.4 Map和Set
ES6的新特性
Map
let map = new Map([['Tom',100],['Jack',95],['Lucy',80]]);
let sorce = map.get('Tom');
console.log(sorce);
map.set('admin',123);//添加元素
map.delete('admin');//删除元素
Set无序不重复集合
let set = new Set([1,2,2,2,4,3,4]);//可实现去重 set.add(5);//添加元素 set.delete(1);//删除元素 console.log(set.has(4));//是否包含某个元素
4. 流程控制
4.1 条件判断
if语句
if (score >= 90 && score <= 100){
alert("A");
}else if (score >= 80 && score < 90){
alert("B");
}else if (score >= 70 && score < 80){
alert("C");
}else if (score >= 60 && score < 70){
alert("D");
} else if (score >= 0 && score < 60){
alert("E");
}else {
alert("输入成绩有误！")
}
switch 语句
var d=new Date().getDay();
switch (d)
{
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
}
4.2 循环判断
for 循环
for (var i=0; i<5; i++)
{
x=x + "该数字为 " + i + "<br>";
}
for in 遍历
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) // x 为索引号
{
txt=txt + person[x];
}
let arr = [123,2142,12414,12341];
for (index in arr){
console.log(arr[index]);
}
for of遍历
let arr = [123,2142,12414,12341];
for (x of arr){
console.log(x);
}
let map = new Map([['Tom',100],['Jack',95],['Lucy',80]]);
for (x of map){
console.log(x);
}
let set = new Set([1,2,2,2,4,3,4]);
for (x of set){
console.log(x);
}
while语句
while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
}
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
5. 函数
5.1 定义函数
定义方式一
绝对值函数
function abs(x){
if (x > 0)
return x;
else
return -x;
}
如果没有执行return，函数执行完也会返回结果undefined
定义方式二
var abs = function(x){
if (x > 0)
return x;
else
return -x;
}
函数也可以理解为变量
方式一和方式二等价
调用函数
abs(10); // 10
参数问题：JS可以传任意多个参数，也可以不传递参数
假设不存在参数，如何规避
var abs = function(x){
if (typeof x !== 'number')
throw 'Not a Number';
if (x > 0)
return x;
else
return -x;
}
arguments
传递多个参数时
arguments
var abs = function(x){
for (x in arguments)
console.log(arguments[x]);
}
arguments代表传递进来的所有参数，是一个数组
ES6新特性：获取除已定义参数外的所有参数
rest
var abs = function(a,b,...rest){
console.log(rest);
}
5.2 变量作用域
局部变量
- 变量在函数内声明，变量为局部作用域
- 局部变量只能在函数内部访问
- 因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量
- 局部变量在函数开始执行时创建，函数执行完毕后局部变量自动销毁
- 想要在函数体外使用，可使用
闭包
全局变量
- 变量在函数外定义，即为全局变量
- 全局变量有全局作用域，网页中所有脚本和函数均可使用
- 如果变量在函数内没有声明，该变量为全局变量
函数参数
函数参数只在函数内起作用，是局部变量
内部函数和外部函数变量重名
函数由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量
提升变量的作用域
JS执行引擎，自动提升了变量的声明，但是不会提升变量的赋值
代码规范：所有变量声明全部放在函数头部，有助于代码维护
HTML下的全局变量
在HTML中，全局变量是window对象
let x = "hello"; alet(x); alet(window.x); //两者等价
JS实际上只有一个全局变量 window，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域没有找到，报错RefrenceError
规范
由于我们所有的全局变量都会绑定到我们的window上，如果不同的JS文件，使用了相同的全局变量，会产生冲突
//创建唯一全局变量
let Jay = {};
//定义全局变量
Jay.a = 10;
Jay.b = 100;
console.log(Jay.a + Jay.b);
Jay.add= function(x,y){
return x + y;
}
把自己的代码全部放入自己定义的唯一空间名字中，减少全局命名冲突问题
局部作用域
let
建议使用let去定义局部作用域的变量
function f(){
for (var i = 0; i < 100; i++)
console.log(i);//i出了这个作用域仍能使用
console.log(i);
}
function f(){
for (let i = 0; i < 100; i++)
console.log(i);//i出了这个作用域仍能使用
console.log(i);
}
常量
const
在ES6之前，只有用全部大写字母命名的变量，就是常量，建议不要修改（但是能改变）
在ES6引入了const
5.3 方法
对象：属性和方法
let Jay = {
//属性
name: 'JayNier',
birth: 2001,
//方法
age: function(){
let now = new Date().getFullYear();
return now - this.birth;
}
};
//方法调用要加()
console.log(Jay.age())
代码拆分后
function getAge(){
let now = new Date().getFullYear();
return now - this.birth;
}
let Jay = {
//属性
name: 'JayNier',
birth: 2001,
//方法
age: getAge//这里将函数看做变量使用
};
//方法调用要加()
console.log(Jay.age())
//不能直接调用getAge()，否则this指向window
apply：控制
this的指向
function getAge(){
let now = new Date().getFullYear();
return now - this.birth;
}
let Jay = {
//属性
name: 'JayNier',
birth: 2001,
//方法
age: getAge//这里将函数看做变量使用
};
//方法调用要加()
getAge.apply(Jay,[])//this指向了Jay对象，参数为空
6. 内部对象
6.1 Date
基本使用
let now = new Date();//Sun Sep 05 2021 22:54:33 GMT+0800 (中国标准时间) now.getFullYear();//年 now.getMonth();//月 0~11 now.getDate();//日 now.getDay();//星期 now.getHours();//时 now.getMinutes();//分 now.getSeconds();//秒 now.getTime();//时间戳 全世界统一 1970.1.1 0:00:00 至今的毫秒数 console.log(new Date(now.getTime()))//将时间戳转化为时间
转换
let now = new Date(); now.toLocaleString();//"2021/9/5 下午11:00:53" now.toGMTString();//"Sun, 05 Sep 2021 15:00:53 GMT"
6.2 JSON
JSON与XML
- 早期，所有数据传输习惯使用XML文件！
- JSON是由道格拉斯·克罗克福特构想和设计的一种轻量级资料交换格式。
- JSON最开始被广泛的应用于WEB应用的开发。不过目前JSON使用在JavaScript、Java、Node.js应用的情况比较多，PHP、C#等开发的WEB应用主要还是使用XML。
- JSON与XML最大的不同在于XML是一个完整的标记语言，而JSON不是。这使得XML在程序判读上需要比较多的功夫。主要的原因在于XML的设计理念与JSON不同。XML利用标记语言的特性提供了绝佳的延展性（如XPath），在数据存储，扩展及高级检索方面具备对JSON的优势，而JSON则由于比XML更加小巧，以及浏览器的内建快速解析支持，使得其更适用于网络数据传输领域。
- JSON格式取代了XML给网络传输带来了很大的便利，但是却没有了XML的一目了然，尤其是JSON数据很长的时候，会让人陷入繁琐复杂的数据节点查找中。开发者可以通过在线JSON格式化工具，来更方便的对JSON数据进行节点查找和解析。
JSON字符串与JS对象的转换
格式：
- 对象和Map都用
{} - 数组和List都用
[] - 键值对都用
key: value
//创建对象
let user = {
name: 'Jay',
age: 20,
sex: 'boy'
}
//对象转换为json字符串 {"name":"Jay","age":20,"sex":"boy"}
let jsonUser = JSON.stringify(user);
//json字符串转换为对象
let obj = JSON.parse('{"name":"Jay","age":20,"sex":"boy"}');
6.3 Ajax
- AJAX = Asynchronous JavaScript and XML
- AJAX 是一种用于创建快速动态网页的技术
- AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。
7. 面向对象编程
7.1 面向对象原型继承
let Student ={
name: 'XXX',
age: NaN,
run: function (x){
console.log(this.name + '跑了' + x +'公里');
}
}
let Jay = {
name: 'JayNier',
age: 20
}
//原型指向Student对象 === 继承
Jay.__proto__ = Student;
Jay.run(20);
//构造新对象，可理解为函数
function Student(name) {
this.name = name;
}
//给Student新增一个方法
Student.prototype.say = function (content){
alert(this.name + " say: " + content);
}
let JayNier = new Student('JayNier');
JayNier.say('Hello!');
7.2 面向对象class继承
class关键字，是在ES6引入的
定义class
class Student {
//构造器
constructor(name){
this.name = name;
}
hello() {
alert('hello');
}
}
let JayNier = new Student('JayNier');
JayNier.hello();
继承
class Student {
constructor(name){
this.name = name;
}
hello() {
alert('hello！' + this.name);
}
}
class Undergraduate extends Student{
constructor(name,grade){
super(name);
this.grade = grade;
}
gradePrint(){
this.hello();
alert('你考了' + this.grade + '分');
}
}
let JayNier = new Undergraduate('JayNier', 90);
JayNier.gradePrint();
本质：查看原型对象
原型链
略
8. 操作BOM对象
浏览器介绍
BOM：浏览器对象模型
浏览器内核
window
window：浏览器窗口
navigator
navigator：封装了浏览器的信息
浏览器信息可被人为修改，不建议使用这些属性来判断和编写代码
screen
screen：屏幕信息
location
location：当前页面的URL信息
document
DOM(Document Object Model，文档对象模型)定义了访问和操作HTML文档的标准方法。他把HTML文档表现为带有元素、属性和文本的树结构（节点数）
cookie
history(不建议使用)
浏览器的历史记录
history.back();//后退 history.forward();//前进
9. 操作DOM对象
HTML DOM 树
浏览器网页就是一个DOM树形结构
基本操作
- 更新节点
- 遍历节点
- 删除节点
- 添加节点
要操作一个DOM节点，就必须要先获得这个DOM节点
9.1 获得DOM节点
要把JS文件导入到<body>的最下面
'use strict';
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');
let children = father.children;
这是原生代码，之后尽量使用JQuery
9.2 更新DOM节点
获取元素除根据id获取的，区域方式拿到的都是数组
文本操作
- 修改文本的值：
p1.innerText = "123"; - 可以解析HTML文本标签：
p1.innerHTML = '<strong> 456</strong>';
样式操作
p1.style.color = 'blue'; p1.style.fontSize = '50px';
9.3 删除节点
删除节点步骤：先定位到父节点，再通过父节点删除自己
<div id = "father">
<h1>标题一</h1>
<p id = "p1"> p1</p>
<p class = "p2"> p2 </p>
</div>
let self = document.getElementById('p1');
let father = p1.parentElement;
father.removeChild(p1)
注意：删除多个节点的时候，children是在时刻变化。
9.4 插入节点
我们获得某个节点后，使用innerHTML就可以增加一个元素，但会覆盖原先的内容信息
<p id = 'title'> Hello, world!</p>
<div id = "father">
<h1>标题一</h1>
<p id = "p1"> p1</p>
<p class = "p2"> p2 </p>
</div>
改变节点位置，实现插入
'use strict';
let father = document.getElementById("father");
let title = document.getElementById("title")
father.appendChild(title);
新建普通节点，进行插入
let father = document.getElementById("father");
let x = document.createElement('p');//创建一个p标签
x.id = "new";
x.innerText = "I'm baby!";
father.appendChild(x);
新建标签节点，进行插入
let father = document.getElementById("father");
let myScript = document.createElement("script");
myScript.setAttribute("type","text/javascript");
father.appendChild(myScript);
插入样式
let myStyle = document.createElement('style');//创建样式标签
myStyle.setAttribute('type', 'text/css');
myStyle.innerHTML = `body{//新建样式
background-color: ;
}`;
document.getElementsByTagName('head')[0].appendChild(myStyle);//get的是数组
在前部插入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id = 'title'> Hello, world!</p>
<div id = "father">
<h1>标题一</h1>
<p id = "p1"> p1</p>
<p class = "p2"> p2 </p>
</div>
<script src="js/action.js"></script>
</body>
</html>
let parentNode = document.getElementById('father');
let newNode = document.getElementById('title');
let referenceNode = document.getElementsByClassName('p2')[0];
let insertedNode = parentNode.insertBefore(newNode, referenceNode);
10. 表单操作
BootCDN
获取表单信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "form">
<form action="" method="post">
<p>
<label>
<span>用户名：</span>
<input type="text" id = "username">
</label>
</p>
<p>
<label>
<span>性别：</span>
<input type = "radio" name = "sex" value="man"> 男
<input type = "radio" name = "sex" value="woman"> 女
</label>
</p>
<button id = "submit" onclick="getInformation()">提交</button>
</form>
</div>
<script src="js/action.js"></script>
</body>
</html>
'use strict';
function getInformation(){
let sex, username;
//获取用户名
username = document.getElementById("username").value;
//获取sex的选中值
for (let i = 0; i < document.getElementsByName("sex").length; i++)
if (document.getElementsByName("sex")[i])
sex = document.getElementsByName("sex")[i].value;
alert(username);
alert(sex);
}
表单加密
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js"></script>
</head>
<body>
<div id = "form">
<form action="#" method="post" onsubmit="return check()">
<p>
<label>
<span>用户名：</span>
<input type="text" id = "username" name="username">
</label>
</p>
<p>
<label>
<span>密码：</span>
<input type = "password" id = "password">
</label>
</p>
<p>
<label>
<input type = "hidden" id = "password_MD5" name="password" hidden>
</label>
</p>
<button type = "submit">提交</button>
</form>
</div>
<script src="js/action.js"></script>
</body>
</html>
'use strict';
function check(){
let username, password, password_MD5;
username = document.getElementById("username").value;
password_MD5 = document.getElementById("password_MD5");//不能直接进行赋值，若在此处赋值，那么password_MD5始终为空，无法重置
password = document.getElementById("password").value;
password_MD5.value = md5(password);
if (username.toString() === "" || password.toString() === ""){//此处不能用password_MD5判断，加密后空也是有值的d41d8cd98f00b204e9800998ecf8427e
alert("请输入用户名和密码");
return false;
}
return true;
}
11. jQuery
BootCDN
帮助文档
jQuery库中存在大量的JavaScript函数
公式：
$(selector).action(函数体)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "lib/jquery-3.6.0.js"></script>
</head>
<body>
<p id = 'test'>点我</p>
<script>
$('#test').click(function (){
alert("hello, world!");
})
</script>
</body>
</html>
selector与css的选择器写法一样
选择器
建议查看帮助文档
三种基本选择器
$('#id').click();
$('p').click();
$('.class').click();
事件
鼠标事件、键盘事件、其他事件
在DOM加载完成时运行的代码，可以这样写：
$(document).ready(function(){
// 在这里写你的代码...
});
$(document).ready()的简写
$(function($) {
// 你可以在这里继续使用$作为别名...
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "lib/jquery-3.6.0.js"></script>
</head>
<style>
#test{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
<body>
<h1>请在方框内移动鼠标</h1>
<p id = 'location'></p>
<div id = 'test'>
</div>
<script>
//在DOM加载完成时运行的代码
$(function (){
$('#test').mousemove(function (e){
$('#location').text("x：" + e.pageX + " y：" + e.pageY);
})
})
</script>
</body>
</html>
操作DOM元素
节点文本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "lib/jquery-3.6.0.js"></script>
</head>
<body>
<div id = "father">
<h1>标题一</h1>
<p id = "p1"> p1</p>
<p class = "p2"> p2 </p>
</div>
<script>
$('p[id = p1]').text();//获得值
$('p[id = p1]').text("修改值");//修改值
$('p[id = p1]').html();//获得值
$('p[id = p1]').html("修改值");//修改值
</script>
</body>
</html>
css操作
$('p[id = p1]').css({color:'red'});//键值对
显示与隐藏
$('p[id = p1]').show();
$('p[id = p1]').hide();
小技巧
- 如何巩固JS（看jQuery源码，看游戏源码）
- 如何巩固HTML、CSS（扒网站）
Ant Design
Element-UI
Layui
这篇关于JavaScript（狂神说学习笔记）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-15JavaMailSender是什么，怎么使用？-icode9专业技术文章分享
- 2024-11-15JWT 用户校验学习：从入门到实践
- 2024-11-15Nest学习：新手入门全面指南
- 2024-11-15RestfulAPI学习：新手入门指南
- 2024-11-15Server Component学习：入门教程与实践指南
- 2024-11-15动态路由入门：新手必读指南
- 2024-11-15JWT 用户校验入门：轻松掌握JWT认证基础
- 2024-11-15Nest后端开发入门指南
- 2024-11-15Nest后端开发入门教程
- 2024-11-15RestfulAPI入门：新手快速上手指南
