【狂神说】HTML+CSS+JS

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>

<!--段落标签-->
<p>两只老虎 跑得快</p>
<p>发发发发发 发发发发发发付</p>

<!--换行标签-->
两只老虎 跑得快</br>发发发发发 发发发发发发付

<!--水平标签-->
<hr>

<!--粗体 斜体-->
<h1>字体样式标签</h1>

粗体：<strong>I love U</strong>
斜体：<em>I love U</em>
</br>
<!--特殊符号-->
空     格
空&nbsp&nbsp&nbsp&nbsp&nbsp格

</br>
<!--img学习
src:图片地址 相对地址，绝对地址
../  --上一级目录
alt 加载失败会返回这个地方-->

</br>

<!--链接标签
a标签
herf:跳转的页面
target:表示窗口在哪儿打开
_blank:在新标签打开
_self:在当前页面打开-->
<a href="https://blog.csdn.net/weixin_56580267?type=collect" target="_blank">我的csdn</a>
<a href="https://blog.csdn.net/weixin_56580267?type=collect">
    <img src="../resources/image/1.jpg" alt="壁纸" title="悬停文字" width="500" height="300">
</a>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>

<a name="down">down</a>

<!--功能性链接
邮件链接：mailto:
qq链接-->

<a href="mailto:288888888@qq.com">点击联系我</a>


</body>
</html>

块元素和行内元素

块：无论内容多少，该元素独占一行

行内：内容撑开宽度，左右都是行内元素的可以在排一行

列表标签

列表的分类

无序列表
有序列表
定义列表

<!--有序列表-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
</ol>

<!--无序列表-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
</ul>

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容-->
<dl>
    <dt>学科</dt>

    <dd>java</dd>
    <dd>python</dd>

    <dt>位置</dt>

    <dd>西安</dd>
    <dd>重庆</dd>

表格标签

<body>

<table border="1px">
  <!--第一行-->
  <tr>
    <!--colspan 跨列-->
    <td colspan="3">1-1</td>

  </tr>
  <!--第二行-->
  <tr>
    <!--rowspan 跨行-->
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
  </tr>
  <!--第三行-->
  <tr>
    <td>3-1</td>
    <td>3-2</td>

  </tr>


</table>
</body>

媒体元素

视频video和音频audio

<body>

<!--
src:资源路径
controls：控制条
autoplay:自动播放-->
<!--<video src="../resources/video/片头.mp4" controls autoplay></video>-->
<audio src="../resources/audio/萤火虫和你.mp3" controls autoplay></audio>
</body>

iframe内联框架

<body>
<iframe src="//player.bilibili.com/player.html?aid=271092714&bvid=BV1Hc411P7nN&cid=1128918242&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

</body>

<iframe src="" name="blog" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://blog.csdn.net/weixin_56580267?type=blog" target="blog">点击跳转</a>

表单语法

<h1>注册</h1>

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post ，get提交方式
get：可以在url看到我们提交的信息，不安全，高效
post:比较安全
-->
<form action="1.我的第一个网页.html" method="get">

    <!--文本输入框：input type="text"-->
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>

    <p>
    <input type="submit">
    <input type="reset"></p>


    <!--单选框标签
    input type="radio"
    value:单选框的值
    name:表示值
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="gril" name="sex">女
    </p>

    <!--多选框
    input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="gril" name="hobby">女孩
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

    <!--按钮
    input type="button" 普通按钮
    input type="image" 图片按钮
    input type="submit" 提交按钮
    input type="reset" 重置-->
    <p>
        <input type="button" name="bt1" value="点他">
        <input type="image" src="../resources/image/img.png">
    </p>

    <!--url验证-->
    <p>URL：
        <input type="url" name="url">
    </p>
    <!--数字验证-->
    <p>商品数量：
        <input type="number" name="num" max="100" min="0" step="10">
    </p>
    <!--滑块
    input type="range"
    -->
    <p>音量：
        <input type="range" min="0" max="100" step="2">
    </p>
    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>

disabled：禁用

hidden：隐藏

redeonly：只读

表单初级验证

placehodler：提示输入信息

required：非空判断（提示该文本必填）

pattern：正则表达式

CSS

在这里插入图片描述

四种css导入方法

方法1：行内样式
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: blue">我是标签</h1>

方法2：内嵌式
   <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>我是标签</h1>

方法3：链接式
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/style.css">
<body>
<h1>我是标签</h1>

方法4：导入式  
  <style type="text/css">
        @import "/css/style.css";
    </style>

css的优势：

1.内容和表现分离
2.网页结构表现统一，可以实现复用
3.样式十分丰富
4.建议使用独立于html的css文件
5.利用seo，容易被搜索引擎收录

CSS选择器

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

（1）简单选择器

h1{color:red}//h1:选择器 color:属性 red:值

元素选择器

元素选择器根据元素名称来选择 HTML 元素。

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: blue;
} 
</style>
</head>
<body>

<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>

</body>
</html>

id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>

</body>
</html>

类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p> 

</body>
</html>

id:必选保证全局唯一

不遵循就近原则，固定的
id选择器>class选择器>标签选择

标签/元素选择器：
标签名{属性1：属性值;}
p{color:red}
div{color:red}
span{color:red}
ul{color:red}

类别选择题(class选择器)
以一个点号选择器，类名的第一个字符不能使用数字
.center{text-alight:center}
<h1 class="center">Hello world</h1>

ID选择器
前面以“#”来标记
<p id="A">段落1</p>
<p id="B">段落2</p>
#A{}
#B{}

