HTML+CSS+JavaScript

HTML（超文本标记语言）

1. 一些基础标签

标题标签：
<h1></h1>~<h6></h6>

段落标签：
<p></p>

换行标签:
<br/>

水平线标签：
<hr/>

字体样式标签：

- 粗体：<strong></strong>
- 斜体：<em></em>

一些常用特殊符号（IDEA一般有提示）：
- 空格：&nbsp;
- 引号：&quot;
- 版权号：&copy;

图像标签：<img src="" alt="" title="" width="" height="">
- src：图片路径
- alt：找不到图片资源的时候的文字描述
- title：鼠标移动到图片上的文字提示
- width/height：宽度和高度

链接标签：
链接标签--文本链接其它页面
<a href="" target=""> 文本 </a>
- href：链接的路径
- target：新窗口一什么方式打开（_self / _blank）

链接标签--图片链接其它页面
<a href="" target="">
   <img src="" alt="" title=""/>
</a>

链接标签--功能链接
<a href="mailto:2575005542@qq.com">联系我们</a>

链接标签--锚链接
标记位置<a name="mark"></a>
链接<a href="#mark">到mark位置</a>

2. 列表

无序（一般用于导航、侧边栏、有规律的图文组合）
<ul>
	<li>可以包含图片、文本、列表</li>
	<li></li>
	<li></li>
</ul>

有序（一般用于题目的选项）
<ol>
	<li>可以包含图片、文本、列表</li>
	<li></li>
	<li></li>
</ol>
自定义列表（一般用于成组分类）
<dl>
	<dt>标题</dt>
	<dd></dd>
	<dd></dd>
	<dd></dd>
</dl>

3. 表格

<table bored="1px">
   	<tr>
   			<td>第一行-第一列<td>	
   			<td>第一行-第二列<td>	
   			<td>第一行-第三列<td>
   	</tr>
   	<tr>
   			<td>第二行-第一列<td>	
   			<td>第二行-第二列<td>	
   			<td>第二行-第三列<td>
   	</tr>
</table>
合并行与列
合并行-跨n行合并，使得框子变高。
步骤--》删掉对应的n-1行--》在对应的列（<td>）加上rowspan="n",
<td rowspan="n"></td>

合并列-跨n列合并，使得框子变长。
步骤--》删掉对应的n-1列--》在对应的列（<td>）加上colspan="n",
<td colspan="n"></td>

4. 音频/视频

	音频：
	<audio src="" controls autoplay></audio>
	视频：
	<video src="" controls autoplay loop></video>
	 
	 - src:资源路径
     - controls:控制播放暂停的控件
     - autoplay:自动播放
     - loop:循环播放

5. 结构元素（标记-给程序员看的）

<header>头部</header>
<footer>尾部</footer>
<section>主体</section>
<article>文章</artical>
<aside>侧边栏</aside>
<nav>导航栏</nav>

6. 内联

单页面内联
<iframe src="" name=""></iframe>
页面间相互跳转
<iframe name="mainiframe"></iframe>

7. 表单

<form action="" method="">
   <p>昵称：<input type="text" name="name"></p>
   <p>密码：<input type="password" name="password"></p>
   <p>性别
   		<select>
   			<option name="girl">女</option>
   			<option name="boy">男</option>
   		</select>
   </p>
   <p>最高学历
   		<input type="radio" name="study" checked/>无
           <input type="radio" name="study"/>小学
           <input type="radio" name="study"/>初中
           <input type="radio" name="study"/>高中
           <input type="radio" name="study"/>大学
           <input type="radio" name="study"/>研究生
           <input type="radio" name="study"/>博士
   </p>
   <p>爱好
           <input type="checkbox" name="hobby" />抽烟
           <input type="checkbox" name="hobby" checked/>喝酒
           <input type="checkbox" name="hobby" />烫头
           <input type="checkbox" name="hobby"  disabled/>打游戏
   </p>
   <p>
   		<input type="submit" name="Button" value="提交"/>
   		<input type="reset" name="Reset" value="重填"/>
   		<a href="" target="">
   				<img src="" alt="" title=""/>
   		</a>
   </p>
</form>

8. 总结表单元素

文本框
<input type="text" name="username" value="用户名" size="30" maxlenth="20"/>

密码框
<input type="password" name="password" size="20"/>

