JavaScript总结
https://www.w3school.com.cn/js/index.asp
1.快速入门
- 内部标签（写在< head>< /head>里面）
<script>
//……
</script>
- 外部引入
abs.js
然后，在test.html里的里写< script src=“abc.js”>< /script>
2.基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本语法入门</title>
<!--JavaScript严格区分大小写-->
<script>
//1.定义变量。 变量类型 变量名=变量值；
var score=65;
//2.条件控制
if (score>60 && score<70){
alert("60~70（60~70）");
}else {
alert("other")
}
//console.log(score) 在浏览器的控制台打印变量！
</script>
</head>
<body>
</body>
</html>
3.浏览器必备调试须知
4.数据类型
4.1number
js不区分小数和整数
123 //整数123
123.1 //浮点数123.1
1.123e1 //科学计数法
-99 //负数
NaN //not a number
Infinity//表示无限大
4.2.字符串
‘abc’ “abc”
4.3.布尔值
true，false
4.4.逻辑运算
&& //两个都为真，结果为真
|| //一个为真，结果为真
！ //真即假，假即真
4.5.比较运算符！！重要
- =
- = = 等于（类型不一样，值一样，也会判断为true）
- === 绝对等于（类型一样，值一样，结果true）
这是一个JS的缺陷，坚持不要使用= =比较
须知：
- NaN===NaN，这个与所有的数值都不相等，包括自己。
- 只能通过isNaN(NaN)来判断这个数是否是NaN。
4.6浮点数问题：
console.log((1/3) === (1-2/3)) //false
尽量避免使用浮点数进行运算，存在精度问题！
Math.abs((1/3)==(1-2/3))<0.0000000001 //true
4.7null和underfined
- null 空
- underfined 未定义
5.数组
java的数值必须是相同类型的对象~,JS中不需要这样！
// 保证代码的可读性，尽量使用 []
var arr = [1,2,'hello',null,true]
new Array(1,12,2,'hello');
取数组下标：如果越界了，就会
- unfined
6.对象
对象是大括号，数组是中括号~
每个属性之间使用逗号隔开，最后一个不需要添加。
// Person person =new Person(1,2);
var person = {
name:"huihuang",
age:22,
tags:['js','java','web',"……"]
}
取对象的值
7.严格检查模式
<!--
前提是IEDA需要设置支持ES6语法
‘use strict’;严格检查模式，预防JavaScript的随意性导致产生的一些问题必须写在JavaScript的第一行！
局部变量建议都用let去定义~
-->
<strict>
'use strict';
//局部变量
let i =1;
//不加let,i就会变红。
</strict>
8.字符串类型
8.1字符串
- 正常字符串我们使用 单引号，或者双引号包裹（正常字符串，就是字母、文字）
- 注意转义字符
\ ’ //作用打出‘（单引号）
\t //空格
\n //换行
还有Unicode字符
Ascll字符
8.2多行字符串编写
//tab 上面 esc键下面
var msg =`hello
word
你好呀`
8.3模板字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板字符串</title>
<script>
'use stict';
let name="辉煌";
let msg=`你好帅呀，${name}`;
</script>
</head>
<body>
</body>
</html>
8.4字符串长度
str.length
8.5字符串的可变性——不可变
8.6大小写转换
- //注意，这里是方法，不是属性了
- student.toUpperCase()
- student.toLowerCase()
案例
8.7indexOf(检索字符串的位置)
案例
8.8substring(截取字符串)
[)
student.substring(1)
student.substring(1,3)
案例
9.数组
数组可以包含任意的数据类型
通过下标取值和赋值
案例
9.1长度
arr.length
9.2indexOf
通过元素获得下标索引
arr.indexOf(2)
9.3slice()
截取Array的一部分，返回一个新数组，类似于String中的substring
案例
9.4push(),pop()尾部
- push:压入到尾部
- pop: 弹出尾部的一个元素
9.5unshift(),shift()头部
- unshift: 压入到头部
- shift: 弹出头部的一个元素
9.6排序sort()
9.7元素反转reverse()
9.8concat()
注意：concat()并没有修改数组，只是会返回一个新的数组
9.9链接符join
打印拼接数组，使用特定的字符串连接
9.10多维数组
10.对象
JS中对象，{……}表示一个对象，键值对描述属性xxxx:xxx,多个属性之间使用逗号隔开，最后一个属性不加逗号！
10.1对象赋值
10.2使用一个不存在的对象属性，不会报错！underfined
10.3动态的删减属性，通过delete删除对象的属性
JavaScript中的所有的键都是字符串，值是任意对象！
10.4动态的添加，直接给新的属性添加值即可
10.5判断属性值是否在这个对象中！xxx in xxx!
10.6判断一个属性是否是这个对象自身拥有的 用hasOwnProperty
11.流程控制
11.1if判断
11.2while循环，避免程序死循环（两种写法）
11.3 for循环
11.4 forEach 循环
11.5 for……in
12.Map和Set
ES6的新特性
12.1 Map
12.2 Set
无序不重复的集合
Map和Set的区别
- set指的是“集合”结构，而Map指的是“字典”结构；
- set是以“[value, value]”的形式储存元素，而Map是以“[key, value]”的形式储存；
- Map可用get()通过键查找特定值并返回，而set不行。
13.Iterable迭代
14.函数
定义方式一
（绝对值函数）
一旦执行到return代表函数结束，返回结果！
如果没有执行return,函数执行也会返回结果，结果就是underfined
定义方式二
function(x){……}这是一个匿名函数，但是可以把结果赋值给abs,通过abs就可以调用函数！
调用函数
参数问题
参数问题：javaScript可以传任何个参数，也可以不传递参数~
假设不存在参数，如何规避？
15.arguments（参数）
arguments是一个JS免费赠送的关键字；
代表，传递进来的所有的参数是一个数组！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>argument参数</title>
<script>
var abs = function(x){
console.log("x=>"+x);
for (var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
</script>
</head>
<body>
</body>
</html>
效果
16.rest
问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有的参数~
以前
ES6引入的新特性，获取除了已经定义的参数之外的所有参数~
rest参数只能写在最后面，必须用…标识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rest</title>
</head>
<body>
<script>
function aaa(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
</script>
</body>
</html>
效果
17.变量的作用域
在JavaScript中，var定义变量实际是有作用域的。
- 假设在函数体中声明，则在函数体外不可以使用~
- 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突。
- 内部函数可以访问外部函数的成员，反之则不行。
- 假设内部函数变量和外部函数的变量重名！在JavaScript中函数查找变量从自身函数开始，由“内”向“外”查找。假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
18.提升变量的作用域
代码
结果：undefined
说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；
这个是在JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护
19.全局函数
19.1全局变量
19.2规范
20.局部作用域let
21.常量const
22.方法
定义方法：方法就是把函数放在对象里面，对象只有两个东西：属性和方法。
但是，不能直接用getAge(),因为this没有
23.apply
在js中可以控制this指向！
24.内部对象
24.1 标准对象
25.Date
25.1 基本使用和转换
26.json
json是什么
27.json字符串和js对象的转化和两者的区别
- var jsonUser=JSON,stringify(user);
- var obj = JSON.parse(‘{“name”;“huihuang”}’);
28.面向对象编程
proto:相当于是个继承
调用
29.class继承
以前
29. 1定义一个类，属性，方法
29.2继承
本质：查看对象原型
30.操作BOM对象（重点）
30.1浏览器介绍
30.2window
30.3 Navigator
30.3screen
30.4location
30.5 document
30.6 cookie
30.7history
31.操作DOM对象（重点）
31.1核心
31.2获取DOM节点
31.3更新节点
idea
控制台
31.4 删除节点
删除节点的步骤：先获取父节点，再通过父节点删除自己
注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意！
31.5插入节点
我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干，会覆盖！
效果：追加到后面
31.6创建新标签
小小测试
题目：用JavaScript写下面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom练习</title>
<style>
body{
color: blue;
}
#js{
background: pink;
}
</style>
</head>
<body>
<p id="js">JavaScrpt</p>
<div id="list">
<p id="se">JavaSE</p>
</div>
</body>
</html>
结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom练习的练习</title>
</head>
<body>
<script>
//p标签的id和内容
var newp =document.createElement('p')
newp.id='js';
newp.innerText='JavaScript';
document.getElementsByTagName('body')[0].appendChild(newp)
//在div里写p标签
var newdiv = document.createElement('div');
newdiv.id='list';
var newp2 = document.createElement('p');
newp2.id='se';
newp2.innerText='JavaSE';
document.getElementsByTagName('body')[0].appendChild(newdiv);
document.getElementsByTagName('div')[0].appendChild(newp2);
//在head标签添加style,在里面再添加body
var newstyle = document.createElement('style');
newstyle.innerHTML='body{color:blue;}'
document.getElementsByTagName('head')[0].appendChild(newstyle)
//在head标签添加style,在里面再添加background
var newstyle2 = document.createElement('style');
newstyle2.innerHTML='#js{background:pink;}';
document.getElementsByTagName('head')[0].appendChild(newstyle2)
</script>
</body>
</html>
效果
32. insertBefore
之前
之后
33. 表单操作（验证）
32.1 获取表单的信息
效果
33.提交表单
33.1 MD5工具类
33.2 使用
33.3 高级
- 表单绑定事件
- 密码隐藏
34. JQuery
https://jquery.cuishifeng.cn/
34.1获取JQuery
在head里导入jQuery
34.2 公式
34.3选择器
34.4 鼠标事件
鼠标事件、键盘事件、其他事件
案例：获取鼠标当前的坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery练习</title>
<script src="lib/jquery-3.6.3.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--案例：获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
})
})
</script>
</body>
</html>
效果
35. 操作DOM
可以查文档：https://jquery.cuishifeng.cn/
35.1节点文本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作DOM元素</title>
<script src="lib/jquery-3.6.3.js"></script>
</head>
<body>
<ul id="test-u1">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
<!--查值-->
$('#test-u1 li[name=python]').text();
//赋值
$('#test-u1 li[name=python]').text(1234);
</script>
</body>
</html>
35.2 css操作
35.3 元素的显示和隐藏
36.copy
学习小技巧
729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
