JAVA学习第三阶段模块一_拉钩java高薪第一模块阶段三-CSDN博客

本文链接：https://blog.csdn.net/miaoit/article/details/110009829

模块一前端基础

HTML

注意事项
- <html>标签它代表当前页面是一个HTML
- <head>标签中可以声明HTML页面的相关信息
- <body>标签中它主要是用于显示页面信息
- 标签要有开始，有结束，成双成对
- 开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭<br/>
- 大多数标签具有属性,属性值要使用引号引起来
- HTML本身不区分大小写

文件标签

<body>标签

text属性：更改文本样式
bgcolor 用于设置页面的背景色
background 用于设置页面的背景图片
- 会覆盖bgcolor设置的北京色
- 背景色并没有消失，会闪过

<body text="red" bgcolor="pink" background="img\1.jpg">
        hello world
</body>

排版标签

####　注释和换行标签

<br>建议写成<br/>

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        hello 大家好<br/>
        再起一行<br/>
        再起一行
        <!-- 这里是注释 -->
    </body>
</html>

段落标签

<p>标签
- align = “center” 中心对齐
- align = “right” 右对齐
- align = “left” 左对齐（不写默认左对齐）

<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <p>我爱你中国</p>
    <p align="center">我爱你中国</p>
    <p align="right">我爱你中国</p>

</body>

</html>

<hr>标签水平线标签
- align：位置（对齐方式）
- color：颜色
- width：宽度
- size：大小（水平线粗细） 默认单位px–>像素点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    拉
    <hr color="blue" width="50%">
    勾
    <hr size="1px" color="red">
    网
    <hr>
</body>

</html>

分区标签

普通的div标签并没有什么效果，需要搭配CSS一起使用
div和span都是容器的作用
div和span区别
- div会自动换行，我们叫这样的标签为块级元素
- span标签不会自动换行，叫做行内元素
- div整体划分区块，span局部划分区块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 100px; height: 100px;background-color: antiquewhite;">你好</div>
    <div style="width: 100px; height: 100px;background-color: blue;">我不好</div>
</body>
</html>

字体标签

<font>可以设置字体
- face：字体
- size：大小
- color：颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <font face="隶书" size="7" color="blue">hello world</font>
</body>
</html>

颜色

使用十六进制表示不同颜色
- #FF0000
- FF表示红色00表示黄色00表示蓝色
- 可简化为#F00
RGB颜色表示法：rgb（x,y,z）
- x,y,z是0~255之间的整数，rgb字母大小写无所谓

标题标签

<h1-6> 自动换行，字体加粗，标题和标题之前有距离
<h7-之后>被认为是文本，不是标题

格式化标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 加粗 -->
    <b>拉勾网！</b> <br>
    <!-- 斜体  -->
    <i>拉勾网！</i> <br>
    <!-- 删除线 -->
    <del>拉勾网！</del><br>
    <!-- 下划线 -->
    <u>拉勾网！</u>
</body>

</html>

列表标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>有序列表</h2>
    <!-- 有序列表 1. 2. 3.-->
    <ol>
        <li>辣子鸡丁</li>
        <li>打卤面</li>
        <li>山西油泼面</li>
    </ol>

    <!-- 有序列表 A. B. C.-->
    <ol type="A">
        <li>辣子鸡丁</li>
        <li>打卤面</li>
        <li>山西油泼面</li>
    </ol>

    <!-- 有序列表 罗马数字 I. II. III.-->
    <ol type="I">
        <li>辣子鸡丁</li>
        <li>打卤面</li>
        <li>山西油泼面</li>
    </ol>

    <!-- 有序列表 从2开始 2. 3. 4.-->
    <ol start="2">
        <li>辣子鸡丁</li>
        <li>打卤面</li>
        <li>山西油泼面</li>
    </ol>

    <hr>
    <h2>无序列表</h2>
    <!-- 默认样式 -->
    <ul>
        <li>辣子鸡丁</li>
        <li>打卤面</li>
        <li>山西油泼面</li>
    </ul>
    <!-- 空心圆 -->
    <ul type="circle">
        <li>辣子鸡丁</li>
        <li>打卤面</li>
        <li>山西油泼面</li>
    </ul>

    <!-- 方块 -->
    <ul type="square">
        <li>辣子鸡丁</li>
        <li>打卤面</li>
        <li>山西油泼面</li>
    </ul>