单选按钮
<input type="radio" name="sex" value="boy" checked>男
<input type="radio" name="sex" value="girl">女

复选框
<input type="checkbox" name="hooby" value="code"/>代码
<input type="checkbox" name="hooby" value="girl"/>女孩
<input type="checkbox" name="hooby" value="game"/>游戏
<input type="checkbox" name="hooby" value="movie"/>电影

下拉框
<select name="列表名称" size="行数">
	<option value="选项值" selected="selected"></option>
	<option value="选项值"></option>
	<option value="选项值"></option>
</select>

按钮
(重置按钮)
<input type="reset" name="btnReset" value="重置"/>
(提交按钮)
<input type="submit" name="btnSubmit" value="提交"/>
(普通按钮)
<input type="button" name="btn" value="按钮"/>
(图片按钮)
<a href="" target="">
	<input type="image" src=""/>
</a>

多行文本
<textarea name="text" cols="x" rows="y">文本内容</textarea>

文件域
<form action="" method="post" enctype="multipart/form-data">
	<p>
		<input type="file" name="files"/>
		<input type="submit name="upload" value="上传"/>
	</p>
<form>

邮箱(带验证，但是不好)
<input type="email name="email"/>
数字
<input type="number" name="num" min="0" max="100" step="1"/>

滑块
<input type="range" name="range" min="0" max="100" step="1"/>

搜索框
<input type="search" name="search"/>

9. 高级应用

隐藏域
<input type="hidden" name="id" value="1"/>

只读与禁用
<input type="text" name="name" value="admin" readonly/>
<input type="submit" value="保存" disable/>

自动聚焦
<p>
	<label for="xingming">昵称</lable>
	<input type="text" name="username" id="xingming"/>
</p>

10. 表单验证

输入框提示（placeholder="提示语句"）
<input type="text" name="username" placeholder="请输入用户名"/>

输入框不能为空（required）
<input type="text" name="username" required/>

正则表达式（pattern）
<input type="text" name="email" required pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"/>

CSS（层叠样式表）

1. CSS的三个位置

优先级的高低是就近原则

行内样式—在标签内部加style=""

<p type="color:red"></p>

内部样式—在head里加style

<head>
	<style>
		p{color:gray;}
	</style>
</head>

外部样式引入

<link type="text/css" rel="stylesheet" href="path/name.css"/>
type：文件类型
rel：使用外部样式表
href：资源路径

CSS2.1
<style>
	@import url("css/style.css");
</style>

2. 选择器

选择器优先级：id选择器 > class选择器 > 标签选择器

基本选择器

/*标签选择器，会选择页面上所有的标签*/
h1{
	color:red;/*字体色*/
	background:gray;/*背景色*/
	border-radius:10px;/*圆角*/
}
p{     }

/*类选择器--可以弄一类*/
.title1{
}
.title2{
}
/*
<body>
	<h1 class="title1">标题1</h1>
	<h1 class="title2">标题2</h1>
</body>
*/

/*id选择器---唯一,多个标签使用会报错*/
#id1{
}
/*
<body>
	<h1 id="name">id只能给一个标签用</h1>
	<h1 id="name">会报错</h1>
</body>
*/

高级选择器

/* 层次选择器*/
/*1.后代选择器---会一层层下去 p1 p2 p3 p4 p5 p6 p7 p8*/
body p{
}

/*2.子选择器---不会更进一层 p1 p2 p3 p7 p8*/
body>p{
}
/*3.相邻兄弟选择器---在同一级别相邻的弟弟(向下)p2 p8*/
.active + p{
}
/*4.通用兄弟选择器---在同一级别相邻的所有弟弟（向下衍生）p2 p3 p7 p8*/
.active~p{
}
/*注：俩个兄弟选择器，有就近覆盖的关系，最靠下面越近*/
/*
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
	<li><p>p4</p></li>
	<li><p>p5</p></li>
	<li><p>p6</p></li>
</ul>
<p class="active">p7</p>
<p>p8</p>
*/

