JS基本介绍

JS概述

js是一门弱类型的脚本语言，代码直接由浏览器解释运行

jQuery:javascript的库，可以直接调用相关方法，简化了DOM操作

Angular:谷歌收购的前端框架，为java程序员开发，增加了模块化开发的概念

React:Facebook出品的前端框架，提出了虚拟化DOM的概念，增加网页的响应速度

Vue:渐进式的JavaScript框架，不断实现新的性能，综合了Angular和React，前端能处理很多后端的事情

Axiox:前端通信框架，代替了jQuery的AJAX通信功能

JS快速入门

引入JS

• 内部标签：可以放在head标签内，也可以放在body标签的最后面

  <script type="text/javascript">alert('1233')
  </script>
  

  type="text/javascript"可以省略，不写也表示它是js代码

• 外部引入：最常见存放在js文件中，用src属性引入

  <script src="js/js1.js"></script>
  

  html5中的标签，必须成对出现

JS语法入门

• 定义变量：var 变量名 = 变量值;

  var num = 0;
  var name = 'michilay';
  

  变量名不能以数字开头

• 条件语句

  if (num > 0){alert("true");
  }
  else{alert("false");
  }
  

JS数据类型

• number

  123		//证书
  123.1	//浮点数
  -123	//负数
  ################################
  NaN     //表示not a number
  Infinity //表示无限大
  

  NaN===NaN返回fasle；isNaN(NaN)返回true

  console.log((1/3) === (1-(2/3)))返回false

  尽量避免使用浮点数进行运算，存在精确度问题

• 字符串

  'abc'
  "abc"
  

• 布尔值

  true
  false
  

• 逻辑运算

  && 两个都为真，结果为真
  || 一个为真，结果为真
  ! 一个为真，结果为假
  

• 比较运算符

  = 赋值符号
  == 等于（类型不一样，值一样
  === 绝对等于（类型一样，值一样
  

• null和undefined

  null是空，undefined是未定义

• 数组

  一些内相同类型的对象

  var arr=[1,2,3,4,5,'hello',null,true];
  alert(arr);
  

  也可以这样定义

  new Array(1,2,3,4,5,'hello',null,true);
  

  去数组下标，如果越界就会undefined

• 对象

  数组是中括号，对象是大括号

  var person = {name:"michialy",age:21,tags:['java','web','mysql']
  }
  

  每个属性之间由逗号隔开，最后一个不需要逗号，定义方式和python的字典相似

  alert(person.name);
  

JS控制台

• JS同java相同，严格区分大小写
• 直接在浏览器F12进行调试
  • 在控制台(Console)输入代码进行测试，比如 console.log(num)
  • 在源(Sources)点击代码左侧打断点，刷新页面进行调试

JS严格检查模式

使用上述不规范的代码很可能会出现很严重的问题，比如变量定义的全都为全局变量，在ES6之后，局部变量尽量用let来编译，那应用于ES5该怎么办呢？

只需要在代码的前面加上

'user strict'

必须写在

JS数据类型

字符串

• 一般字符串使用’'或者""包裹
• 特殊字符串使用转义字符\
• 长字符串用``包裹，可以进行换行
• 模板字符串，直接使用${name}代入，不需要+
• 字符串长度，对象.length
• 字符串String具有不可变性
• 大小写转换，michilay.toUpperCase()或者michilay.toLowerCase()
• 获取指定下标，michilay.indexOf(‘a’)
• 截取字符串[)，michilay.substring(1)//从一个字符到最后一个字符

数组

Array可以包含任意的数据类型

• 长度，arr.length=10，数组大小会发生变化，变大后面的元素undefined，变小后面的元素会丢失

• 获取下标索引，arr.indexOf(2)

• 截取数组，arr.slice(1,5)，前开后必，得到一个arr[1]~arr[4]的数组

• 数组添加，弹出，arr.push(‘a’,‘b’)往尾部添加，arr.pop弹出最后一个元素；arr.unshift(‘a’,‘b’)往头部添加，arr.shift弹出第一个元素

• 数组排序，arr.sort()

• 数据元素反转，arr.reverse()

• 数组拼接，arr.concat(arr1)返回一个拼接后的新数组，原数组未改变