通用选择器
匹配任何元素
*{margin:0;padding:0;}

群组选择器
h1,h2,h3{color:red}

（2）层次选择器

后代选择器
子选择器
相邻兄弟选择器
通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
</head>
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>
  水果：
  <ul>
  <li>西瓜</li>
  <li>苹果</li>
  <li>香蕉</li>
</ul>
</p>

</body>
</html>

后代选择器
从上面可以看出所有的标签都是body的后代，那么我们使用后代选择器，就可以将body的后代（所有标签）改变样式：

body p{
    background-color: aqua;
}

在这里插入图片描述

子选择器
子选择器可后代选择器相比，就是把空格变成>

body>p{
    background-color: aqua;
}

在这里插入图片描述

相邻兄弟选择器
相比后代选择器，将空格变为+，将前标签改为类：

.style1+p{
    background-color: aqua;
}

<p>p1</p>
<p class="style1">p2</p>
<p>p3</p>

通用选择器

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>
    水果：
<ul>
    <li>西瓜</li>
    <li>苹果</li>
    <li>香蕉</li>
</ul>
</p>
</body>

（3）结构伪类选择器

当未被鼠标访问已被鼠标访问鼠标悬浮在元素上方元素被激活时向元素添加样式

ul li:first-child{
    color: aqua}

（4）属性选择器

a[id=frist]{
color:red}
= 绝对等于
*=包含这个元素
^=以这个元素开头
$=以这个结尾

class 中有link的元素
a[class*=link]{
background:yellow
}

span标签

span标签是什么

span标签是超文本标记语言（HTML）的行内标签，被用来组合文档中的行内元素。span标签通常使用来将文本的一部分或者文档的一部分独立出来，从而对独立出来的内容设置单独的样式。span本身没有任何属性，也没有固定的格式表现，当对它应用样式时，它会产生视觉上的变化。

有无序标签和命名标签

效果图：

涉及知识点：

css什么时候用class和id？当css样式用于不止一个元素时，使用class来定义。

当css样式只应用于一个元素时，使用id来定义。

例如导航条，每个页面中，只存在一个顶部导航条的话，可以使用id来定义

// 或者

例如商品列表，具有相同的样式，可以使用class来定义

list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形

    <style>
li{
    list-style: circle;
}
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

文本

（1）文本对齐text-align

h1{text-aligh:center;

}

属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）：

（2）文本方向direction

direction 和 unicode-bidi 属性可用于更改元素的文本方向：

（3）垂直对齐`vertical-align`

属性设置元素的垂直对齐方式。

img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

（4）文字装饰`text-decoration`

属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线：

（5）文本转换`text-transform`

属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：

p.uppercase {
  text-transform: uppercase;/*都是大写*/
}

p.lowercase {
  text-transform: lowercase;/*都是小写*/
}

p.capitalize {
  text-transform: capitalize;/*每个英文单词大写*/
}

（6）文字间距`text-indent`

属性用于指定文本第一行的缩进：

（7）字母间距`letter-spacing`

属性用于指定文本中字符之间的间距。

（8）行高`line-height`

属性用于指定行之间的间距：

（9）字间距`word-spacing`

属性用于指定文本中单词之间的间距。

（10）空白`white-space`

属性指定元素内部空白的处理方式。

此例演示如何禁用元素内的文本换行：

（11）文本阴影`text-shadow`

属性为文本添加阴影。

text-shadow: 阴影颜色水平偏移垂直偏移阴影半径

向阴影添加颜色（红色）：

向阴影添加模糊效果（5px）：

css下划线和删除线

涉及知识点：

text-decoration在html语言中表示属性规定添加到文本的修饰（例如加下划线）；

以下表格列出了 CSS text-decoration 属性的可能取值： [1]

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。（上划线）
line-through	定义穿过文本下的一条线。（贯穿线）
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: orange;
            font-size: 50px;/*鼠标碰到 文本就会变大*/
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color:green;
        }
        /*鼠标点击后变成红色*/
        a:visited{
            color: red;
        }

    </style>
</head>
<body>
<a href="#">码出高数：java开发手册</a>
</body>
</html>

字体

`（1）字体样式font-style`

属性主要用于指定斜体文本。

此属性可设置三个值：

normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

（2）字体粗细`font-weight`

属性指定字体的粗细：

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

（3）字体大小`font-size`

属性设置文本的大小。

背景样式

在这些章节中，您将学习如下 CSS 背景属性：

background-color
background-image
background-repeat
background-attachment
background-position

效果图：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>透明框</h1>

<p>当使用 opacity 属性为元素背景添加透明度时，其所有子元素也会变为透明。这可能会使完全透明的元素内的文本难以阅读：</p>

<div class="first">
  <h1>opacity 0.1</h1>
</div>

<div class="second">
  <h1>opacity 0.3</h1>
</div>

<div class="third">
  <h1>opacity 0.6</h1>
</div>

<div>
  <h1>opacity 1（默认）</h1>
</div>

</body>
</html>

注意：使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    div {
      background-color: green;
    }

    div {
      background: rgb(0, 128, 0);
    }

    div.first {
      background: rgba(0, 128, 0, 0.1);
    }

    div.second {
      background: rgba(0, 128, 0, 0.3);
    }

    div.third {
      background: rgba(0, 128, 0, 0.6);
    }
  </style>
</head>
<body>
<p>使用 RGBA 颜色值：</p>
<div class="first">
  <h1>10% opacity</h1>
</div>

<div class="second">
  <h1>30% opacity</h1>
</div>

<div class="third">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>默认</h1>
</div>