/*伪类选择器*/
/*ul的第一个元素*/
ul li:first-child{
}
/*ul的最后一个元素*/
ul li:last-child{
}
/*
	定位到父元素，选择当前的第一个元素（nth-child(1)）。选择当前p元素的父级元素，如果是当前元素才生效。而nth-of-type(1)是根据类型去找
*/
p:nth-child(1){
}
p:nth-of-type(1){
}
/*伪类--动作*/
a:hover{
	backgrund:red;
}
/*
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
	<li>li1</li>
	<li>li2</li>
	<li>li3</li>
</ul>
*/

/*属性选择器*/
标签[属性]
标签[属性="值"]
标签[属性^="值"]/*以什么开头*/
标签[属性$="值"]/*以什么结尾*/
标签[属性*="值"]/*存在什么*/

3.美化

span：将重点的字用此标签套住（约定）
字体样式
font-family:字体;/*字体可以设置   英文 ， 中文字体*/
font-size:字体大小;/*px为像素，em是多少个字符*/
font-weight:字体粗细;
color:字体颜色;
/*合并*/
font:字体风格（斜体） 粗细  大小/高度 字体;

文本样式
color:颜色;/*单词；#RRGGBB；rgba(255,255,255,透明度)*/
background:背景色;

text-indent:2em;/*俩个字符缩进*/
text-align:排版;/*左对齐left;居中：center；右对齐:right；*/

height:行高;/一行文字的行高，主要是占的区域，如果有背景色可以显示出来/
line-height: 字体行高;/*在p标签中，与前面一起使用。保证都与div一致则实现文字居中*/

text-decoration:underline;/*下划线*/
text-decoration:line-through;/*中划线*/
text-decoration:overline;/*上划线*/
text-decoration:none;/*a标签超链接 去下划线*/

vertical-align:middle;/*得有俩个标签比如img;p，相对对齐居中*/ 

列表样式/*ul li*/
list-style:none;
none:去掉圆点
circle:空心圆
decimal:数字
square:正方形

背景
背景颜色
background:颜色;
背景图片
background-image:url("img/xxx.jpg");/*空间填充*/
background-repeat:repeat-x;/*水平平铺*/
background-repeat:repeat-y;/*数值平铺*/
background-repeat:no-repeat;/*不平铺*/

background-position:x y;

合并：颜色，图片 ， 图片位置 ， 平铺方式。
background:颜色 url("图片路径")  x y  no-repeat;

渐变
https://www.grabient.com/
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

4.盒子模型

margin:外边距（距离外边的距离）
margin: 四边;
margin: 上 右 下 左;
margin: (上and下) （左and右）;/*主要体现在 上 左*/

padding:内边距（距离里边的距离）
padding:四边;
padding:上 右 下 左;
pading:(上and下) （左and右）;/*主要体现在 上 左*/

border:边框（边框线）

边框

边框的粗细
border-width: 30px;
边框的样式
border-style: solid;/*dashed*/
边框的颜色
border-color: red;
合并
border: 3px dashed red;

边框圆角

border-radius: 四角;
border-radius: 左上 右上 右下 左下;
border-radius: 左上 右下;

阴影

box-shadow:10px 20px 30px 40px red;

disolay

display:block;
block;块元素
inline;行内元素
inline-block; 是块元素，但是可以内联，在一行
none

float（左/右浮动）

float:right;/*left*/
如果先把元素块级在浮动，会使得这些块随着网页缩放位置而发生变化，可以先。
clear:both;
right；清除右侧浮动
left;清除左侧浮动
both;清除俩侧浮动
none;可以浮动

父级边框塌陷解决

1.增加父级元素高度和宽度

2.在父级块内，所有漂浮块后，增加一个空的div
<div class="clear"></div>
.clear{
	clear:both;
	margin:0;
	padding:0;
}

3.内容多于设置的宽/高
#content{
	width:200px;
	height:150px;
	overflow:hidden;/*影藏多于的。还可以用滚动条scroll*/
}
4.父类增加一个伪类
#father:after{
	content:'';
	display:block;
	clear:both;
}

display and float总结
display:方向不可控。
float:浮动起来的话会脱离标准文档流，所以要解决父级塌陷问题。

5. 定位
   相对定位

相对于原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中,原来的位置会被保留。
position: relative;/*相对定位：上下左右*/
top:10px;/*bottom 10px; left:10px; right:10px;*/

绝对定位

