本文共 4150 字，大约阅读时间需要 13 分钟。

系列文章

五、内部对象

5.1、Date

日期对象是JavaScript中非常实用的对象之一。通过Date对象，我们可以获取和操纵日期信息。以下是Date对象的主要方法：

• now：获取当前时间。

let now = new Date();now.getFullYear(); // 获取年份now.getMonth();   // 获取月份（0-11）now.getDate();   // 获取日期now.getDay();   // 获取星期几（0-6）now.getHours();   // 获取小时now.getMinutes(); // 获取分钟now.getSeconds(); // 获取秒now.getMilliseconds(); // 获取毫秒数

• getTime：返回当前时间的时间戳（从1970年1月1日0:00:00开始的毫秒数）。

let time = now.getTime();// 可以通过时间戳获取具体的时间now = new Date(time); // 通过时间戳构造新的Date对象time.toLocaleString(); // 获取本地时间

5.2、JSON

随着XML的兴起，JSON（JavaScript对象表示法）逐渐成为传输数据的标准。JSON的优势在于其简洁性和可读性，适合数据交换。

JSON的特点：

• 轻量级数据交换格式。
• 结构清晰，便于人阅读和机器解析。
• 可以直接转换为JavaScript对象。

JSON与JavaScript的区别：

• JSON是字符串，但可以通过JSON.stringify和JSON.parse进行转换。
• JSON的键需要用引号包裹。

示例：

let user = { name: "小明", age: 18, sex: "男" };let json = JSON.stringify(user); // 生成JSON字符串let parsedUser = JSON.parse(json); // 解析为JavaScript对象

6.1、原型继承

JavaScript没有传统的类和对象继承关系，原型继承是其特有的特性。通过设置__proto__属性，可以继承其他对象的属性和方法。

示例：

let Person = {    name: "小白",    age: 12,    run: function() {        console.log(this.name + " run");    }};let Jack = {    name: "Jack"};Jack.__proto__ = Person;Jack.run(); // 调用Person的run方法

6.2、class

随着ES6的引入，JavaScript支持类似Java的类定义。通过class关键字，可以创建模板。

示例：

class Person {    static school = "A";    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);    }}let lihua = new Person("李华", 17);lihua.getInformation();let student = new Student("小白", 18, 1);student.getInformation();

7、操作BOM对象（重点）

BOM（浏览器对象模型）提供了对浏览器窗口和页面的控制能力。

7.1、window

window.innerHeight; // 浏览器内部高度window.innerWidth; // 浏览器内部宽度window.outerHeight; // 浏览器外部高度window.outerWidth; // 浏览器外部宽度

7.2、navigator

navigator.appVersion; // 浏览器版本navigator.userAgent;   // 浏览器用户代理字符串navigator.platform;   // 操作系统

7.3、screen

screen.width; // 屏幕宽度screen.height; // 屏幕高度

7.4、location

location.href; // 当前页面的URLlocation.host; // 主机名location.protocol; // 协议（http://, https://）location.reload(); // 刷新页面location.assign("https://www.baidu.com"); // 跳转到指定URL

7.5、document

document.title = "这是document";// 获取HTML元素let dl = document.getElementById('app');console.log(dl);

7.6、history

history.back(); // 后退一页history.forward(); // 前进一页

8、操作DOM对象（重点）

DOM（文档对象模型）允许我们动态修改网页内容。

8.1、获取DOM节点

let h1 = document.getElementsByTagName('h1'); // 获取所有h1标签let p = document.getElementsByClassName('classP'); // 获取类名为classP的所有元素let father = document.getElementById('father'); // 获取指定ID的元素let children = father.children; // 获取元素的所有子节点let li1 = father.firstChild; // 获取第一个子节点

8.2、更新节点

let div1 = document.getElementById('div1');div1.innerText = '增加的文本内容';div1.innerHTML = '被HTML解析的文本';div1.style.color = 'red';div1.style.fontSize = '19px';

8.3、删除节点

let classP = document.getElementsByClassName('classP');let app = classP[0].parentElement;app.removeChild(classP[0]);

8.4、插入节点

let div = document.getElementById('div');let p0 = document.getElementById('p0');div.appendChild(p0);let p3 = document.createElement('p');p3.innerHTML = '新p3';div.insertBefore(p3, p0);p3.setAttribute('style', 'font-size: 35px');

9、操作表单

9.1、获取表单信息

let userName = document.getElementById('userName');let radio_man = document.getElementById('radio_man');

9.2、表单提交与事件

form.onsubmit = function() {    alert('提交成功');    return true;};

9.3、MD5加密

let pwd = document.getElementById('password');let md5Pwd = document.getElementById('md5_password');md5Pwd.value = $.md5(pwd);

10、jQuery

10.1、初识

jQuery是一个流行的JavaScript库，提供了简洁的语法和丰富的功能。

10.2、选择器

$('#divMouse').mousemove(function(e) {    $('#mouseMove').text("X:" + e.pageX + ",Y:" + e.pageY);});

10.3、事件

$('#test-jquery').click(function() {    alert("1");});

10.4、DOM操作

$('#ul1').append('
CSS
');$('#ul1:nth-of-type(1) li').insertAfter('#css');

10.5、Ajax

$.ajax({    url: "test.html",    context: document.body,    success: function() {        $(this).addClass("done");    }});

转载地址：http://cfua.baihongyu.com/