</body>
</html>

背景图片

仅在水平方向重复 (background-repeat: repeat-x;)

如需垂直重复图像，请设置 background-repeat: repeat-y;。

background-repeat:no-repeat 属性还可指定只显示一次背景图像：

background-position 属性用于指定背景图像的位置。

简写背景属性

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

可以写成

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

在使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。

 background-attachment: fixed;图像不会随页面的其余部分滚动。

background-attachment: scroll|fixed|local|initial|inherit;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: orange;
            font-size: 50px;/*鼠标碰到 文本就会变大*/
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color:green;
        }
        /*鼠标点击后变成红色*/
        a:visited{
            color: red;
        }
        
    </style>
</head>
<body>
<a href="#">码出高数：java开发手册</a>
</body>
</html>

边框border

`（1）border-style`

属性指定要显示的边框类型。

border 属性允许您指定元素边框的样式、宽度和颜色。

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

`（2）border-width`

属性指定四个边框的宽度。

注释：border-color 属性单独使用时不起作用。请首先使用 border-style 属性设置样式。

边框简写

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需）
border-color

实际：

p {
  border: 5px solid red;
}

`（3）border-radius`

属性用于向元素添加圆角边框：

border-radius:50px 20px 20px 50px
左上右上右下左下

外边距margin与内边距padding

边距margin:设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度

所有外边距属性都可以设置以下值：

auto - 浏览器来计算外边距
length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距
inherit - 指定应从父元素继承外边距

提示：允许负值。

margin:20px;表示四个方向的外边距都是20px；

margin:20px 40px;表示top为20px，right为40px；由于bottom和left缺省，所以自动将它们分别设为20px和40px。转化为第4种写法为：“margin:20px 40px 20px 40px;”。

margin:20px 40px 60px;表示top为20px，right为40px，bottom为60px；由于left缺省，所以自动将它设为40px。转化为第4种写法为：“margin:20px 40px 60px 40px;”。

margin:5px auto;意思上下为5,左右平均居中

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。 [1]
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

填充padding:使用padding属性来设置四个方向的内边距

margin与padding如何进行区分，这是很多学html人的困扰，其实说白了padding 就是内容与边框的空隙。而margin则是模块与模块的空隙。

效果图：

word-break 属性规定自动换行的处理方法。

word-break: normal|break-all|keep-all;

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

盒模型

效果图：

涉及知识点：

margin:0 auto;表示上下边界为0,左右则根据宽度自适应相同值(即居中)

轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

CSS 拥有如下轮廓属性：

outline-style
outline-color
outline-width
outline-offset
outline

注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

浮动float

：left/right左右浮动

clear：both

  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display:inline;/*行内元素 这里是将div显示成行内元素*/
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      /*display: block;块元素 这里是将行内元素显示成div*/

      display: inline-block;/**/
    }
  </style>
</head>
<body>
<div>div元素</div>
<span>span行内元素</span>

overflow及父级边框塌陷问题

clear：
clear:right 右侧不允许有浮动元素
clear:left 左侧不允许有浮动元素
clear:both 两侧不允许有浮动元素
none：

解决塌陷问题方案：
方案一：增加父级元素的高度；
方案二：增加一个空的div标签，清除浮动

<div class = "clear"></div>
<style>
	.clear{
		clear:both;
		margin:0;
		padding:0;
}
</style>

方案三：在父级元素中增加一个overflow：hidden

overflow:hidden/*隐藏*/
overflow：scoll/*滚动*/

方案四：父类添加一个伪类:after

#father:after{
	content:'';
	display:block;
	clear:both;
}

小结：

浮动元素增加空div----》简单、代码尽量避免空div
设置父元素的高度-----》简单，元素假设没有了固定的高度，就会超出
overflow----》简单，下拉的一些场景避免使用
父类添加一个伪类:after（推荐）----》写法稍微复杂，但是没有副作用，推荐使用

display与float对比

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

网页布局模型与三种定位

position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

static
relative
fixed
absolute
sticky

原来代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      margin: 0 auto;
      padding: 5px;
    }
    #father{
      border: 1px #9765 solid;
      padding: 50px;
    }
    #first{
      border: 1px #000000 solid;
      background: aqua;
    }
    #second{
      border: 1px #0785 solid;
      background: orange;
    }
    #third{
      border: 1px #390 solid;
      background: antiquewhite;
    }
  </style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：

position: relative; 的元素相对于其正常位置进行定位。

    #first{
      border: 1px #000000 solid;
      background: aqua;
      position: relative;
      top:-20px;
    }

left:30px 图片向右移

right:-30px 图片向右移

