标签：name Jay JavaScript 笔记 alert score let 狂神 document
JavaScript
文章目录
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. 表单操作
获取表单信息
<!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（扒网站）
标签：name,Jay,JavaScript,笔记,alert,score,let,狂神,document 来源： https://blog.csdn.net/weixin_55759494/article/details/120541471
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。