前端知识点总结

使用markdown语法:  # HTML  ## 基本标签  ### 块级标签  * `div` 分区标签 * `p`  段落标签 * 标题标签`` 有强调       `` * `pre` 保留格式 * `ul>li` 无序列表 * `ol>li` 有序列表 * dl>dt dd 定义列表  ### 行内标签  - 文本样式标签    - `strong` b 加粗  (strong语义强化，常用strong)    - `del` 删除    - `i` em 倾斜 常用i    - span  分区标签    - 图片标签 img (宽高可设置，替代元素）      标签属性  src(图片地址)  alt(图片出不来提示) title(鼠标提示)      图片路径                                              - `sub`下标   `sup` 上标  - 超链接 a    - target 打开目标的方式      _blank 新标签      _parent 使用框架      _self 默认值      _top 使用框架      ```                          注释快捷键 ctrl /                    注释快捷键 ctrl /                    空链接                    空链接          空链接     ```  ### HTML预留字符     ` ；`    空格       `$gt;`       小于号 <       `>`         大于号>    `¥`       ·￥·元       `©`        版权 ?   ## 列表  ### 表格    border 边框    cellspacing 去除单元格间隙    cellpadding  填充单元格    tr 行 td 列  colspan(将列合并，即横合并，横合并减少同行td）                     rowspan(合并是上下合并，下一个tr中的td减少)    > tr 不能写在里面div table等东西，td可以包含    ```html    (1)colspan 两个单元格横合并               单元格               单元格               单元格               单元格   本来五个td，两者合并，所以四个td   (2)rowspan 上下合并                        单元格                   单元格                   单元格                   单元格                   单元格                                                 单元格                   单元格                   单元格                  上下合并，所以下面少两个td   (3) td里面包裹table，上边合并单元格时，下边的td还需要合并单元格，然后包裹table。在写表格样式时，还需要清除所有样式。在写表格样式时，还需要清除所有样式。然后设置宽度，使用margin居中。        ///为开头的文本设置宽度           
       
费用报销单
       
           
费用项目
类别
           
金额
           
负责人(签字)
           
       
       
           
           
           
       
   
        
总人民币(大写) 拾 万 千 百 拾 元 角 分    （小写）￥ 元
       
       
           
               ///单加边，否则，很容易重复合并单元线                       
                   
                       
总经理签字：
                       
财务负责人签字：
                       
报销人：
                   
                   
财务审核：
                       
部门签字：
                   
               
           
       
       
   ```        caption 表头  thead头  tr>th                             tbody 身体 tr>td  必须写在表格中tbody                           tfoot 尾        写表格table tr th(td)必须一起写  ### 类表格    将普通标签转换为表格标签，就可以借用表格的样式布局    常用 的结构：display:table>display:table-cell    ```    //设置表格类           main{               display: table;               width: 100%;               height: 300px;           }           // 设一行，加上边框           div{               display: table-cell; //一行几个元素，一行分成几个相同的块               border: 3px solid blueviolet;           }          .div1,.div3{
              width: 150px;
          }
          
       
      

          
1
          
2
          
3
   
     
  ```

  

### 列表

+ ul 无序列表   ol有序列表 >li     
+ li  中可嵌套p div 等 ul ol 中不可

  > 首先先写一个盒子，定好几个盒子，盒子的内容用什么标签，写CSS时先清除样式，设置宽度，高度，设置margin居中，然后使用弹性布局浮动居中，之后再将宽度等分。弹性布局横向，是使用布局的父级写display：flex,而浮动是是谁布局写谁。

```html
   
 

    

        

            
            
精选
            
猜你喜欢
                       
        
        

            
            
精选
            
猜你喜欢
                       
        
    
```

+ dl>dt&dd  (dt与dd同级，但是dt写小标算是)   dl内可以嵌套一个dt,n个dd ，dt里面不可以不能插入div等一系列标签，dd可以，如果使***用span等一系列的行内元素写class，设置宽高一些东西，需要display：inline-block，转换为行内块元素，不然设置宽高无效***。

  ```HTML
  
  

  

      
购物指南
          
购物流程
          
购物流程
          
购物流程
          
购物流程
          
购物流程
          
购物流程
  
  
  

      
购物指南
          
购物流程
          
购物流程
          
购物流程
          
购物流程
          
购物流程
          
购物流程
  
  
  ```

### 表单

+ 表单 input  type 类型决定标签

+ input 和button对齐常用属性 vertical-align: bottom; 底部对齐

+ type： text   

  ​            password  密码

  ​            radio（单选）name 名称必须相同    

  ​            checkbox 复选框

  ​            file 选择文件

  ​            date 时间
  
  ​            button  按钮
  
  ​            submit 提交按钮
  
  ​            reset 重置按钮
  
  ​            image 图片按钮 不常用
  
  + button
  
    type: submit   提交按钮
  
    ​         reset  重置按钮
  
  + 下拉框
  
    lable
  
    select > option
  
  +  placeholder默认提示 
  
  +   文本域  textarea
  
      内容
     
  
  ```html
  

    用户名：

    密码：

    
    //name必须相同，才只能选一个
    
    男

    女

    中性

    爱好：
    
    足球
    篮球
    羽毛球
    乒乓球
    
    

    
    
    
    
    
    
    
    
                         提交
                         按钮
                         
                         生日：
                         
                             
                             2022
                             2021
                         年
    
  ```
## 常用样式

### 文本样式

+ color 字体颜色

+ font-size：字体大小

+ font-family：设置字体

+ font-weight：字体加粗

+ font-style：字体倾斜

+ text-align：文本对齐方式

+ text-decoration：文本装饰（下划线）

+ text-transform:lowercase 字母大写变小写

+ text-indent：首行缩进

+ line-height：行高

+ justify-content: space-around;    均匀排列每个元素  *每个元素周围分配相同的空间*  

+  transition: 0.3s;滑动

+ opacity: 0.5;背景色透明

+ overflow:hidden 隐藏溢出内容 scroll 添加滚动条

+  cursor: pointer;鼠标变成手

+ word-spacing：设置单词距离

+ (/* 下面三句话为组合，/* 文字太长省略出现... */一定要给宽度样式 */

   white-space:nowrap;

   overflow: hidden;

   text-overflow: ellipsis;)

+ letter-spacing：字间距

+ object-fit: cover：强制图片不变形

+ white-space: nowrap; 强制文本不换行

+ vertical-align:middle  垂直居中 {display：table-cell搭配用可以}

+   transition: 2s linear;    过渡：使标签样式按照动画过程变化,1s表示时间 linear表示匀速 

    

​       注：width/height=content+padding+border

+ ```
  //文字在线上
  

         

           
