2022.2.9

11、定位（position）

• 相对定位（relative）
  • 相对于自己原来的位置进行指定的偏移，仍在标准文档流中（原来的位置被保留）
    • top：距离上边xxx边距，值可以为负
    • left：距离左边xxx边距，值可以为负
    • bottom：距离下边xxx边距，值可以为负
    • right：距离右边xxx边距，值可以为负
• 绝对定位（absolute）
  • 基于xxx定位，仅有上下左右
  • 没有父级元素定位的前提下相对于浏览器定位，若父级元素存在定位，则会相对于父级元素进行定位（在父级元素范围内移动）
  • 原来的位置不做保留，若不想超脱出父级盒子的管控，可以在父级盒子中加上相对定位语句，即relative，位置设定与相对定位相同
• 固定定位（fixed）
  • 没有相对性，开始固定在某一位置之后拖动浏览器该元素位置不变
  • 使用方法与上两个类似
• z-index：显示优先级
  • 类似于层数堆叠，其值在0-∞之间，0时是最底层，值越高其层数越高，越优先显示
• opacity：背景透明度
  • 其值在0-1之间，0为无色，1为纯色

Javascript

1、前言

• 什么是Javascript

  • js是一门脚本语言，其源代码在发往客户端之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行
  • 原生js开发，也就是让我们按照【ESMAScript】标准的开发方式，简称ES，特点是所有浏览器都支持。
  • Typescript是微软开发的自由和开源的编程语言，它是js的一个超集，但不能被所有的浏览器正确执行

• 框架

  • jQuery库：广为人知，优点是简化了DOM操作，缺点是DOM操作太频繁影响前端性能。在前端眼中，其仅仅只做为兼容IE6、7、8
  • Angular框架：谷歌收购的前端框架。其特点是将后台的MVC模式搬到了前端并增加了模块开发的理念
  • React框架：Facebook出品，一款高性能的js前端框架，特点是提出了新概念【虚拟DOM】用于减少真的DOM的操作，有效提升前端渲染效率，缺点是使用复杂，需额外学一门【jsx】语言
  • Vue框架：一款渐进式js框架，其特点是综合了Angular的模块化和React的虚拟DOM的优点
  • Axios框架：前端通信框架，因为Vue的边界很明确，就是为了处理DOM所以不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；此外也可以使用jQuery提供的AJAX通信功能

• js构建工具

  • Babel：js编译工具，主要用于浏览器不支持的ES新特性，如Typescript
  • Webpack：模块打包器，主要用于打包、压缩、合并及按序加载

• 快速入门

  • 引入js

  • script标签

    • 可以放在head中，也可以放在body中，专门引入js语言的标签(内部标签)

      <script>
       	语句1;
      	语句2;
       </script>
      

    • 可以放在文件中，用script标签中的src值引入js文件，注意标签闭合（外部引入）

      <script src="path"></script>
      

    • 其类型（type）默认为text/javascript

2、基本语法

• 定义变量

  • 格式：变量名 = 变量值;（定义时使用var）

    var num = 1;
    

• 条件控制

  • if/else
  • while

• 调试js

  • 打开网页的源代码，在控制台（console）中
    • alert(变量名)：弹窗输出该变量值
    • console.log(变量名)：在控制台中输出该变量值

• 数据类型

  • number
    • js不区分小数和整数
    • NaN：not a number，不是数字
    • Infinity：无穷大的数字，超出js的范围
  • 字符串
    • 表示方法：“xxx”或‘xxx’
  • 布尔值
    • true/false
  • 逻辑运算
    • &&、||、！
  • 比较运算
    • =：赋值
    • ==：等于，类型不一样，值一样也会判断为true（不推荐使用）
    • ===：绝对等于，类型和值均一样时，结果为true（推荐使用），但浮点数进行比较时会有精度的损失，尽量避免使用浮点数进行运算
    • 若进行浮点数的运算，使用Math.abc(运算)与0.0000000001（一个可以忽略不计的数）进行比较
    • 注：NaN无法进行比较，与所有数值都不相等，包括自己，仅能通过isNaN()函数来判断是否是NaN
  • null和undefined
    • null：空
    • undefined：未定义
  • 数组
    • 定义时使用中括号，每个元素之间用逗号隔开
    • 一系列不一定相同类型的对象
    • 取数组下标时，若越界，则会出现undefined
    • 取值时使用"下标"取值，如：array(0)
  • 对象
    • 定义时使用大括号，每个属性之间用逗号隔开，最后一个属性不用加逗号
    • 取值时使用"."来选择属性，如：person.name