定位：基于xxx定位，上下左右 
position:absolute;
没有父级元素定位的前提下，相对于浏览器定位。
如果父级元素存在定位，我们通常会相对于父级元素进行偏移。
在父级元素范围内移动
相对于父级或者浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中,原来的位置不会被保留。

固定定位（fixed）

位置不受浏览器的滚动条变化而变化。
position:fixed; 

z-index

z-index:666;可以指定在哪一层。
透明度
opacity:0.5;

动画效果
动画

JavaScript

JavaScript语言的标准，被称为ECMAScript标准
JavaScript框架
jquery：简化DOM.
angular：将后台的MVC搬到前台，用TypeScript开发。模块化开发
react：减少DOM操作（需要另外学一们语言JSX）
vue：JavaScript框架。综合Angular(模块化）和React（虚拟DOM）的优点。
axios：提供通信。也可以直接使用JQuery提供的Ajax通信功能。

UI框架
Ant-Design：阿里巴巴的 基于React的UI框架
ElementUI、iview、ice:饿了么的、基于Vue的UI框架
Bootstrap：Twitter的 用于前端开发的工具包
AmazeUI：“妹子UI” 一款HTML5跨屏前端框架

JavaScript构建工具
Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
WebPack：模块打包器，主要作用是打包、压缩、合并及加载

<!-- script不能自闭合，自闭合会报错 -->
<script src="../js/test.js"></script>

JavaScript变量定义

  <script>
    // 1.定义变量:    变量类型 变量名 = 变量值;
    var num = 1;
    if (num>60){
      alert(">60")
    }else{
      alert("不及格")
    }
  </script>

数据结构
number：整数、小数、NaN （not a number） Infinity（无限大）
字符串：‘abc’ “abc”
布尔值：true、false
逻辑运算：&& || ！
比较运算符： = （赋值） ==（等于：类型不一样，值一样，也会判断为true。比如”1“ 和1是一样的） === （绝对等于:得类型一样，值一样，结果true）

浮点数运算问题

<script>
	由于精度丢失导致没法判断
	console.log((1/3) == (1-2/3));
	尽量避免浮动数进行运算。
	Math.abs(1/3-(1-2/3))<0.00000001
</script>

null和underdefined
null 空
undefined 未定义

数组与对象

<script>
    数组
	var arr =[1,2,3,"hello",4,null,5,true]
    对象
    var person={
        name:"wwy",
        age:18,
        tags:['html','css','js']
    }
</script>

全局变量
let i = 1;
ES6使用：let

添加严格检查模式，预防javascript的随意导致产生的一些问题
局部变量都使用let去定义。

<script>
	'use strict'
</script>

字符串—详细
1.转义：’ \n \u**** \x**
2.模板字符串
let name = “wwy”;
let msg = '你好，${name};//在java中我们使用+号拼接字符串
3.字符串长度： console.log(msg.length);
4.大小写转换：msg.toUpperCase() msg.toLowerCase()
5.获取字母下标：msg.indexof(‘好’);
6.字符串截取：msg.substring(1,3);

数组—详细
Array可以包含任意数据类型。

var arr = [1,2,3,4,5];
长度(可以赋值，起到扩容。如果赋值过小会使得数据丢失)
arr.lenth
数组截断:arr.slice(1,3);====> 2，3

增加元素(在尾部增加三个元素):arr.push('a','b','c');
弹出元素(弹出一个尾部元素):arr.pop()

shift():头部压入
unshift():头部弹出

排序：arr.sort()

元素反转：arr.reverse()

数组拼接：arr.concat([1,2,3]); //没有修改原来数组

链接符：arr.join('-')

多维数组：let arr = [[1,2],[3,4]];
arr[1][1];

对象—详解

	var person = {
		id:123,
		name:"wwy",
		age:18
	}
//使用一个不存在的对象属性，不会报错。undefined

///删除对象属性：delete person.age;

//给对象添加属性值：person.addr =  "合肥";

//判断属性值是否在这个对象中：
'name' in person
'toString' in person //父类方法

//判断一个属性是否还这个对象自身拥有的person.hasOwnProperty('toString'); //false

流程控制：if while for 和java一样
forEach遍历

var num = [12,5,6,1,0,7,13,2];
num.forEach(function(value){
	console.log(value);
});

for(var number in num){//遍历下标
	console.log(number);
}

for(var number of num){//遍历元素
    console.log(number);
}

Map

var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom');//通过key获得value
map.set('admin',123456);
map.delete("tom");
console.log(name);

for(let value of map){//let是es6的局部变量，用完就没了。var相当于全局变量。
    console.log(value)
}

Set

var set new Set([1,2,3,3,3]);//会去重

set.add(4);//添加
set.delete(1);//删除
set.has(3);//判断set中是否含有某个元素

for(let number of set){
    console.log(number);
}

iterator迭代器

ES6新特性

通过for of / for in（下标）
遍历数组
var arr = [7,5,9,0];
for( var x of arr){
    console.log(x);
}
遍历map
var map = new Map([["tom",100],["jack",90],["haha",80]]);
for(let x of map){
    console.log(x);
}
遍历set
var set = new Set([5,6,7]);
for(let x of set){
    console.log(x);
}

函数

方法一:
function abs(x){
    if(x!=='number'){//参数验证，手动抛出异常。
        throw 'x不是一个数字';
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}
方法二：
var wwy = function(x){
    if(x>=0){
        return x;
    }else{
       return -x; 
    }
}

arguments（将函数输入的参数封装，可以判断出有多少个参数）

for(var i=0;i<arguments.lenth;i++){
	console.log(argument(i));
}

ES6引入新特性 ，获取除了已经定义的参数之外的所有参数

function test(x,i,...rest){
    console.log(x);
    console.log(i);
    console.log(rest);//将多传入的参数放在数组里面。
}

变量作用域

假设在函数体中声明，则在函数体外不可以使用（如果非要使用，可以看下 闭包 ）

但是俩个函数使用相同变量名是不冲突的。

内部函数可以访问外部函数成员，但是外部函数不能访问内部函数成员

function test(){
    var x = 1;
    x = x + 1;
}
x = x + 2;//Uncaught ReferenceError: x is not defined


function abc(){
    var x=1;
    function def(){
        var y = x+1;//2
    }
    var z = x+y;//报错
}

假设，内部函数与外部函数的变量重名。

function test(){
	var x = 1;
	function test2(){
        var x = 'A';
        console.log('inner'+x);  //innerA
    }
    console.log('outer'+x);  //outer1
    
    test();
}
//类似双亲委派机制：从内向外找

全局变量

<script>
	var x = 1;
	function f1(){
        console.log(x);
    }
	function f2(){
        console.log(x);
    } 
</script>

全局对象window

<script>
	var x ='xxx';
	alert(x);//window.alert(x);
	alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下 window.alert(window.x);

	var old_alert = window.alert;
	old_alert(x);

	window.alert = function(){//重新修改alert
        
    }
	window.alert(123);//失效
</script>

规范

由于我们所有的全局变量都会绑定到我们的windows上。如果不同的js文件，使用相同的全局变量，就会产生冲突。
我们在自己的javascript空间定义一个对象用来存自己的变量。

var myValue = {};
myValue.name = 'wwy';

jQuery的javascript里面就是这么干的，
它将它里面的变量全部存到jQuery里面去了
为了书写方便，用$()代替。
jQuery=====>$()

局部作用域

function add(){
    for(var i=0;i<100;i++){
        console.log(i)
    }
    console.log(i+1);//101。i出了作用域还能用
}

es6使用let解决
function add(){
    for(let i=0;i<100;i++){
        console.log(i)
    }
    console.log(i+1);//i is not define
}

常量

在ES6之前定义变量：全部用大写字母编写。var PI = 3.14;
ES6的时候：const PI = 3.14;//只读变量

内部对象

标准对象

typeof 123；typeof ‘123’; typeof true; typeof NaN; typeof [ ]; typeof { }; typeof Math.abs;

1.Date

var now = new Date();
now.getFullYear();//年
now.getMonth();   //月0~11
now.getDate();    //日
now.getDay();    //星期几
now.getHours();   //小时
now.getMinutes(); //分
now.getSeconds(); //秒
now.getTime();    //时间戳1970 1.1 00:00:00
now.toLocaleString();
now.toGMTString();

json

json：是一种轻量级的数据交换格式。

在javascript中一切皆为对象、任何js支持的类型都可以使用JSON来表示；

格式：

对象都用{ }

数组都用[ ]

所有的键值对都是用key:value

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

Ajax

原生的js写法 xhr异步请求

jQuery封装好的方法 $("#name").ajax("")

axios请求。专业的

面向对象编程

什么是面向对象：

类：模板 原型对象

对象：具体的实例

原型：

var wwy = {
    name:"wwy",
    age:18,
    run:function(){
        console.log(this.name+"run.....");
    }
};

var xiaoming = {
    name:"小明";
};

//xiaoming的原型是wwy
xiaoming.__proto__ = wwy;

class继承

class关键字是在es6引入的

//定义一个学生类
class Student{
    onstructor(name)//构造器
    	this.name = name;
    }
	hello(){
        alert('hello');
    }
}

//继承Student
class HighSchoolStudent extends Student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert("中学生")
    }
}