我们的服务
           
PFOGRAM   HIGHLIGHTS
         
       
  ```

#### 媒体查询

+ 媒体查询,根据条件使用特定的样式集合 ,screen 判断条件，判断展示页面的屏幕是不是普通的显示器（pc,ipad,mobile），max-width 当前浏览器窗口小于指定值。也可使用网格布局设置写出，可参考苹果官网

+ 最大最小值：/* 尺寸的最大最小限定 */

   ​      max-width: 900px;

  ​      min-width: 100px;

  ​      min-height: 100px; 

  ​      max-height：900px


```HTML


 @media screen and (max-width:1200px) {
   body {  background-color: lightsalmon;  
           height:300px; 
} 
 @media screen and  (max-width:500px) {
            .col-sm-12{
                width: 100%;
            }
        }

   
 

        
 

        
 
  


```



### css样式

#### css选择器

| 选择器                          | 例子                                                     | 描述                                                         |
| :------------------------------ | -------------------------------------------------------- | :----------------------------------------------------------- |
| 通配符选择器 *                  | *{    }                                                  | 选中所有                                                     |
| 标签选择器 body p h1-h6 ul li a | body{    }                                               | 根据标签选中范围                                             |
| id选择器                        |                                                  | #c 前缀用点  id 选择器不能重名                               |
| 类名选择器（class）             |                                              | .a 前缀用点                                                  |
| 并列选择器                      | ul,ol{  list-style:none   }                              | 并集 ul和ol全部用此样式，用逗号                              |
| 后代选择器                      | ul li{   }                                               | 使用空格隔开                                                 |
| 子选择器                        | h1 > strong                                              | 用于选择直接的紧邻子标签/选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。(父子关系) |
| 相邻选择器 ~                    | h1 ~ p {     **color:** blue;     **font-size:** 18px; } | 兄弟元素之间无需紧邻，二者有相同的父元素                     |
| 紧邻选择器+                     | h1 + p {     **color:** blue;     **font-size:** 18px; } | 用于选择位置靠后的紧邻兄弟标签，二者有相同的父元素           |
| 属性选择器                      | input[type="text"] {    **color:** blue; }               | 属性选择器用来匹配具有特定属性的元素。属性选择器的定义方式与标签选择器相似，只不过需要在标签的后面使用方括号`[ ]`来指定标签具有的属性信息，如下所示： |

+ 伪元素 利用样式在页面上添加内容，伪造标签  before after

#### 伪类选择器

| 选择器         | 例子                                                         | 描述                                                         |
| :------------- | ------------------------------------------------------------ | :----------------------------------------------------------- |
| :active        | a:active{  box-shadow: 0 0 5px #222; }                       | 鼠标按下效果                                                 |
| :hover         | a/div:hover{color:red }                                                                   .box-bttom:hover .select{display: block;} | 鼠标悬停效果                          滑动到box-bttom:的层时select的层显示 |
| :link          | .a:link{  color:red }                                        | 当前地址没有被浏览器访问过颜色红色                           |
| :visited       | .a:visited{ color:red }                                      | 当前的链接地址被访问过（在浏览器中）                         |
| :focus         | input:focus{border: 5px solid blue};                         | 表单获取焦点（鼠标点上去）时 ，input 框变色                  |
| :checked       | input:checked{color: chartreuse;    }                        | 匹配处于选中状态的  元素                              |
| :nth-child(n)  | ul li:nth-child(3){   }                                      | 选中父元素的第3个子元素                                      |
| nth-of-type(n) | .li:nth-of-type(2){  color: salmon;   }                      | 匹配父元素的第二个子元素/nth-of-type 分类型查找              |
| :nth-child(4n) | ul li:nth-child(4n){  text-decoration: overline;  }          | 选择4的倍数                                                  |
| :first-of-type | ul li:first-of-type{  font-weight: bold;  }                  | 匹配父元素中的第一个加粗元素                                 |
| :last-of-type  | p:last-of-type                                               | 匹配父元素中的最后一个 
 元素                              |

#### 伪元素

| 伪元素       | 例子                                                      | 例子描述                    |
| ------------ | --------------------------------------------------------- | --------------------------- |
| ::after      | p::after                                                  | 在每个 
 元素之后插入内容 |
| ::before     | p::before                                                 | 在每个 
 元素之前插入内容 |
| 清除浮动     | .a::before,.a::after{content:"",clear:both,display:block} |                             |
| 点击写小弹框 | 可以写在内容中来写                                        |                             |

#### 选择器权重

+ 浏览器只会展示权重最高的样式
+ 行内style>id>class>tag/*
+ *通配符    全选   权重0
+ 标签选择器     （权重1）
+ 类选择器    （权重10）
+ id选择器     （权重100）
+ 父子选择器  #p del  (权重叠加)
+ importment权重无限大

## 布局

### 盒模型

+ width 宽

+ height 高

+ padding 内填充（字与盒子距离）

+ margin外边框  （ [深入理解css中的margin属性 - Wayne-Zhu - 博客园 (cnblogs.com)](https://www.cnblogs.com/zhuzhenwei918/p/6124263.html) ）

+ border 边框：1px soild red;

+ border-radious:圆角

+ border-collapse: collapse 合并表格相邻边框， 相邻的两个边框会合并为一个单一的边框 

+ background-color:背景颜色

+ background-image:url();背景图片

+ background-repeated：no-repeate 图片背景不重复

+ background-position: center center; //图片位置

+ background-size: auto 70%; //  设置背景图像的尺寸 

+ outline：1px soild red   轮廓线

+ display:block/inline-block/inline

+ box-sizing: border-box; 边框盒模型

+ /*内容溢出：隐藏 */

  ​      overflow: hidden;

  ​      /* ，有内容超出才处理，无法单独使用，允许用户调整大小 */

  ​      resize: both;
  
  ```
  //小三角
   
    
  
  
    

  
  ```
  
  

###           弹性布局

+ display:flex 弹性布局       需要浮动的父元素写弹性布局

```
/* 对齐方式 */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* 从行首开始排列 */
justify-content: end;        /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;       /* 一个挨一个在对齐容器得左边缘 */
justify-content: right;      /* 元素以容器右边缘为基准，一个挨着一个对齐, */
/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
/* 分配弹性元素方式 */
justify-content: space-between;  /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly;  /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */
justify-content: stretch;       /* 均匀排列每个元素
                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */
/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;

/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
```



| 值            | 描述                                                         | 测试                                                         |
| :------------ | :----------------------------------------------------------- | :----------------------------------------------------------- |
| flex-start    | 默认值。从行首起始位置开始排列。                             | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=flex-start) |
| flex-end      | 从行尾位置开始排列。                                         | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=flex-end) |
| center        | 居中排列。                                                   | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=center) |
| space-between | 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。   | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-between) |
| space-evenly  | 均匀排列每个元素，每个元素之间的间隔相等。                   | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-evenly) |
| space-around  | 均匀排列每个元素，每个元素周围分配相同的空间。               | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-around) |
| initial       | 设置该属性为它的默认值。请参阅 [*initial*](https://www.runoob.com/cssref/css-initial.html)。 | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=initial) |
| inherit       | 从父元素继承该属性。请参阅 [*inherit*](https://www.runoob.com/cssref/css-inherit.html)。 |                                                              |

###           浮动

   + 指定元素脱离原本的文档流沿着容器的左侧或右侧进行排列，允许其他行内（块）对自身进行行环绕排列（MDN）float:left/right 浮动，浮动是谁要浮动则写在哪里，不写父类。

      eg:ul>li  li写浮动，ul写清除浮动

   + 使用原则1.如果使用浮动，就要将同级的标签全部设为浮动

     ​               2.一定要记得清除浮动

   + 浮动会造成容器的高度塌陷

      1.容器标签使用overfiow

      2.容器标签在前后缀上转成block并添加clear样式,需要清除浮动的父类写清除。如下代码，div需要清除浮动，使用main来写清除浮动样式。

     .a::before,
     
     .a::after{content:"",clear:both,display:block}       ·
     
     ```
     // 当左边是图片，右边是文字时，可以写图片左浮动，使文字围绕图片在右边
     
     如果中间自适应，则两边需要左浮动，右浮动，如果横排并列，直接都左浮动就可以
     双飞翼布局
     /* main{
                 background-color: rgb(224, 183, 183);
                 height: 300px;
             }
             .div1{
                 float: left;
                 width: 150px;
                 height: 200px;
                 border: 5px solid blue;
                 overflow: hidden;
             }
             .div2{
                 float: right;
                 width: 150px;
                 height: 200px;
                 border: 5px solid orange;
             }
             .div3{
                 height: 200px;
                 border: 5px solid blueviolet;
                 margin: 0 150px;
             }
             main::before;
             main::before{
                 content:"";
                 display:block;
                 clear:both
             }
             
                     
     
     
         

             
1
             
2
             
3
      
     
     
     ```
     
     
     

### 背景图位置(精灵图)

+ 参考0113 百度作业，苹果官网

+ 设置背景图片(图片精灵，需要用background-postion:来调整出我们想要的图片)

  1.首先设置一个
，写一个样式添加背景图片  background-image: url('./img/nicon.png');背景图片要包裹写在背景里的内容

  2.设置背景图片父级的宽高，浮动，相对定位等，在列表中就设置li的

  3.设置图片的宽高，（最好用百分数写），绝对位置设置图片的位置。

  4.清除浮动

  5.放在图片上，出现弹框，写出前后缀,记得写display：none,在写hover里面display：block。

  6.经常写背景图片要记住

  ```
  .a{
  // 一般根据相对定位来写图片位置,给紧邻的父级写出 position:relative
    position:absolute;
    // 图片定位在哪里，图片在父元素中居中
  right:0;
  left:0;
  margin: 0 auto;
  //写背景图片固定搭配
  background-image: url();
    background-repeat: no-repeat; //图片不重复
    background-position: center center; //图片位置
    background-size: auto 70%; // 图片大小
  }
  ```

  

  

###             定位

#### 相对定位

 position:relative

 1.使用相对定位的元素不会影响周围元素的布局 

 2.元素移动的基准点在标签布局的原有位置   可以使用left/top/right/bottom样式控制元素的水平方向和垂直方向的移动距离   距离是由元素边框和原位置的相同方向的边界之间的距离(不脱离文档流)

 3.原有空间位置时会被保留的，后续的元素不会进行递补

 4.定位元素的垂直层级关系是在普通元素的上方

#### 绝对定位

position:absolute（脱离文档流）

1.拥有绝对定位样式的元素原有的空间是不保留的，后续的元素会正常递补

2.绝对定位元素的默认移动基准点是body标签的左上角

3.可以自定义绝对定位元素的基准点，规则是获取   距离自己最近的 拥有非静态定位样式的 父级（上层）元素

4.移动距离的设定也是以自身标签的边界和定位事基准元素的边界距离

5.绝对定位元素的层叠关系也在普通元素的上方  水平向右正方向 水平向下正方向

6.添加有绝对定位样式的元素自身的特性会发生变化，元素的大小默认取决于内容的大小

​       如果设置有宽高，就以设置样式为准（行内标签不用改成行内块元素了）

```
#outer {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: rgb(199, 196, 5);
            overflow: hidden;
            resize: both;
            /* 重置标签大小 */
        }

        #inner {
            position: absolute;
            /* 居中 */
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            /* 居中，不用写固定值 */
            width: 100px;
            height: 100px;
            background-color: rgb(51, 132, 185);
        }

        /* 绝对定位元素的外边距事根据定位位置进行偏移的 就是绝对定位中left 50px,margin20 居左叠加20，在原有的基础上又移动*/
        /* 想要使用绝对定位居中处理，需要将各方向的值圈定出合适的区域， 同时将对应方向的外边距都设置成auto值，就可以实现居中
        */
    



    

        


        
    