</body>

</html>

图形标签

<img>标签
border：边框
width、height只设置一个，图片会等比缩放
title：鼠标悬停图片上显示的文本
alt：图片不存在默认提示文案
align对齐方式
- left
- right
- middle
- top
- bottom

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    大美女
    <img src="img/1.jpg" alt="图片加载失败" width="400px" height="400px" title="wooohoo" align="bottom">

</body>

</html>

超链接标签

跳转互联网资源
跳转本地资源
调用本地程序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 跳转互联网资源，需要补全协议部分 -->
    <a href="http://lagou.com">去求职</a>
    <!-- 访问本地资源 -->
    <a href="01-test.html">去第一个页面</a>
    <!-- 调用本机邮箱客户端 -->
    <a href="mailto:miaoxun3@jd.com">发邮件</a>
    <!-- 调用QQ聊天窗口 -->
    <a href="tencent://message/?uin=19998539&Menu=yes">
        <img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7" />
    </a>
</body>

</html>

表格

<table>定义一个表格
- border：边框
- width：宽度
- align：对齐方式
  - left
  - right
  - center
- cellspacing：单元格间距
<tr>表格中的行
- align
<td>表格中的列
- colspan 指示列的合并
- rowspan 指示行的合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4行3列表格</title>
</head>
<body>
    <table border="1" align="center" width="400px">
        <!-- 合并列 -->
        <tr>
            <td colspan="3" align="center">1</td>
        </tr>
        <!-- 合并行 -->
        <tr>
            <td rowspan="3">4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
        </tr>
    </table>
</body>
</html>

表单标签

<form>标签
- action：整个表单提交的目的地
- method：表单提交的方式
  - GET：传输数量最小（传递普通文字信息，传递图片会失败），明文提交（在浏览器url后面会显示提交的数据，不适合用于登录）
  - POST：传输数据最大（传递文字、图片皆可），密文提交（浏览器的url后面看不到提交的数据）
元素控件
- <input>标签
  - type
    - text：默认值，普通的文本输入框
    - placeholder属性：提示文本
    - maxlength属性：最多能输入字符数量
    - password：密码输入框
    - checkbox：多选框/复选框
    - checked：默认被选中
    - radio：单选按钮
    - file：上传文件
    - reset：重置按钮
      - value：按钮文案
    - submit：提交按钮
      - value：按钮文案
    - button：普通按钮
- <select>：下拉列表/下拉列
  - <option>：列表中的项
    - selected：被选中
- <textarea>：文本域（多行文本框）
  - 可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的height 和 width 属性。
- <button>按钮
  - 在form表单中，作用和submit一样
  - 不在form表单中，就是普通按钮（配合后期的javascript，可扩展性更高）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="http://www.baidu.com">
        <p>账号：<input type="text" placeholder="请输入账号" maxlength="5"></p>
        <p>密码：<input type="password"></p>
        <!-- 可多选 -->
        <p>爱好：
            <input type="checkbox">抽烟
            <!-- 默认被选中 -->
            <input type="checkbox" checked="checked">喝酒
            <input type="checkbox">烫头
        </p>
        <!-- 单选 -->
        <p>性别：
            <input type="radio" name="sex">男
            <input type="radio" name="sex">女
        </p>
        <!-- 上传文件 -->
        <p>头像：
            <input type="file">
        </p>
        <p>
            <!-- 重置 -->
            <input type="reset" value="清空">
            <!-- 提交表单 -->
            <input type="submit" value="提交">
            <!-- 普通按钮 -->
            <button>取消</button>
        </p>
        <!-- 下拉框 -->
        <p>地区：
            <select>
                <option>北京</option>
                <option selected>上海</option>
                <option>广州</option>
            </select>
        </p>
        <p>个人简介：
            <textarea></textarea>
        </p>
    </form>
</body>

</html>

注意事项：
- 所有表单中的元素都要具有名称（否则提交到服务器之后，无法识别不同的元素）
- 单选框要想可以一次只选择一个，要具有相同的name值
- 所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值

框架标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<frameset rows="10%,*,13%">
    <frame src="top.html"></frame>
    <frameset cols="15%,*">
        <frame src="left.html"></frame>
        <frame src="right.html"></frame>
    </frameset>
    <frame src="foot.html"></frame>