var wwy = new Student("wwy");

本质:查看对象原型

自己创建的对象继承Object，Object无限继承Object

操作BOM对象（重点）

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

BOM：浏览器对象模型

浏览器内核：IE6~11 、 Chrome (Webkit ) 、 Safari （Webkit ）、FireFox（Gecko） 、 Opera

三方：QQ浏览器、360浏览器

window 浏览器窗口 （重要）

window.alert(1);//弹框
window.innerHeight;//获取浏览器高度

Navigator 封装浏览器的信息 ×

navigator.appName;//当前应用名
navigator.appVersion;//浏览器版本号
navigator.userAgent;//查看用户的浏览器，系统版本，和浏览器内核等
navigator.platform;//获取一个系统的版本

screen

screen.width;//屏幕宽度
screen.height;//屏幕高度

location 代表当前页面的URL信息 (重要)

lacation

host:"www.baidu.com"//主机
href:"https://www.baidu.com"//指向
protocol:"https:"//协议
reload:f reload(); //刷新网页
//设置新的地址
location.assign('https://wwww.xxxxxx.com')

document 可以改变html DOM树 （重要）

document.title = 'wwy';//可以将网页名改为wwy
document.cookie; //获取网页cookie

var dl = document.getElementById('app');

<dl id="app">
    <dt>java</dt>
    <dt>javaSE</dt>
    <dt>javaEE</dt>