```

#### 固定定位

   position: fix; （脱离文档流）

​    能够控制元素固定在浏览器窗口的某个位置   定位基准点就是窗口的左上角

​     其他的特性和绝对定位相同  

#### 粘性定位

​         position: sticky;

​       是相对定位和固定定位的结合体

​       根据指定的位置，如果容器标签和浏览器窗口边缘的距离大于设置的距离时，

​       元素以相对定位特点展示

​       如果小于指定的距离值，就会以固定定位进行展示

​       如果容器标签离开浏览器窗口区域，这个标签也会滚动消失

```



    

     

         

             分段标题1
         
         

             
1
             
2
             
3
             
4
             
5
             
6
             
7
             
8
             
9
             
10
         
     
     

        

            分段标题2
        
        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9
            
10
        
    
    

        

            分段标题3
        
        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9
            
10
        
    
    

        

            分段标题4
        
        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9
            
10
        
    
    

        

            分段标题5
        
        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9
            
10
        
    
    


```

### 网格布局

+ bootstrap：Bootstrap 中的网格系统的基础是由media和float搭配实现的。其中列偏移效果是使用增加左侧外边距方式完成的（可写伸缩屏，也可参考苹果官网那个页面）

  ```
  
      
  
  
  
  
  图库标的使用，和文字一样
  
  
  
  
      

          使用font-awesome 图标需要添加“fa fa- ”这样的类名，具体的样式修改和普通文字一样
      
      
      用户
  ```

+ 网格布局

```
网格的基本写法 参考0114
//网格初始格式
style{
.row .col{
      float: left;
      min-height: 1px;
    }
    .row::before,
    .row::after{
      content: '';
      clear: both;
      display: block;
    }
.row .col-0 {
  display: none;
}
.row .col-1 {
  width: 8.333%;
} 
.row .col-2 {
  width: 16.666%;
} 
.row .col-3 {
  width: 25%;
} 
.row .col-4 {
  width: 33.333%;
} 
.row .col-5 {
  width: 41.666%;
} 
.row .col-6 {
  width: 50%;
} 
.row .col-7 {
  width: 58.333%;
} 
.row .col-8 {
  width: 66.666%;
} 
.row .col-9 {
  width: 75%;
} 
.row .col-10 {
  width: 83.333%;
} 
.row .col-11 {
  width: 91.666%;
}
.row .col-12 {
  width: 100%;
} 
}
//引用bootscript浮动格式和宽度样式



 
 

 
    

    
               
