1. 基本对象

Date

var now = new Date();

// 年月日
now.getFullYear();
now.getMonth() + 1;
now.getDate();

// 星期
now.getDay();

// 时分秒
now.getHours();
now.getMinutes();
now.getSeconds();

// 时间戳
now.getTime();

// 时间戳转换为时间
console.log(new Date(now.getTime()));

// 表达方式转换
now.toLocaleString();
now.toGMTString();

JSON

JSON (JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式

简洁和清晰的层次结构使得 JSON 称为理想的数据交换语言

易与人阅读和编写，同时也易于机器解析和生成，并有效的提升网络传输效率

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

格式：

对象都用 {}

数组都用 []

所有键值对都用 key: value

JSON字符串和 JS对象的转化

var user = {
    name: "小鱼儿",
    age: 3,
    sex: 'female'
}

var jsonUser = JSON.stringify(user);

var obj = JSON.parse(jsonUser);
obj.name

// 最直观的区别就是 JSON字符串 最外层多了对引号

2. 面向对象

类：模板原型对象
对象：具体的实例

原型proto

var people = {
    name: "小鱼儿",
    age: 3,
    sex: 'female'
}

var student = {
    name: "大鱼"
}

student.__proto__ = people;
student.age;  // 3

var bird = {
    fly: function() {
        console.log('Flying!');
    }
}
student.__proto__ = bird;

student.name;  // 还是存在，不太明白
student.fly(); // 学生能飞了

继承class

定义一个类的属性和方法

class Person {
    constructor(name) {
        this.name = name;
    }
    hello() {
        console.log(`Hello, my name is ${this.name}.`);
        // 不加this就是window下的name，而window下没有name
    }
}

var Amy = new Person("Amy");
var Tom = new Person("Tom");

Amy.hello();

继承

class Student extends Person {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }
    myGrade() {
        console.log("grade:", this.grade);
    }
}

var Jack = new Person("Jack");
Person {name: "Jack"}
name: "Jack"
__proto__: Object

var Rose = new Student("Rose", 100);  // Rose也有hello
Rose
Student {name: "Rose", grade: 100}
    grade: 100
    name: "Rose"
    __proto__: Person
        constructor: class Student
        myGrade: ƒ myGrade()
        __proto__: Object

3. BOM对象

浏览器对象模型（Browser Object Model）

JavaScript诞生是为了能够让它在浏览器中运行。

IE6, ..., IE11
Chrome
Safari
FireFox

三方

QQ浏览器
360浏览器

window

window 代表浏览器窗口

window.alert("Hello World!");

window.innerWidth
982
window.innerHeight
722

window.outerWidth
1536
window.outerHeight
824

navigator

navigator 封装了浏览器的信息

navigator.appName
'Netscape'

navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36'

navigator 可以被人为修改，因此不建议使用。

screen

代表屏幕尺寸

screen.width
1536
screen.height
864

location

location

{   "ancestorOrigins": {},
    "href": "https://www.baidu.com/",
    "origin": "https://www.baidu.com",
    "protocol": "https:",
    "host": "www.baidu.com",
    "hostname": "www.baidu.com",
    "port": "",
    "pathname": "/",
    "search": "",
    "hash": ""
}

// 设置新的地址
location.assign("http://news.baidu.com/")

document

document 代表当前的页面

document.title
'百度一下，你就知道'

document.title = "小鱼儿"
'小鱼儿'

获取具体的文档树节点

<h1>小鱼儿</h1>
<p id="p">小鱼儿</p>
<p>LittleFish</p>

var p = document.getElementById('p');
p
// <p id="p">小鱼儿</p>

获取 cookie

在淘宝页面登录后，打开天猫页面发现已自动登录。删除cookie后，都会自动退出登录

document.cookie

history

代表浏览器的历史记录，不建议使用

history.back()
history.forward()

4. DOM对象

浏览器网页是一个 DOM 树形结构

遍历：遍历，得到 DOM 节点

更新：更新 DOM 节点

删除：删除一个 DOM 节点

添加：添加一个新的节点

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

获得 DOM 节点

var h1 = document.getElementsByTagName('h1');
h1[0]
// <h1>小鱼儿</h1>

var p1 = document.getElementById('p1');
p1
// <p id="p1">小鱼儿</p>

var p2 = document.getElementsByClassName('p2');
p2[0]
// <p class="p2">LittleFish</p>

