前端三剑客（大一学习笔记）

html

概念

HTML ：超文本标记语言

超文本：对一些特定的写法赋予了特殊的意义

标记语言：<>用这个符号圈上的语言，都叫标记语言。html由多个标记组成。

解释型语言：没有编译过程，通过特定的工具，直接展示我们的程序（html通过浏览器）。

结构

html分为两个部分，分别为head和body

​

<  >©&

​

</body> </html>

标签

语法：<标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>

必须闭合

标签分类

块：显示成一行的标签 比如<p></p>

内联：不显示成一行的标签

 <!--块标签-->
 <p>sdfdsfds</p>
 <p>sdfdsfds</p>
 <!--内联标签-->
 <a>baidu</a><a>sohu</a>

标签库

文本标签 <h1>...<h6> <b> <i> <em>

段落标签 <p>

块标签 <div> 本身没有意义，他是一个标签容器 容器就是能装东西的就叫容器

span标签 等同于div 区别是内联标签

超链接 a链接

target属性:规定在何处打开链接文档，

取值范围：

_blank:在新窗口中打开链接文档

_self:默认，在相同的框架中打开被链接文档。

_parent:在父框架集中打开被链接文档。

_top:在整个窗口中打开被链接文档。

图片

src：图片的路径

title：鼠标悬停时提示的信息

跑马灯 marquee

direction：left right down up 方向

有序列表:

​

1. a
2. b
3. c
4. d
5. e

​

type：序号类型 分别1 ，A a I i(罗马数字)

无序列表

​

• a
• b
• c

​

type：序号类型 circle(空心圆)、disc(实心圆)、square(正方形)

表格

table标签：表格标签

caption标签：表格标题

thead标签：表头单元格容器。

tbody标签：表体单元格容器

tfoot标签：表尾单元格容器

tr标签：表格中的行。

th标签：表头中的单元格。

td标签：表体或表尾单元格

表格属性：

border(边框)属性：border=“number”

background(背景)属性： background =“背景图片”

bgcolor(背景颜色)属性：bgcolor = “颜色”

width、height属性：width= “300”height=“200”

align:表格的位置由<table>元素的align属性决定，可选值包括left、center、right。

valign:表格内文字的位置是由<td>的align和valign决定的，valign可选值包括top、middle、bottom。

cellpadding(填充)属性:设置单元格之间的距离。cellspacing(间距)属性:设置单元格边框与内容之间的距离

rowspan属性 跨行 colspan属性 跨列 bgcolor 背景色 align=center left right

表单

form标签：<form action="" method=""></form>

action属性：表单的提交地址（提交到哪里去，一般是一个url）

method属性：

提交数据长度不同，get：不超过255个字符，post理论上不受限制。

安全性get在地址栏显示信息，不安全。

缓存机制不同，get请求的地址会保存到浏览器的访问历史记录中，post不会。

enctype： application/x-www-form-urlencoded 普通默认的方式 multipart/form-data传递附件时使用 text/plain无格式，一般不用

input标签：

文本框 type="text"

密码框 type="password"

单选按钮 type="radio"

多选按钮 type="checkbox"

下拉框 <select>

文本域 <textarea>

通用属性：name 标签的名字，通过名字对标签进行操作

value 值

readonly 只读，能看不能修改（只对text password hidden有效）

checked 默认选中（对radio，checkbox有效）

disabled 不可用

​

用户名：
密码：
性别：	男 女
民族：	锡伯族                         俄罗斯族
爱好：	篮球 音乐 读书
简介：

             读书             音乐             篮球         
 

​

iframe

该标签可以在当前网页上引入其他网页资源

属性	值	描述
src	URL	规定在iframe中显示的文档的URL
frameBorder	1/0	规定是否显示框架周围的边框
scrolling	yes /no/auto	规定是否在iframe中显示滚动条
width/height	Pixels/%	定义iframe的宽度/高度
name:		框架标识名
noresize：	noresize	是否允许调整框架窗口大小

​

​

html5

块标签

在html5中，增加了很多和div功能一样的容器标签，下面这些就是。起到的作用和div一样。他们提高了代码的可读性。

article：标签装载显示一个独立的文章内容，例如一篇文章、报导、小说。

section ：标签定义文档中的节（section、区段），例如一个小说中的一章节。

aside：用来装载非正文类的内容，对于主题内容的说明。

header ：标签定义文档的页面头部，通常是一些引导和导航信息

footer ： 标签定义 section 或 document 的页脚nav ：标签定义显示导航链接

音频播放

 <audio src="resource/驼铃.mp3" controls autoplay>
     你的浏览器不支持
 </audio>

视频播放

 <video src="resource/0109上午.mp4" controls autoplay width="200" height="100">
     你的浏览器不支持
 </video>

按顺序播放第一个能播放的视频

​

​

输入框

color：选择颜色

date，month等 选择时间日期

number 只允许输入数字

css

层叠样式表。

层叠：有多种方式，可以对其中的某个元素进行修饰。

样式：解决html和xml的美化（烟熏妆）

背景

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

文字

属性	描述
color	设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。
text-decoration	向文本添加修饰。
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母。
unicode-bidi	设置文本方向。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。

属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