3/12/10
               
3/12/10
               
3/12/10
               
3/12/10
           
 
  
 

 
 
 
  
列嵌套
  //创建一个行
       

           

           在占屏幕的4/5的前提下，把这4/5都在分为四等分
            

               
3/12/10
               
3/12/10
               
3/12/10
               
3/12/10
           
       
         
2
         
10
         
2
    

····································································································

```

### 图标库

+ 百度上找阿里图标库，在文件中查找

  ```
   //iconfont是固定的
  

  
  ```

# Javascript

### 数据类型

##### 基本类型

+ 数字类型 Number

  var a = 1;

  var b = -1.5; //负号紧跟数字前面

  var c = 123456e5; //科学计数法

+ 字符串类型 String

   表示一些文本信息,在字符串中书写空格也是会保留的

    对于长字符串，常规的书写格式不允许换行

    var d = '这是一个字符串';

    var e = 'this is a string';

    var f ='
   
';

    var g = "字符串里面也有'引号'"

    var h = 'dsfde \'a  \'gfhudk';  //对于一些特殊字符，可以使用\’转义符号

+ 布尔类型 Boolean

   只有两个值：真  假。表示条件的计算结果

    var i = true;

    var j = false;

+ 未定义 undefined

   只有一个值，表示没有定义具体值的变量和属性

    // var k = undefined;

    var k;

+ 空 null

     只有一个值，表示，没有具体的结果

    var m =document.getElementById('aaa');

##### 引用数据类型

+ 对象类型 Object

   // 表示一系列相关基本数据的集合

    /* 对象的语法格式：

    {

  ​    属性名：属性值，

  ​    属性名：属性值，

  ​    ...  }

    属性名也要遵从变量名的定义规则

    */

    var n ={

  ​    brand: '联想',

  ​    weight: 1500,

  ​    isRed: false,

  ​    address: {}

    };

+ 数据结构 数组Array ：保存一系列 有顺序要求的 数据类型相同或功能相似的 数据

   var p = [1,2,3,4,5]；

##### 命名规则

+ 变量名和属性名的命名规则

+  可以使用（大小写）字母、数字、_、$这些符号

+ 不能使用数字开头

+  不能使用汉字

+ 长名称的中间不要使用空格

  document.getElementById()

+ 当需要使用多个单词才能定义名称时，最好使用 小驼峰命名法

+ 除去第一个单词，后面的单词首字母都大写

  常见错误

+ 符号书写了中文符号

+ 是用来错误的定义名称（没定义就使用，使用时写错名称）

+ 没有遵从具体的数据类型用法(逻辑错误)

+ 没有遵从基本的使用规范

+ 对于变量的声明，要遵从先声明再使用的逻辑

+ var k;  //不建议声明变量时，不设定初始值

### 属性运算符

```
var obj = {
        username: '张三',
        age: '22',
        friend: {
            username: '李四'   }
    };
  // 从对象中获取需要的属性值，使用 点操作符 通过属性名进行获取   console.log(obj.username);
    console.log(obj.age);
     // 点操作符在 赋值 号的右边使用，执行的是获取逻辑
    var username = obj.friend.username;
    console.log(username);
    // 点操作符在 赋值 号的左边使用，执行的是设置逻辑
    obj.username = '王五';
    console.log(obj);
    // 在一个对象中扩展属性
    obj.sex = '男';
    console.log(obj);
    // 也可以使用[]的方式扩展或获取属性
    var h = 'height';
    obj[h] = 170;
    console.log(obj);
    console.log(obj[h] );
    // 从数组中取出需要的数据
    var arr = [ 'm','n'];
    // 需要通过数据存储的索引值（数据在数组的排序位置，默认从0开始）
    console.log(arr[0]);
    console.log(arr.length);//获取数组的长度，表示数组内部存储了多少个值
    arr[20] = 'o';
    console.log(arr);
    console.log(arr.length);

