0、前端三要素
HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容
CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。
JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为
 

1、什么是JavaScript

1.1、概述
JavaScript是一门世界上最流行的脚本语言
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为 开发Web页面的脚本语言而出名，但是它也被 用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且 支持面向对象、命令式和声明式（如函数式编 程）风格。
一个合格的后端人员，必须精通JavaScript
1.2、历史
历史相关链接: https://www.w3school.com.cn/js/pro_js_history.asp.
ECMAScript它可以理解为是JavaScript的一个标准
最新版本已经到es6版本
但是大部分浏览器还只停留在支持es5代码上！
开发环境–线上环境，版本不一致

2、快速入门

2.1、引人JavaScript

1、内部标签

2、外部引入
a1.js

alert(1);

index.html

获取cookie

document.cookie

劫持cookie原理

服务器端可以设置cookie：httpOnly （就会安全？）

7.5、history

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

8、操作DOM对象（重点）（Document Object Model）

DOM：文档对象模型
核心
游览器网页就是一个DOM树形结构！

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

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

//对应css选择器
var h1 = document.getElementsByTagName('h1'); // 通过标签
var p1 = document.getElementsById('p1'); // 通过ID
var p2 = document.getElementsByClassName('p2'); // 通过类名
var father = document.getElementById('father');
var childrens = father.children; //获取父节点下的所有子节点
//father.firstChild
//father.lastChild
//next,...在网页写入随机数：
function generateRandomNumber() {return Math.floor(Math.random() * 100);
}document.write(generateRandomNumber());

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

8.1、更新节点

var id1 = document.getElementById('id1')获得结点
id1.innerText='123'修改文本的值
id1.innerHTML='123'解析html标签
 

Name:
Email:
Password:
Age:
Gender:MaleFemaleOther
Message:Hello World!




a2.js:
document.getElementById("name").value = "John";
document.getElementById("email").value = "john@example.com";
document.getElementById("password").value = "password123";
document.getElementById("age").value = "25";
document.getElementById("gender").selectedIndex = 1;
document.getElementById("message").innerHTML = "Hello World!";

8.2、操作css

id1.style.color='yellow'; // 属性使用字符串包裹
id1.style.fontSize='20px'; //驼峰命名问题
id1.style.padding='2em';document.getElementById("name").style.color='red'

8.3、删除节点

标题1
p1
p2

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

8.4、插入节点

我们获得了某哦个DOM节点，假设DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素，我们就不能这样做了，因为会覆盖。
追加

biancheng
javascript
java
python

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

var js = document.getElementById('js');   //已经存在的节点
var list = document.getElementById('list');
// 通过js 创建一个新的节点
var newp = document.createElement('p'); //创建一个P标签
newp.id = 'newp';
newp.innerText = 'hello,ding';
list.appendChild(newp)
biancheng
javascript
java
python

// 可以创建一个Style标签,也可以js标签
var mystyle= document.createElement('style');
mystyle.setAttribute('type','text/css');
// 设置标签内容
mystyle.innerHTML = 'body{background-color: #ffeb3b}'; 
document.getElementsByTagName('head')[0].appendChild(mystyle)

var ee = document.getElementById('ee');
var py = document.getElementById('py');
var list = document.getElementById('list');
//要包含的节点，insertBefore（new，target）
list.insertBefore(py,ee);

9、操作表单（验证）

表单是什么 form DOM树

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

表单的目的：提交信息
获得要提交的信息

用户名：
性别： 男 女

提交表单 md5加密密码，表单优化

用户名：
密码：
提交

10、jQuery

javascript
jquery库，里面存在大量的javascript函数
获取jquery
https://www.bootcdn.cn/jquery/
1、jquery.min.js：是由完整版的jQuery库经过压缩得来，压缩后功能与未压缩的完全一样，只是将其中的空白字符、注释、空行等与逻辑无关的内容删除，并进行一些优化。
2、jquery.js：是完整的未压缩的jQuery库，文件比较大。
 

10.1、使用jquery

公式： $(选择器).action()

点我

10.2、选择器

//原生态js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();//jquery css 中的选择器他全部都能用
$('p').click(); //标签选择器
$('#id').click(); //id选择器
$('.class1').click(); //class选择器

10.3、事件

鼠标事件，键盘事件，其他事件

mouse:  
在这里移动鼠标试试

10.4、操作DOM

节点文本操作

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

css的操作

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

元素的显示和隐藏,本质display：none；

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

娱乐测试

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();//show和hide切换

小技巧
1、巩固JS（看游戏源码）
2、巩固HTML，CSS（扒网站，全部down下来，然后对应修改看效果~）
Layer弹窗组件
Element-ui