</dl>

劫持cookie原理

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

服务器端可以设置cookie：httpOnly

history 代表浏览器的历史记录

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

操作DOM对象（重点）

DOM：文档对象模型

更新：更新DOM节点

遍历：得到DOM节点

删除：删除一个DOM节点

添加：添加一个新的节点

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

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

获取节点
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementsById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');

var childrens = father.children;//获取父节点下的所有子节点
var first = childrens[0];
father.firstChild;//获取第一个孩子节点
father.lastChild;//获取最后一个孩子节点

//这些都是原生代码，以后使用jQuery代替

更新节点
//修改文本值
p1.innerText = 'wwy';
//插入html代码.可以解析HTML
p1.innerHTML = '<strong>123</strong>';
//改CSS
p1.style.color = 'red';
p1.style.fontSize = '20px';//_转驼峰命名
p1.style.padding = '2em';

删除节点
//先获取父节点，在通过父节点删除自己
var baba = p1.parentElement;
baba.removeChild(self);

//删除多个节点的时候children是在时刻变化的
father.removeChild(father.children[0]);//删除0后1->0  2->1
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);

插入节点
//我们获得某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM已经存在元素，那么就不能这么干了会产生覆盖了。如果这种情况我们会使用追加。

//将已存在节点移动到另一个位置。
var move = document.getElementById("move");//获取待移动点
var father = document.getElementById("father");//获取移动位置的父节点
father.appendChild(move);//将外面的move节点移到father节点里面

//通过JS创建一个新的节点，放入在已有节点内。
var newP = document.createElement('p');//创建一个p标签
newP.id = 'newP';//给P标签赋值一个id。等价  newP.setSttribute('id','newP');
newP.innerText = 'Hello JS';//在P标签内增加一段文字
father.appendChild(newP);//将新创建的P放入到father节点

//创建一个标签节点<script type="text/javascript" src=""></script>
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');//以键值的方式

 //创建一个style标签节点，并插入head节点中。
=============================
<style type="text/css">
    body{
      background-color: red;
    }
</style>
=============================
var myStyle = document.createElemet('style');//创建一个空的style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML= 'body{bacground-color:red}';//设置标签内容
document.getElementByTagName('head')[0].appendChild(myStyle);//将新创建的标签插入，head