```

### 运算符

##### 算数运算符 

+ 加法 +

  ```
  //数字之间的加法计算执行的是数学逻辑
  //字符串之间的加法计算执行的是拼接逻辑
          var a = 1, b = 2;
          var c = a + b;
          console.log(c);
          var d = 'hello ', e = 'world';
          var f = d + e;
          console.log(f);
          var g = 200 + 100 + 'px';
          console.log(g);
          // 数字和字符串之间的加法计算，会先将数字隐藏性的转换成字符串，在进行拼接
        //隐式类型转换；在计算过程中，JS 自动根据类型的差异进行向相同类型转换的过程
      //计算机在进行普通计算时，是会有误差的，无法消除
          console.log(0.1 + 0.2);
  ```

  

+ 减法 -

  ```
      //减法计算都是优先将数据转换成数字类型在进行计算
          //只有纯数字组成的字符串才可以进行正常转换
          console.log(5 - 6); // -1
          console.log(5 - '6');//-1
          console.log('5' - '6');//-1
          console.log('a' - 'b'); //NAN ：not a number
          //当出现无法转换成数字的内容出现在计算过程中时，计算结果都是NaN
          //只要有NaN参与的计算，结果都是NaN.
          console.log(NaN + 5 - 10);// NAN
  ```

  

+ 乘法 *   除法/  求余%

  ```
         /数据类型转化逻辑和减法一样
         console.log(5 * '6');//30
          console.log('5' * '6'); //30
          console.log('5' / NaN);//NAN
          console.log(5 / '6');//0.8333333
          console.log(5 / 0); //Infinity无限的
           console.log(10 % 3); //1  
  ```

##### 赋值/比较运算符

```
赋值运算：
var a = 1;
//a = a + 5;
a += 5; //效果完全相同，就是特定写法下的简写方式
console.log(a);
// -=    *=     /=      %/ 逻辑完全相同
ar i = 0;
//i += 1 ;
//++ 自增符号，控制变量的值加1
i++;   
console.log(i);
++i;
console.log(i);
var j = 0;
console.log(j++); //   0
console.log(j);  //   1
var m = 0;
console.log(++m);  //  1
console.log(m);   //   1
// 如果 ++ 在后，就会先将变量的值作为表达式的计算结果，然后在进行加一操作
for(i=0 ;i<10;i++ ){
++在后，会运算到i<10,就进行括号内运算，之后i++,在i<10循环
}
//如果 ++ 在前 就会先进性加一操作，然后将新的变量值作为表达式结果
自减 --


