本文共 6685 字，大约阅读时间需要 22 分钟。
系列文章
文章目录
五、内部对象
标准对象
typeof "number""string"typeof true"boolean"typeof 123"number"typeof NaN"number"typeof Math.abs"function"typeof []//数组——>object对象"object"typeof { }//{}对象——>object对象"object"typeof undefined"undefined"
5.1、Date
let now = new Date();//这种获得的是外国时间now.getFullYear();//年now.getMonth();//月 0~11月now.getDate();//日now.getDay();//星期几now.getHours();//小时 now.getMinutes();//分now.getSeconds();//秒now.getMilliseconds();//获得Date的毫秒数let time = now.getTime();//获得时间戳，从1970.1.1 0:00:00到目前的毫秒，全世界统一now = new Date(time);//把时间戳放进去，可获得时间time.toLocaleString();//得到本地时间
5.2、JSON
早期的数据传输是通过XML文件，后来用JSON格式
- ( Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript中一切皆为对象，任何JavaScript支持的类型都是对象，而对象都能无缝转为JSON。
JSON格式：和JavaScript对象类似，但JSON是字符串，同时它的key也要用引号包裹。
let user = { name : "小明", age : 18, sex : "男"};//json 结果为 "{"name":"小明","age":18,"sex":"男"}"let json = JSON.stringify('{"name":"小明","age":18,"sex":"男"}');user = JSON.parse(json); 注意上面user和json的区别，json里的key也需要引号，同时json本身是个字符串，所以一般我们在外面用单引号，里面用双引号。（如果外面也用双引号需要加转义）
六、面向对象编程
6.1、原型继承
JavaScript与Java、C#等语言的面向对象有点区别，在Java中类相当于一个模板，而对象就是该模板的一个具体例子。而JavaScript开始是没有模板的，它通过对象去原型继承另一个对象。
//这里得到一个Person对象，不是Person类let Person = { name : "小白", age : 12, run: function () { console.log(this.name + " run"); }}//Jack对象原型继承Person对象let Jack = { name : "Jack"}Jack.__proto__ = Person;Jack.run(); 可以发现，原本Jack是没有run方法的，而当Jack的**__ proto __**属性指向Person后就有了Person的run，这里就相当于表明Jack的原型是Person，同时Jack也有了Person的age属性。
下面这个图显示了Jack的原型Person，以及Person的原型Object。【Object的原型也是它本身，形成了一个原型链】
乍一看这似乎和Java的继承没什么区别，但Jack的__ proto __ 属性可以随时更改，并且通过这种方式依然会写很多重复代码。
let Birds = { name:"鸟", fly:function () { console.log(this.name + " run"); }}Jack.__proto__ = Birds;Jack.fly(); 如此，Jack一开始是人在跑，后面就变成鸟在飞，这显然是不符合规定的。因此就有了后面class继承的方法。
6.2、class
JavaScript在ES6引入了class关键字，也就是Java中的类。通过class可以创建模板。
class Person{ //静态属性，只属于Person类 static school = "A";//静态方法，只属于Person类static getSchool(){ console.log('学校：'+Person.school);}//构造方法constructor(name, age) { this.name = name; this.age = age;}//实例方法getInformation(){ console.log('姓名:'+this.name+',年龄:'+this.age);}}class Student extends Person{ constructor(name, age, id) { super(name, age); this.id = id; } getInformation() { console.log('姓名:'+this.name+',年龄:'+this.age+',学号:'+this.id); }}//调用静态属性console.log(Person.school);//调用静态方法console.log(Person.getSchool());//实例化对象let lihua = new Person("李华",17);//调用方法lihua.getInformation();let student = new Student("小白",18,1);student.getInformation(); 结果：
A学校：A姓名:李华,年龄:18姓名:小白,年龄:18,学号:1
下面是几点注意：
-
这里Person类就是一个模板，而lihua对象就是该模板的一个具体例子，拥有模板预先设置好的属性和方法。
-
constructor构造方法用于创建并初始化一个对象，在一个类中只能有一个constructor方法，这点和Java的构造方法不同。同时JS中的构造方法也可以通过super调用父类构造方法。
-
class中的this指向的是实例时的对象。
-
若子类调用父类方法时，子类没有对应的属性，则会去找父类的属性。
-
JavaScript是不存在方法重载的，但可以重写。
七、操作BOM对象（重点）
BOM（browser object model）即浏览器对象模型。我们常用的浏览器内核IE、Chrome、Safari、FirFox等，这些浏览器都有一些内置的对象可以直接操作。
1、window
它代表浏览器窗口，因此有非常多的方法可以使用，例如可以通过它获取浏览器窗口大小。
window.innerHeight;//获取浏览器内部高度window.innerWidth;//获取浏览器内部宽度window.outerHeight;//获取浏览器外部高度window.outerWidth;//获取浏览器外部宽度
2、navigator
它封装了一些浏览器的信息
navigator.appVersion"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36"navigator.userAgent"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36"navigator.platform"Win32"
但我们在代码中一般不会通过这种方式来进行判断，因为这些信息都可以浏览器文件中直接修改。
3、screen
它代表屏幕的对象，可以获取电脑屏幕宽高等信息
screen.width1536screen.height864
4、location（重要）
它包含了当前页面的URL信息，可以通过它刷新网页或重定向到其他页面
host:主机href:当前指向的位置protocol:协议reload:刷新网页的方法//设置新的地址location.assign("https://www.baidu.com")//这样访问当前页面，就会直接访问到百度 
5、document
它代表了当前页面，即HTML DOM文档树，后面会详细将DOM文档树。
document.title = "这是document";
还可以通过它获取HTML的内容：
Title
- Java
- JavaSE
- JavaEE
直接通过document获得文档树节点，意味着能动态修改网页。
通过document获得cookie
document.cookie
6、history
通过该对象可以实现网页前进或者返回，但一般不建议使用，还是通过后台实现。
history.back();//后退history.forward();//前进
八、操作DOM对象（重点）
DOM：文档对象模型，我们的浏览器网页其实就是一颗文档树，每个元素都是HTML中的一个节点，例如下面这种，这棵树的每个节点被称为DOM节点。
我们可以通过JavaScript的document来操作DOM节点，实现动态的增删改查。
8.1、获得DOM节点
Title 这是标题
p1
p1
- li 1
- li 2
这些都是原生代码，之后都使用jQuery()，更加方便。
8.2、更新节点
Title
结果：
正因为有了这种动态修改网页的能力，所以JavaScript才能起到交互作用，下面我们可以通过这种方式修改百度首页，而不需要去HTML里面改代码。
8.3、删除节点
从逻辑上来讲，自己删除自己显然是不可行的，因此要删除一个DOM节点要从其父节点进行删除。
Title 这是标题
p1
p2
p3
- li 1
- li 2
结果：
删除节点是个动态的过程，当我们删除P1后，app的children就只有两个，此时classP[2]就会越界，所以应该用class P[1]。
8.4、插入节点
当我们获得了一个空节点，通过前面更新节点的innerText和innerHTML这两个方式，也能增加内容进去，但当节点本身有内容时会造成覆盖。所以这里的插入节点主要是指追加节点。
下面展示如何将已有节点追加到其他节点、创建新节点、修改属性
Title p0
p1
p2
结果：
九、操作表单
表单包含：
- 文本框 text
- 下拉框 select
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- …
9.1、获取表单信息：
Title
结果：
可以发现像文本框之类的，直接通过value属性查看内容，而像单选框因为value是固定的，我们应该去查看它是否被选中，所以用checked属性。
9.2、按钮点击/表单提交 事件
可以将按钮和表单都绑定事件，类似于Java的监听
Title
这里把表单事件里的返回值写为false是为了方便查看结果，如果为true，则页面会被刷新，控制台的内容会直接清除。
结果：
9.3、前端密码MD5加密
如果像上一节，我们直接通过表单提交密码时是能被抓包的，密码可以被监测，一般都会进行加密操作。
加密一般通过MD5，这我们需要导入jQuery和MD5包。
这是CSDN链接、 百度网盘：https://pan.baidu.com/s/16fNpMkGeXZud-U58Z5y67g 提取码: q3eq注意：这里通过将密码输入框的值加密后传给隐藏域，是因为密码加密后长度会改变，若直接赋值给原密码输入框则用户体验差。密码输入框没有name属性，所以在提交表单时不会提交密码输入框，只会提交隐藏域。
Title
结果：
10、jQuery
10.1、初识
jQuery就是封装了大量JavaScript代码的库，需要我们先去下载jar包。，如果官网慢可以去我传的资源下载（不要积分）。
两种方式均可以，第一种是生产版，是压缩过后的，要小些，第二种是开发版。我下载的第二种。下载后导入自己lib包即可（lib包自己在项目下创建就行）。
Title 点我试试
10.2、选择器
详细参考这个jQuery API中文文档
Title
10.3、事件
常用的就是鼠标、键盘、其他事件（例如提交事件）
下面这个代码实现鼠标在指定区域移动会显示其坐标，点击字体变红，松开变蓝。
Title 鼠标坐标：
更多事件以及其他jQuery可以直接查询文档
10.4、操作DOM
比之前的原生代码要简便许多，更多操作，查看文档。
- Java
- HTML
10.5、Ajax
Ajax需要配合后端，这里不做具体描述，文档里直接查看，后面讲到后端在详细说。
$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done");}}); 转载地址：http://cfua.baihongyu.com/