相对于原来的位置进行指定的偏移

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background: #339900;
        }
        .box{
            border: 1px blue solid;
            height: 100px;
            width: 100px;
            position: fixed;
            margin: 200px;
        }
        .box1{
            height: 50px;
            width: 50px;
            border: 1px blue solid;
            position: absolute;
            top:20px;
            left: 20px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
</div>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
</body>
</html>

涉及知识点：

position 属性规定元素的定位类型。

可能的值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

圆角边框

使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。

属性   描述
border-radius   所有四个边角 border-radius 属性的缩写。
border-top-left-radius   定义了左上角的弧度。
border-top-right-radius   定义了右上角的弧度。
border-bottom-right-radius   定义了右下角的弧度。
border-bottom-left-radius   定义了左下角的弧度。

效果图：

涉及知识点：

向 div 元素添加圆角边框：border-radius:50%;

CSS 图标

如何添加图标

向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome。

将指定的图标类的名称添加到任何行内 HTML 元素（如 <i> 或 <span>）。

下面的图标库中的所有图标都是可缩放矢量，可以使用 CSS进行自定义（大小、颜色、阴影等）。

<script src="https://kit.fontawesome.com/yourcode.js"></script>

Google 图标

如需使用 Google 图标，请在HTML页面的 <head> 部分中添加以下行：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

CSS 链接

四种链接状态分别是：

a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时

z-index

图层~
z-index：默认是0，最高无限~999

JavaScript

js引擎

js组成

当我们读到一行js代码，js引擎就会转化成二进制语言，然后计算机去运行。然后再读到另一行js代码，再转再执行。逐行执行的语言称为脚本语言

最简单的javaScript脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert('hello world');
    </script>
</head>
<body>

</body>
</html>

外部引入

1、JS警示框

第一种

例子1

效果图：

第二种

例子2

效果图：

例子3

效果图：

第三种，js文件引入

例子1

效果图：

例子2

效果图：

2、js输入输出语句

效果图：

3、js变量与数据类型

变量是一个容器，用来存放数据的。声明变量的本质是去内存申请空间。

定义变量 
变量类型 变量名 =变量值；
var num=1;

代码

把输入的内容保存到变量中，再弹出来；

更新变量：一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准

同时声明多个变量：只需写一个var，多个变量名之间使用英文逗号隔开

声明变量特殊情况：1、只声明不赋值输出undefined（未定义的）2、未声明未赋值，报错 3、不声明直接赋值，可以使用

变量的数据类型

js把数据类型分为两类：1、简单数据类型（number,string,boolean,undefined,null）2、复杂数据类型（object）

效果图：

4、typeof( )函数

typeof "Bill"                 // 返回 "string"
typeof 3.14                   // 返回 "number"
typeof NaN                    // 返回 "number"
typeof false                  // 返回 "boolean"
typeof [1,2,3,4]              // 返回 "object"
typeof {name:'Bill', age:19}  // 返回 "object"
typeof new Date()             // 返回 "object"
typeof function () {}         // 返回 "function"
typeof myCar                  // 返回 "undefined" *
typeof null                   // 返回 "object"

效果图：

prompt取过来的值是字符型的

效果图：

4.1 undefined 与 null 的区别

undefined 和 null 值相等但类型不同：

typeof undefined           // undefined
typeof null                // object

null === undefined         // false
null == undefined          // true

===值相同 类型相同
==值相同

<script>

    // 严格检查格式
    'use strict'
    alert('hello world');
</script>

5、isNaN( )函数

效果图：

6、字符串转义符

转移字符要写到“ ”里面

案例

效果图：

7、字符串拼接

只要有字符串和其他类型相拼接最终的结果是字符串类型

案例

效果图：

8、布尔型

效果图：

通过颜色判断数据类型

效果图：

9、BigInt

BigInt 变量用于存储太大而无法用普通 JavaScript 数字表示的大整数值。

JavaScript 整数最多只能精确到 15 位：

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
let x = 999999999999999;
let y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>

如何创建 BigInt

如需创建 BigInt，可以在整数末尾添加 n，或调用 BigInt() 函数：

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
let x = 9999999999999999;
let y = 9999999999999999n;
let z = BigInt("9999999999999999")
document.getElementById("demo").innerHTML = x + "<br>" + y+ "<br>" + z;
</script>

</body>
</html>

BigInt 的 JavaScript 类型是 "bigint"

BigInt 不能有小数。

let x = 5n;
let y = x / 2;
// Error: Cannot mix BigInt and other types, use explicit conversion.

let x = 5n;
let y = Number(x) / 2;

10、数据类型转换——转字符串

效果图：

11、数据类型转换——转数字

案例

用户输入第一个值后，继续输出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果

12、数据类型转换——转布尔

13、运算符

算数运算符

递增和递减运算符

++num;

--num;

后置：先返回原值后自加1

前置：先自加1，后返回值

比较运算符

关系运算

a===b:要求值和数据类型都一致

效果图：

逻辑运算

且运算： &&

或运算： ||

取反运算： !

在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。

0 、 null 、 undefined 、 ””( 空串 ) 都认为是 false ；

&& 且运算。

有两种情况：

第一种：当表达式全为真的时候。返回最后一个表达式的值。

第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值

|| 或运算

第一种情况：当表达式全为假时，返回最后一个表达式的值

第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值

并且 && 与运算和 || 或运算有短路。

短路就是说，当这个 && 或 || 运算有结果了之后。后面的表达式不再执行

var a = "abc" ;

var b = true ;

var d = false ;

var c = null ;

逻辑中断逻辑与

代码

效果图：

数组

数组定义方式

js中数组的定义：
格式：
var 数组名=[]; //空数组
var 数组名=[1，‘abc’,true]; //定义数组同时赋值元素

效果图：

1、slice()截取Array的一部分，返回一个新数组，类似于String中的substring
arr.slice(1,5);
(4)[2,3,4,5]
2、push,pop
arr.push('a','b');//压入尾部
arr.pop();//弹出尾部的一个元素
3、unshift(),shift()头部
unshift 压入头部
shift 弹出头部的一个元素
4、排序sort
(3)["B","C","A"]
arr.sort()
(3)["A","B","C"]
5、元素翻转
(3)["A","B","C"]
arr.reverse()
(3)["B","C","A"]
6、concat()
(3)["B","C","A"]
arr.concat([1,2,3])

分支和循环

    var age=[12,3,4,65,754,5,77,32,65];

    //for(var index in object){}
    for(var num in age){
      if(age.hasOwnProperty(num)){
        console.log("存在")
      console.log(age[num])}
    }

Map和Set

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

    map.delete("tom")//删除

    var set=new Set([3,1,1,1,1]);//set可以去重
    set.add(2)

    var set=new Set([3,1,1,1,1]);//set可以去重
    set.delete(2)

无序不重复的集合
set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素

iterator

  <script>
    'use strict'
    //遍历数组
    var arr=[3,4,5]
    for(let x of arr){
      console.log(x)
    }

    //遍历map
    var map=new Map([["tom,80"],["jack",100],["haha",30]])
    for(let x of map){
      console.log(x)
    }

    //遍历set
    var set = new Set([5,6,7]);
    for(let x of set){
      console.log(x)
    }
  </script>

函数

函数的二种定义方式
第一种，可以使用function关键字来定义函数

使用格式如下：

function 函数名(形参列表){
    函数体
    }

fun();//函数调用 函数调用才会执行

function fun(){

alert("无参调用")

}

fun();

function fun2(a,b){

alert(“有参函数调用”)

}

fun(12,"abc");

在JS语言中，如何定义带有返回值的函数？
只需要在函数体内直接使用return语句返回值即可！

函数的第一种定义方式

效果图：

函数的第二种定义方式

函数表达式可以在变量中存储：

第二种定义方式，格式如下：

var 函数名 = function(形参列表){

    函数体

}

var fun=function(){

alert("无参函数");

}

fun();

var fun2=function(a，b){

alert("有参函数a="+a+",b="+b);

}

fun2(1,2);

var fun3=function(num1,num2){

renturn num1+num2;

}

alert(fun3(100,200));

效果图：

Function() 构造器

正如您在之前的例子中看到的，JavaScript 函数是通过 function 关键词定义的。

函数也可以通过名为 Function() 的内建 JavaScript 函数构造器来定义。

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

实际上无需使用函数构造器。上面的例子这么写也是一样的：

var myFunction = function (a, b) {return a * b};

var x = myFunction(4, 3);

JS不允许函数重载

注：在JAVA中函数允许重载。但是在JS中函数的重载会直接覆盖掉上一次的定义

效果图：

函数的arguments隐形参数（只在function函数内）

arguments代表传递进来的所有参数，是一个数组

就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数
隐形参数特别像JAVA基础的可变长参数一样。

public void fun(Object ...args);

可变长参数其他是一个数组；

那么js中的隐形参数也跟java的可变长参数一样。操作类似数组。

函数作用域

在 JavaScript 中有两种作用域类型：

局部作用域
全局作用域

JavaScript 拥有函数作用域：每个函数创建一个新的作用域。

作用域决定了这些变量的可访问性（可见性）。

函数内部定义的变量从函数外部是不可访问的（不可见的）。

局部 JavaScript 变量

在 JavaScript 函数中声明的变量，会成为函数的局部变量。

局部变量的作用域是局部的：只能在函数内部访问它们。

// 此处的代码不能使用 carName 变量

function myFunction() {
    var carName = "porsche";

    // 此处的代码能使用 carName 变量

}

全局 JavaScript 变量

函数之外声明的变量，会成为全局变量。

全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。

var carName = " porsche";


// 此处的代码能够使用 carName 变量

function myFunction() {

    // 此处的代码也能够使用 carName 变量

}

自动全局

如果您为尚未声明的变量赋值，此变量会自动成为全局变量。

这段代码将声明一个全局变量 carName，即使在函数内进行了赋值。

myFunction();//变量


// 此处的代码能够使用 carName 变量

function myFunction() {
    carName = "porsche";
}

      'use strict'
      function qj(){
          var x=1;
          x=x+1;
      }
      x=x+2;//Uncaught ReferenceError: x is not defined

在js中 var定义变量实际是有作用域的
假设在函数体中声明，则在函数体外不可以使用

      function qj(){
          var x=1;
          x=x+1;
      }

      function qj(){
          var x='A';
          x=x+1;
      }

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

假设外部存在同名的函数变量，则内部函数会屏蔽外部函数的变量

let

JavaScript 块作用域

通过 var 关键词声明的变量没有块作用域。

在块 {} 内声明的变量可以从块之外进行访问。

{ 
  var x = 10; 
}
// 此处可以使用 x

在 ES2015 之前，JavaScript 是没有块作用域的。

可以使用 let 关键词声明拥有块作用域的变量。

在块 {} 内声明的变量无法从块外访问：

{ 
  let x = 10;
}
// 此处不可以使用 x

重新声明变量

使用 var 关键字重新声明变量会带来问题。

在块中重新声明变量也将重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6

使用 let 关键字重新声明变量可以解决这个问题。

在块中重新声明变量不会重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

循环作用域

在循环中使用 var：

var i = 7;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
// 此处，i 为 10

在循环中使用 let：

let i = 7;
for (let i = 0; i < 10; i++) {
  // 一些语句
}
// 此处 i 为 7

HTML 中的全局变量

使用 JavaScript 的情况下，全局作用域是 JavaScript 环境。

在 HTML 中，全局作用域是 window 对象。

通过 var 关键词定义的全局变量属于 window 对象：

<!DOCTYPE html>
<html>
<body>


<p id="demo"></p>

<script>
var carName = "Audi";

// 此处的代码能够使用 window.carName
document.getElementById("demo").innerHTML = "我可以显示 " + window.carName;
</script>

</body>
</html>

通过 let 关键词定义的全局变量不属于 window 对象：

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
let carName = "Audi";

// 此处的代码能够使用 window.carName
document.getElementById("demo").innerHTML = "我不能显示 " + window.carName;
</script>

</body>
</html>

重新声明

允许在程序的任何位置使用 var 重新声明 JavaScript 变量：

var x = 10;

// 现在，x 为 10
 
var x = 6;

// 现在，x 为 6

在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的：

var x = 10;       // 允许
let x = 6;       // 不允许

{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}

在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的：

let x = 10;       // 允许
let x = 6;       // 不允许

{
  let x = 10;   // 允许
  let x = 6;   // 不允许
}

在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量是不允许的：

let x = 10;       // 允许
var x = 6;       // 不允许

{
  let x = 10;   // 允许
  var x = 6;   // 不允许
}

在不同的作用域或块中，通过 let 重新声明变量是允许的：

let x = 6;       // 允许

{
  let x = 7;   // 允许
}

{
  let x = 8;   // 允许
}

Const

通过 const 定义的变量与 let 变量类似，但不能重新赋值：

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
try {
  const PI = 3.141592653589793;
  PI = 3.14;
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

常量对象可以更改

您可以更改常量对象的属性：

<!DOCTYPE html>
<html>
<body>

<p>声明常量对象不会使对象属性不可更改：</p>

<p id="demo"></p>

<script>
// 创建对象：
const car = {type:"Porsche", model:"911", color:"white"};

// 更改属性：
car.color = "red";

// 添加属性：
car.owner = "Steve";

// 显示属性：
document.getElementById("demo").innerHTML = "车主是：" + car.owner+"，车颜色是：" + car.color; 
</script>

</body>
</html>

常量数组可以更改

您可以更改常量数组的元素：

<!DOCTYPE html>
<html>
<body>


<p id="demo"></p>

<script>
// 创建数组：
const cars = ["Audi", "BMW", "Porsche"];

// 更改元素：
cars[0] = "Toyota";

// 添加元素：
cars.push("Honda");

// 显示数组：
document.getElementById("demo").innerHTML = cars; 
</script>

</body>
</html>

但是您无法重新为常量数组赋值：

const cars = ["Audi", "BMW", "porsche"];
cars = ["Honda", "Toyota", "Volvo"];    // ERROR

JS中自定义对象（扩展内容）

Object形式的自定义对象

---------------------------------------------------------

对象的定义：

var 变量名=new Object();//对象实例（空对象）

变量名.属性名=值; //定义一个属性

变量名.函数名 = finctoion(){}//定义一个函数

---------------------------------------------------------

对象的访问：

变量名.属性名/函数名（）;

--------------------------------------------------------

函数方法

      function getAge(){
          //今年-出生年
          var now=new Date().getFullYear();
          return now-this.bitrh
      }

      var kuangshen = {
          name:'哈哈',
          bitrh:2000,
          age:getAge
      };
      var xiaoming = {
          name:'小明',
          bitrh:2000,
          age:getAge
      };

      getAge.apply(kuangshen,[]);

JS对象

在真实生活中，汽车是一个对象。

汽车有诸如车重和颜色等属性，也有诸如启动和停止的方法：

属性	方法
car.name = porsche	car.start()
car.model = 911	car.drive()
car.length = 4499mm	car.brake()
car.color = white	car.stop()

var car = {type:"porsche", model:"911", color:"white"};

访问对象属性

例子1：person.lastName;
例子2：person["lastName"];

访问对象方法

person.fullName();

1.使用一个不存在的对象属性，不会报错！underfined
person.haha
underfined
2.动态的删除属性，通过delete删除对象的属性
delete person.name
true
peson
3.动态的添加,直接给新的属性添加即可
person.haha="haha"
“haha”
person
4.判断属性一个是否在这个对象中，xxx in xxx!
'toString' in person
true
5.判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

{}花括号形式的自定义对象

--------------------------------------------------------

对象的定义：
   var 变量名 = {   //空对象
       属性名：值，       //定义一个属性
       属性名：值， //定义一个属性
       函数名：function(){}
       };

注：每一个属性以逗号隔开

------------------------------------------------------------

Date日期对象

      var now=new Date();
      now.getFullYear();//年
      now.getMonth();//月
      now.getDate();//日
      now.getDay();//星期几
      now.getHours();//时
      now.getMinutes();//分
      now.getSeconds();//秒

      now.getTime();

JSON对象

JSON 是存储和传输数据的格式。

JSON 经常在数据从服务器发送到网页时使用。

什么是 JSON？

JSON 指的是 JavaScript Object Notation
JSON 是轻量级的数据交换格式
JSON 独立于语言 *
JSON 是“自描述的”且易于理解

* JSON 的语法是来自 JavaScript 对象符号的语法，但 JSON 格式是纯文本。读取和生成

JSON 数据的代码可以在任何编程语言编写的。

JSON 格式评估为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性，JavaScript 程序可以很容易地将 JSON 数据转换成本地的 JavaScript 对象。

JSON 语法规则

数据是名称/值对
数据由逗号分隔
花括号保存对象
方括号保存数组

"firstName":"Bill"

JSON 名称需要双引号。JavaScript 名称不需要。

JSON 对象

JSON 对象是在花括号内书写的。

类似 JavaScript，对象能够包含多个名称/值对：

{"firstName":"Bill", "lastName":"Gates"}

JSON 数组

JSON 数组在方括号中书写。

类似 JavaScript，数组能够包含对象：

"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"}, 
    {"firstName":"Alan", "lastName":"Turing"}
]

