【狂神说Java】阶段二笔记5. JavaScript-02

3.5 内部对象

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

3.5.1 Date

• 基本使用

var now = new Date();  // Date Thu Feb 18 2021 18:13:23 GMT+0800 (中国标准时间)
now.getFullYear();  // 年
now.getMonth();  // 月 0 ~ 11代表月
now.getDate();  // 日
now.getDay();  // 星期几
now.getHours();  // 时
now.getMinutes();  // 分
now.getSeconds();  // 秒

now.getTime();  // 时间戳 全世界统一 从1970.01.01 00:00:00到现在的毫秒数
new Date(1613643203080);  // 时间戳转换为时间

• 转换

now
> Date Thu Feb 18 2021 18:13:23 GMT+0800 (中国标准时间)
now.getTime();
> 1613643203080
new Date(1613643203080)
> Date Thu Feb 18 2021 18:13:23 GMT+0800 (中国标准时间)

now.toLocaleString  // 注意，调用是一个方法，不是一个属性
> function toLocaleString()
now.toLocaleString()
> "2021/2/18 下午6:13:23"
now.toGMTString()
> "Thu, 18 Feb 2021 10:13:23 GMT"

3.5.2 JSON

• JSON是什么

  早期，所有数据传输习惯使用XML文件！JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

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

• 格式

  • 对象都用{}
  • 数组都用[]
  • 所有的键值对都用 key: value

• JSON字符串 和 JS对象 的转化

var user = {
    name: 'qinjiang',
    age: 3,
    sex: '男'
}  

//对象转化为JSON字符串  "{\"name\":\"qinjiang\",\"age\":3,\"sex\":\"男\"}"
var jsonUser = JSON.stringify(user);

//json字符串转化为对象  Object { name: "qinjiang", age: 3, sex: "男" }
var obj = JSON.parse(jsonUser);

• JSON 和 JS对象 的区别

var obj = {a: "hello", b: "hellob"};
var json = '{' "a": "hello", "b": "hellob" '}'

3.5.3 AJax

原生的js写法 xhr异常请求，jQuey封装好的方法 $("#name").ajax("")

axios请求

3.6 面向对象编程

3.6.1 什么是面向对象

原型对象

javascript、java、c#…面向对象；Javascript有些区别，在JavaScript中类和对象需要换一下思维方式

• 类：模板

• 对象：具体的实例

原型

var user = {
    name: 'qinjiang',
    age: 3,
    run: function (){
        console.log(this.name + "run...");
    }
}  

var xiaoming = {
    name: "xiaoming"
}

// 小明的原型对象是user
xiaoming.__proto__ = user;

function Student(name){
        this.name = name;
    }

//给student新增一个方法，老方法
Student.prototype.hello = function (){
    alert('Hello');
}

class继承

1. 定义一个类，属性、方法

class关键字，是在ES6引入的

//ES6之后，定义一个学生的类
class Student{
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert('hello');
    }
}

var xiaoming = new Student("xiaoming");

2. 继承

class child extends Student{
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }

    myGrade(){
        alert('i am child');
    }
}

var xiaohong = new child("xiaohong", 1);

原型链

_ _ proto _ _:

3.7 操作Bom对象（重点）

浏览器介绍

JavaScript和浏览器的关系：JavaScript的诞生就是为了能够让他在浏览器中运行

BOM：浏览器对象模型

• IE 6~11

• Chrome

• Safari

• FireFox Linux

• Opera

三方

• QQ浏览器
• 360浏览器

window

window代表浏览器窗口

window.innerHeight  // 可以通过调整浏览器窗口改变
> 115
window.innerWidth
> 1920
window.outerHeight
> 1056
window.outerWidth
> 1936
window.alert(1)
> undefined

Navigator（不建议使用）

代表封装了浏览器的信息

navigator.appName
> "Netscape"
navigator.appVersion
> "5.0 (Windows)"
navigator.userAgent
> "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:85.0) Gecko/20100101 Firefox/85.0"
navigator.platform
> "Win32"

大多数时候，我们不会使用 navigator对象，因为会被人为修改，不建议使用这些属性来判断和编写代码

screen

代表屏膜尺寸

screen.width
> 1920 px
screen.height
> 1080 px

location（重要）

代表当前页面的URL的信息

location
> host: "www.baidu.com"  // 主机
> href: "https://www.baidu.com/index.php?tn=monline_3_dg"  // 当前指向的位置
> protocol: "https:"  // 协议
> reload: reload()  // 方法：刷新网页

location.assign('https://blog.kuangstudy.com')  // 设置新地址

document

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

document.title
> "百度一下，你就知道"
document.title = "狂神说"
> "狂神说"

• 获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    'use strict'
    let dl = document.getElementById('app');
</script>

dl
> <dl id="app">

• 获取cookie

document.cookie
> "BAIDUID=FFECCFCF53F44EB1AAAAE67B7740F577:FG=1; BIDUPSID=FFECCFCF53F44EB1AAAAE67B7740F577; PSTM=1590735923; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; H_PS_PSSID=33425_33515_33438_33344_33570_33318_33265; BDRCVFR[Fc9oatPmwxn]=aeXf-1x8UdYcs; delPer=0; BD_CK_SAM=1; PSINO=1; BD_HOME=1; BD_UPN=13314752; sugstore=1; BA_HECTOR=ag24ah8521ah05aljf1g2sl180q"

劫持cookie原理

<script src="aa.js"></script>  // www.taobao.com
<!--恶意人员获取你的cookie上传到他的服务器-->

服务器端可以设置cookie：httpOnly

history（不建议使用）