比较运算：
//比较运算符计算的结果都是布尔值
     // 大于 >       小于 <      大于等于>=       小于等于<= 
      console.log(5 > 9); //false
      console.log(10 > 4); // true
      console.log(6 >= 6);  // true
      //字符串之间的比较本质是按照 字母的 ASCII 码进行逐位比较
      console.log('aba' > 'aaa');//ttrue
      var x = 50;
      //这里书写的逻辑和数学中的逻辑是完全不同的
      // 会优先计算第一个比较符的结果，等到一个布尔值，在和第三个数字作比较
      // true 可以当作 1 来看待，false 可以看作 0 看待
      console.log(1 < x < 9); //true
  // 相等运算符
  // == 相等  === 全等  !=不等    !==全不等
  // === 全等 值与类型的变量比较
  console.log(1 == 1); //true
  console.log(1 == '1'); //字符串和数字做双等比较，会优先将字符串转换成数字，在进行比较 false
  //双等号尽量不使用，因为会出现隐式类型转换，将两侧的数据转换成想同类型，在进行值比较
  console.log(1 === '1'); false
  //优先使用全等号，先判断类型是否相同，在判断值是否相同
  console.log(1 != '1');  //用法同双等 true
  console.log(1 !== '1'); //用法同全等 true
  console.log(null==undefined); //true null 与 undefined 都是假值false,所以相等
   console.log(null===undefined); // false  类型不同，不相等
  console.log(2==true);//数字与布尔值转换优先转换布尔值，true转换为1，1与2不相等
  console.log(NaN===NaN); // NaN和任何值都不相等，包括自己 false
```

##### 逻辑运算符

```
       // 真值：自身为 true 或者可以被转换为 true 的值叫真值，其他都叫假值
       // 假值常见的有6个：false、空字符窜 ''、null 、 undefined、 NaN、数字 0
        // 与，并且 &&    
        // 可以将多个表达式串联到一起，
      //只有每一个表达式的值都是 true 或者可以转换为true. 整体计算的结果是最后一个表达式的结果
        // 如果表达式中存在假值，就返回一个假值表达式的结果
        var phone={
            color:'red',
            price:1500
        }
       var pay = phone.color==='red' && phone.price < 2000
        console.log(pay); true
      var m = 1 + 6 && 7 - 9;
      console.log(m); //-2
    console.log(NaN && 0 && false);//NAN
    var x = 5; 
    1 < x && x < 9
    // 或  ||
  // 可以将多个表达式串联到一起
  //只有每一个表达式的值都是 false 或者可以转换为false.整体计算的结果是最后一个表达式的结果
        // 如果表达式中存在真值，就返回一个真值表达式的结果
    console.log(null || 0 || false); //false
    console.log(null || 0 || true || 100); // true
    // 非，取反 !
    // 会先将计算的值进行布尔值转换，然后再取反
    console.log(!true); //false
    console.log(4 < 5 && 100 > 90 || 0 || !NaN);//true
```

##### js的隐式转换

+  大多数情况下，隐式转换都遵循这个规则，当然有特殊情况，特殊情况特殊对待就行了，当使用==判等时，会转成同类型再比较 

  对象---》字符串 ---》数值

  ​                 布尔 ---》数值

###### 对象和布尔值比较

+  对象和布尔值进行比较时，对象先转换为字符串，然后再转换为数字，布尔值直接转换为数字 

```
[] == true; //false []转换为字符串'',然后转换为数字0,true转换为数字1，所以为false
```

######  **对象和字符串比较** 

+  对象和字符串进行比较时，对象转换为字符串，然后两者进行比较。 

```
[1,2,3] == '1,2,3' // true [1,2,3]转化为'1,2,3'，然后和'1,2,3'， so结果为true;
```

######  **对象和数字比较** 

+  对象和数字进行比较时，对象先转换为字符串，然后转换为数字，再和数字进行比较。 

```
[1] == 1; // true `对象先转换为字符串再转换为数字，二者再比较 [1] => '1' => 1 所以结果为true
```

######  **字符串和数字比较** 

+  字符串和数字进行比较时，字符串转换成数字，二者再比较。 

```
'1' == 1 // true
```

######   **字符串和布尔值比较** 

+  字符串和布尔值进行比较时，二者全部转换成数值再比较。 

```
'1' == true; // true
```

######   **布尔值和数字比较** 

+  布尔值和数字进行比较时，布尔转换为数字，二者比较。 

```
true == 1 // true
```

##### 字符串连接符与算术运算符隐式转换规则混淆

+  将字符串连接符(+ : 只要+号两边有一边是字符串)与算术运算符(+:两边都是数字)的隐式转换搞混淆
+  1.字符串连接符+：会把其他数据类型调用String()方法转成字符串然后拼接

```
//+是字符串连接符： String(1) + 'true' = '1true'
 console.log ( 1 + "true" );//1true
 var bar=true;
 console.log(bar+"xyz") // truexyz
```

+  2.算术运算符+ ：会把其他数据类型调用Number（）方法转成数字然后做加法计算

```
 //+是算术运算符 ： 1 + Number(true) = 1 + 1 = 2
 console.log ( 1 + true );//2
 // +是算术运算符 ： 1 + Number(undefined) = 1 + NaN = NaN
 console.log ( 1 + undefined );// NaN
 // +是算术运算符 ： 1 + Number(null) = 1 + 0 = 1
 console.log ( 1 + null );//1
```

+ 字符串连接符- ,将字符串转换为数字

```
var bar=true
alert("1"-bar); //0
alert("1" - 23 +false) //-22 将字符串转为数组，布尔值转为数组
```

### 函数的基本用法

##### 声明式函数和赋值型函数

+ 声明式函数(具有函数名)

  ```
  function fo(){
          console.log('fo');}
      // 调用函数：执行内部的语句
      fo();
  ```

  

+ 赋值型函数(匿名函数) 

  ```
  // 把函数作为一个值使用
      var fn = function () {
          console.log('fn');
      }
      fn();
      var obj = {
      x:function(){
          console.log('x');    }};
  obj.x();
  ```

##### 形参和实参

```
// 声明函数时书写的小括号用于 声明函数内部需要的参数的 ：形参 （提供给函数内部逻辑的变量）
// 执行函数时书写的小括号用于 为函数的参数传递具体的值 ：实参  （满足函数执行时需要是的具体值）
function sayHi(username){
    console.log(username + '说 你好!');
}
sayHi('小米');