链接

 a:link {color:#FF0000;}     /* 未被访问的链接 */
 a:visited {color:#00FF00;}  /* 已被访问的链接 */
 a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
 a:active {color:#0000FF;}   /* 正在被点击的链接 */

列表

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

边框

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

boxer

padding 内边距 margin 外边距

display

行元素：block，又叫块元素，指的是可以占一行的元素。

行内元素：inline又叫内联元素，指的是多个元素可以在一行显示。

display取值：block 行元素 inline 行内元素 inline-block 行内元素可以指定行元素属性 none 隐藏

定位和浮动

文档流：流的特点不间断，连续的。文档流，就是我们在定义html元素时，是连续的。

默认情况下，html布局定位采用的就是文档流的形式。

定位共有4种状态：

static：默认文档流形式，可以忽略不写。

fixed：固定模式，固定在屏幕的一个位置，不随文档流的移动而移动（回到顶部）。

         .fixed{
             position: fixed;
             right: 15px;
             bottom: 100px;
         }

relative：相对定位模式，指的是在原来本元素在文档流中的位置进行偏移，本身还在文档流中。

        .relative{
            position:relative;
            left: 100px;
            top: 100px;
        }

absolute：绝对定位。相对于已经定位的父容器进行定位，如果父容器没有定位，则相对于整个文档（body）进行定位。定义absolute之后，如果没有给偏移量，它依然在文档流中。如果进行了偏移，可以通过z-index设定图层索引。

		.bg{/*背景图*/
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 0;
        }
        .plane{
            position: absolute;
            left: 100px;
            top: 200px;
            z-index: 3;
        }
        .tank{
            position: absolute;
            left: 35px;
            top:10px;
            z-index: 1;
        }
        .bullet{
            position: absolute;
            left: 100px;
            top:100px;
            z-index: 999;
        }

浮动：float 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。脱离文档流。

但是文档流中的内容，需要预留出浮动元素的位置。

表格

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

table,th,td{
            border: 1px solid #98bf21;
        }
        th{
            width: 200px;
            text-align: left;
            padding: 5px;
            background-color: rgb(167,201,66);
            color: white;
        }
        td{
            font-weight: 800;
        }
        .tr{
            background-color: rgb(234, 242, 211);
        }

网格布局

display:grid

.container{
            display: grid;/*网格布局*/
            grid-template-rows: repeat(20,1fr);/*等分屏幕高20份*/
            grid-template-columns: repeat(22,1fr);/*等分屏幕宽22份*/
            border: 1px solid black;
            grid-gap: 10px;
        }
        .container .item{
            background-color: beige;
            color: green;
            text-align: center;
            font-size: larger;
            font-weight: 300;
        }
        .item1{
            grid-row: 1 / 4;
            grid-column: 1 / 7 /*1到6 表示从1到6，不包括7*/
        }
        .item2{
            
            grid-row: 1 / 9;
            grid-column: 7 / 17; 
        }

        .item3{
            
            grid-row: 1 / 4;
            grid-column: 17 / 23; 
        }
        .item4{
            
            grid-row: 4 / 9;
            grid-column: 1 / 7; 
        }
        .item5{
            
            grid-row: 4 / 9;
            grid-column: 17 / 23; 
        }

其它

transform

 rotate 旋转 单位是deg    scale：放大或者缩小 （大于1是放大 小于1是缩小） translate:位移  两个参数  都是像素

opacity:取值 0-1之间，表示透明度

background-image:linear-gradient(red,yellow,blue) 渐变色作为背景图

选择器优先级：行内>id>类>标签

JS

JavaScript：运行在浏览器端（软件上）的脚本语言。它可以实现表单的校验，提示，动画等和用户交互的功能。

在html的head或body中，编写在<script></script>标签下。

<!DOCTYPE html>
<head>
    <script>
    
        //对div1这个输入框 进行赋值 
        function fun1(){
            alert('网络连接失败！');//提示框
        }
        function fun2(){
            if(document.getElementById("input1").value==""){
                alert("请输入数据");
            }
            //F12 console可以进入网页的控制台
            console.log(document.getElementById("input1").value);
            document.getElementById("div1").innerHTML = document.getElementById("input1").value;
        }
    </script>
</head>
<body>
    <div id="div1"></div>
    <div><input id="input1" type="text" placeholder="请输入数据" /></div>
    <input type="button" value="确定" onclick="fun1()"/>
    <input type="button" value="赋值" onclick="fun2()"/>
</body>
</html>

变量

js中，变量使用var进行声明，在程序运算过程中，可以发生变化的标识符叫变量。

数据类型

js中，有以下数据类型字符串、数字、布尔、数组、对象、Null、Undefined

字符串：var str = "abcd1234";

数组操作：push向数组的最后，增加一个值 pop移除数组的最后一个元素

     <script>
         //字符串、数字、布尔、数组、对象、Null、Undefined
         var str = "abcd1234";//使用""标记的多个字符 叫字符串
         var no = 15;//数字类型
         var num = 15.3;//小数也是数字类型
         var flag = true;//布尔类型取值为true或者false
         var array = [1,2,3];//数组类型  用[]圈起来，里面存储多个数据 方便运算
         var v1 = null;//null 表示空  空间都没有
         var v2 = "";//空字符串  有空间 但没有内容
         var v3 = undefined;//表示未定义  只要出现undefined 就通过id或名字找 肯定写错了
 ​
         console.log(str);
         console.log(no);
         console.log(flag);
         console.log(array);
         console.log(v1);
 ​
         
 ​
     </script>

运算符

算数运算符

运算符	描述	例子	结果
+	加	x=y+2	x=7
-	减	x=y-2	x=3
*	乘	x=y*2	x=10
/	除	x=y/2	x=2.5
%	求余数 (保留整数)	x=y%2	x=1
++	累加	x=++y	x=6
--	递减	x=--y	x=4

赋值运算符 a+=b 相当于 a = a+b;

运算符	例子	等价于	结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

连接运算符： 字符串连接，也可以用+

比如var x = "a"; var y = x+"1"; 那么为的值为a1

逻辑运算符 & | ! ^ && ||

给定 x=5，下面的表格解释了比较运算符：

运算符	描述	例子
==	等于	x==8 为 false
===	全等（值和类型）	x=5 为 true；x="5" 为 false
!=	不等于	x!=8 为 true
>	大于	x>8 为 false
<	小于	x<8 为 true
>=	大于或等于	x>=8 为 false
<=	小于或等于	x<=8 为 true

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
||	or	(x5 || y5) 为 false
!	not	!(x==y) 为 true

分支语句

if，switch

 <!DOCTYPE html>
 <head>
     <script>
         function compare(){ 
             var x = document.getElementById("x").value;
             var y = document.getElementById("y").value;
             if(x<y){
                 alert(x+"<"+y);
             }else if(x>y){
                 alert(x+">"+y);
             }else{
                 alert(x+"=="+y);
             }
         }
         function result(){
             var a = document.getElementById("a").value;
             var b = document.getElementById("b").value;
             var ysf = document.getElementById("ysf").value;
             var result = null;
             /*
             if("+"==ysf){
                 //+ 在这里js理解为连接字符串，如果需要计算 需要将a和b都转换为数字 使用parseInt
                 result = parseInt(a) + parseInt(b);
             }else if("-"==ysf){
                 result = a - b;
             }else if("*"==ysf){
                 result = a * b;
             }else if("/"==ysf){
                 result = a / b;
             }else{
                 alert("请选择运算符");
                 return;//表示 function不在向下执行
             }
             */
             switch(ysf){
                 case "+":
                     result = parseInt(a) + parseInt(b);
                     break;
                 case "-":
                     result = a - b;
                     break;
                 case "*":
                     result = a * b;
                     break;
                 case "/":
                     result = a / b;
                     break;
                 default:
                     alert("请选择运算符");
                     return;//表示 function不在向下执行
             }
             alert(result);
         }
     </script>
 </head>
 <body>
     <div>
         <label>x：</label>
         <input id="x" type="text"/>
     </div>
     <div>
         <label>y：</label>
         <input id="y" type="text"/>
     </div>
     <div>
         <button id="bt" onclick="compare()">比较</button>
     </div>
     <hr>
     <div>
         <input type="text" id="a"/>
         <select id="ysf">
             <option></option>
             <option>+</option>
             <option>-</option>
             <option>*</option>
             <option>/</option>
         </select>
         <input type="text" id="b"/>
         <button id="bt" onclick="result()">计算</button>
     </div>
 ​
 </body>
 </html>

循环语句

<!DOCTYPE html>
<head>
    <script>
        var array = [1234,43523,4324,512,7643,566,57,2345,547634534,345345372];
        //打印出数组的所有元素 
        //数组的长度 使用array.length
        //定义i为array这个数组的下标  初始为0
        console.log(array.length);
        for(var i=0;i<array.length;i++){
            console.log(array[i]);
        }
        console.log("循环结束");
        var tmp = null;
        for(var i=0;i<array.length;i++){
            for(var j=i+1;j<array.length;j++){
                if(array[i]<array[j]){
                    tmp = array[i];
                    array[i] = array[j];
                    array[j] = tmp;
                }
            }
        }
        for(var i=0;i<array.length;i++){
            console.log(array[i]);
        }
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<head>
    <title>form标签</title>
    <script>
        var array = [1,2,67,3,456,4358,34,345];
        document.write(array+"<br>");//向文档中写入值
        array.push(456);//向array的末尾 压入一个值
        document.write(array+"<br>");
        array.pop();//将最后一个元素 从数组中移除
        document.write(array+"<br>");
        array.pop();
        document.write(array+"<br>");
        array.push(234);//向array的末尾 压入一个值
        document.write(array+"<br>");

        //判断数组中，是否存在67这个数字
        //while()//当语句
        var flag = false;
        var i = 0;//数组的索引
        while(i<array.length){
            if(array[i]==67){
                flag = true;
                break;//跳出当前循环语句块
            }
            i++;
            console.log("循环执行了"+i+"次");
        }
        if(flag){
            document.write(array+"中存在"+67);
        }else{
            document.write(array+"中不存在"+67);
        }
    </script>    
</head>
<meta charset="utf-8"/>
<body>
</body>
</html>

对象

万事万物皆对象（东西）。

创建对象的三种方式。

<!DOCTYPE html>
<head>
    <title>form标签</title>
    <script>
        //第一种创建对象的方式
        var person =  new Object();
        person.name="张三";
        person.age=25;
        person.sex="男";

        console.log(person);
        console.log(person.age);

        //第二种
        var person1 = {
            name:"张三",
            age:25,
            sex:"男"
        };
        console.log(person1);
        console.log(person1.age);

        //第三种方式 构造方法
        function person2(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        var p = new person2("李四",26,"女");
        console.log(p);
    </script>    
</head>
<meta charset="utf-8"/>
<body>
</body>
</html>

复杂对象及定义方法（函数）

 <!DOCTYPE html>
 <head>
     <title>form标签</title>
     <script>
         //创建一个复杂的对象  对象中可以定义属性
         var result = {
             msg:"操作成功",
             code:200,
             data:{//一个对象可以作为另一个对象的属性
                 deptName:"监测站",
                 noread:5
             },
             //小驼峰命名方式  多个单词组成的时候 第一个单词首字母小写  后面的单词首字母大写
             //大驼峰命名方式  多个单词组成的时候 所有的单词首字母大写
             salaryList:[//属性也可以是数组 数组元素是数字
                 150,170,190
             ],
             userList:[//对象还可以作为数组的元素
                 {
                     name:"张三",
                     dept:"动物园"   
                 },
                 {
                     name:"李四",
                     dept:"防疫站"
                 }
             ]
         }
         console.log(result);
         console.log(result.msg);
         console.log(result.data);
         console.log(result.data.deptName);
         console.log(result.salaryList);
         console.log(result.salaryList[0]);
         console.log(result.userList);
         console.log(result.userList[1]);
         console.log(result.userList[1].dept);
 ​
         //在对象中 可以定义方法(函数) 通过对象名.的方式进行调用
         function person(name,sex){
             this.name = name;
             this.sex = sex;
             this.show = function show(){
                 console.log(this.name+"--"+this.sex);
             }
         }
         var p1 = new person("王五","男");
         p1.show();
     </script>    
 </head>
 <meta charset="utf-8"/>
 <body>
 </body>
 </html>

json

JavaScript 对象表示法（JavaScript Object Notation）。

json就是一个字符串，通过key：value的方式，用来表示对象的数据。

• JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）

• JSON 是轻量级的文本数据交换格式

• JSON 独立于语言 *

• JSON 具有自我描述性，更易理解

json字符串和js对象可以互相转换

var str = JSON.stringify(result);//对象转json字符串

var result1 = JSON.parse(str);//json字符串转对象

 <!DOCTYPE html>
 <head>
     <title>form标签</title>
     <script>
         //创建一个复杂的对象  对象中可以定义属性
         var result = {
             msg:"操作成功",
             code:200,
             data:{//一个对象可以作为另一个对象的属性
                 deptName:"监测站",
                 noread:5
             },
             //小驼峰命名方式  多个单词组成的时候 第一个单词首字母小写  后面的单词首字母大写
             //大驼峰命名方式  多个单词组成的时候 所有的单词首字母大写
             salaryList:[//属性也可以是数组 数组元素是数字
                 150,170,190
             ],
             userList:[//对象还可以作为数组的元素
                 {
                     name:"张三",
                     dept:"动物园"   
                 },
                 {
                     name:"李四",
                     dept:"防疫站"
                 }
             ]
         }
         console.log(result);
         console.log(result.msg);
         console.log(result.data);
         console.log(result.data.deptName);
         console.log(result.salaryList);
         console.log(result.salaryList[0]);
         console.log(result.userList);
         console.log(result.userList[1]);
         console.log(result.userList[1].dept);
         //在对象中 可以定义方法(函数) 通过对象名.的方式进行调用
         function person(name,sex){
             this.name = name;
             this.sex = sex;
             this.show = function show(){
                 console.log(this.name+"--"+this.sex);
             }
         }
         var p1 = new person("王五","男");
         p1.show();
 ​
         console.log(result);
         var str = JSON.stringify(result);//json字符串
         console.log(str);
         //字符串还可以转换为对象
         var result1 = JSON.parse(str);
         console.log(result1);
     </script>    
 </head>
 <meta charset="utf-8"/>
 <body>
 </body>
 </html>

AJAX

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

 <!DOCTYPE html>
 <head>
     <title>form标签</title>
     <script>
         var xmlHttp;
         if (window.XMLHttpRequest){   
             xmlHttp=new XMLHttpRequest();
         }
 ​
         function executeData(){
             if (xmlHttp.readyState==4&& xmlHttp.status==200){      
                 console.log(xmlHttp.responseText);
                 var result = JSON.parse(xmlHttp.responseText);
                 if(result.status==1){
                     var live = result.lives[0];//取出第一条数据
                     var resultStr = live.province+live.city+" "
                         +live.weather+" "+live.winddirection+"风"+live.windpower
                         +"级 "+live.temperature+"度";
                     document.getElementById("result").innerHTML=resultStr;  
                 }else{
                     alert("查询失败！错误码："+result.infocode+" 错误信息："+result.info);
                 }
             }
         }
         function query(){
             var adcode = document.getElementById("adcode").value;
             var url = "https://restapi.amap.com/v3/weather/weatherInfo?city="+adcode+"&key=502bea062e873e919c4bfbbc13de1548";
             xmlHttp.onreadystatechange=executeData;//绑定回调函数的名字 获取网络请求结果后  到executeData中执行
             xmlHttp.open("GET",url,true);
             xmlHttp.send();
         }
     </script>    
 </head>
 <meta charset="utf-8"/>
 <body>
     <div id="result"></div>
     <div><lable>请输入地区编码：</lable><input type="text" id="adcode"/><input type="button" value="查询" onclick="query()"></div>
 </body>
 </html>

DOM

javascript可以通过dom访问html的所有元素。

dom document object model（文档对象模型）

通过document.getElementById或者getElementsByName可以获取html上的所有元素，通过js可以修改html的属性或者值

 <!DOCTYPE html>
 <head>
     <title>文档标题</title>
     <script>
         function changeSrc(){
             //通过文档对象模型document可以操作html
             document.getElementById("myImg").src="../../css/imgs/2.png";
         }
         function changeBgColor(){
             //通过dom可以  修改css
             document.getElementById("h1").style.backgroundColor = "yellow";
         }
         function changeDisplay(){
             //通过dom可以  修改css
             document.getElementById("a").style.display = "none";
         }
         function addP(){
             var para=document.createElement("p");//创建一个p元素
             var node=document.createTextNode("这是新段落。");//p元素的内容是这是新段落
             para.appendChild(node);//将这个叶子 放到新的p元素下面
 ​
             var element=document.getElementById("div1");
             element.appendChild(para);//将p元素 放入到div1元素的下面
 ​
             var child=document.getElementById("p1");
             //先找到你要移除的元素  然后找到它爹 然后在通过它爹 移除你要移除的元素
             child.parentNode.removeChild(child);//把p1这个节点 移除掉
 ​
         }
     </script>
 </head>
 <body>
     <a id="a" href="">我的链接</a>
     <h1 id="h1" style="background-color: red;">我的标题</h1>
     <div><img id="myImg" src="../../css/imgs/1.png"></div>
     <div id="div1">
         <p id="p1">这是一个段落</p>
         <p id="p2">这是另一个段落</p>
     </div>    
     <div>
         <button onclick="changeDisplay()">隐藏</button>
         <button onclick="changeBgColor()">修改背景色</button>
         <button onclick="changeSrc()">修改图片</button>
         <button onclick="addP()">加个P</button>
     </div>
 </body>
 </html>

内置对象

js中，对一些我们常用的类型，已经定义了一些对象，我们可以直接调用。

数字对象：JavaScript 只有一种数字类型。我们定义的所有数字类型，默认都是数字对象

字符串对象：和数字对象一样，所有字符串默认为字符串对象。

 <!DOCTYPE html>
 <head>
     <title>form标签</title>
     <script>
         var number = 3.1415926;
         var numStr = number.toString();//转换成字符串  也可以使用+""转换
         console.log(numStr+1);
         console.log(number.toFixed(2));//保留n位小数，采用四舍五入运算
         console.log(number.toFixed(3));
         var num = -3.564;
         console.log(num.toFixed(2));
         console.log(012+3);//0开头 表示8进制  0x开头表示16进制
         console.log(0x10+3);//0x开头 表示16进制 19
 ​
         var str = "爱上了大噶介绍了开发商大123125人sababc";
         
         console.log(str.length);//计算字符串的长度  中文算一个长度
         console.log(str.indexOf("大"));//定位字符串中某一个指定的字符首次出现的位置
         console.log(str.match("介绍"));
         console.log(str.match("介绍人"));//没有字符串 返回null
         console.log(str.replace("介绍","**"));//replace 替换 得到的是一个替换后的新字符串 原字符串没有变化
         //splite 按特定字符切割字符串
         var str1 = "1,2,3,4,5,6"; 
         var array = str1.split(",");
         console.log(array);
         for(var i in array){
             console.log(array[i]);
         }
         console.log(str.substr(3));//从3开始截取 一直到字符串的末尾
         console.log(str.substr(5,10));//从3开始截取 截取10位
         console.log(str.substring(5,10));//从5开始（包含） 到10（不包含）
         console.log(str.slice(5,10));//跟substring一样
     </script>    
 </head>
 <meta charset="utf-8"/>
 <body>
 </body>
 </html>

日期对象 new Date（）

 <!DOCTYPE html>
 <head>
     <title>form标签</title>
     <script>
         var rightNow = new Date();//创建当前时刻的时间戳
         console.log(rightNow);
         console.log(rightNow.getTime());//获取距1970年1月1日0时的毫秒值  
         //设置日期
         rightNow.setFullYear(2022,1,27);
         rightNow.setHours(13);//设置小时  也有设置分钟和秒
         rightNow.setMinutes(22);
         rightNow.setSeconds(33);
         //修改位yyyy-MM-dd HH:mm:ss
         var y = rightNow.getFullYear();
         var M = rightNow.getMonth();//月份从0开始
         var d = rightNow.getDate();
 ​
         var h = rightNow.getHours();
         var m = rightNow.getMinutes();
         var s = rightNow.getSeconds();
         var now = y+"-"+M+"-"+d+" "+h+":"+m+":"+s;
         console.log(now);
 ​
         //操作日期 在日历上 前后翻滚
         rightNow.setDate(rightNow.getDate()+2);
         console.log(rightNow);
         //日期可以进行比较
         console.log(new Date()>rightNow)
 ​
         function showDate(){
             var date = new Date();//获取当前的时间
             //修改位yyyy-MM-dd HH:mm:ss
             var y = date.getFullYear();
             var M = date.getMonth();//月份从0开始
             var d = date.getDate();
 ​
             var h = date.getHours();
             var m = date.getMinutes();
             var s = date.getSeconds();
             var now = y+"-"+M+"-"+d+" "+h+":"+m+":"+s;
             document.getElementById("date").innerHTML = now;
 ​
             t = setTimeout("showDate()",1000);//间隔1000毫秒 执行showDate
         }
     </script>    
 </head>
 <meta charset="utf-8"/>
 <body onload="showDate()">
     <div id="date"></div>
 </body>
 </html>

数组和数学

 <!DOCTYPE html>
 <head>
     <title>form标签</title>
     <meta charset="utf-8"/>
     <script>
         var array1 = [1,2,3];
         var array2 = [4,5,6];
         console.log(array1.concat(array2));//将array2追加到array1后面 得到一个新的数组 原数组不变
         console.log(array1);
         console.log(array2);
 ​
         console.log(array1.join("-"));//将数组的元素 形成字符串 用-连接 如果不写，默认用,连接
 ​
         var array3 = [121,252,383,541,825,1236,362,219];
         console.log(array3.sort());//sort排序 按照字典顺序排
 ​
         var array4 = ["abc","bc","abd","bcd","bd"];
         console.log(array4.sort());
 ​
         function sortBy(a,b){//排序算法
             return b-a;//正序的话  return a-b
         }
         var array5 = [121,252,383,541,825,1236,362,219];
         console.log(array5.sort(sortBy));
 ​
         console.log(Math.round(124321.55));//四舍五入  Math.round相当于一个工具
         console.log(Math.random());//获取一个0-1之间的伪随机数
         console.log(Math.floor(3.9));//截去法
         //我们要获取0-9之间的随机数
         console.log(Math.floor(Math.random()*10));
 ​
         //猜数字
         var result = "";//这个存放要猜中的数字
         while(result.length<4){
             var tmp = Math.floor(Math.random()*10);//长度不够4  就一直随机新数字
             if(result.indexOf(tmp+"")==-1){//说明tmp在result中不存在
                 result += tmp;
             }
         }
         function check(){
             var a = 0;
             var b = 0;
             var input = document.getElementById("num").value;
             for(var i in result){//循环两个字符串，判断每个字符之间是否相等
                 for(var j in input){
                     if(result[i]==input[j]){//如果字符相等，再继续判断
                         if(i==j){//如果字符相等的同时  位置也相同  说明一个A
                             a++;
                         }else{//字符相等的同时，如果位置不同  说明一个B
                             b++;
                         }
                     }
                 }
             }
             if(a==4){//如果结果为4个A，提示成功
                 alert("Success!");
             }else{//否则提示AB的个数
                 document.getElementById("result").innerHTML=a+"A"+b+"B";
                 document.getElementById("num").value="";//将数据框的内容清空
                 document.getElementById("num").focus();//将光标（焦点）移动到输入框内
             }
         }
     </script>    
 </head>
 <body>
     <div id="result"></div>
     <div>
         请输入数字：<input type="text" id="num"/>
         <button onclick="check()">我猜</button>
     </div>
 </body>
 </html>

正则表达式：RegExp 正确规则表达式，是在编程中用于描述匹配某一类文本的模式的一组特殊字符和普通字符。

 <!DOCTYPE html>
 <head>
     <title>form标签</title>
     <script>
         //手机号  以1开头  后面跟10个数字
         //var reg = new RegExp("[1]{1}[0-9]{10}");
         var reg = new RegExp("1[3456789]+\\d{9}");// \d里的\，属于转移字符 如果你需要一个\ 需要写\\
         console.log(reg.test("17894561233"));//true
         console.log(reg.test("12894561233"));//false
         console.log(reg.test("1789456122a"));//false
         console.log(reg.test("1789456123"));//false
         console.log(reg.test("27894561211"));//false
         console.log(reg.test("278945612113"));//false
         //email
         //reg = new RegExp("[A-z0-9]{1,}@[A-z0-9]{1,}.[A-z]{1,}");
         reg = new RegExp("[A-z0-9]+@[A-z0-9]+.[A-z]+");
         console.log(reg.test("adsfgasd23@234.abc"));
         console.log(reg.test("adsfgasd23@234.23"));
         console.log(reg.test("adsfgasd23@23423"));
         console.log(reg.test("adsfgasd2323423.com"));
         console.log(reg.test("@."));
 ​
         //汉字 
         reg = new RegExp("[〇-龥]+");
         console.log(reg.test("是"));//true
         console.log(reg.test("1"));//false
         console.log(reg.test("a"));//false
         console.log(reg.test("〇"));//true
         //密码  8位以上  必须包含大写 小写 数字 和特殊字符
         //密码这种复杂程度 不适用正则表达式，可以编程校验
         
     </script>    
 </head>
 <meta charset="utf-8"/>
 <body>
 </body>
 </html>

事件

onload 在文档加载结束后执行

onclick 点击执行

onblur 焦点丢失

onfocus 焦点进入

onmouseover 鼠标进入

onmouseout 鼠标移出

onchange 选择了其它选项

onkeydown 键盘按下

ondbclick 鼠标双击

 <!DOCTYPE html>
 <head>
     <title>form标签</title>
     <meta charset="utf-8"/>
     <script>
         console.log("js开始加载");
         function loaded(){
             console.log("文档加载结束后执行");
         }
         function checkUsername(){
             if(document.getElementById("username").value==""){
                 alert("用户名不能为空");
                 return;
             }
         }
         function focused(){
             console.log("进入了密码框");
         }
         function mouseOver(){
             document.getElementById("img").src="../../css/imgs/2.png";
         }
         function mouseOut(){
             document.getElementById("img").src="../../css/imgs/1.png";
         }
         function unload(){
             
         }
         function changed(){
             console.log(document.getElementById("nation").value);
         }
         function keyup(event){
             console.log(event.keyCode);
             if(event.keyCode==13){
                 alert("提交数据");
             }else{
                 console.log(document.getElementById("username").value);
             }
            
             
         }
         console.log("js加载结束");
     </script>    
 </head>
 <body onload="loaded()" onunload="unload()">
     <table>
         <tr>
             <td>用户名：</td>
             <td><input type="text" id="username" placeholder="请输入用户名" onblur="checkUsername()" onkeyup="keyup(event)"/></td>
         </tr>
         <tr>
             <td>密码：</td>
             <td><input type="password" id="password"  placeholder="请输入密码" onfocus="focused()"/></td>
         </tr>
         <tr>
             <td>确认密码：</td>
             <td><input type="password" id="repassword" placeholder="请确认密码" /></td>
         </tr>
         <tr>
             <td>民族：</td>
             <td>
                 <select id="nation" onchange="changed()">
                     <option value=""></option>
                     <option value="锡伯族">锡伯族</option>
                     <option value="俄罗斯族">俄罗斯族</option>
                 </select>
             </td>
         </tr>
     </table>
     <img id="img" src="../../css/imgs/1.png" onmouseover="mouseOver()" onmouseout="mouseOut()">
 </body>
 </html>

BOM

bom（browser object model），叫浏览器对象模型，可以通过bom对浏览器的功能进行操作。

包含window，screen，history等对象及open，close等函数。

 <!DOCTYPE html>
 <head>
     <title>form标签</title>
     <meta charset="utf-8"/>
     <script>
         var w=window.innerWidth
         || document.documentElement.clientWidth
         || document.body.clientWidth;
 ​
         var h=window.innerHeight
         || document.documentElement.clientHeight
         || document.body.clientHeight;
         console.log("浏览器工作区域的宽高："+w+"-"+h);//这个是body的宽高 一般web应用采用这个
         
         console.log("可用屏幕宽高"+screen.availWidth+"-"+screen.availHeight);//这个是屏幕的宽高  移动应用采用这个
 ​
         var newWindow;//全局作用域
         function openNewWindow(){
             newWindow = window.open("","新窗口",
             "height=100, width=400, toolbar= no, menubar=no, scrollbars=no, titlebar = no,  location=no, status=no,top=100,left=300");
             newWindow.document.write("刚打开的新窗口");
         }
         function move(){
             newWindow.moveTo(500,200);
         }
         function resize(){
             newWindow.resizeTo(800,200);
         }
         function closeNewWindow(){
             newWindow.close();
         }
         function closeSelf(){
             window.close(); 
         }
         function openBaidu(){
             //window.open("http://www.baidu.com","新窗口",
             //"height=100, width=400, toolbar= no, menubar=no, scrollbars=no, titlebar = no,  location=no, status=no,top=100,left=300");
             window.open("event.html","新窗口",
             "height=100, width=400, toolbar= no, menubar=no, scrollbars=no, titlebar = no,  location=no, status=no,top=100,left=300");
         }
         function gotoEvent(){
             //window.location.href="http://www.baidu.com";
             location.href="event.html";
         }
         function forward(){
             history.forward();
         }
         function testConfirm(){
             if(confirm("您确定要输入信息吗？")){
                 var name = prompt("请输入名字","");
                 console.log(name);
             }
         }
     </script>    
 </head>
 <body>
     <div>
         <button onclick="openNewWindow()">打开新窗口</button>
         <button onclick="openBaidu()">打开百度</button>
         <button onclick="closeNewWindow()">关闭新窗口</button>
         <button onclick="move()">移动新窗口</button>
         <button onclick="resize()">resize新窗口</button>
         <button onclick="closeSelf()">关闭自己</button>
         <button onclick="gotoEvent()">去event</button>
         <button onclick="forward()">返回</button>
         <button onclick="testConfirm()">confirm</button>
     </div>
 </body>
 </html>

jQuery

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

选择器

选择器：和dom相似，可以定位到html中的元素。css，id和元素选择器三种。

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的第一个元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

 <!DOCTYPE html>
 <head>
     <title>form标签</title>
     <meta charset="utf-8"/>
     <script src="jquery.min.js"></script>
 </head>
 <body>
     <p>这个是元素选择器</p>
     <div class="div1">
         这个是css选择器
         <p>这是css里的p</p>
     </div>
     <div>
         <input type="text" id="name"/><button>提交</button>
     </div>
 </body>
 </html>
 <script>
     $("button").click(function(){
         //var name = document.getElementById("name").value;
         var name = $("#name").val();//和上面是一个意思  id选择器 使$("#id")的方式  val() 相当于js的value
         var p = $("p").text();//元素选择器 获取的是页面上的所有p元素  $("元素名字")  text()是获取元素中的文本
         var div1 = $(".div1").text();//css选择器 $(".className")
         var div1P = $("p.div1").text();// a+++b
 ​
         console.log(p);
         console.log(div1);
         console.log(div1P);
         alert(name);
     });
 </script>  

html操作

• text() - 设置或返回所选元素的文本内容

• html() - 设置或返回所选元素的内容（包括 HTML 标记）

• val() - 设置或返回表单字段的值

• attr() 设置或返回html的属性

   <!DOCTYPE html>
   <head>
       <title>form标签</title>
       <meta charset="utf-8"/>
       <script src="jquery.min.js"></script>
       <script>
           //匿名函数  执行的是onload
           $(document).ready(function(){
               console.log($("#div1").text());
               console.log($("#div2").html());
               console.log($("#input").val());
               $("button").click(function(){
                   $("#div1").text("div1的新内容");//设置文本
                   $("#div2").html("<a href='http://www.baidu.com'>百度</a>");
                   $("#input").val("修改input的值");
                   $("img").attr("src","../css/imgs/2.png");//修改img元素的src属性
               });
           });
       </script>  
   </head>
   <body>
       <div id="div1">测试text</div>
       <div id="div2">测试html</div>
       <div><img src="../css/imgs/1.png"></div>
       <div ><input type="text" id="input" value="input的默认值"/></div>
       <div><button>修改</button></div>
   </body>
   </html>

  • append() - 在被选元素的结尾插入内容 （在容器内追加）

  • prepend() - 在被选元素的开头插入内容

  • after() - 在被选元素之后插入内容 (在容器外加入)

  • before() - 在被选元素之前插入内容

     <!DOCTYPE html>
     <head>
         <title>form标签</title>
         <meta charset="utf-8"/>
         <script src="jquery.min.js"></script>
         <script>
             //匿名函数  执行的是onload
             $(document).ready(function(){
                 $("#append").click(function(){
                     //容器内追加
                     $("#div1").append("<div style='background-color: blue;display: inline-block;'>内容c</div>");
                 });
                 $("#after").click(function(){
                     //容器外追加
                     $("#div1").after("<div style='background-color: blue;display: inline-block;'>内容c</div>");
                 });
                 $("#add").click(function(){
                     var name = $("#name").val();
                     var age = $("#age").val();
                     $("#name").val("");
                     $("#age").val("");    
                     var tmpHtml = "<tr><td>"+name+"</td><td>"+age+"</td></tr>";
                     $("#t1").append(tmpHtml);
                 });
             });
         </script>  
         <style>
             table,th,td{
                 border: 1px solid #98bf21;
             }
             table{
                 border-collapse: collapse;
             }
         </style>
     </head>
     <body>
         <div id="div1" style="background-color: yellow;">
             <div style="background-color: red;display: inline;">内容a</div>
             <div style="background-color: green;display: inline;">内容b</div>
         </div>
         <div>
             <button id="append">append</button><button id="after">after</button>
         </div>
         <div>
             <input type="text" id="name" >
             <input type="text" id="age" >
             <button id="add">添加</button>
         </div>
         <div>
             <table id="t1">
                 <tr>
                     <th>姓名</th><th>年龄</th>
                 </tr>
             </table>
         </div>
     </body>
     </html>
     ​

    • remove() - 删除被选元素（及其子元素）

    • empty() - 从被选元素中删除子元素

 <!DOCTYPE html>
 <head>
     <title>form标签</title>
     <meta charset="utf-8"/>
     <script src="../jquery.min.js"></script>
     <script>
        $().ready(function(){
         $("#remove").click(function(){
             $("#div1").remove();
         });
         $("#empty").click(function(){
             $("#div1").empty();
         });
         $("#removeDiv2").click(function(){
             $("p").remove("#div2");
         });
         $("#removeP").click(function(){
             $("p").remove("p");
         });
         $("#removeA").click(function(){
             $("p").remove(".a");
         });
 ​
        });
 ​
     </script>  
 </head>
 <body>
     <div id="div1" style="border: 1px solid black;background-color: yellow;width: 300px;height: 200px;">
         <p id="div2">第一行  id选择器</p>
         <p class="a">第二行p class 为a</p>
         <p class="b">第三行p class 为b</p>
     </div>
     <div>
         <button id="remove">remove</button>
         <button id="empty">empty</button>
         <button id="removeDiv2">removeDiv2</button>
         <button id="removeP">removeP</button>
         <button id="removeA">removeA</button>
     </div>
 </body>
 </html>
 ​

• addClass() - 向被选元素添加一个或多个类

• removeClass() - 从被选元素删除一个或多个类

• toggleClass() - 对被选元素进行添加/删除类的切换操作

• css() - 设置或返回样式属性

• width()

• height()

• innerWidth()

• innerHeight()

• outerWidth()

• outerHeight()

 <!DOCTYPE html>
 <head>
     <title>form标签</title>
     <meta charset="utf-8"/>
     <script src="../jquery.min.js"></script>
     <style>
         .bold{
             font-size: larger;
             font-weight: 800;
         }
         .blue{
             color:blue;
         }
     </style>
     <script>
         $().ready(function(){
             $("#add").click(function(){
                 console.log("xxx");
                 $("h1,h2,p").addClass("bold");
                 // $("h2").addClass("bold");
                 // $("p").addClass("bold");
                 $("div").addClass("bold blue");
                 // $("div").addClass("bold");
                 // $("div").addClass("blue");
             });
             $("#remove").click(function(){
                 $("h1,h2,p").removeClass("bold");
                 $("div").removeClass("bold blue");
             });
             $("#toggle").click(function(){
                 $("h1,h2,p").toggleClass("bold");//相当于在行内直接写样式 .blue{}
                 $("div").toggleClass("bold blue");
             });
             $("#set").click(function(){
                 $("#h1").outerWidth("100");
                 $("div").css("color","red");//相当于在行内直接写样式 style="color:red"
             });
             $("#get").click(function(){
                 console.log($("#h1").height());
                 console.log($("#h1").width());
                 console.log($("#h1").innerHeight());
                 console.log($("#h1").innerWidth());
                 console.log($("#h1").outerHeight());
                 console.log($("#h1").outerWidth());
                 console.log($("#h1").outerWidth(true));
                 console.log($("#h1").outerHeight(true));
                 console.log($("div").css("color"));//新
             });
         });
     </script>  
 </head>
 <body>
     <h1 id="h1" style="border: 1px solid red;margin: 20px;padding: 50px;">这是h1的文字</h1>
     <h2>这是h2的文字</h2>
     <p>这个是p</p>
     <div>这个是div</div>
     <button id="add">添加样式</button>
     <button id="remove">移除样式</button>
     <button id="toggle">切换样式</button>
     <button id="get">获取div样式</button>
     <button id="set">设置div样式</button>
 </body>
 </html>

效果

hide show 显示隐藏 toggle 切换

fadeIn fadeOut 淡入淡出 toggle 切换

slideDownUp slideDown 抽屉

 <!DOCTYPE html>
 <head>
     <title>form标签</title>
     <meta charset="utf-8"/>
     <script src="../jquery.min.js"></script>
     <script>
         $().ready(function(){
             $("#hide").click(function(){
                 //$("#div1").hide();
                 $("#div1").hide(2000);//通过时间控制  2000毫秒
             });
             $("#show").click(function(){
                 //$("#div1").show();
                 $("#div1").show("fast");//系统定义的一个单位
             });
             $("#hideShow").click(function(){
                 //$("#div1").toggle();
                 $("#div1").toggle(3000);
             });
             $("#fadeIn").click(()=>{
                 $("#div2").fadeIn();
                 $("#div3").fadeIn(2000);
                 $("#div4").fadeIn("slow");
             });
             $("#fadeOut").click(()=>{
                 $("#div2").fadeOut();
                 $("#div3").fadeOut(2000);
                 $("#div4").fadeOut("slow");
             });
             $("#fadeInOut").click(()=>{
                 $("#div2").toggle();
                 $("#div3").toggle(2000);
                 $("#div4").toggle("slow");
             });
             $("#fadeTo").click(()=>{
                 $("#div2").fadeTo(0.15);
                 $("#div3").fadeTo(2000,0.5);
                 $("#div4").fadeTo("slow",0.75);
             });
         });
     </script>  
 </head>
 <body>
     <div id="div1" style="width: 400px;height: 150px;border: 1px solid red;background-color: yellow;">
         <p>文字</p>
         <p>文字</p>
         <p>文字</p>
     </div>
     <div>
         <div id="div2" style="width: 50px;height: 50px;background-color: red;""></div>
         <div id="div3" style="width: 50px;height: 50px;background-color: blue;""></div>
         <div id="div4" style="width: 50px;height: 50px;background-color: yellow;""></div>
     </div>
     <div>
         <button id="hide">hide</button>
         <button id="show">show</button>
         <button id="hideShow">hideShow</button>
         <button id="fadeIn">fadeIn</button>
         <button id="fadeOut">fadeOut</button>
         <button id="fadeInOut">fadeInOut</button>
         <button id="fadeTo">fadeTo</button>
     </div>
 </body>
 </html>
 ​

 <!DOCTYPE html>
 <head>
     <title>form标签</title>
     <meta charset="utf-8"/>
     <script src="../jquery.min.js"></script>
     <script>
         $().ready(function(){
            $("p").click(()=>{
             if($("p").text()=="播放视频"){
                 $("video").slideDown(3000,function(){
                     $("p").text("关闭视频");
                     $("video")[0].play();//[0]表示使用原生js函数。
                 });
             }else{
                 $("video").slideUp(1000,()=>{
                     $("p").text("播放视频");
                     $("video")[0].pause();
                 });
             }
            });
         });
     </script>  
     <style>
         video{
             width: 400px;
             height: 250px;
             border: 2px solid green;
             display: none;
         }
         p{
             width: 400px;
             border: 1px solid green;
             text-align: center;
             background: yellow;
         }
     </style>
 </head>
 <body>
     <video src="D:\DL23110\camera\html\0110上午-css.mp4" controls=>
     </video>
     <p>播放视频</p>
     
 </body>
 </html>
 ​

动画

 <!DOCTYPE html>
 <head>
     <title>form标签</title>
     <meta charset="utf-8"/>
     <script src="../jquery.min.js"></script>
     <script>
         $().ready(function(){
             $("#bt1").click(()=>{
                 $("#div1").animate(
                     {
                         left:'250px',//看上去是css写法，但是属性要使用小驼峰  paddingLeft  不是padding-left 
                         top:'400px',
                         opacity:'0.5',
                         width:'+=150px',//可以采用相对值
                         height:'150px'
                     },3000);
             });
             $("#bt2").click(()=>{
                 // $("#div2").animate({height:'300px',opacity:'0.1'},2000);
                 // $("#div2").animate({width:'300px',opacity:'1.0'},2000);
                 // $("#div2").animate({height:'100px',opacity:'0.1'},2000);
                 // $("#div2").animate({width:'100px',opacity:'1.0'},2000);
                 //chaining写法 方法链
                 $("#div2").animate({height:'300px',opacity:'0.1'},2000)
                     .animate({width:'300px',opacity:'1.0'},2000)
                     .animate({height:'100px',opacity:'0.1'},2000)
                     .animate({width:'100px',opacity:'1.0'},2000);
   
             });
             $("#bt3").click(()=>{
                 //$("#div2").stop();//只能停止当前动画
                 //$("#div2").stop(true);//如果为true 表示动画直接停止 队列也停止
                 $("#div2").stop(false,true);//后面的true 为gotoEnd 直接到这个动画的末尾
             });
         });
     </script>  
     
 </head>
 <body>
     <div id="div1" style="width: 100px;height: 100px;background: yellow;position: relative;"></div>
     <div id="div2" style="width: 100px;height: 100px;background: green;position: relative;"></div>
     <button id="bt1">黄色块动画</button>
     <button id="bt2">绿色块动画</button>
     <button id="bt3">停止</button>
 </body>
 </html>
 ​

echarts

使用echarts的步骤：

1.引入echarts.js。

         <script src="../js/echarts.js"></script>

2.创建一个div容器，用来填充echarts图表。

 <div id="div1" style="width: 500px;height: 500px;"></div>

3.创建echarts对象，绑定div容器。

 var chart = echarts.init(document.getElementById("div1"));

4.编写图标配置项options

 var options ={};

5.将options应用于echarts对象

 chart.setOption(option);

统一配置

主题：

var chart1 = echarts.init(document.getElementById("chart_1"), "dark");

title

				title: {
					text: "柱状图",
					textStyle: {
						color: "red"
					},
					borderWidth: 1,
					borderColor: "blue",
					borderRadius: 5,
					left: 30
				},

tooltip

				tooltip: {
						trigger: "item", //axis放到轴上出发 item放到元素上出发
						triggerOn: "click", //点击触发
						formatter: function(arg) {//回调函数，点击后触发，显示的内容
							console.log(arg);
							return arg.name + "--" + arg.value;
						}

					},

toolbox

					toolbox: {
						show: true, //显示工具
						feature: {
							saveAsImage: {}, //导出图片
							dataZoom: {}, //区域缩放
							dataView: {}, //数据视图
							restore: {}, //重置
							magicType: { //切换
								type: ["line", "bar"]
							},
						}
					},

legend

legend: {
	data:["次数"]
},

柱状图

             var option = {
                 xAxis: {//x轴坐标数据设定
                     type: 'category',//采用类目进行排列
                     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']//类目的数据
                 },
                 yAxis: {//y轴设定
                     type: 'value'//数据在数据集中
                 },
                 series: [{//数据系列 数据以及一些其它设定 在series中可以设置多组数据
                     name:'次数',
                     data: [120, 200, 150, 80, 70, 110, 130],//类目的数据  和类目一致
                     type: 'bar'//采用柱状图
                 }]
             };
 ​
                         //常用设置 markPoint markLine label barWidth  写在series中数组对象中
                         markPoit: {
                             data: [{
                                     type: 'max',
                                     name: "最大值"
                                 },
                                 {
                                     type: 'min',
                                     name: "最小值"
                                 }
                             ]
                         },
                         markLine: {
                             data: [{
                                 type: "average",
                                 name: "平均值"
                             }]
                         },
                         label: {
                             show: true,
                             rotate: 60,
                             position: 'top'
                         },
                         barWidth: '30%'

折线图

             var option = {
                 xAxis: {
                     type: 'category',
                     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                 },
                 yAxis: {
                     type: 'value'
                 },
                 series: [{
                     data: [820, 932, 901, 934, 1290, 1330, 1320],
                     type: 'line',
                 }]
             };
             //常用设置
             //X轴设定
                     boundaryGap: false,
             //y轴设定
                     scale: true,//脱离0
             //写在series中数组对象中
                     stack: 'all',//堆叠
                     smooth: true， //折线平滑
                     areaStyle: {}, //下部区域填充

饼状图

             var option = {
 ​
                 series: [{
                     type: 'pie',
                     name :'销售额',
                         data :[
                             {name:"销售部", value:1234},
                             {name:"技术部", value:234},
                             {name:"后勤部", value:2345},
                             {name:"办公室", value:1234},
                         ],
                 },
                 ]
             };
 //常用设置 label radius  roseType 写在series中数组对象中                        
                         radius:['20%','75%'],//圆环内径外径比例
                         roseType:"radius",//南丁格尔

高德地图

使用地图的步骤：

1.创建应用，申请web（jsapi）的key和密钥

2.在页面中初始化秘钥和key，秘钥初始化要写在key之前

     <script type="text/javascript">
         window._AMapSecurityConfig = {
           securityJsCode: "1945696524ff1ac83385a298c6f037e0",
         };
     </script>
     <script src="https://webapi.amap.com/maps?v=2.0&key=1542d8ff1078369a02c15ac9c048bc06"></script>

3.创建一个div容器，用来填充地图

4.初始化高德地图

         var map = new AMap.Map('chart_2', {
             viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
             zoom:11, // 初始化地图层级
             center: [116.397428, 39.90923] // 初始化地图中心点
         });

点标记

 const marker = new AMap.Marker({
   position: new AMap.LngLat(116.39, 39.9), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
   title: "北京中关村总部",
   icon:"postion.png"
 });
 //将创建的点标记添加到已有的地图实例：
 map.add(marker);
 ​
 //多个点标记

路线规划

     <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=1542d8ff1078369a02c15ac9c048bc06&plugin=AMap.Driving"></script>
     <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
     <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
     <script>
         //构造路线导航类
         var driving = new AMap.Driving({
             map: map
         }); 
         // 根据起终点名称规划驾车导航路线
         driving.search([
             {keyword: '北京市地震局(公交站)',city:'北京'},
             {keyword: '亦庄文化园(地铁站)',city:'北京'}
         ], function(status, result) {
             // result 即是对应的驾车导航信息
             if (status === 'complete') {
                 log.success('绘制驾车路线完成')
             } else {
                 log.error('获取驾车数据失败：' + result)
             }
         });
     </script>