在上面的例子中，对象 "employees" 是一个数组。它包含了三个对象。

DOM模型

DOM 全称是 Document Object Model 文档对象模型

大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。

DOM 元素

通过 id 查找 HTML 元素
通过标签名查找 HTML 元素
通过类名查找 HTML 元素
通过 CSS 选择器查找 HTML 元素
通过 HTML 对象集合查找 HTML 元素

通过 id 查找 HTML 元素

DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。

本例查找 id="intro" 的元素：

<!DOCTYPE html>
<html>
<body>

<h1>通过 id 查找 HTML 元素</h1>

<p id="intro">Hello World!</p>

<p>本例演示 <b>getElementsById</b> 方法。</p>

<p id="demo"></p>

<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML = 
"来自 intro 段落的文本是：" + myElement.innerHTML;
</script>

</body>
</html>

如果元素被找到，此方法会以对象返回该元素（在 myElement 中）。

如果未找到元素，myElement 将包含 null。

通过标签名查找 HTML 元素

本例查找所有 <p> 元素：

<!DOCTYPE html>
<html>
<body>



<p>Hello World!</p>

<p id="demo"></p>


<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
'第一段中的文本 (index 0) 是：' + x[0].innerHTML;
</script>

</body>
</html>

Document 对象

Document 对象的理解：