// 当为函数设计多个形参时，具体的实参要和形参顺序对应（函数的参数是由于顺序要求的）
function sub(a, b){
    console.log(a,b); // 10, 5
    console.log(a - b); // 10
}
sub(10,5);
// 如果传递的实参数量小于形参数量，没有获取到值的参数按undefined处理
sub(50); // 50 undefined
// 如果传递的实参数量大于形参数量，形参按顺序结束值之后，多余的值会被忽略
sub(100,50,20); // 100,50
```



##### arguments

```
function sum(){
    // 函数在执行时，内部会初始化一个参数对象，作用就是收集函数所有的实参，放置在一个类数组对象中
    // 主要是应对函数参数数量不确定的场景 
     console.log(arguments);}
sum(1,2);
sum(1,2,3,4,5);

```

##### 函数的返回值

```
// 能够将函数内部的值传递到函数的外部，通过 return关键字把内部值传到外部
// return 中断函数的执行
   function add(x,y){
       return x + y;
       console.log('return 后面的代码不会执行')   }
  var s = add(100, 300);
  console.log(s);
  function fx(){
      // return 后无东西，函数执行的结果按underfined(未定义) 处理
      return;}
  var y = fx();
  // 如果函数内部没有给定返回值，函数执行的结果按underfined(未定义) 处理
  console.log(y);

```

### 函数的作用域

+  全局和局部作用域

  ```
  // 作用域:限制声明变量能够使用的范围
      // var 、 function、 函数的形参也是声明
      // 全局作用域：当前页面在浏览器内部运行时，所有js代码整体运行的环境(只有一个)
      // 局部作用域: 函数声明时，大括号({})圈定的范围叫做局部作用域（词法作用域）
      
      // 在全局作用域中声明的变量称为 全局变量
      // 全局变量可以在声明之后的任意位置被使用
  
      // 在局部作用域中声明的变量称为 局部变量
      // 只能在当前函数范围内被使用
      var a = 1;
      console.log('全局变量a',a);
      function fo(){
          var b = 2; 在局部找到声明，则为局部函数，未找到声明，直接赋值，为全局变量
          console.log('全局变量a',a); 
          console.log('局部变量b',b);
          return b;
      }
      fo(); // 2
     // console.log('局部变量b',b);  // error b是未定义的 这个引用的b是全局变量的，但是全局变量未定义
  
  ```

  

+ 函数内部变量值的查找过程

  ```
  var x = 1;
     function outer(){
         var x = 10 ;
         var y=2;
         function inner(){
             var z = 3;
             console.log(x, y, z);      }
         inner();
     }
     outer();
     console.log(x); // 10 2 3
     
     // 1.优先在当前函数内部作用域中查找有没有对应变量的声明，如果有，就获取对应的值
     // 2.如果没有，就去创建这个函数所在的作用域中查找
     // 3. 重复步骤1-2，一只查找到全局作用域
     // 4.如果找到最后都没有发现变量声明，就会报错
  ```

### 流程控制语句

##### if 条件语句（范围限定）

   ```
 /*
    语法结构
    if(判断条件表达式){
        当条件为真时，执行的代码片段
    }else{
        当条件为假时，执行的代码片段
    }   
    if语句的组合写法
    if() {}
    if() {} else {}
    if() {} else if() {} else {}
    */
    eg:var x = 70;
    if (x > 80) {
        console.log('x > 80');
    } else if (x > 60) {
        console.log('x > 60');
    } else if (x > 40) {
        console.log('x > 40');
    }
    // 嵌套写法
    var p = {
        color: 'black',
        price: 1900
    }
    if (p.color === 'black') {
        if (p.price < 2000) {
            console.log('买它');
        } else {
            console.log('太贵了,不想要');
        }
    } else {
        console.log('不是黑色,不想要');
    }
    //条件语句的{} 不会创建局部作用域
    //建议：现阶段一般不要再非函数 {} 里面声明变量，如果确实需要声明，也不要在 {} 外部使用
    // 返回值 = 条件 ? 条件为真时实际计算的表达式 : 条件为假时实际计算的表达式
    n = (m > 10) ? (m * 2) : (m / 2);
   ```

##### switch... case...

+ switch 声明条件语句，将判断的值一次和内部 case 定义的值作全等比较
   如果相等，就执行对应 case 后面的代码片段
   如果不相等，就继续判断下一个 case 的值
   如果都不想等，就默认执行 default 定义的语句
   内部 break 用于控制跳出条件语句
   一般用于判断 枚举值(设置特定值) 的逻辑

```
   var day = 2;
    switch (day) {
        // 可以将多个判断值进行合并，共用同一个代码片段（原因就是再上一个判断值后面没有 break ）
        case 1:
        //     {
        //     console.log('今天星期一');
        //     break;
        // }
        case 2: {
            console.log('今天星期二');
            break;
        }
        case 3: {
            console.log('今天星期三');
            break;
        }
        // 最后的 default 是可选的，类似于 if 语句中最后的 else
        default: {
            console.log('其他日期');
        }
    }
