本文详细介绍了JavaScript的三种引用方式、注释技巧、输入输出语句、变量概念及操作、数据类型、运算符、流程控制、函数、DOM与BOM操作，以及jQuery的使用和前端开发基础知识概览。
JavaScript入门基础学习
1.三种引用JavaScript的方式
1.1行内式
<input type = "button" value="点我试试" onclick="alert('Hello World')/>"
可读性差，在html中写大量代码时，不方便阅读
引号易错，引号多层嵌套匹配时，非常容易弄错
1.2内嵌式
<script>
alert('Hello World')
</script>
多为学习时使用
1.3外部js文件
引用方法
<script src="js文件地址"></script>
加入defer可以先加载html后加载js文件
script之间不可以书写任何字符
2.js的注释
2.1单行注释
//单行注释内容
快捷键Ctrl+/
2.2多行注释
/*
注释内容
注释内容
*/
快捷键shift+alt+a
3.JavaScript输入输出语句
3.1arert(msg)
浏览器弹出警示框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
alert('计算的结果是')
</script>
</head>
<body>
</body>
</html>
3.2console.log(msg)
浏览器控制打印输出信息
控制台输出 给程序员用来测试的
运行完之后在浏览器中检查元素中的console中可以看到
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
console.log('我是程序员才可以看到的');
</script>
</head>
<body>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EAv9aNuZ-1629598670604)(I:\JavaScript自学笔记\images\image-20210816162812416.png)]
3.3prompt(info)
浏览器弹出输入框，用户可以输入
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 这是一个输入框
prompt('请输入你的年龄');
</script>
</head>
<body>
</body>
</html>
4.变量
4.1变量的概念
4.1.1什么是变量
白话：变量就是一个装东西的盒子
通俗：变量是用于存放数据的容器。我们通过变量名获取数据，甚至可以修改。
4.1.2变量在内存中的存储
本质：变量是程序在内存中申请的一块用来存放数据的空间。
类似于我们的酒店的房间，通过房间号找到自己想找到变量
通过变量名找到变量里存储的数据
4.2变量的使用
4.2.1声明变量
通过var来声明 var age;
var 声明了一个变量，名称为age的变量
4.2.2赋值
把值存入到这个变量中，可以直接用age=10;来赋值
4.2.3变量的初始化
var age =18;
声明一个变量并赋值，我们称之为变量的初始化。
4.3案例
4.3.1变量案例01
对变量的利用的一个小练习！并且要输出结果！
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var name = '李四'; var address = '阿巴阿巴花园'; var age = 18; var gz = 199999999; console.log('name:' + name + '\n' + 'address:' + address + '\n' + 'age:' + age + '\n' + 'gz:' + gz); </script></head><body></body></html>
4.3.2变量案例02
通过变量来储存prompt输入的字符或者数字
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var name = prompt("请输入你的名字"); alert('欢迎' + name + '访问此网站'); </script></head><body></body></html>
4.4变量语法拓展
4.4.1更新变量
一个变量被重新赋值后，它原有的值就会被后来的值所替代！变量值将以最后一次赋值为准！
<script> var name = '李四'; name = '张三';</script>
这时候就会输出张三而不是李四
4.4.2同时声明多个变量
每个变量之间通过逗号来隔开
<script>var age = 18, name = 'lisi', gz = 999999;</script>
4.4.2.1声明不赋值
<script>var sex;console.log(sex);</script>
输出的结果是undefined
4.4.2.2不声明不赋值
<script>console.log(tel);</script>
会报错！会提示tel is undefined
4.2.2.3不声明赋值
<script>qq = 11111;console.log(qq);</script>
可以直接输出
4.5变量的命名规范
由字母(A-Z,a-z)、数字(0-9)、下划线、美元符号组成
严格区分大小写：app 和 App是两个不同的变量
不能以数字开头：18age 是错误的
不能是关键词、保留字：如var for while
变量名必须有意义。MMD BBD nl
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写:myFistName
推荐翻译网站：有道 爱词霸
！经量不要使用name进行命名，有些浏览器name有特殊含义
4.6案例-交换两个变量的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//交换数据
var apple_1 = '青苹果';
var apple_2 = '红苹果';
var temp;
temp = apple_1;
apple_1 = apple_2;
apple_2 = temp;
alert(apple_1);
alert(apple_2);
</script>
</head>
<body>
</body>
</html>
4.7变量小结
为什么需要变量？
因为我们一些数据需要存放，所以需要变量
变量是什么？
变量就是一个容器，用来存放数据的地方。方便我们以后使用里面的数据
变量的本质是什么？
变量是内存中的一块空间，用来存储数据
变量怎么使用？
我们使用变量的时候，一定要声明变量，然后赋值，声明变量本质是去内存申请
什么叫做变量的初始化？
声明变量并赋值我们称之为变量的初始化
变量命名规范有哪些？
变量名经量要规范，见名之意----驼峰命名法
学会区分哪些变量名不合法
交换2个变量的思路
找一个中间变量用来作为中介，来交换两个变量的值
5.数据类型
5.1为什么需要数据类型
把占用需要内存大小不同的数据，用不同的数据类型来存储，充分利用存储空间
5.2变量的数据类型
js的变量数据类型只有在程序运行在运行过程中，根据他的值来判断他的类型
JavaScript拥有动态类型，根据值的不同，数据类型可以变化
5.3简单的数据类型（基本的数据类型）
Number：数字型，包含整型值和浮点值 默认值是0；
数字前面加上0表示该数是8进制
数字前加上0x表示该数是16进制
Boolean：布尔值，TRUE或者FALSE 默认值是FALSE；
String：字符串
Undefined：没有赋值
Null：空值
5.4数字型范围
Number.MAX_VALUE 最大值
Number.MAX_VALUE 最小值
Infinity 代表无穷大，大于任何数值
-Infinity代表无穷小，小于任何数值
NaN，Not a number,代表一个非数值
5.4.1isFinite()函数
用来检查数字是否在最大值和最小值的范围区间内,如果不在,则返回false,否则返回true
let result = Number.MAX_VALUE * 2;
console.log(isFinite(result));//输出结果为false
5.5NaN
如果表达式中出线0/0或者-0/0则会返回值NaN
console.log(0/0); //NaN
console.log(-0/0); //NaN
如果分子是非0,分母是0则会返回Infinity或者-Infinity
console.log(5/0); //Infinity
console.log(5/-0); //-Infinity
①任何涉及NaN的计算返回值始终都是NaN
②NaN不等于包含NaN在内的所有值
console.log(NaN == NaN); //false
5.5.1isNaN()方法
这个方法用来判断非数字，并且返回一个值，如果是数字则返回
FALSE 否则返回一个TRUE
1.输入一个数字，返回false
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
console.log(isNaN(101));
</script>
</head>
<body>
</body>
</html>
2.输入一个字符串可以返回true
console.log(isNaN('a'));
5.6字符串型
字符串需要加单引号或者双引号，但是更推荐加上单引号
字符串的嵌套：在外边加上双引号在内部加上单引号或者可以反
来，还可以使用反斜杠"\"用来转译
字符串还可以通过``来进行多行定义
let msg = `helloworld`
5.6.1length方法
可以通过length方法来计算字符串的长度！ 如果字符串里面包含双字节字符,那么length返回值可能不准确
5.6.2字符串大小写
toUpperCase()方法
让字符串全员大写
toLowerCase()方法
让字符串小写
5.6.3审查元素
indexOf()方法
从头开始检查元素下标的位置
5.6.4截取片段
substring()方法
区间包头不包尾
let student = 'student';
console.log(student.substring(1))//从头输出到尾(不包含头)
console.log(student.substring(1,3))//输出到3
5.6.5字符串的拼接
可以通过＋来来进行字符串的拼接
只要有字符串和其他类型相拼接，最终结果是字符串
console.log(12+'12');
输出结果是1212
console.log(12+12);
输出的结果是24
字符相加是是拼接，数字相加是求和
5.6.6字符串插值
通过**``来定义模板,通过${}**可以用来赋值
let value = 5;
let exponent = 'second';
let a = value + 'to the' + exponent + 'power is' +(value*value);
//旧写法let b = `${value} to the ${exponent} power is ${value * value}`; //新写法!
所有的插值都会被toString()方法进行强转,而且任何JavaScript表达式都可以被用于插值
5.7数组
数组中的元素是可以重复出现的
5.7.1数组长度
let arr = = [1,2,3,4,5,6]; //定义数组console.log(arr.length); //6
数组可以包含任意的数据类型
给length赋值可以改变数组的长度
arr.length = 10;console.log(arr)
输出的结果会多出4个空值
对空值进行输出
console.log(arr[7]);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z0i3OIcG-1629598670610)(I:\JavaScript自学笔记\images\image-20210819094302866.png)]
如果长度短,元素就会丢失
5.7.2indexOf()方法
通过元素获得下标索引
let arr = [1,2];arr.indexOf(2);//输出结果为1
在索引的过程中,数字1和字符串的"1"是不同的
5.7.3slice()方法
截取数组的一部分,返回一个新的数组,类似于string中的substring
let arr = [1,2,3,4,5];consloge.log(arr.slice(1,5));//[2,3,4,5]
5.7.4puch(),pop()方法—尾部
a.push()方法
在数组的末尾压入元素
let arr = [1,2,3,4,5,6];arr.push('a','b');console.log(arr);
//输出[1,2,3,4,5,6,'a','b']
b.pop()方法
弹出尾部的一个元素
let arr1 = [1, 2, 3, 4, 5, 6];
arr1.push('a', 'b');
console.log(arr1);
console.log(arr1.pop());//输出b,同时数组中不在包含b这个元素
5.7.5unshift(),shift()方法—头部
a.unshift()方法
在头部添加元素
let arr2 = [1, 2, 3, 4, 5, 6, 1];
arr2.unshift('a', 'b');
console.log(arr2);//输出结果为['a','b',1,2,3,4,5,6]
b.shift()方法
在头部弹出元素
let arr2 = [1, 2, 3, 4, 5, 6, 1];
arr2.unshift('a', 'b');
console.log(arr2);
console.log(arr2.shift());
console.log(arr2);//输出a,同时数组中不在包含a这个元素
5.7.6sort()方法—排序
对数组里面的内容进行排序!
let array = [2,4,5,1,6,3];
array.sort();
console.log(array);//[1, 2, 3, 4, 5, 6]
5.7.7reverse()方法—元素反转
let array = [2, 4, 5, 1, 6, 3];
array.sort();
array.reverse();
console.log(array);//[6, 5, 4, 3, 2, 1]
5.7.8concat()方法—元素拼接
let array = [2, 4, 5, 1, 6, 3];
array.sort();
array.reverse();
array.concat(['A','B','C']);//[6, 5, 4, 3, 2, 1,'A','B','C']
**注意!**concat()方法并没有修改数组只是会返回一个新的数组!
let array = [2, 4, 5, 1, 6, 3];
array.sort();
array.reverse();
array.concat(['A','B','C']);
console.log(array)//[6, 5, 4, 3, 2, 1]
5.7.9join()方法
打印拼接数组,使用特定的字符串链接
arr = ['c','b','a'];arr.join('-');//"c-b-a"
5.7.10多维数组
arr = [[1,2],[3,4],['5','6']];
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xaFtNKk1-1629598670611)(I:\JavaScript自学笔记\images\image-20210819102055164.png)]
arr[1][1];//输出4
5.8typeof方法
‘undefined’ 表示值没有定义;
"boolean"标示值为布尔值;
"string"表示值为字符串;
"number"表示值为数值;
"object"表示值为对象(而不是函数)或者null;
"function"表示值为函数;
"symbol"表示值为符号;
可以使用typeof方法来检测数据类型
var myName = '阿里巴巴';
console.log(typeof myName);
var age = 19;
console.log(typeof age);
var flag = false;
console.log(typeof flag);
var age = prompt('请输入你的年龄');
console.log(typeof age);
输出的结果为String说明在通过prompt进行赋值的时候，传递的值为字符串
5.9数据类型转换
把一种数据类型转化成另外一种数据类型
a.转化成字符串类型
①tostring方法
唯一用途就是返回当前值的字符串等价物
多数情况下tostring()不接受任何参数,但是在数值的调用的时候可以给一个参数----进制数
let num = 10;
conlose.log(num.toString());//10
conlose.log(num.toString(2));//1010
conlose.log(num.toString(8));//12
conlose.log(num.toString(10));//10
conlose.log(num.toString(16));//a
②String()方法
括号中加上变量名称
String()遵循以下方法
**a.**如果值有toString()方法,则调用该方法(不传参数)并返回结果
**b.**如果值是null,则返回"null"
**c.**如果值是undefined,则返回"undefined"
let value1 = 10;
let value2 = true;
let value3 = null;let value4;
conslose.log(String(value1));//10
conslose.log(String(value2));//true
conslose.log(String(value3));//null
conslose.log(String(value4));//undefined
③加号拼接字符串方法☆☆☆
var num = 1;console.log(num + '')
b.转化为数字型（重点！）
①parseInt(变量名)
得到的是整数！int！
如果是parseInt(120px);
输出的结果是120;
let num1 = parseInt('1235blue');//1235
let num2 = parseInt('');//NaNlet
num3 = parseInt('0xA');//10 十六进制转化成十进制
let num4 = parseInt(22.5);//22
let num5 = parseInt('70');//70
let num6 = parseInt('0xf');//15
不同进制的值可能会在某些情况下被混淆,所以parseInt可以接受第二个参数,用于接受进制数
let num = parseInt('0xAF',16);//175
如果提供了进制数,理论上可以将字符串前面的0x省略
let num1 = parseInt('AF',16);//175let num2 = parseInt('AF');//NaN
通过第二参数可以极大扩展转换后获得的结果类型
let num1 = parseInt('10',2); //2
let num1 = parseInt('10',8); //8
let num1 = parseInt('10',10); //10
let num1 = parseInt('10',16); //16
②parseFloat(变量名)
Float可以取到浮点数！！！！
会省略掉开头的第一个0,所以十六进制的返回值始终会是0,在遇到有多个小数点时,直接收到第一个小数点,第二个小数点后的数字不解析
并且parseFloat只会解析十进制所以不能接受第二个参数!
let num1 = parseFolat('1234blue'); //1234
let num2 = parseFolat('0xA'); //0
let num3 = parseFolat('22.5'); //22.5
let num4 = parseFolat('22.34.5'); //22.34
let num5 = parseFolat('0908.5'); //908.5
let num6 = parseFolat('3.125e7'); //31250000
③利用Number(变量)
Number()函数
①布尔值:true转换成1,false转化成0
②数值:直接返回
③unll返回0
④undefined,返回NaN
⑤字符串:
**a.**如果字符串包含数值字符,包括数字前面带加减号的情况,则转化成为一个十进制的数值
Number('1');// 1
Number('123')//123
Number('0011')//返回11
b.如果字符串为浮点值,则返回一个浮点值,其他与a相同
Number('1.1');//1.1
Number('-0012.1');//-12.1
**c.**如果包含有效的16进制,则会把十六进制转化成十进制来进行输出(八进制相同)
Number('0xf');//15
**d.**如果是空字符串(不包含字符),则返回0
Number('');//0
**e.**如果字符串包含上述其他情况之外的其他字符,则全部返回NaN
④利用了算数运算
console.log('123'-0);
输出结果为数字型的123
！不可以使用加号，如果使用加号出现了字符串，那么久会变成字
串的拼接
5.10案例
a计算年龄
var year = prompt('请输入出生的年份');
var age = 2021-year;
alert('您今年的年龄是' + 2021-year);
b.简单加法器
var num1 = prompt('请输入第一个值');
var num2 = prompt('请输入第二个值');
var sum = Number(num1) - Number(num2);
alert('计算的结果是'+sum);
5.11转化为布尔型
代表空，否定的值会被转化为false，如’’,0,NaN,null,undefined
其他的全部转化为true
5.12 对象
!JavaScript中的所有的键都是字符串,值是任意对象
若干个键值对
var 对象名={
属性名:属性值,
属性名:属性值,
属性名:属性值
}
var preson={
name:'suxu',
age:18,
score:99
}
js中对象,{…}表示一个对象,键值对描述属性xxxx:xxxx,多个属性之间使用逗号隔开,最后一个属性不加逗号!
5.12.1对象赋值
preson.name = '苏旭';
console.log(preson.name);//苏旭
使用一个不存在的对象属性,不会报错!会输出undefined!!!
5.12.2动态增删减属性
通过delete可以删除对象的属性
添加:直接给新的属性添加值即可!
//删除
delete person.name;
//true表示删除成功,打印person可以查看
//添加
person.hahaha = "hahahaha";
//打印person可以查看
5.12.3判断对象中是否存在某个属性值
判断属性值是否在对象中! xxx in xxx
'age' in persontrue//继承'toString' in persontrue
hasOwnProperty()方法
通过hasOwnProperty()方法来判断这个属性值是否是来源于本身而不是继承而来
person.hasOwnProperty('age')trueperson.hasOwnProperty('toString')false
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UgKUrbtT-1629598670612)(I:\JavaScript自学笔记\images\image-20210819154338548.png)]
5.13Map 和 Set
5.13.1 Map
类似于java中的map 和 Python中的字典
通过key获得value
let map = new Map([['a', 100], ['b', 20], ['c', 99]]);
let Sname = map.get('a');
console.log(Sname);//100
set()方法
可以通过set()方法在map中增加键值对或者修改旧的键值对
let map = new Map([['a', 100], ['b', 20], ['c', 99]]);
let Sname = map.get('a');
console.log(Sname);
map.set('admin', 10086);
console.log(map);
delete()方法
可以通过此方法删除键值对
5.13.2 Set
Set:无序不重复的集合!
let set = new Set([1, 3, 1, 1, 1, 12]);
console.log(set);
add()方法
可以添加set中的元素
delete()方法
可以删除set中的元素
Aarray.from()方法
输出set中的元素
let set = new Set([1, 3, 1, 1, 1, 12]);console.log(set);console.log(Array.from(set));
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kSLV9vIX-1629598670614)(I:\JavaScript自学笔记\images\image-20210819162351014.png)]
has()
判断Set中是否包含
let set = new Set([1, 3, 1, 1, 1, 12]);
console.log(set);
console.log(set.has(3));
6.运算符
6.1算数运算符
加+，减-，乘*，除/，取余%
！浮点数直接在算数运算里面会有问题
！我们不能直接用浮点直接用来比较是否相等！
6.2表达式和返回值
由数字，运算符，变量等组成的式子我们称之为表达式
在程序中结果在前，运算符在后
先计算右边的表达式后将得到的结果返回给左边！
var num = 1 + 1;
6.3前置递增(递减)运算符
想要完成变量自己加1，可以通过递增++来完成，相反递减就是–
++num//类似于num = num + 1;
++放前表示先自加后返回！！！
6.4后置递增(递减)运算符
num++; //后置递增
1.前置自增和后置递增如果单独使用 效果是一样的
2.后置自增： 先返回原值 后自加！
6.5比较运算符
1.我们在程序里面的等于号是“===” 默认转化成数据类型，会把字符串的数据类型转化成数字型！
console.log(18 == '18');//返回的值是true
2.我们程序里面有全等一模一样
符号"===":要求两侧的值还有数据类型完全一直才可以true
6.6逻辑运算符
&& 逻辑与就是and：一假全假，两真才真
|| 逻辑或 就是or：一真则真，两假才假
！ 逻辑非not
6.7短路运算(逻辑中断)
原理：当有多个表达式(值)时，左边的表达式可以确定结果时，就不在继续运算右边的表达式的值
a.逻辑与
语法：表达式1&&表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1
只有否定的或者是空的字符串为假直接返回，其余的都是真的
b.逻辑或
语法:表达式1||表达式2
如果表达式1结果为真,则返回表达式1
如果表达式1结果为假,则返回表达式2
逻辑与的运算符优先级高于逻辑或!
6.8赋值运算符
= :直接赋值
var userName = '我是值';
+= , -= : 加,减一个数后在赋值
var age = 10;age += 5;//输出结果为15
*= , /= , %= 乘,除,取余后在赋值
var age = 2;age *= 5;//age = 10;
7.流程控制
7.1顺序流程控制
程序按照代码的先后顺序,依次进行!
7.2分支流程控制
从上往下执行代码的时候可以通过不同的条件来执行不同的路劲,从而得到不同的结果
7.2.1if语句
a.if单语句
基本格式:
if(条件表达式){执行语句}
当条件表达式为true的时候才会执行if语句里面的执行语句
b.if-else执行语句
当if语句条件不满足的时候执行else语句里面的执行语句
2选1
基本格式:
if(条件表达式){
执行语句
}else{
执行语句
}
c.if - else if - else多分支语句
基本格式:
if(条件表达式){执行语句}else if(条件表达式){执行语句}else{执行语句}
其中elseif可以是多个也可以是一个!只有当条件表达式返回值为true的时候才会执行语句中的执行语句否则会按照顺序流程控制
案例–判断今年是否为瑞年
let year = Number(prompt('Enter year'));
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) {
alert('今年是瑞年');
} else {
alert('今年是平年');
}
案例–判断成绩
let score = Number(prompt('请输入你的成绩'));
if (score >= 90) {
alert("A");
} else if (score >= 80) {
alert("B");
} else if (score >= 70) {
alert("C");
} else if (score >= 60) {
alert("D");
} else {
alert("E");
}
7.2.2三元表达式
语法结构:
条件表达式 ? 表达式1 : 表达式2
执行思路:
如果条件表达式为真则返回表达式1的值否则返回表达式2的值
案例–数字补0
let number = Number(prompt('请输入一个数字'));
result = number < 10 ? '0' + number : number;
alert(result);
7.2.3switch语句
语法结构:
switch(表达式){
case value1:执行语句1;
break;
case value2:执行语句2;
break; case value3:执行语句3;
break;
default:执行语句;
}
value是匹配表达式的值!
多选一的过程!
如果没有匹配的value则执行default里面的执行语句
表达式中的值与value的值的数据类型要一样!!!否则会识别不出来!!!
每段case中都要加入break否则会一直执行下去!除非有特殊要求
案例–查找水果的价格
let fruit = prompt('请输入一个水果!')
switch (fruit) {
case '苹果':alert('3.5元/斤');
break;
case '香蕉':alert('4元/斤');
break;
case '葡萄':alert('7.88元/斤');
break;
default:alert('没有你想要查询的水果!'); }
if-else if -else 和 switch的区别
①一般情况下两者可以互相替换
②switch通常在处理case比较确定值的情况,而if-else语句更加灵活,可以处理范围的判断
③switch进行判断后直接执行到程序的条件语句,效率更高,而if-else语句有几种判断条件,就要判断多少次
④当分支比较少的时候,if语句的执行效率要比switch要高
⑤当分支比较多的时候,switch的执行效率更高,而且结构更加清晰
7.3循环流程控制
7.3.1for循环
for(let i = 0;i<100;i++){
console.log(i);
}
7.3.2while循环和do-while循环
差别:do-while循环至少做一次循环而while可能一次循环不做!!!
//while 循环
while (age<100){
age += 1;
console.log(age);
}
//do-while循环
do{
age = age + 1;
console.log(age);
}while(age<100)
7.3.3foEach循环
可以通过此方法来进行数组的遍历
var age = [12,3,4,5,6,7,122,432,423];//函数
age.forEach(function(value){
console.value;
})
7.3.4for—in
对数组(对象)的下标进行索引
var age = [12, 3, 4, 5, 6, 7, 122, 432, 423];
for (var number in age) {
console.log(number);
}
7.3.4for—of
对数组(对象)进行遍历类似于java中的增强for
var age = [12, 3, 4, 5, 6, 7, 122, 432, 423];
for (var number of age) {
console.log(number);
}
8.严格检查模式
语法:
‘use strict’;严格检查模式,预防JavaScript的随意性导致产出的一些问题局部变量都建议使用let去定义
必须写在JavaScript代码的第一行!
9.函数
9.1 定义函数
定义方式一
绝对值函数
function abs(x){
if (x >= 0){
return x;
}else{
return -x;
}}
一旦执行到return则代表函数结束返回结果!
如果输入的是空值或者没有执行return,函数执行完也会返回结果,返回的值是NaN
定义方式二
var abs =function abs(x){
if (x >= 0){
return x;
}else{
return -x;
}
}
function(){…}这是一个匿名函数.但是可以把结果赋值给abs,通过abs来调用函数
定义函数的方式一方式二相同!!!
调用函数
abs(10)//10
abs(-10)//10
参数问题:javascript可以传任何一个参数,也可以不传递参数~
参数进来是否存在的问题?
假设参数不存在怎么进行规避?
function abs(x) {
//可以手动定义异常
if (typeof x !== "number") {
throw new Error("不是数字,不可以进行绝对值转化");
}
if (x >= 0) {
return x;
} else {
return -x;
}
}
argument
arguments是一个js免费赠送的关键字;
代表传递进来的所有的参数,是一个数组
function abs(x) {
console.log(x);
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if (x >= 0) {
return x;
} else {
return -x;
}
}
问题:argument 包含了所有的参数,我们有时候想使用多余的参数来进行附加操作.需要排除已有的参数
rest
原来:
if (arguments.length > 2) {
for (var i = 2; i < arguments.length; i++) {
//执行代码
}
}
ES6引入的新特性,获取除了已经定义的参数之外的所有参数
现在:
function abs(x, a, ...rest) {
console.log("x=>" + x);
console.log("a=>" + a);
console.log("rest=>" + rest);
}
rest 参数只能写在最后面,必须用…表示
9.2变量的作用域
在javascript中,var定义变量实际是有作用域的
假设在函数体中声明,则在函数体外不可以使用~(非要实现研究闭包)
function init(x) {
var x = 1;
x = x + 1;
}
x = x + 2;//Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名,只要在函数内部就不会冲突!!!
function init(x) {
var x = 1;
x = x + 1;
}
function init_1(x) {
var x = 'A';
x = x + 1;
}
对于嵌套的函数内部的可以访问外部的成员,反之则不可以!!!
function init() {
var x = 1;
x = x + 1;
function init_1(){
var y = x + 1;
}
}//外部的不可以访问内部的//内部的可以访问外部的!//y is not defined
假设内部函数变量和外部函数的变量重名
function init() {
var x = 1;
function init_1() {
var x = 'A';
console.log('inner' + x);
}
console.log('outer' + x);
init_1();
}
init();
假设在javascript中函数查找变量从自身函数开始~,由内向外查找,假设外部存在这个同名的函数变量,则内部函数变量会屏蔽外部函数的变量.
提升变量的作用域
function sx() {
var x = "x" + y;
console.log(x);
var y = "y";
}
sx();
结果:xundefined
说明:js执行引擎,自动提升了y的声明,但是不会提升y的赋值
function sx() {
var y;
var x = "x" + y;
console.log(x);
y = "y";
}
sx();
这个是在javascript建立之初就存在的一个特性,养成规范:所有的变量定义都放在函数的头部,不要乱放,便于代码的维护
function sx() {
var y = 1,
x = y+1,
z,a,b,c;//undefined
//提前定义之后用直接赋值就好
a = "A";
}
全局函数
//全局变量
var x = 1;function f(){
console.log(x);
}
f();
console.log(x);
全局对象window
var x = 'xxx';
alert(x);
alert(window.x);//默认所有的全局变量,都自动绑定在window对象下
alert()这个函数本身也是一个window变量
var x = 'xxx';//
window.alert(x);
var old_alert = window.alert;// old_alert(x);
window.alert = function (y) {
console.log(y);
}
//alert被重写
window.alert('abc');
//恢复
window.alert = old_alert;
window.alert('abcsd');
javascript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错Refrencerror
规范
由于我们所有的全局变量都会绑定到我们的window上.如果不同的js文件,使用了相同的全局变量,冲突->如何减少冲突?
//唯一的全局变量
var SuApp = {};
//定义全局变量
SuApp.name = 'SuXu';
SuApp.add = function(a,b){return a + b;}
把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题
局部作用域 let
function aaa(){
for (var i = 0;i<100;i++){
console.log(i);
}
console.log(i+1);//问题? i除了这个作用域还可以使用
}
ES6 let 关键词,解决局部作用域冲突问题!
function aaa(){
for (let i = 0;i<100;i++){
console.log(i);
}
console.log(i+1);//会报错!i is not defined
}
用let去定义局部作用域的变量
常量 const
常量关键词const
const PI = '3.14';//只读,不可以被修改console.log(PI);
9.3方法
定义方法
方法就是把函数放在对象里面,对象只有两个东西:属性和方法
let SuXu = {
name: '苏旭',
birth : 2002,
age : function(){
//今年-出生年
let now = new Date().getFullYear();
return now - this.birth;
}
};
//属性
SuXu.name
//方法,一定要带()调用
SuXu.age()
this代表什么?拆开上开的代码
function getAge() {
//今年-出生年
let now = new Date().getFullYear();
return now - this.birth;
}
let SuXu = {
name: '苏旭',
birth: 2002,
age: getAge
};
//SuXu.age() OK
//getAge() NaN 对象是window
this是无法指向的,是默认指向调用它的那个对象
apply
在js中可以控制this的指向
function getAge() {
//今年-出生年
let now = new Date().getFullYear();
return now - this.birth;
}
let SuXu = {
name: '苏旭',
birth: 2002,
age: getAge
};
getAge.apply(SuXu, []);
//this指向了SuXu,参数为空
10.内部对象
标准对象
typeof 123 "number"
typeof '123' "string"
typeof true "boolean"
typeof NaN "number"
typeof [] "object"
typeof {} "object"
typeof Math.abs "function"
typeof undefined "undefined"
10.1 Data
基本使用
var now = new Date();
now.getDate();//日期
now.getFullYear();//年
now.getMonth();//月
now.getHours();//时
now.getDay();//代表星期几
now.getMinutes();//分
now.getSeconds();//秒
//时间戳
now.getTime();
//时间戳转回日期
console.log(new Date(now.getTime()))
转化
now = new Date(1629424504900);
Fri Aug 20 2021 09:55:04 GMT+0800 (中国标准时间)
now.toDateString()
"Fri Aug 20 2021"
now.toLocaleString()
"2021/8/20 上午9:55:04"
now.toGMTString()
"Fri, 20 Aug 2021 01:55:04 GMT"
10.2 JSon
json是什么?
①JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
②简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言
③易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
在javascript中一切皆为对象,任何js支持的类型都可以用json来表示
格式:
①对象都用{}
②数组都用[]
③所有的键值对 都是用key:value
json字符串和js对象的转化
var user = {
name: '苏旭',
age: 19,
sex: 'Man'
}
console.log(user);
// 转化成json格式
console.log(JSON.stringify(user));
//{"name":"苏旭","age":19,"sex":"Man"}
//json文件转化会对象
console.log(JSON.parse(JSON.stringify(user)));
//或者可以写成
console.log(JSON.parse('{"name":"苏旭","age":19,"sex":"Man"}'));
10.3Ajax
原生的js写法 xhr异步请求
jquey封装好的方法$("#name").ajax("")
ajiox请求
11.面向对象编
11.1什么是面向对象
javascript java c# 面向对象
类:模板
对象:具体的实例
原型:
var user = {
name: '苏旭',
age: 19,
sex: 'Man',
run: function () {
console.log(this.name + 'run');
}
}
var xMing = {
name: '小明'
}
xMing.__proto__ = user;
class 继承
class关键字,是在ES6引入的
1.定义一个类,属性,方法
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('Hello');
}
}
2.继承
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('Hello');
}
}
class smallStudent extends Student {
constructor(name, grade) {
super(name);
this.grade = grade;
}
myGrade() {
alert('我是一个小学生!');
}
}
var xMing = new Student("小明");
var xHong = new smallStudent("小红", 1);
本质:查看对象原型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IUp9NhR3-1629598670615)(I:\JavaScript自学笔记\images\image-20210820104115621.png)]
原型链
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b1b2AWMx-1629598670616)(https://segmentfault.com/img/remote/1460000021232137/view)]
12.操作BOM对象(重点)
浏览器介绍
javascript 和 浏览器 关系?
javascript 诞生就是为了能够让他在浏览器中运行
BOM:浏览器对象模型
- IE 6~11
- Chrome
- Safari
- FireFox
window对象
window代表浏览器窗口
window.innerHeight
722
window.innerWidth
1022
window.outerHeight
824
window.outerWidth
1536
Navigator
Navigator封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appCodeName
"Mozilla"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36"
navigator.platform
"Win32"
大多时候,我们不会使用navigator对象,因为会被人为修改!
不建议使用这些属性来判断和编写代码
screen
代表屏幕的尺寸
screen.width
1536
screen.height
864
location (重要)
代表当前的页面的URL信息
host: "www.bilibili.com"
href: "https://www.bilibili.com/"
protocol: "https:"
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign('https://www.baidu.com')
document
document 代表当前的页面,HTML DOM文档数
document.title
"百度一下,你就知道"
document.title = '苏旭'
'苏旭'
获取具体的文档数节点
<dl id="app">
<dt>1</dt>
<dt>2</dt>
<dt>3</dt>
</dl>
<script>
var dl = document.getElementById('app');
</script>
获取cookie
document.cookie
劫持cookie原理
www.taobao.com
<script src="aa.js"></script>
<!--恶意人员:获取你的cookie上传到其他服务器上-->
服务器端可以设置cookie:httpOnly
history(不建议使用)
history代表浏览器的历史记录
history.back()//后退
history.forward()//前进
13.操作DOM对象(重点)
核心
浏览器网页就是一个DOM树形结构!
- 更新:更新DOM节点
- 遍历DOM节点:得到DOM节点
- 删除:删除一个DOM节点
- 添加:添加一个新的节点
要操作一个DOM节点,就必须要先获得这个DOM节点
获得DOM节点
<div id="father">
<h1>标签一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var h1 = document.getElementsByTagName("h1");
var p1 = document.getElementById("p1");
var p2 = document.getElementsByClassName("p2");
var father = document.getElementById("father");
var children = father.children;//获得父节点下的所有子节点
//father.firstChild
//father.lastChild
</script>
这是原生代码,之后我们经量都是用jQuery
更新节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById("id1");
</script>
操作文本
id1.innerText = "我是大傻逼";修改文本值id1.innerHTML = '<strong>' + 123 + '</strong>'可以解析HTML文本标签
操作css
id1.style.color = 'yellow';//属性使用字符串
id1.style.fontSize = '20px';//驼峰命名
id1.style.padding = '2em';
删除节点
删除节点的步骤:先获取父节点,再通过父节点删除自己
<div id="father">
<h1>标签1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self);
//删除是一个动态的过程
father.removeChild(father.children[0]);
</script>
注意:删除多个节点的时候,children是在时刻变化的,删除节点的时候一定要注意
插入节点
我们获得了某个DOM节点,假设这个DOM节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么干了!会产生覆盖
追加
<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>
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ofpUekbh-1629598670616)(I:\JavaScript自学笔记\images\image-20210820162456752.png)]
创建一个新的标签,实现插入
var js = document.getElementById("js");//已经存在了的节点
var list = document.getElementById("list");
//创建一个新的节点
var newP = document.createElement('p');//创建一个p标签
newP.id = 'newP';
newP.innerText = "Hello World!";
list.append(newP);
//创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
//创建一个Style标签
var myStyle = document.createElement('style');//创建了一个style标签
myStyle.setAttribute('type', 'text/css');
myStyle.innerHTML = 'body{background-color:red}';//设置标签内容
document.getElementsByTagName('head'[0].append(myStyle);
insert
var ee = document.getElementById("ee");
var js = document.getElementById("js");
//要包含的节点insertBefore(newNode,targetNode)
list.insertBefore(js, ee);
14.操作表单(验证)
表单是什么 from DOM书
- 文本框 test
- 下拉框 select
- 单选框 radio
- 多选框 chechkbox
- 隐藏框 hidden
- 密码框 password
- …
表单的目的:提交信息
获取表单信息
<form action="post">
<p><span>用户名:</span><input type="text" id="userName"></p>
<!-- 多选框的值就是定义好的value -->
<p>
<span>性别:</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
</form>
<script>
var input_text = document.getElementById("userName");
//得到输入框的值
input_text.value;
//修改输入框的值
input_text.value="123";
var boy_radio = document.getElementById("boy");
var girl_radio = document.getElementById("girl");
//查看返回结果是否为true,如果为true则被选中否则为false
boy_radio.checked;
girl_radio.checked = "true";//赋值
</script>
提交表单 md5加密密码
<!-- 表单绑定提交事件
onsubmit= 绑定一个提交检测的函数,获取一个true或者false
将这个结果返回给表单,使用onsubmit 接受 -->
<body>
<form action="#" method="GET" onsubmit="return TJ()">
<p>
<span>用户名:</span><input type="text" id="userName" name="userName" placeholder="请输入用户名">
</p>
<p>
<span>密 码 :</span><input type="password" id="password" name="password" placeholder="请输入密码">
</p>
<button type="submit">提交</button>
</form>
<script>
function TJ() {
var userName = document.getElementById("userName");
var password = document.getElementById("password");
console.log(userName.value + "\n" + password.value);
//MD5算法
password.value = md5(password.value);
//可以在这里效验判断表单的内容,true就是通过提交,false就是阻止提交
return true;
}
</script>
更安全的写法
<body>
<form action="#" method="GET" onsubmit="return TJ()">
<p>
<span>用户名:</span>
<input type="text" id="userName" name="userName" placeholder="请输入用户名">
</p>
<p>
<span>密 码 :</span>
<input type="password" id="inputPassword" placeholder="请输入密码">
</p>
<input type="hidden" id="md5Password" name="Password">
<button type="submit">提交</button>
</form>
<script>
function TJ() {
var userName = document.getElementById("userName");
var inputPassword = document.getElementById("inputPassword");
//MD5算法
md5Password.value = md5(inputPassword.value);
//可以在这里效验判断表单的内容,true就是通过提交,false就是阻止提交
return true;
}
</script>
15.JQuery
javascript
jQuery库,里面存在了大量的javascript函数
获取jQuery
CND引入jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
</body>
</html>
jQuery选择器
jQuery公式
公式:$(selector).action()
<a href="" id="test_jQurey">点我</a>
<script>
//选择器就是css的选择器
$('#test_jQurey').click(function () {
alert('hello,jQurey');
})
</script>
文档工具站:https://jquery.cuishifeng.cn/
事件
鼠标事件,键盘事件,其他事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r9CANZnl-1629598670617)(I:\JavaScript自学笔记\images\image-20210822085821282.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.6.0.min.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>
操作DOM
$("#text-li li[class=js]").text();//获取值
$("#text-li li[class=js]").text('设置值');//设置值
$("#text-li").html();//获得值
$("#text-li").html('<strong>123</strong>');//设置值
CSS的操作
$("#text-li li[class=js]").css({'color','red'});
元素的显示和隐藏:本质display:none
$("#text-li li[class=js]").show()//显示
$("#text-li li[class=js]").hide()//隐藏
ntent=“width=device-width, initial-scale=1.0”>
```
jQuery选择器
jQuery公式
公式:$(selector).action()
<a href="" id="test_jQurey">点我</a>
<script>
//选择器就是css的选择器
$('#test_jQurey').click(function () {
alert('hello,jQurey');
})
</script>
文档工具站:https://jquery.cuishifeng.cn/
事件
鼠标事件,键盘事件,其他事件
[外链图片转存中…(img-r9CANZnl-1629598670617)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.6.0.min.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>
操作DOM
$("#text-li li[class=js]").text();//获取值
$("#text-li li[class=js]").text('设置值');//设置值
$("#text-li").html();//获得值
$("#text-li").html('<strong>123</strong>');//设置值
CSS的操作
$("#text-li li[class=js]").css({'color','red'});
元素的显示和隐藏:本质display:none
$("#text-li li[class=js]").show()//显示
$("#text-li li[class=js]").hide()//隐藏
扫一扫
341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