• 打印拼接数组，arr.join(’-’)

• 多维数组，arr = [[1,2],[3,3],[2,4]]，通过arr[1][1]取值

对象

• {…}表示对象，键值对描述属性，属性之间逗号隔开，最后一个不加逗号

• 对象赋值，person.name = “michilay”

• 使用一个不存在的对象属性，不会报错，undefined

• 动态删减属性，delete person.name返回一个true，person的name属性就无了

• 动态添加属性，person.newp = newp

• 判断属性值或方法是否在这个对象中，‘toString’ in person返回boolean值为true

• 判断一个属性或方法是否属于这个对象本身，person.hasOwnProperty(‘toString’)为false

流程控制

• if,if else,else：第一个判断，第二个判读，两个判断都不满足

• while,for：

  while(true){console.log("请升级浏览器");
  }
  

• for,in：索引的遍历

  for(let index in objuect)
  

• for,on：值的遍历

  var arr = [3,4,5]
  for (let x of arr){console.log(x)
  }
  

Map和Set

ES6之后才出现

• map字典

  <script type="text/javascript">'use strict';var score = new Map([['tom',100],['jack',90],['michilay','80']]);// 取值var tom = score.get('tom');// 增加值score.set('mcly',70);// 删除一对score.delete('jack');
  </script>
  

• set集合，可以存储任意值，但是相同的值只存在一个

  var set = new Set([1,2,3,4,5,6,6]);
  //添加
  set.add(7);
  //删除
  set.delete(6);
  //是否包含
  set.has(1);
  

• Map和Set的迭代

  var map1 = new Map([[1,1],[2,3],[3,4]]);
  for (let x of map1){console.log(x)
  }
  var set1 = new Set([1,2,3,4,5,5,6,6,6]);
  for (let y of set1){console.log(y)
  }
  

  还可以使用Iterator对象进行迭代

JS函数

函数和方法相同，只不过方法是放在对象当中

定义函数

//第一种定义方式
function f1(x,y){if(x>=y){return x;}else{return y;}
}
//第二种定义方式
//匿名函数（同java匿名内部类）
var f1 = function(x,y){}

一旦执行到return代表函数结束，返回结果；

如果没有执行return，函数执行完也会返回结果，返回undefined

调用函数

f1(1,2);

js可以传任意个参数，也可以不传递参数

• arguments可以拿到函数的参数，不管它是否存在

  function f2(x){let y = arguments[1]if(x>=y){return x;}else{return y;}
  }
  

• rest是ES6引入的，除了已定义参数之外的所有参数，只能写在最有一个参数

函数异常

正因为js语言比较随意，所以需要自己加上判断手动抛出异常

function f1(x,y){if(typeof x &&t ypeof y !== 'number'){throw 'Not numbers!';}if(x>=y){return x;}else{return y;}
}

变量作用域

'use strict';
function f1(){var x = 1;
}
x = x+1;

UncaughtReferenceError: x is not defined

• var定义的变量实际上是有作用域的，在函数体内定义的函数，函数体外不能使用（闭包可以实现）

• 如果两个函数使用了相同的变量名，则不会冲突

• 内部函数可以访问外部函数的成员

• 函数查找变量由内向外查找，就近原则

• JS通常把所有变量提到最前面定义，可以先定义后赋值

• 定义在方法外面的是全局变量，都会自动绑定在window对象下

方法

方法就是将函数放在对象的内部

'use strict';
var v1 = {name:'mcly',birth:2000,age:function(){var now = new Date().getFullYear();return now-this.birth;}
}

如果要调用，则使用v1.age()

也可以将函数放在外面，成员里的属性定义为age:f1();

this为当前对象，如果在成员外面则指向windows，可以通过方法.apply(对象,[])来指定this的指向

JS内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof undefined
"undefined"
typeof Math.abs
"function"

Date

var now = new Date();//当前时间
now.getFullYear();//年
now.getMonth();//月0~11
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
var time = now.getTime();//时间戳 全世界统一 从1970/1/1 0:00:00到现在的毫秒数
var now1 = new Date(time);//通过时间戳获取当前时间
now.toLocaleDateString();//本地时间转换为字符串

JSON

• json时轻量级的数据交换格式