```

### 循环语句

##### for 循环语句

+ 使用场景:有明确的重复次数
    语法结构：
    for(声明计数的起始值; 判断循环结束的条件， 比较次数是否达到临界值; 累加次数 ){ 

  ​         需要循环执行的代码片段  } 
    执行顺序：

    1. 先执行声明次数的语句，获取到次数变量
    2. 判断是否满足结束循环的条件，
    3. 如果条件为真，就执行一次循环代码
    4. 次数累加步骤
    5. 再次判断循环条件，重复执行 2-4 步骤
    6. 一直执行到条件判断为假，结束循环

    计次变量是可以在循环体内部使用的，每循环都表示当前的次数

  ```
   for(var i=0;i < 10; i++){
      console.log('重复', i);
    }
    console.log('循环结束', i);
  
    var arr = ['a', 'b', 'c'];
    for(var j=0; j < arr.length; j++){
       var item = arr[j];
       console.log(item,j);
    }
    function sum(){
      console.log(arguments);
      var ret = 0;
      for(var i=0; i = 2) {
    // 几次停下来
    n++;
    m -= 3;
    // if(m < 2){
    //   break;
    // }
    console.log(m);
  }
  console.log(n);
  ```

##### do{ }...while()

+ do { 循环体  }while(判断条件)；
    先执行一次循环体，在进行循环判断决定是否循环
    会保证循环代码至少执行一次

```
// 提前中断循环
for( var h = 0; h < 10; h++){
  if(h === 3){
    // 跳过当前循环剩余步骤，直接进入下一循环
    continue;
  }
  if(h >= 7){
    //提前结束循环
    break;
  }
  console.log(h);
}
```

### 数据类型的判断

##### typeof 

+ typeof  返回一个字符串，表示对应数据的类型 ,可以判断基本类型数据（除了 null）和函数

```
  var type = typeof 123;
  console.log(type);                   // number
   console.log(typeof NAN);            // number
  console.log(typeof 'abc');           // string
  console.log(typeof true);            // boolen
  console.log(typeof undefined);       // undefined
  console.log(typeof function () { }); // function
  
  console.log(typeof null);            // object
  console.log(typeof []);              // object
  console.log(typeof {});              // object
```

##### instanceof 

+  instance 实例：通过对应类型构造函数创造出的结果叫实例,

+ 可以简单的区分出引用数据类型

    console.log(123 instanceof Number);            // false
    console.log('abc' instanceof String);          //false
    console.log(true instanceof Boolean);          //false
    
    console.log([] instanceof Array);              // true
    console.log({} instanceof Object);             // true
    console.log(function(){} instanceof Function); // true
    console.log([] instanceof Object);             // true
#####  Object.prototype.toString.call()

```
  // 万能方法
  function getType(data){
   return Object.prototype.toString.call(data).toLowerCase().slice(8,-1);  }

  console.log(getType('abc'));         // string
  console.log(getType(123));           // number
  console.log(getType(true));          // boolen
  console.log(getType(null));          // null
  console.log(getType(undefined));     // undefined
  console.log(getType([]));            // array
  console.log(getType({}));            // object
  console.log(getType(function(){}));  // function
  console.log(getType(/a/));           // regexp 正则表达式
  console.log(getType(new Date()));    // date
  console.log(getType(document.body)); // htmlbodyelement
```



### 数据类型的特点

+ 两大类型：

  1.基本类型： Number,number,boolean,null,underfined,string

  2.引用数据类型：bject   [Array 数据结构]  通过一个地址找到值

##### 基本类型：

+ 存储的位置是在内存的栈区，存储的内容就是实际声明的值
+ 基本类型的值是不可变的，一旦创建完成，就无法再修改
+  日常的修改操作实际是以原数据为基础，创建新值的过程

           var a = 1;
          var b = 1;
          var str = 'Hello!'
          var ret = str.toUpperCase();  // 小写变大写
          console.log(ret); //HELLO
          console.log(str); //hello
          console.log(a === b);
          // 在进行值的比较时，就是直接使栈区内存储用具体的值进行比较
          var c = b;
          console.log(c); // 1
          // 在使用赋值号进行值传递时，会将对应的值复制一份，传递给新的变量
          // 赋值就是复制
          b = 5;
          console.log(c); // 1
          // 当原始的变量值发生修改时，新的变量值是不受影响的
##### 引用数据类型：

+ 数据存储的位置是在内存的堆区，堆区存储的数据是允许随意的扩大或缩小
+  对应的变量名和数据在堆区中的地址还是存储在栈区的

```
  var obj = {};
  console.log(obj); // {}
  obj.x = 1;
  console.log(obj); // {x:1}
  // 引用数据类型的值是可以被修改的
  var obj2 = obj;
  console.log(obj2); // {x:1}
  obj.x = 5;
  console.log(obj2); // {x:5}
  // 引用类型数据在做赋值数据传递时，实际是将栈区中存储的数据地址赋值一份传达过去
  // 实际的值没有发生任何变化
  obj2.x = 10;
  console.log(obj2); // {x:10}
  // 当其中一个变量修改数据时，其他的变量引用结果都会受到影响
  function fn(data) {
    return data;
  }
  var m = 100;
  var n = fn(m);
  console.log(n); // 100

  var o = {};
  function fo(data) {
    data.h = 100;
   return data;
  }
  // data=o;
  var p = fo(o); 
  console.log(o);// {h:100}
  console.log(p === o);// true
  // 函数形参接受的值都是实参变量在栈区中存储的内容（基本类型值、引用类型地址）
  // 当两个变量在比较时
  // 如果两个变量都是基本类型数据，比较的直接就是栈区中的值
  // 如果都是引用类型数据，比较的是栈区中存储的地址 
  console.log({} === {}); // false
  console.log(1 === 1); // true
  var i = {};
  var j = i;
  console.log(i === j);// true


```
### 预编译（变量提升）

+ js 代码在执行时是分两个阶段的：1.预编译阶段 2.执行阶段

+ 变量提升

  预编译阶段对普通变量声明的操作：（变量提升）（var a;）

  当代码要在解释器环境运行前，解释器会先扫描一边代码（不是运行）

  会先将所有声明变量提取