//在任意位置插入
var p2 = document.getElementByClassName('p2');//某个节点
var move = document.getElementById('move');//待移动节点
var father = document.getElementById('father');//莫节点的父级节点
father.insertBefor(move,p2);//在某节点（p2）的前插入一个节点(move)
//father.removeChild(deletChiled);//删除一个节点
//father.replaceChild()

操作表单

表单是什么 form DOM树

文本框：text

密码框：password

下拉框：select option

单选框：radio

多选框：checkbox

按钮：重置（reset）、提交（submit）、普通按钮（button）、图片按钮 >

多行文本：textarea 文本内容

文件域：file

邮箱框：email

数字框：number

滑块框：range

搜索框：search

隐藏域：hidden

获取form表单的内容
var input_text = document.getElementById('username');

var text = input_text.value;//得到输入框内容
input_text.value = '123';//修改输入框的值

<form action="post">
    <input type="radio" name="sex" value="man" id="boy" checked>男
    <input type="radio" name="sex" value="women" id="girl">女
</form>
<script>
    //判断选中与修改选中
    var boy = document.getElementById('boy');
    var girl = document.getElementBtId('girl');
    if(boy.checked== true){
        alert("男孩被选中");
    }eles{
        alert("女孩被选中");
    }
    boy.checked = true;//赋值
</script>

<from action="post">
	用户名:<input type="text" id="username">
    密码:<input type="password" id="pwd">
</from>
<script>
	function fix(){
        var uname = document.getElementById('username');
        var pwd = document.getElementById('pwd');
        console.log(uname.value);
        console.log(pwd.value);
        pwd.value='123456';
    }
</script>

表单MD5加密

<form action="" method="post" onsubmit="return change()">
    用户名:<input type="text" id="username" name="username"/>
    密码:<inout type="password" id="input-password"/>//这个不提交，因为没有name
    <input type="hidden" id="md5-password" name="password"/>//最终提交的是影藏域的
    <input type="submit"/>
</form>

<script>
	function change(){
        var uname = document.getElementById('username');
        var pwd = document.geyElementById('input-password');
        var md5pwd = document.getElementById('md5-password');
        md5pwd.value = md5(pwd.value);//MD5加密
    }
</script>

jQuery

jQuery是封装了许多javaScript函数的库

用原生结合jQuery    
let elementById = document.getElementById('test-jquery');
jQuery(elementById).click(function () {
    alert("test")
});

简洁jQuery   $(选择器).事件;
$('#test-jquery').click(function () {//列举这俩个对比主要告诉，jQuery封装的方法都是用jQuery点的，后又用$替代
    alert("Hello , jQuery!");
});

jQuery 选择器

<script>
//标签
    document.getElementByTagName();
//id
    document.getElementById();
//类
    document.getElementByClassName();
    
//jQuery
    $('p').clinck();     //标签选择器
    $('#id1').clinck();  //id选择器
    $('.class1').click();//class选择器
</script>

jQuery事件

鼠标事件 、键盘事件 、 其它事件。

鼠标事件
mousedown();  //鼠标按下
mouseenter(); //
mouseleave(); //鼠标离开
mousemove();  //鼠标移动
mouseout();   //
mouseover();  //鼠标点击结束
mouseup();    //

<script src="../js/jquery-3.6.0.js"></script>
<style>
    #divMove{
        width: 500px;
        height: 500px;
        border:1px solid red;
    }
</style>
=============================================
<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>

节点文本操作

<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>
<script>
    let test_ul = document.getElementById("test-ul");
    test_ul.innerText="";
    $("#test-ul").text();
    test_ul.innerHTML="";
    $("#test-ul").html();

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

</script>

CSS操作

<body>
    <ul id="test-ul">
        <li class="js">JavaScript</li>
        <li name="python">Python</li>
    </ul>
    <script>
        $('#test-ul li[name=python]').css({"color":"red","backgroundColor":"gray"});
        $('#test-ul li[name=python]').show();//显示
        $('#test-ul li[name=python]').hide();//影藏。本质就是display:none;
        $('#test-ul li[name=python]').toggle();//显示与影藏相互切换
    </script>
</body>

Ajax

$('#form').ajax()

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});