代表浏览器的历史记录

historry.back()  // 前进
history.forward()  // 后退

3.8 操作Dom对象（重点）

DOM：文档对象模型

核心

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

• 更新：更新Dom节点

• 遍历Dom节点：得到Dom节点

• 删除：删除一个Dom节点

• 添加：添加一个新的Dom节点

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

获得Dom节点

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('h1');
    var father = document.getElementById('father');
    var child = father.children;  // 获取父节点下的所有子节点
    father.firstChild
    father.lastChild
</script>

这是原生代码，之后我们尽量使用jQuery();

更新节点

<div id="id1">
</div>

<script>
    var id1 = document.getElementById('id1');
</script>

// 操作文本
id1.innerText = '123'  // 修改文本的值
> "123"

id1.innerHTML = '<strong>123</strong>'  // 可以解析HTML标签
> "<strong>123</strong>"

//操作JS，注意下划线转驼峰命名问题
id1.style.color = 'red';  // 设置颜色
> "red"

id1.style.fontSize = '200px'  // 字体大小
> "200px"

id1.style.padding = '2em'  // 缩进
> "2em"

删除节点

删除结点的步骤：先获取父节点，在通过父节点删除自己（只有标记为id选择器的节点才可以删除）

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(p1)
    father.removeChild(father.children[0]);
</script>

注意：删除多个节点的时候，children是在时刻变换的，删除节点的时候一定要注意

插入节点

我们获得了某个Dom节点，假设这个Dom节点是空的，可以通过innerHTML就可以增加一个元素；但是若这个Dom节点已经存在元素，需要采取其他方法，因为会覆盖原始内容

• 追加

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    let
        js = document.getElementById('js');
        list = document.getElementById('list');
	list.appendChild(js);  //追加到后面
</script>

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

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    let
        js = document.getElementById('js');  // 已经存在的节点
        list = document.getElementById('list');
    //通过JS创建一个新节点
    let newP = document.createElement('p');  //创建一个p标签
    newP.id = 'newP';  // 等价于newP.setAttribute('id', 'newP');
    newP.innerText = "Hello, Kuangshen";
    list.appendChild(newP);

    //创建一个标签节点(通过这个属性，可以设置任意的值)
    let myScript = document.createElement('script');
    myScript.setAttribute('type', 'text/javascript');
    list.appendChild(myScript);
    
    //创建一个Style标签
    let myStyle = document.createElement('style');  // 创建一个空style标签
    myStyle.setAttribute('type', 'text/css');  
    myStyle.innerHTML = 'body{background-color: chartreuse}';  // 设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

3.9 操作表单

表单是什么 form Dom树

• 文本框 text
• 下拉框
• 单选框 radion
• 多选框 checkbox
• 隐藏框 hidden
• 密码框 password
• …

表单的目的：提交信息

获得要提交的信息

<form action="post">
    <p>
        <span>用户名：</span> <input type="text" id="username">
    </p>

    <!--多选框的值，就是定义好的value值-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>

<script>
    let input_text = document.getElementById('username');
    let boy = document.getElementById('boy');
    let girl = document.getElementById('girl');

    //修改输入框的值
    input_text.value = '123'

    //对于单选框、多选框固定的值，boy.value只能取到当前的值
    boy.checked;  //查看是否被选中，被选中为true
</script>

提交表单：md5假日密码、表单优化

<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="input-password" name="input-password">
    </p>

    <input type="hidden" id="md5-password" name="md5-password">
    <!--绑定事件-->
    <button type="submit">提交</button>
</form>

<script>
    function aaa(){
        alert('跳转页面');
        let username = document.getElementById('username');
        let password = document.getElementById('input-password');
        let md5pwd = document.getElementById('md5-password')

        console.log(username.value);
        //MD5算法
        md5pwd.value = md5(password.value);
        //password.value = md5(password);
        console.log(md5pwd.value);
        //可以较验判断表单内容，true就是通过提交，false就是阻止提交
        return true;
    }
</script>

3.10 jQuery

JavaScript

jQuery库：里面存在大量的JavaScript函数

获取jQuery

jquery下载

cdn jQery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn引入-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>

<!--jQery公式：$(selector).action()-->
<a href="" id="test-jqery">点我</a>

<script>
    document.getElementById('id');
    id.click();
    
    //选择器selector就是css的选择器
    $('#test-jqery').click(function (){
        //尽量使用单引号
        alert('hello jqery');
    })
</script>

</body>
</html>

$(selector).action();  // 公式

选择器

<script>
    //原生js选择器少，麻烦不好记
    document.getElementsByTagName();  //标签
    document.getElementById();  //id
    document.getElementsByClassName();  //类

    //jQuery选择器
    $('p').click();  //标签
    $('#id1').click();  //id
    $('.class1').click(); //类

</script>

文档工具站：jquery中文文档

事件

鼠标事件，键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.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>

操作Dom元素

• 节点文本操作

<script>
    //document.getElementById('') 原先代码

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

</script>

• css的操作

$('#test-ul li[name=python]').css("color", "red");

• 元素的显示和隐藏

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

本质：display: none

• 娱乐测试

$(window).width()
$(window).height()
$(document).width()
$(document).height()
$('#test-ul li[name=python]').toggle()

• 未来在后端要学习ajax();

$('#from').ajax()

文档工具站：ajax中文文档

看源码：源码之家

小技巧

1. 如何巩固JS（看jQery源码，看游戏源码）
2. 巩固HTML、CSS（扒网站，全部down下来，然后对应修改效果）

docsigy文档官网

vuepress

layui

Element-ui

ant

PS：学习自狂神说java