</frameset>

</html>

HTML5新特性

新增语义化标签

html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此，新增许多语义化标签，让div“见名知意”
- section标签：表示页面中的内容区域，部分，页面的主体部分
- article标签：文章
- aside标签：文章内容之外的，标题
- header标签：头部，页眉，页面的顶部
- hgroup标签：内容与标题的组合
- nav标签：导航
- figure标签：图文并茂
- foot：页脚，页面的底部

媒体标签

<video>标签
- controls：控制面板
- loop：循环播放
- autoplay：自动播放（谷歌浏览器关闭自动播放功能，360浏览器可以）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 循环播放 -->
    <!-- 自动播放 -->
    <video src="img/健康权益兑换.mp4" controls loop autoplay></video>
</body>
</html>

新增表单控件

type
- color：调色板
- date：日历
- month：月历
- week：周历
- number：数值域
  - min：最小值（默认值是1）
  - max：最大值（默认值无上限）
  - step：递增量
- range：滑块
- search：搜索框
mark标签
- 高亮显示
progress标签
- 进度条
datalist模糊查询（自动联想带入）

<input list="citys">
    <datalist id="citys">
        <option value="北京"></option>
        <option value="上海"></option>
        <option value="广州"></option>
    </datalist>

CSS

CSS（层叠样式表）
通过CSS可以让我们定义HTML元素如何显示
CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来（div标签）
可以让HTML更加漂亮

###　CSS与HTML结合方式

内联/行内样式

内部使用style属性设置样式

<h1 style="color:red">我爱你中国</h1>

内部样式表

内部使用style标签设置样式

<style>
    /*
    选择器{
        属性：值
    }
    选择器：你要修饰的目标
    */
    h1 {
        color: blue;
    }
</style>

外部样式表

创建css文件
- html文件中使用<link rel=“stylesheet” href=“css/test01.css”>
```
<link rel="stylesheet" href="css/test01.css">
```
- <style>标签中使用import
```
<style>
    @import 'css/test01.css';
</style>
```

就近原则

优先级：内联>内部>外部

CSS选择器

元素（标签）选择器

类选择器

匹配所有class

<style>
    .b {
        color: darkcyan;
    }
</style>

<body>
    <h1 class="b">拉勾网</h1>
</body>

id选择器

具有唯一性，只有id相同的会修改样式

<style>
    #c {
        color: aquamarine;
    }
</style>

<body>
     <h1 id="c">拉勾网</h1>
</body>

选择器组

多个元素全部被一个样式修饰

<style>
    .b,
    #c {
        color: darkcyan;
    }
</style>

派生选择器

子代
后代

<style>
    /*后代选择器： div p ：div下的所有p标签都会被选取，忽略层级 */
    
    div p {
        color: red;
    }
    /*子代选择器： div>p：div下的子级元素被选取，只选取一级 */
    
    div>p {
        color: aqua;
    }
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bgCCyeFF-1606142405804)(C:\Users\miaoxun3\AppData\Roaming\Typora\typora-user-images\image-20201121132720399.png)]

CSS伪类

CSS伪类可以对CSS样式添加一些特殊效果
伪类属性列表：
- :active 向被激活的元素添加样式。
- :hover 当鼠标悬浮在元素上方时，向元素添加样式。
- :link 向未被访问的链接添加样式。
- :visited 向已被访问的链接添加样式。
- :first-child 向元素的第一个子元素添加样式。

超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 未点击 */
    a:link {
        color: green;
    }
    /* 悬停 */
    a:hover {
        color: aquamarine;
        font-size: 30px;
    }
    /* 激活（点住不松手） */
    a:active {
        color: black;
    }
    /* 访问过 */
    a:visited {
        color: cornflowerblue;
    }
</style>
<body>
    <a href="http://lagou.com">拉勾网</a>
</body>
</html>

基本属性

文本属性

指定字体：font-family
字体大小：font-size
- px：像素
- em：倍数

盒子模型

margin外边距-盒子与盒子之间的距离
border边框-盒子的保护壳
padding内边距/填充-内填充，盒子和内容之间的距离
content内容-盒子的内容，显示的文本或图像

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s66WdXnZ-1606142405806)(C:\Users\miaoxun3\AppData\Roaming\Typora\typora-user-images\image-20201121195103902.png)]