var body = document.getElementsByTagName('body');
body[0]
body[0].firstElementChild

var children = body[0].children;
children[0]
children[1]
children[2]

更新节点

操作文本

var p1 = document.getElementById('p1');

p1.innerText
'小鱼儿'
p1.innerText = "大鱼"

p1.innerHTML
'大鱼'									
p1.innerHTML = "<strong>小鱼儿</strong>"

p1.innerHTML
'<strong>小鱼儿</strong>'

操作CSS

p1.style.padding = '2em';
p1.style.color = 'red';

// 使用驼峰命名法
p1.style.fontSize = '20px';
p1.style.backgroundColor = 'pink';

删除节点

无法自尽，只能赐死。

var p1 = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(p1)

删除是一个动态的过程

father.removeChild(father.children[0]); // 这时数组长度会减一
father.removeChild(father.children[0]);

插入节点

已有节点的追加

var h1 = document.getElementById('h1'),
 	p1 = document.getElementById('p1');
p1.append(h1);  
// p1.appendChild(h1);

创建一个新的标签，实现插入

var newH2 = document.createElement('h2'),
    p1 = document.getElementById('p1');

newH2.id = 'newH2';
newH2.innerText = 'Hello, World!';
newH2.style.color = 'red';

p1.append(newH2);

5. 表单操作

常见表单

文本框 text
下拉框 <select>
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
......

表单的目的：提交信息

获得要提交的信息

var input_test = document.getElementById("username");
var girl_radio = document.getElementById("girl");
var boy_radio = document.getElementById('boy');

input_test.value = "小鱼儿"
'小鱼儿'

girl_radio.checked = true
true

密码加密

MD5加密算法

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>小鱼儿</title>
    <script src="lib/md5.min.js"></script>
  </head>

  <body>
    <form method="post" action="post.html" onsubmit="return littlefish()">
      <p>
        名字
        <input
          type="text"
          name="username"
          id="username"
          placeholder="请输入用户名"
        />
      </p>
      <p>
        密码
        <!-- 不能有name属性 -->
        <input type="password" id="password" />
      </p>
      <input type="hidden" id="md5-password" name="password" />
      <button type="submit">提交</button>
    </form>
  </body>

  <script>
    var username = document.getElementById("username");
    var pwd = document.getElementById("password");
    username.value = "LittleFish";
    pwd.value = "123456";

    function littlefish() {
      alert("Success!");
      var md5pwd = document.getElementById("md5-password");

      md5pwd.value = md5(pwd.value);
      return true;
    }
  </script>
</html>

6. jQuery

获取 jQuery

code.jquery.com/jquery-3.6.…

把代码复制粘贴到本地

<script src="lib/jquery.js"></script>

jQuery文档

jQuery API 中文文档

万能公式

$(selector).action()

<!DOCTYPE html>
<html>
  <head>
    <script src="lib/jquery.js"></script>
    <title>jQuery</title>
  </head>
  <body>
    <a href="" id="test-jquery">click me!</a>
  </body>
  <script>
    $("#test-jquery").click(function () {
      alert("Hello jQuery!");
    });
  </script>
</html>

选择器

// 再强调一遍，公式 $(selector).action()

$('p').action();
$('#id').action();
$('.class').action();

jQuery事件

鼠标移动事件

<!DOCTYPE html>
<html>
  <head>
    <script src="lib/jquery.js"></script>
    <title>jQuery</title>
  </head>

  <style>
    #divMove {
      width: 500px;
      height: 500px;
      border: 1px solid red;
    }
  </style>

  <body>
    <span id="mouseMove"></span>
    <div id="divMove">Please Move Your Mouse!</div>
  </body>

  <script>
    $(function () {
      $("#divMove").mousemove(function (point) {
        $("#mouseMove").text("x: " + point.pageX + ", y: " + point.pageY);
      });
    });
  </script>
</html>

操作DOM

节点文本操作

$('#test-ul li[name=python]').text();  // 获得值
$('#test-ul li[name=python]').text('设置值');
$('#test-ul').html();
$('#test-ul').html('<strong>python</strong>');

CSS操作

$('#divMove').css('color', 'red');
$('span').css({'color': 'red', 'font-size' : '20px'});

元素的显示和隐藏

$('#divMove').show();
$('span').hide();

其他

$(window).width();
$(window).height();

怎么学习?

看 jQuery 游戏源码
扒网站，删到不能再删为止

【前端】JavaScript面向对象