薛叔不养猫

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原理

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 = “345” 可以解析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">p1p>
    <p class="p2">p2p>
div>
<script>
    var sel = document.getElementById("id1");
    var father = p1.parentElement;
    father.removeChild(self)
    
    //删除是一个动态的过程
script>

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

插入节点

我们获得了某个Dom节点，假设这个Dom节点是空的，我们通过innerHTML就可以追加一个元素了，但是这个Dom节点已经存在元素了，我们就不能这么做了，会产生覆盖

追加

<p id="js">JavaScriptp>
<div id="list">
    <p id="se">JavaSEp>
    <p id="ee">JavaEEp>
    <p id="me">JavaMEp>
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
下拉框