CSS 定位

默认定位

块级元素：h1-h6，p，div等，自上而下，垂直排列（自动换行），可以改变宽高
行内元素：a，b，span等，从左向右，水平排列（不会换行），不可以改变宽高
行内块元素：input，img等，从左向右，水平排列（自动换行），可以改变宽高
如何让span标签也可以改变宽高
- 使用display属性进行转换 display：inline-block；
- 将行内元素转换为行内块元素

浮动定位

float
- none：不浮动
- left：靠左浮动
- right：靠右浮动

相对定位

相对于原来的位置移动—position：relative；

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .da {
        width: 300px;
        height: 300px;
        background: palevioletred;
        border: 2px solid;
    }

    .a,
    .b,
    .c {
        width: 200px;
        height: 60px;
    }

    .a {
        background: red;
    }

    .b {
        background: yellow;
        position: relative;
        top: 30px;
        left: 15px;
    }

    .c {
        background: blue;
    }
</style>

<body>

    <div class="da">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DEaXje1j-1606142405807)(C:\Users\miaoxun3\AppData\Roaming\Typora\typora-user-images\image-20201122085444234.png)]

绝对定位

本元素与已定位的祖先元素的距离
- 如果父级元素定位了，就以父级为参照物；
- 如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。
- 如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。

固定定位

position:fixed;
无论页面如何滚动，都在固定的位置不动

<style>
    .fixed{
        width: 400px;
        height: 300px;
        background-image: url(img/1.gif);
        position: fixed;
        right: 0px;
        bottom: 0px;
    }
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MB2uTM1Q-1606142405809)(C:\Users\miaoxun3\AppData\Roaming\Typora\typora-user-images\image-20201122085314774.png)]

z-index

如果有重叠元素，使用z轴属性，定义上下层次
z-index的值没有固定，是整型即可
要配合绝对定位使用！相对定位不起作用

CSS3

圆角

border-radius：左上，右上，左下，右下；
border-radius：50% 直接是圆形；
border-radius：全部；

盒子阴影

box-shadow：水平偏移量，垂直偏移量，模糊半径，扩张半径，颜色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SlyuxgoN-1606142405811)(C:\Users\miaoxun3\AppData\Roaming\Typora\typora-user-images\image-20201122091922765.png)]

渐变

线性渐变
- background：linear-gradient（[方向/角度]，颜色列表）
- 可以写多个颜色渐变

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div {
        width: 300px;
        height: 150px;
    }
    .a{
        background:linear-gradient(to left,red,black)
    }
</style>

<body>
    <div>
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j87vIeCA-1606142405812)(C:\Users\miaoxun3\AppData\Roaming\Typora\typora-user-images\image-20201122091214261.png)]

径向渐变
- background:radial-gradient（颜色列表）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div {
        width: 300px;
        height: 150px;
    }
    .a{
        background:radial-gradient(red,black,pink)
    }
</style>

<body>
    <div>
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0ZI7rnOD-1606142405812)(C:\Users\miaoxun3\AppData\Roaming\Typora\typora-user-images\image-20201122091336409.png)]

过渡

从一个状态到另一个状态的缓慢过程
transition：1，2，3，4；
- 1：过渡或动画模拟的css属性
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rZs3UFWO-1606142405813)(C:\Users\miaoxun3\AppData\Roaming\Typora\typora-user-images\image-20201122094054744.png)]
- 2：完成过渡所用的时间（2s内完成）
- 3：过渡函数
- 4：延迟执行时间

动画

从一个状态到另一个状态，过程中每个时间点都可以控制。
关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}… }
动画属性：animation{ 1 , 2 , 3 , 4 , 5 }
- 1：动画帧
- 2：执行时间
- 3：过渡函数
- 4：动画执行的延迟（可省略）
- 5：动画执行的次数
infinite：无限次
alternate：交替执行（一去一回）

JS

可以脱离html页面独立运行
由浏览器解释执行，不进行预编译，逐行执行
内置大量现成对象
使用场景
- 客户端数据计算
- 客户端表单合法性验证
- 浏览器事件的触发
- 网页特殊显示效果制作

JS的组成