第一点：Document 它管理了所有的 HTML 文档内容。

第二点：document 它是一种树结构的文档。有层级关系。

第三点：它让我们把所有的标签都对象化

第四点：我们可以通过 document 访问所有的标签对象。

什么是对象化？？

我们基础班已经学过面向对象。请问什么是对象化？

举例：

有一个人有年龄：18 岁，性别：女，名字：张某某

我们要把这个人的信息对象化怎么办！

Class Person {

private int age;

private String sex;

private String name;

}

那么 html 标签要对象化怎么办？

< body >

< div id = "div01" > div01 </ div >

</ body >

模拟对象化，相当于：

class Dom{ //定义一个类

private String id; // id 属性

private String tagName; // 表示标签名

private Dom parentNode; // 父亲

private List<Dom> children; // 孩子结点

private String innerHTML; // 起始标签和结束标签中间的内容

}

Document 对象中的方法介绍

document.getElementById(elementId)

通过标签的 id 属性查找标签 dom 对象， elementId 是标签的 id 属性值

document.getElementsByName(elementName)

通过标签的 name 属性查找标签 dom 对象， elementName 标签的 name 属性值

document.getElementsByTagName(tagname)

通过标签名查找标签 dom 对象。 tagname 是标签名

document.createElement( tagName)

