JavaScript学习记录重新整理
JavaScript学习笔记
- JavaScript学习笔记
- 1.什么是JavaScript
- 1.1、概述
- 1.2、历史
- 2、快速入门
- 2.1、引入JavaScript
- 2.2、基本语法入门
- 2.3、数据类型
- 2.4、严格模式
- 3、基本类型
- 3.1、字符串
- 3.2、数组
- 3.3、对象
- 3.4、流程控制
- 3.5、Map和Set
- 3.6、iterator
- 4、函数及面向对象
- 4.1、函数定义及变量作用域
- 4.2、变量作用域
- 4.3、方法
- 5、常用对象
- 5.1、Date
- 5.2、JSON
- 5.3、Ajax
- 6、面向对象编程
- 7、操作Bom元素（重点）
- 7.1、window（重要）
- 7.2、Navigator（不建议使用）
- 7.3、screen
- 7.4、location
- 7.5、Document
- 7.6、History（不建议使用）
- 8、操作DOM对象（重点）
- 9、操作表单（验证）
- 10、jQuery
- 10.1、获取jQuery
- 10.2、选择器
- 10.3、事件
- 10.4、操作Dom
JavaScript学习笔记
JavaScript框架
- jQuery：大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能。
- Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作采用TypeScript语法开发。对后台程序员友好，对前端程序员不太友好。
- React：Facebook出品,一款高性能的JS前端架构：特点是提出了新概念（虚拟机DOM）用了减少很是DOM操作。
- Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发，路由，状态管理的新特性，其特点式综合了Angular（模块化）和React（虚拟DOM）的优点。
- Axios：前端通讯框架：因为vue的边界很明确，就是为了处理DOM，所以并不具备通讯能力，此时就需要额外使用一个通讯框架月服务器交互：当然也可以直接选择使用jQuery提供的AJAX通讯功能：
- 可以查看的文档
1.什么是JavaScript
1.1、概述
javaScript是一门世界上最流行的脚本语言。
函数式编程：函数式编程是种编程方式，它将电脑运算视为函数的计算。函数编程语言最重要的基础是λ演算（lambda calculus），而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。
一个合格的后端人员，必须精通JavaScript
1.2、历史
javascript起源的故事：https://blog.****.net/kese7952/article/details/79357868
EcmaScript:它可以理解为是JavaScript一个标准，最新版本已经到es6版本，但是大部分浏览器还只停留在支持es5的代码上。开发环境和线上环境，版本不一致。
2、快速入门
2.1、引入JavaScript
-
内部标签
<script> alert('hell,world'); //注释 </script> -
外部引用
abs.js
//......test.html
<script src="abs.js"></script>
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script标签内，写JavaScript代码-->
<!--第一种写法-->
<!-- <script>-->
<!-- alert('hell,world');-->
<!-- </script>-->
<!-- 第二种写法 外部引用-->
<!-- 注意script必须成对出现-->
<script src="js/1.firstJavaScriptProgram.js"></script>
<!--不用定义，默认就是javascript-->
<script type="text/javascript"></script>
</head>
<body>
</body>
</html>
2.2、基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--JavaScript 严格区分大小写 -->
<script>
//1.定义变量 变量类型 变量名 = 变量值
var num = 1;
var name = "xiong";
alert(num);
//2.条件控制
if (2>1){
alert("true");
}
//console.log(score)在浏览器的控制台打印变量! System.out.println();
</script>
</head>
<body>
</body>
</html>
2.3、数据类型
数值，文本，图形，音频，视频。。。
变量
var
number： js不区分小数和整数统一用number表示
123 // 整数123
123.1 //浮点数 123.1
1.123e3 //科学计数法
-99 //负数
NaN // not a number
Infinity //表示无限大
字符串： ‘abc’ “abc”
布尔值： true false
逻辑运算：
&& //两个都为真，结果为真
|| //一个为真，结果为真
! //真即使假，假即真
比较运算符
=
== //等于，（类型不一样，值一样，也会判断为True）
=== //绝对等于（类型一样，值一样，结果为true）
这个一个js的缺陷，坚持不要使用==比较
需知：
- NaN===NaN,这个与所有的数值都不相等，包括自己。
- 只能通过 isNaN(NaN)来判断这个数是否是NaN
浮点数问题
<!--浮点数会有精度的损失 -->
console.log((1/3)===(1-2/3))
尽量避免使用浮点数进行运算，存在精度问题。
console.log(Math.abs((1/3)-(1-2/3))<0.00000001);
null和undefined：
- null 表示空
- undefined 未定义。
数组： java的数值必须是相同的类型的对象，js中不需要这样！
var arr = [1,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,5,'hello');
取数组下标，如果越界了就还会undefind
对象：
var person = {
name:"xiong",
age:3,
tags:['js','java','web']
}
取对象的值
person.name
> "xiong"
person.age
> 3
es6中局部变量用let定义
let i = 1;
2.4、严格模式
'use strict'; //严格检查模式，预防JavaScript随意性导致的产生的一些问题,局部变量建议使用let去定义。必须写在JavaScript第一行
var j = 2;
let i = 1;
3、基本类型
3.1、字符串
-
正常字符串我们使用单引号，或者双引号包裹
-
注意转义字符 \
\' \n \t \u4e2d \u#### //Unicode字符 \x41 \x## //ascll字符 -
多行字符串编写
//` var msg = `hello world 你好呀 你好`; -
.模板字符串
let name = "xiong"; let age = 3; let msg = `你好呀！${name}`; -
字符串长度
console.log(str.length) -
字符串的可变性，不可变
-
转换成大写
//注意这里是方法不是属性 console.log(str.toUpperCase()) console.log(str.toLowerCase()) -
获取指定字符的下标
str.indexOf('t'); -
substring
//包含前面不包含后面[) str.substring(1) //从第一个字符串截取到最后一个字符串 str.substring(1,3) //包含第一个不包含第3个
3.2、数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6];
-
长度
arr.length注意：加入给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失
-
indexOf,通过元素获得下标索引
arr.indexof(2)字符串的‘1’和数字1是不同的
-
slice() ， 截取Array的一部分，返回一个新数组，类似于String中的substring
-
push、pop
//push：压入到数组尾部 //pop： 弹出尾部的一个元素 -
unshif()、shift()往头部添加和删减
//unshif：压入到数组头部 //shift： 弹出头部的一个元素 -
排序 sort()
arr.sort(); -
元素反转reverse()
arr.reverse() -
concat()
//拼接两个数组注意：concat()并没有修改数组，只是会返回一个新的数组
-
连接符join
["c","b","a"] arr.join('-') "c-b-a" -
多维数组
arr = [[1,2],[3,4],["5","6"]] arr[1][1] //取值方式
数组：存储数据（如何存储，如何去，方法都可以自己实现）
3.3、对象
若干个键值对
var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值
};
var person = {
name: "xiong",
age: 3,
email: "222424234@qq.com",
score: 0
};
js中对象，{…}表示一个对象，键值对描述属性 xxxx: xxxx 多个属性之间使用逗号隔开，最后一个属性不加逗号！
JavaScript中的所有的键都是字符串，值是任意对象！
-
对象赋值
person.name = "liang"; -
使用一个不存在对象属性，不会报错！
person.haha undefined -
动态删减属性
delete person.name -
动态添加属性
person.haha="haha" //直接给性的属性添加值即可 -
判断属性值是否在这个对象中！ xxx in XXX！
'age' in person true //继承 返回父类的属性 'toString' in person true -
判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('toString') false person.hasOwnProperty('age') true
3.4、流程控制
if判断
var age = 3；
if(age>3){//第一个判断
alert("hahah");
}else if (age <5) {//第二个判断
alert("kuwa!");
} else { //否则
alert("kkk");
}
while循环,避免程序死循环
while(age<100){
age = age +1;
console.log(age)
}
do{
age = age +1;
console.log(age)
}while(age<100)
for循环
for(let i = 0; i< 100;i++){
console.log(i)
}
forEach循环
es5.1引入的
var age=[12,3,12,3,12,3,12,3,121,12,221,11];
age.forEach(function(value){
console.log(value)
})
for…in
// for(var index in object){}
for(var num in age){
if(age.hasOwnProperty(num)){
console.log("存在")；
console.log(age[num]);
}
}
3.5、Map和Set
ES6的新特性
Map:
let map = new Map([['tom',89],['jack',90],['haha',80]]);
let name = map.get('tom'); //通过key获得value
map.set('admin',123456); //新增或修改
console.log(name);
map.delete('tom'); //删除
Set:无序不重复集合
let set = new Set([3,1,1,3,1,]); //添加
set.add(2); //删除
console.log(set.has(3)); //是否包含某个元素
3.6、iterator
es6新特性
使用iterator来便利迭代Map，Set！
//通过for of 打印内容， for in 打印下标
var arr = [3,4,5];
for (var x of arr){
console.log(x)
}
遍历map
//通过for of 打印内容， for in 打印下标
var arr = [3,4,5];
for (var x of arr){
console.log(x)
}
遍历set
var set = new Set([5,6,7]);
for(let x of set){
console.log(x);
}
4、函数及面向对象
4.1、函数定义及变量作用域
定义方式一
绝对值函数
function abs(x){
if(x>=0){
return x;
} else {
return -x;
}
}
一旦执行到return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined
定义方式二
var abs = function(x){
if(x>=0){
return x;
} else {
return -x;
}
}
调用函数
abs(10) //10
abs(-10) //10
参数问题:javaScript 可以传任意个参数，也可以不传递参数~
不存在参数规避方法
var abs = function(x){
//手动抛出异常
if(typeof x!== 'nubmer'){
throw 'not number';
}
if(x>=0){
return x;
} else {
return -x;
}
}
arguments
arguments是一个js免费赠送的关键字，
代表，传递进来的所有参数，是一个数组
var abs = function(x){
// arguments;
for(var i =0; i<arguments.length;i++){
console.log(arguments[i]);
}
if(x>=0){
return x;
} else {
return -x;
}
}
问题：arguments包含所有的参数，我么有时候想使用多余的参数来进行附加操作，需要排除已有参数！
rest
旧版本：
if(arguments.length>2){
for(var i-2;i<arguments.length;i++){
}
}
ES6的新特性，获取除了已定义以外的所有参数。
function aaa(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest参数只能写在最后面，必须要…标识。
4.2、变量作用域
在javascript中，var定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用~（如何要实现就要使用闭包）
function qj(){
var x =1;
x = x+1;
}
x = x +2; //Uncaught ReferenceError: x is not defined
如果两个函数使用相同的变量名，只要在函数内部，就不冲突
function qj(){
var x =1;
x = x+1;
}
function qj2(){
var x =1;
x = x+1;
}
内部函数可以访问外部函数的成员，反之则不行。
function qj(){
var x =1;
//内部函数可以访问外部函数的成员，反之则不行。
function qj2(){
var y=x+1; // y = 2
}
var z = y + 1; //Uncaught ReferenceError: y is not defined
}
假设内部函数变量和外部函数变量，重名！变量从自身函数开始！，由“内”向“外”，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
function qj(){
var x =1;
function qj2(){
var x='A';
console.log('inner'+x);
}
console.log('outer'+x);
qj2();
}
提升变量的作用域
function qj(){
var x = "x"+y;
console.log(x);
var y = 'y';
}
结果：xundefined
说明，js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值
function qj(){
var y;
var x = "x"+y;
console.log(x);
var y = 'y';
}
这个是在Javascript建立之初就存在的特性，所有的变量定义都放在函数的头部，不要乱放，便于代码维护。
全局变量
//全局变量
var x = 1;
function f