ECMAScript：核心语法
DOM：文档对象模型
- 操纵HTML使用
BOM：浏览器对象模型
- 操控浏览器使用

与HTML结合方式

行内脚本

直接写在标签内部

<h2 onclick="alert('hello')">点我试试</h2>

内部脚本

写在head标签和body标签中间

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<script>
    alert('hi');
</script>

<body>
    <h2 onclick="alert('hello')">点我试试</h2>
</body>

</html>

外部脚本

创建js文件
使用script标签引入

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

变量

因为js是弱类型语言，所以在定义变量的时候，所有的数据类型都是var

<script>
    var a = 10;
    var b = "kobe";
    alert(a);
    alert(b);
</script>

数值类型：number
- 不区分整型数值和浮点型数值
- 所有数字都采用64位浮点格式存储，类似于double格式
字符串：string
布尔类型
- 仅有两个值：true、false
- true=1，false=0

自动类型转换

数字 + 字符串：数字转换为字符串 10+’a’ -> 10a
数字 + 布尔值：true转换为1，false转换为0 true+5->6
字符串 + 布尔值：布尔值转换为字符串true或false true+’a’->truea
布尔值 + 布尔值：布尔值转换为数值1或0 true+true->2

数据类型转换函数

parseInt：强制转换成整数
- 如果不能转换，则返回 NaN （NaN 属性是代表非数字值的特殊值。该属性用于指示某个值
  不是数字）
- 例如：parseInt(“6.32”)=6
parseFloat：强制转换成浮点数
- 如果不能转换，则返回 NaN
- 例如：parseFloat(“6.32”)=6.32
typeof：查询数值当前类型，返回 string / number / boolean / object
- 例如：typeof(“test”+3)==“string”

关系运算

严格相等 ===
- 数值相等
- 类型相等

var a1 = 10;
var a2 = "10";

var b1 = a1 == a2;
var b2 = a1 === a2;
console.log(b1); //true
console.log(b2); //false

控制语句

if-else

if（关系表达式） {
	// 语句块 1
}else {
	// 语句块 2
}

if-else if

if (表达式1) {
	// 语句1;
}else if (表达式2){
	// 语句2;
}else if (表达式3){
	// 语句3;
} else{
	// 语句4;
}

switch

switch (表达式) {
	case 值1:
		// 语句1;
		break;
	case 值2:
		// 语句2;
		break;
	default:
		// 语句4;
}

for循环

for (var i=1 ; i<=5 ; i++){
	alert(i);
}

while循环

while (条件){
	// 语句1;
	...
}

字符串API

length：获取字符串长度
toUpperCase：字符串转换为全大写
toLowerCase：字符串转换为全小写
charAt（下标）：返回字符串对应下标字符
charCodeAt（字符）：返回字符在unicode编码中的编号
indexOf（字符）：返回字符在字符串中第一次出现的下标位置
lastIndexOf（字符）：返回字符在字符串中最后一次出现的下标位置
substring（开始下标，结束下标）：截取字符串开始下标到结束下标位置的子字符串（包含开始，不包含结束）

var a = 'abcdefg';
a.substring(2,4); //cd

replace（旧字符串，新字符串）：将字符串中的旧字符串替换为新字符串
split（分隔符）：将字符串以固定分隔符分隔后加入到数组

数组操作

创建数组

var arr = new Array();

初始化数组

三种方式初始化数组

// 第一种
var arr1 = new Array();
arr1[0] = 110;
arr1[1] = 119;
arr1[2] = 120;
// 第二种
var arr1 = new Array(10,"a",true);
// 第三种
var arr1 = [10,"a",true];
for (var i = 0; i < arr1.length; i++) {
	console.log(arr1[i]);
}

常用方法

toString：将数组转换为字符串
join（连接符号）：将数组中每个字符串使用连接符号连接起来，拼接成一个新的字符串
concat（新元素）：将新元素添加进新数组，原数组不变
slice（开始下标，结束下标）：在数组中开始下标-结束下标位置截取，组成一个新数组，原数组不变（包含开始下标，不包含结束下标）
reverse：数组的反转（倒序）
sort：数组排序
- 字符排序（按字符顺序依次排序）
- sort（func）：传入排序函数

正则表达式

以/^开始，以$/结尾

函数

语法

function 函数名（形参列表）{
    return ...
}