方法，通过给定的标签名，创建一个标签对象。 tagName 是要创建的标签名

注：

document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询

如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询

如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

-------------------------------------------------------------------------

getElementById

效果图：

DOM 方法

HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。

HTML DOM 属性是您能够设置或改变的 HTML 元素的值。

DOM 编程界面

HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。

在 DOM 中，所有 HTML 元素都被定义为对象。

属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。

方法是您能够完成的动作（比如添加或删除 HTML 元素）。

<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

getElementById 方法

访问 HTML 元素最常用的方法是使用元素的 id。

在上面的例子中，getElementById 方法使用 id="demo" 来查找元素。

innerHTML 属性

获取元素内容最简单的方法是使用 innerHTML 属性。

innerHTML 属性可用于获取或替换 HTML 元素的内容。

innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。

更新DOM结点

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

修改不了文本的属性

id1.innerText='<strong>123</strong>'
'<strong>123</strong>'

删除结点

删除结点的步骤：先获取父结点，通过父结点删除自己

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
      var self=document.getElementById('p1');
  </script>
</head>
<body>

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

</body>
</html>

p1.parentElement 获得父节点

father.removeChild(p1) 移除子结点

father.removeChild(father.childern[0])

删除多个结点的时候，children是在变化的

创建和插入dom结点

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
      var js=document.getElementById('js');
      var list=document.getElementById('list');
  </script>
</head>
<body>

  <p id="js">javascript</p>
<div id="list">
    <p id="se">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</div>
</div>
</body>
</html>

list.appendChild(js)

可以把id=js的元素放到最后

创建一个新的标签

      var newP=document.createElementById('p');
      newP.id='newP';
      newP.innerText='hello';
      list.appendChild(newP);
//通过这个属性 可以设置任意的值
    var myScript=document.createElement('Script');
    myScript.setAttribute('type','text/javascript');

获得和设置表单的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    var input_text=document.getElementById('username');
    var boy=document.getElementById('boy');
    var girl=document.getElementById('girl');
    //得到输入框的值
    //input_text.value
    //修改输入框的值
    //input_text.value='123'
    //boy.value
    
    //对于单选框，多选框等待固定值 noy.value只能取到当前的值
    boy.checked;//查看返回的结果，是否为true 如果为true 则被选中
    girl.checked=true;//赋值
  </script>
</head>
<body>
<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="gril">女
    </p>
</form>
</body>
</html>

JS中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应

HTML 事件是发生在 HTML 元素上的“事情”。

常用的事件：

onload 加载完成事件：页面加载完成之后，常用于做页面 js 代码初始化操作

onclick 单击事件：常用于按钮的点击响应操作。

onblur 失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法。

onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作

onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 事件</h1>

<button onclick="document.getElementById('demo').innerHTML=Date()">时间是？</button>

<p id="demo"></p>

</body>
</html>

在上面的例子中，JavaScript 代码改变了 id="demo" 的元素的内容。

在接下来的例子中，代码（使用 this.innerHTML）改变了其自身元素的内容：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 事件</h1>

