526互联

z-index控制层级显示【JavaScript-Dom&Bom】

发布时间 2023-06-01 14:54:28作者: -YBP杨社长

溢出设置 overflow

  • visible(默认) 超出部分显示

  • hidden 超出部分隐藏

  • scroll 超出部分滚动显示

行内元素垂直对齐方式vertical-align

  • baseline 基线对齐(默认)

  • top 上对齐

  • middle 中间对齐

  • bottom 下对齐

控制显示层级

  • 当元素为非static定位时, 可能出现层叠显示的问题, 通过z-index样式设置显示的层级, 值越大显示越靠前

  • 注意: z-index样式只对非static定位的元素有效

视频播放 

<!--poster设置视频播放的封面
loop设置循环播放    muted静音  autoplay自动播放   controls显示控制按钮
-->
<video poster="a.jpg"
       loop  muted  autoplay controls
       style=" width: 1283.56px; height: 722px;">
    <!--source标签设置播放源-->
    <source src="b.mp4" type="audio/mp4">
    您的浏览器不支持播放此视频.
</video>

 

JavaScript

  • 作用: 给页面添加动态效果

  • 语言特点:

    • 属于脚本语言, 不需要编译 由浏览器解析执行

    • 属于弱类型语言 int age=18; String name="张三"; age="abc"; let x=18; let name="张三" x="abc"

    • 基于面向对象的语言

    • 安全性强: 由于JS语言是嵌入在HTML页面中运行在客户端的语言,所以对安全性要求较高, JS语言只能访问浏览器内部的数据,浏览器以外的数据禁止访问.

 

变量 , 数据类型, 运算符, 各种语句, 方法 , 面向对象

 

变量

  • JavaScript属于弱类型的语言

    • Java: int age=18; String name="张三"; age="李四"; 报错

    • JS: let age=18; let name="张三"; age="李四"; 正常执行

  • JavaScript语言通过let或var声明变量

    • let关键字声明的变量, 作用域和Java语言类似.

    • var关键字声明的变量, 作用域相当于是Java中的全局变量的作用域

    • 举例:

      Java:
      for(int i=0;i<10;i++){
          int j = i+1;
      }
      int x = i+j;  // 报错 i和j超出了作用范围
      JavaScript:
      for(let i=0;i<10;i++){
          let j = i+1;
      }
      let x = i+j;   //不会报错, 但是访问不到i和j 原因也是因为i和j超出了作用范围
      ​
      for(var i=0;i<10;i++){
          var j = i+1;
      }
      var x = i+j;   //不会报错, 而且可以访问i和j变量的值, 因为var声明的变量可以全局访问

数据类型

  • JavaScript语言中只有引用类型

  • 常见的引用类型:

    • number数值: 相当于Java中所有数值的总和

    • string字符串: 可以用单引号或双引号修饰

    • boolean布尔值: true和false

    • undefined未定义: 当变量只声明不赋值时,变量的类型为undefined

  • 获取变量类型的方法: typeof 变量;

运算符

  • 算术运算符 + - * / %

    • 除法运算会自动根据结果转换整数或小数

      • java: int x=5; int y=2; int z = x/y; z=2;

      • JS: let x=5; let y=2; let z = x/y; z=2.5; x=6 z=3

       

  • 关系运算符: > < >= <= != ==和===

    • ==: 先统一等号两边变量的类型之后再比较值 , "666"==666 true

    • ===:先比较类型,类型相等后再比较值, "666"===666 false

  • 逻辑运算符: && , || , ! 只支持短路与 和 短路或

  • 赋值运算符: = += -= *= /= %=

  • 三目运算符: 条件?值1:值2

 

各种语句

  • if else

  • for 新循环 for(Person p : persons){} JS: for(let p of persons){}

  • while

  • switch case

如何在html页面中添加JS代码

  • 三种引入方式:

    • 内联: 在标签的事件属性中添加js代码, 当事件触发时执行

      • 事件: 是系统给提供的一系列时间点

      • 点击事件: 当用户点击元素的时间点

    • 内部: 在页面的任意位置添加script标签,在标签体内写JS代码,推荐写在body结束标签的位置

    • 外部: 在单独的js文件中写js代码, 通过script标签的src属性引入 ,引入文件后的script标签 不能在标签体内写js代码

方法

  • Java: public 返回值 方法名(参数列表){方法体}

  • JS:

    • function 方法名(参数列表){方法体}

    • let 方法名 = function(参数列表){方法体}

    • let 方法名 = new Function("参数1","参数2","参数...","方法体");

和页面相关的方法

  1. 通过选择器找到页面中的元素对象

    let 元素对象 = document.querySelector("选择器");

  2. 获取或修改元素的文本内容

    元素对象.innerText 获取

    元素对象.innerText = "xxx"; 修改

  3. 获取或修改控件的值

    控件对象.value 获取

    控件对象.value = "xxx"; 修改

NaN

  • Not a Number: 不是一个数

  • isNaN(变量) 判断变量是否是NaN , 返回值true代表是NaN 反之不是NaN

 

JavaScript对象分类

  • 内置对象: 包括string,number,boolean等

  • BOM: 浏览器对象模型, 包含和浏览器相关内容

  • DOM: 文档对象模型, 包含 和页面相关的内容

BOM

  • Browser Object Model: 浏览器对象模型, 包含和浏览器相关内容

  • window对象: 此对象里面的属性和方法称为全局属性和全局方法, 访问时可以省略掉window.

    • 常用方法:

      • isNaN(): 判断变量是否是NaN

      • parseInt(): 将字符串或小数转成整数

      • parseFloat(): 将字符串转成整数或小数

      • alert("xxx"); 弹出提示框

      • confirm("xxx"); 弹出确认框

      • prompt("xxx"); 弹出文本框

      • let timer = setInterval(方法,时间间隔); 开启定时器

      • clearInterval(timer); 停止定时器

      • setTimeout(方法,时间间隔); 开启只执行一次的定时器

    • 常用属性:

      • location 位置

        • location.href 获取或修改浏览器的请求地址

        • location.reload(); 刷新

      • history 历史 (代表当前页卡的历史)

        • history.length 得到历史页面数量

        • history.back() 返回上一页面

        • history.forward() 前往下一页面

        • history.go(n) n为正值是前往第n个页面 n为负值为返回前n个页面 n=0是刷新

DOM

  • Document Object Model: 文档对象模型, 包含和页面相关的内容

  1. 通过选择器找到页面中的元素对象

    let 元素对象 = document.querySelector("选择器");

  2. 获取或修改元素的文本内容

    元素对象.innerText 获取

    元素对象.innerText = "xxx"; 修改

  3. 获取或修改控件的值

    控件对象.value 获取

    控件对象.value = "xxx"; 修改

  4. 创建元素对象

    let 元素对象 = document.createElement("标签名");

  5. 获取body

    document.body

  6. 添加元素到某个元素对象中

    元素对象.append(新元素,新元素...);