JavaScript学习笔记（狂神说）

本文章根据狂神说视频内容学习整理

1、什么是JavaScript

1.1、概述

JavaScript是一门世界上最流行的脚本语言

Java、JavaScript

10天开发出的

一个合格的后端人员，必须要精通JavaScript

1.2、历史

https://blog.csdn.net/kese7952/article/details/79357868

ECMAScript可以理解为是JavaScript的一个标准

最新版本已经更新到es6版本

但大部分浏览器还只停留在支持es5代码上！

开发环境—线上环境，版本不一致

关键字、变量、流程控制、对象、数组、结构

2、快速入门

7、操作BOM对象（重点）

JavaScript和浏览器的关系？

JavaScript 诞生就是为了能够让他在浏览器中运行！

BOM：浏览器对象模型

• IE 6~11
• Chrome
• Safari
• FireFox
• Opera

三方

• QQ浏览器
• 360浏览器

window

window 代表 浏览器窗口

window.alert(1)
undefined
window.innerHeight
301
window.innerWidth
945
window.outerHeight
1010
window.outerWidth
945
//查看浏览器窗口大小

Navigator

Navigator,封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 UBrowser/6.2.4098.3 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 UBrowser/6.2.4098.3 Safari/537.36"
navigator.platform
"Win32"

大多数时候，我们不会使用 navigator 对象，因为会被人修改！

不建议使用这些属性来判断和编写代码

screen

代表屏幕的尺寸

screen.width
1920
screen.height
1080

location (重要)

location 代表当前页面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com/?tn=98050039_dg&ch=1"
protocol:"https:"
reload:reload()   //刷新网页
location.assign('网址')    //设置新地址

document

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

document.title
"百度一下，你就知道"
document.title = "kakaka"
"kakaka"

获取具体的文档树节点

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

    <script>
    var dla = document.getElementById("app");
    </script>

获取cookie

document.cookie

劫持cookie原理

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

history

history 代表浏览器的历史记录

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

8、操作DOM对象 （重点）

DOM：文档对象模型

核心

浏览器网页就是一个DOM属性结构！

• 更新：更新Dom节点
• 遍历Dom节点：得到Dom节点
• 删除：删除一个Dom节点
• 添加：添加一个新的节点

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

获得Dom节点

//对应css选择器
    var h1 = document.getElementsByTagName("h1");
    var p1 = document.getElementById("p1");
    var p2 = document.getElementsByClassName("p2");
    var father = document.getElementById("father");

    var childrens = father.children; //获得父节点下的所有子节点
    //var childrens = father.firstChild;  //获得父节点下第一个子节点
    //var childrens = father.lastChild;   //获得父节点下最后一个子节点

这是原生代码，之后尽量用jQuery

更新节点

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

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

操作文本

• id1.innerText = “345”; 修改文本的值
• id1.innerHTML = “<strong>345</strong>” 可以解析HTML文本标签

操作CSS

id1.style.color = "yellow";  //属性使用 "字符串" 包裹
"yellow"
id1.style.fontSize = "30px"  //- 转 驼峰命名问题
"30px"
id1.style.padding = "2em"
"2em"

删除节点

删除节点的操作步骤：先获取父节点，再通过父节点删除自己

<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var sel = document.getElementById("id1");
    var father = p1.parentElement;
    father.removeChild(self)
    
    //删除是一个动态的过程
</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>
    var js = document.getElementById("js");
    var list = document.getElementById("list")
    list.appendChild(js)
</script>

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

<script>
    var js = document.getElementById("js");
    var list = document.getElementById("list")
    //通过JS 创建一个新的节点
    var newP = document.createElement('p');//创建一个p标签
    newP.id = "newP";
    newP.innerText = "Hello,world!"
    
</script>

insert

    var js = document.getElementById("js");
    var list = document.getElementById("list");
    var ee = document.getElementById("ee");
    //要包含节点的前面
    list.insertBefore(js,ee);

9、操作表单（验证）

表单是什么 form DOM树

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

表单的目的：提交信息

获得要提交的信息

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <p>
        <span>性别：</span>
        <input type= "radio" name="sex" value="man" id="boy">男
        <input type= "radio" name="sex" value="woman" id="girl">女
    </p>
</form>

<script>
    var input_text = document.getElementById("username");
    var boy_radio = document.getElementById("boy");
    var girl_radio = document.getElementById("girl");
    //得到输入框的值
    input_text.value;
    //修改输入框的值
    input_text.value = "12334444";

    boy_radio.checked;//如果被选中，则返回true，否则返回false;
    boy_radio.checked = true;  //赋值
</script>

提交表单 MD5加密密码 表单优化

<!--
表单绑定提交事件
οnsubmit= 绑定一个提交检测的函数 ，true，false
将这个结果返回给表单，用 onsubmit 接收
οnsubmit="return aaa()"
-->
<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">
    </p>
<!--    //隐藏真实密码输入框-->
    <input type="hidden" id="md5-password" name="password">

<!--    绑定事件，onclick 被点击-->
    <button type="submit">提交</button>

</form>

<script>
    function aaa() {
        var uname = document.getElementById("username");
        var pwd = document.getElementById("input-password");
        var md5pwd = document.getElementById("md5-password");

        md5pwd.value = md5(pwd.value);
        console.log(pwd.value);
        //可以校验判断表单内容，true就是通过提交，false组织提交
        return true;
    }
</script>

MD5加密工具：

<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js"></script>

10、jQuery

jQuery库，里面存放了大量的JavaScript函数

公式：$('选择器').事件(事件函数)

<a href="" id="test-jQuery">点我</a>

<script>
    $("#test-jQuery").click(function () {
        alert("hello,jQuery")
    })
</script>

选择器

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

    //jQuery   css中的选择器都能用
    $('p').click(); //标签选择器
    $('#id').click();//id选择器
    $('.class').click();//类选择器
</script>

文档工具站：https://jquery.cuishifeng.cn/

事件

鼠标事件，键盘事件

<!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{
            height: 500px;
            width: 500px;
            border: 2px solid red;
        }
    </style>
</head>
<body>

mouse: <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>

<script>
    //当前页面加载之后响应事件
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX+' y:'+e.pageY)
        })
    })
</script>
</body>
</html>

操作DOM

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

css的操作

$('#test-ul li[name=jQuery]').css({"color":"red"});

元素的显示和隐藏

$('#test-ul li[name=jQuery]').show();//显示
$('#test-ul li[name=jQuery]').hide();//隐藏

娱乐测试

$(window).width();//宽度
$(window).height();//高度
$('#test-ul li[name=jQuery]').toggle();//显示和隐藏

Layer

Element-UI

i[name=jQuery]’).text();//获得值
$(’#test-ul li[name=jQuery]’).text(‘123456’);//设置值
$(’#test-ul’).html();
$(’#test-ul’).html(‘123’);

css的操作

```javascript
$('#test-ul li[name=jQuery]').css({"color":"red"});

元素的显示和隐藏

$('#test-ul li[name=jQuery]').show();//显示
$('#test-ul li[name=jQuery]').hide();//隐藏

娱乐测试

$(window).width();//宽度
$(window).height();//高度
$('#test-ul li[name=jQuery]').toggle();//显示和隐藏

Layer

Element-UI

Ant Design