<button onclick="this.innerHTML=Date()">时间是？</button>

</body>
</html>

事件的注册又分为静态注册和动态注册两种：

什么是事件的注册（绑定）？

其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。

静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。

动态注册事件：是指先通过 js 代码得到标签的 dom 对象，

然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。

动态注册基本步骤：

1 、获取标签对象

2 、标签对象 . 事件名 = fucntion(){}

onclick事件

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML='谢谢！'">请点击此文本！</h1>

</body>
</html>

从事件处理程序调用函数：

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">请点击此文本！</h1>

<script>
function changeText(id) {
  id.innerHTML = "谢谢！";
}
</script>

</body>
</html>

静态注册

效果图：

动态注册

效果图：

<!DOCTYPE html>
<html>
<body>

<p>请点击按钮来显示日期。</p>

<button onclick="displayDate()">时间是？</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>

在上例中，名为 displayDate 的函数会在按钮被点击时执行。

使用 HTML DOM 分配事件

HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：

为 button 元素指定 onclick 事件：

<!DOCTYPE html>
<html>
<body>

<p>请点击“试一试”按钮，以执行 displayDate() 函数。</p>

<button id="myBtn">试一试</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick = displayDate;

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

onload事件

onload 和 onunload 事件

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。

onload 和 onunload 事件可用于处理 cookie。

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<p id="demo"></p>

<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookie 已启用";
  } else {
    text = "Cookie 未启用";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

页面加载完成之后，常用于做页面 js 代码初始化操作

效果图：

onblur事件

失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法。

效果图：

onchange事件

内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>
</head>
<body>

请输入您的名字：<input type="text" id="fname" onchange="myFunction()">

<p>离开输入字段时，会触发一个函数，将输入文本转换为大写。</p>

</body>
</html>

效果图：

动态

效果图：

onsubmit事件

效果图：

onmouseover 和 onmouseout 事件

onmouseover移上来

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
点击有奖</div>

<script>
function mOver(obj) {
  obj.innerHTML = "骗你的"
}

function mOut(obj) {
  obj.innerHTML = "拜拜咯"
}
</script>

</body>
</html>

onmousedown, onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。

首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
点击鼠标</div>

<script>
function mDown(obj) {
  obj.style.backgroundColor = "#1ec5e5";
  obj.innerHTML = "你已按下，可松开";
}

function mUp(obj) {
  obj.style.backgroundColor="#D94A38";
  obj.innerHTML="已松开";
}
</script>

</body>
</html>

正则表达式

方括号
[abc]       //查找方括号之间的任何字符
[^abc]       //查找任何不在方括号之间的字符
[0-9]       //查找0到9的数字
[a-z]       //查找任何从小写a到小写z的字符
[A-Z]       //查找任何从大写A到大写Z的字符
[A-z]       //查找任何从大写A到小写z的字符
[adgk]       //查找给定集合内的任何字符
[^adgk]       //查找给定集合外的任何字符
(red|blue|green)   //查找任何指定的选项

元字符
元字符(Metacharacter) 是拥有特别含义的字符
：       //查找单个字符，除了换行和行结束符
\w       //查找单词字符（单词字符包括：a-z、A-Z、0-9,以及下划线，包括_（下划线）字符）
\W       //查找非单词字符
\d       //查找数字
\D       //查找空白字符
\s       //查找空白字符
\S       //查找非空白字符

JavaScript Cookies

Cookie 让您在网页中存储用户信息。

什么是 cookie？

Cookie 是在您的计算机上存储在小的文本文件中的数据。

当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。

Cookie 是为了解决“如何记住用户信息”而发明的：

当用户访问网页时，他的名字可以存储在 cookie 中。
下次用户访问该页面时，cookie 会“记住”他的名字。

当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。

如果浏览器已关闭本地 cookie 支持，则以下实例均无法工作。

通过 JavaScript 创建 cookie

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。

通过 JavaScript，可以这样创建 cookie：

document.cookie = "username=Bill Gates";

您还可以添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

通过 JavaScript 读取 cookie

通过 JavaScript，可以这样读取 cookie：

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

通过 JavaScript 改变 cookie

通过使用 JavaScript，你可以像你创建 cookie 一样改变它：

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

通过 JavaScript 删除 cookie

删除 cookie 非常简单。

删除 cookie 时不必指定 cookie 值：

直接把 expires 参数设置为过去的日期即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

设置 cookie 的函数

首先，我们创建一个函数，将访问者的名字存储在 cookie 变量中：

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

上面这个函数的的参数是：cookie 的名字（cname），cookie 的值（cvalue），以及知道 cookie 过期的天数（exdays）。

通过把 cookie 名称、cookie 值和过期字符串相加，该函数就设置了 cookie。

获取 cookie 的函数

然后，我们创建一个函数返回指定 cookie 的值：

function getCookie(cname) {//把 cookie 作为参数（cname）
    var name = cname + "=";//创建变量（name）与要搜索的文本（CNAME”=”）。

//解码 cookie 字符串，处理带有特殊字符的 cookie，例如 “$”。
    var decodedCookie = decodeURIComponent(document.cookie);

//用分号把 document.cookie 拆分到名为 ca（decodedCookie.split(';')）的数组中。
    var ca = decodedCookie.split(';');

//遍历 ca 数组（i = 0; i < ca.length; i++），然后读出每个值 c = ca[i]。
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }


//如果找到 cookie（c.indexOf(name) == 0），则返回该 cookie 的值（c.substring(name.length, c.length）。
         if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
    return "";//如果未找到 cookie，则返回 ""。
}