• 清晰和简介的结构可以由各种平台交换信息

• 在js中，一切皆为对象，任何js支持的类型都可以用JSON表示

  格式：对象都用{}，数组都用[]，所有键值对都用key:value

var user = {name:"michilay",age:21,sex:"男"
}
var j1 = JSON.stringify(user);
//"{\"name\":\"michilay\",\"age\":21,\"sex\":\"男\"}"
var obj1 = JSON.parse(j1);
//{name: "michilay", age: 21, sex: "男"}

面向对象编程

js中的面向对象

原型：js中，有一个原型的概念，类似于继承，看如下代码

var user = {name:"michilay",age:21,sex:"男",talk: function(){console.log(this.name + " is talking...");}
}
var user1 = {name:"mcly"
}
user1.__proto__=user;

user1的原型指向的user，那么user1就拥有user的函数，原型对象就类似于父类

class继承

class关键字是在ES6引入的

'use strict';
function Student(name){this.name = name;
}
// 给Student新增一个方法
Student.prototype.hello = function(){console.log("say hello");
}

// ES6之后
// 定义一个学生的类
class Student{constructor(name) {this.name = name}hello(){console.log("say hello");}
}
var stu1 = new Student("stu1");

在ES6之后代码更加规范，符合逻辑

class Student1 extends Student{constructor(name,grade) {super(name);this.grade = grade;}myGrade(){console.log("I'm student1")}
}

Student1继承Student，必须实现父类的name属性，但是可以自己增加方法

所有的对象的原型都是Object，Object的自己的原型对象的set方法又到Object

操作BOM对象

JavaScript就是为了能在浏览器中运行

BOM：浏览器对象模型

Window

Window代表浏览器的窗口

window.alert(1)
undefined
window
Window {window: Window, self: Window, document: document, name: "", location: Location, …}
window.innerHeight
923
window.innerWidth
260

Navigator

Navigator封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 Edg/92.0.902.67"
navigator.platform
"Win32"
navigator.userActivation
UserActivation {hasBeenActive: true, isActive: true}

navigator可以让网页识别是手机端还是电脑端，一般会被人为修改，不建议使用这个属性来判断

Screen

screen是计算机的屏幕

screen.width
1920             //px
screen.height
1080			//px

Location

locaiton代表当前页面的URL信息

location
Location {ancestorOrigins: DOMStringList, href: "https://www.bilibili.com/", origin: "https://www.bilibili.com", protocol: "https:", host: "www.bilibili.com", …}ancestorOrigins: DOMStringList {length: 0}assign: ƒ assign()hash: ""host: "www.bilibili.com"hostname: "www.bilibili.com"href: "https://www.bilibili.com/"origin: "https://www.bilibili.com"pathname: "/"port: ""protocol: "https:"reload: ƒ reload()replace: ƒ replace()search: ""toString: ƒ toString()valueOf: ƒ valueOf()Symbol(Symbol.toPrimitive): undefined[[Prototype]]: Location