function qiuhe(a, b) {
  var sum = a + b;
  console.log(sum);
  console.log("传入" + arguments.length + "个参数");
  return sum;
}

qiuhe(1, 3);

全局函数

isNaN（）：检测是否非数字值

console.log( isNaN( 123 ) ); // 数字，false
console.log( isNaN( "hello" ) ); // 非数字，true
console.log( isNaN( 4-1 ) ); // 数字，false
console.log( isNaN( 123 ) ); // 数字，false
console.log( isNaN( -10 ) ); // 数字，false
console.log( isNaN( "123" ) ); // 数字，false
console.log( isNaN( "1a23" ) ); // 非数字，true

eval（）：让字符串中的运算符号生效

var str = "1+3";
console.log( str ); // 1+3 , +会认定为一种字符符号而已，没有加法的作用
console.log( eval( str ) ); // 让字符串中的运算符号生效

encodeURI（）：转码
decodeURI（）：解码

闭包

指有权访问另一个函数作用域中变量的函数，一般情况就是再一个函数中包含另一个函数
闭包的作用：访问函数内部变量、保持函数再环境中一直存在，不会被垃圾回收机制处理
就是在函数内部的局部范围内声明一个封闭的环境，此环境不会被垃圾回收器检测到
全局变量声明的时候可以不使用var

a = 10;
function test1(){
    b = 20;
    var c = 30;
    console.log(a);
}
function test2(){
    console.log(a); //可以使用
    console.log(b); //可以使用
    console.log(c); //报错
}

在函数内部并且使用var声明的变量叫做局部变量
闭包的优点：方便调用上下文中声明的局部变量逻辑紧密，可以在一个函数中再创建个函数，避
免了传参的问题
闭包的缺点：因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭
包就会造成内存泄露，内存消耗很大

弹框输出

页面输出：document.write
确认框 confirm

<script>
        document.write('<h2>hello world</h2>');
        var b = confirm("确定删除吗？");
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yOR0uLUa-1606142405814)(C:\Users\miaoxun3\AppData\Roaming\Typora\typora-user-images\image-20201122152821786.png)]

DOM

DOM访问

阻止表单提交

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>



<body>
    <table border="1" cellspacing="0">
        <tr>
            <td><input type="checkbox" onchange="quanxuan(this)" />全选</td>
            <td>名称</td>
            <td>单价</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />1</td>
            <td>百事可乐</td>
            <td>3.0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />2</td>
            <td>美年达</td>
            <td>4.0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />3</td>
            <td>七喜</td>
            <td>3.5</td>
        </tr>
    </table>
    <script>
        function quanxuan(all) {
            var arr = document.getElementsByName("one");
            console.log(arr);
            for (var a = 0; a < arr.length; a++) {
                arr[a].checked = all.checked;
            }
        }
    </script>

</body>

</html>

事件

窗口事件

仅在 body 和 frameset 元素中有效。
- onload 当文档被载入时执行脚本

<body onload="test()">
    <script>
        function test() {
            document.write("哈哈哈哈");
        }
    </script>
</body>

事件冒泡

先子，后父。事件的触发顺序自内向外，这就是事件冒泡

<body>
    <div id="father" onclick="call()">
        <div id="son" onclick="call2()"> </div>
    </div>
    <script>
        document.getElementById("father").addEventListener("click",function(){
            alert("father!");
        });
        document.getElementById("son").addEventListener("click",function(e){
            e.stopPropagation();
            alert("son!");
        });
    </script>
</body>

事件捕获

先父，后子。事件的触发顺序自外向内，这就是事件捕获

面向对象

使用new Object（）创建对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        var user = new Object();
        user.name = "吕布";
        user.age = 21;
        user.say = function(){
            console.log("大家好，我叫" + this.name + "我今年" + this.age + "岁了")
        };
        user.say();
    </script>
</body>
</html>

使用构造函数

function userinfo(name , age){
	this.name = name;
	this.age = age;
	this.say = function(){
		console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！");
	}
}
var user = new userinfo("詹姆斯",35);
user.say();

使用直接量

var user = {
    username : "孙悟空",
    age : 527,
    say : function(){
    	console.log("大家好，我叫："+this.username+"，我今年"+this.age+"岁了！");
    }
};
user.say();