其中，href是当前地址，host是主机地址，protocol表示协议，reload()是刷新方法，可以通过location.assign(‘https://blog.csdn.net/’)跳转到其他网页

Document

document代表当前页面，HTML DOM文档树

document.title
"jsTest1"
document.title='123'
"123"
document.title
"123"

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>jsTest1</title><script type="text/javascript">'use strict';var app1 = document.getElementById('app');console.log(app1);</script></head><body><dl id="app"><dt>1</dt><dt>2</dt><dt>3</dt></dl></body>
</html>

可以使用document.getElementById来获取具体的文档树节点

也可以使用document.cookie获取cookie，如果被劫持则可能会产生安全性问题

• 恶意网页，通过调用病毒js文件，使用Ajax请求劫持电脑的登录cookie信息，上传到他的服务器，不需要用户名和密码即可登录

• 天猫调取淘宝的登录cookie信息直接进行登录

服务端可以设置cookie:httopOnly

History

history.back()history.forward()

可以代表浏览器的后退和前进，程序中不建议这样做

操作DOM对象

DOM：文本对象模型

• 核心：整个浏览器网页就是一个Dom树形结构！
  • 更新：更新Dom节点
  • 遍历：根据id得到Dom节点
  • 删除：删除一个Dom节点
  • 添加：添加一个新的Dom节点

获取Dom节点

要操作一个Dom节点，就必须要先获得这个Dom节点

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>domTest</title></head><body><div id="father"><h1>标题一</h1><p id="p1">p1</p><p class="p2">p2</p></div></body><script type="text/javascript">var h1 = document.getElementsByTagName('h1');var p1 = document.getElementById('p1');var p2 = document.getElementsByClassName('p2');var father = document.getElementById('father');//获取父节点下的所有节点var childrens = father.children;//father.firstChildren//father.lastChildren</script>
</html>

这是原生代码，之后会使用jQuery

更新Dom节点

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>domTest</title></head><body><div id="div1"></div></body><script type="text/javascript">var div1 = document.getElementById('div1');//改变div1的内容，修改文本值，只会修改文本div1.innerTest='123';//改变div1的内容，使用html进行解析div1.innerHTML='<strong>123</strong>'//改编div1的样式div1.style.backgroundColor='red'div1.style.fontSize='20px'div1.style.padding='10px'</script>
</html>

删除Dom节点

不能自我删除

1. 先获取父节点
2. 在通过父节点删除父节点的子节点

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>domTest</title></head><body><div id="div1">123</div></body><script type="text/javascript">var div1 = document.getElementById('div1');var father = div1.parentElement;father.removeChild(div1);</script>
</html>

也可以通过父节点删除兄弟节点

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>domTest</title></head><body><div id="div1">123</div><div id="div2">2</div><div id="div3">3</div></body><script type="text/javascript">var div1 = document.getElementById('div1');var father = div1.parentElement;father.removeChild(div1);//删除是动态的过程,节点是在时刻变化的father.removeChild(father.children[1])</script>
</html>

注意删除结点的时候，结点下标是在动态的变化，从0开始

创建和移动Dom节点

可以使用更新Dom节点的方法innerHTML创建，但是如果这个Dom节点已经有元素了，就无法用此方法进行创建，因为它会直接覆盖

• 创建新的节点并且插入

  <!DOCTYPE html>
  <html><head><meta charset="utf-8"><title>domTest1</title></head><body><div id="div1"><p id="p1"><h2>p1</h2></p></div><script type="text/javascript">var div1 = document.getElementById('div1');var p0 = document.createElement('p');p0.id = 'p0';p0.innerHTML = '<h1>p0</h1>'div1.appendChild(p0);</script></body>
  </html>
  

• 将原来的dom节点移动

  <!DOCTYPE html>
  <html><head><meta charset="utf-8"><title>domTest</title></head><body><p id="p0">java</p><div id="div1" style="background-color: red;"><p id="p1">javaSE</p><p id="p2">javaEE</p><p id="p3">javaME</p></div></body><script type="text/javascript">var p0 = document.getElementById('p0');var div1 = document.getElementById('div1');//移动p0节点到div1里的最后面div1.appendChild(p0);</script>
  </html>
  

• 也可以通过获取一些特殊的标签测试安全性问题

  <!DOCTYPE html>
  <html><head><meta charset="utf-8"><title>domTest2</title></head><body><h1>domTest2</h1><script type="text/javascript">var head= document.getElementsByTagName('head');var s1 = document.createElement('script');s1.setAttribute('type','text/javascript');//导入自身js文件s1.setAttribute('src','js/js1.js');head[0].appendChild(s1);a();</script></body>
  </html>

• 插入节点到前面使用

  要插入的节点.inserBefore(新节点元素)即可

• 也可以通过数组来表示插入的位置下标

操作表单

form本身也是DOM树中的一个节点

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>domFormTest</title></head><body><form action="#" method="post"><p>用户名： <input type="text" name="username" id="username"/></p><p>性别： <input type="radio" name="sex" id="boy" value="boy" checked>男</input><input type="radio" name="sex" id="girl" value="girl">女</input></p><input type="submit" value="提交"/></form><script type="text/javascript">var username = document.getElementById('username');//得到用户名var userValue = username.value;// 修改用户名的值userValue = '123';var boy = document.getElementById('boy');//修改是否被选中//也可以拿来判断是否被选中boy.checked = false;</script></body>
</html>

表单的高级验证

可以通过js获取表单的用户名和密码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="#" method="post"><p>用户名： <input type="text" name="username" id="username"/></p><p>密码： <input type="password" name="password" id="password"/></p><!-- 绑定事件 --><button type="button" onclick="check()">提交</button></form><script type="text/javascript">var username = document.getElementById('username');var password = document.getElementById('password');function check(){console.log(username.value+' '+password.value)}</script></body>
</html>

在登陆的时候，浏览器抓包可以完整的找到用户输入的名字和密码

这里使用MD5进行加密

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.bootcss.net/blueimp-md5/2.10.0/js/md5.min.js"></script></head><body><form action="#" method="post"><p>用户名： <input type="text" name="username" id="username"/></p><p>密码： <input type="password" name="password" id="password"/></p><!-- 绑定事件 --><button type="submit" onclick="check()">提交</button></form><script type="text/javascript">function check(){var username = document.getElementById('username');var password = document.getElementById('password');//MD5 算法password.value = md5(password.value);}</script></body>
</html>

可以通过提交表单的返回值为false来阻止提交

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><!--MD5加密工具类--><script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script></head><body><!--表达绑定提交事件οnsubmit= 绑定一个提交检测的函数，true，false将这个结果返回给表单，使用onsubmit接收--><form action = "https://www.baidu.com" method = "post" onsubmit = "return aaa()"><p><span>用户名：</span><input type="text" id = "username" name = "username"/></p><p><span>密码：</span><input type="password" id = "password" /></p><input type = "hidden" id = "md5-password" name = "password"> <!--绑定事件 onclick 被点击--><button type = "submit">提交</button></form><script>function aaa(){var username = document.getElementById("username");var pwd = document.getElementById("password");var md5pwd = document.getElementById("md5-password");//pwd.value = md5(pwd,value);md5pwd.value = mad5(pwd.value);//可以校验判断表单内容，true就是通过提交，false就是阻止提交return false;}</script></body>
</html>

jQuery

jQuery概述

jQuery是一个库，里面存在着大量的javascrpit函数

教程：[https://jquery.cuishifeng.cn](https://jquery.cuishifeng.cn/)

jQuery导入

可以通过下载js包本地导入，也可以搜索cdn jquery来导入外部jquery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

jQuery基本使用

公式：$(selector).action()

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="js/jquery-3.6.0.js"></script><script type="text/javascript">//选择器就是css的选择器$('#aa').click(function(){alert('hello');})</script></head><body><a href="" id="aa">jQuery测试</a></body>
</html>

jQuery选择器

同css选择器相同

• 标签选择器

  $(‘h1’).click();

• id选择器

  $(’#id1’).click();

• class选择器

  $(’.class1’).click();

jQuery事件

• 鼠标事件

  mousedown()(jQuery)----按下
  mouseenter()(jQuery)
  mouseleave()(jQuery)
  mousemove()(jQuery)----移动
  mouseout()(jQuery)
  mouseover()(jQuery)
  mouseup()(jQuery)
  

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><script src="js/jquery-3.4.1.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>//当网页元素加载完毕之后，响应事件//$(document).ready(function(){})$(function(){$('#divMove').mousemove(function(e){$('#mouseMove').text('x:'+e.pageX+"y:"+e.pageY)})});</script></body>
</html>

jQuery操作DOM元素

节点操作

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><script src="js/jquery-3.6.0.js"></script></head><body><ul id="ul1"><li id="li1">li1</li><li id="li1">li2</li><li id="li1">li3</li></ul><ul id="ul2">123</ul><script>//设置所有li里的值$('#ul1 li').text('dd');$('#ul1').html('<h1>h1test</h1>');$('#ul2').css({"color":"red"});</script></body>
</html>

表单操作

实现md5加密

<!DOCTYPE html>
<html lang="en"><head><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/jquery/3.6.0/jquery.js"></script><title>Document</title>
</head><body>输入密码<input type="text" id="pwd" /><input type="button" onclick="form_submit()" value="点我加密" /><script>function form_submit() {var pwd = $("#pwd").val();if (pwd.trim().length < 32) {pwd = md5(pwd);console.log(pwd);}$("#pwd").val(pwd);alert(pwd);}</script>
</body>
</html>