day04 --js的常用对象、BOM对象和DOM对象

一、常用对象

1.1 数组

1.创建数组:
    let arr = [1,2,3]; 
    let arr = new Array(1,2,3);
    注意：JS数组不区分数据类型，而且其长度可以随意改变，因此JS数组类似于Java中的集合
​
2.数组常用方法:
    length:这是一个属性，用于获取数组长度
    forEach()：遍历数组中的有值元素
    push()：从尾部向数组添加元素
    splice(开始索引,删除个数)：删除指定元素

1.2 字符串

1. 构造方式：
    let str = " xcx "; 双引号，单引号都行
    let str = new String("哈哈");
    
2. 常见方法：
    length: 属性，获取字符串长度
    chatAt(): 返回在指定位置的字符串
    indexOf(): 检索字符串位置
    trim(): 移除字符串首尾空白
    substring(开始,结束) 字符串截取

1.3 数学

Math对象
    1. 四舍五入 round()
​
    2. 向下取整 floor()
​
    3. 向上取整 ceil()
​
    4. 产生随机数 random() ：返回 [0,1) 之间的随机数。 [0,1) 左闭右开区间,包含0不包含1

1.4 JSON

1. 概念
    JSON（JavaScript Object Notation）JavaScript对象标记法，本质是通过JavaScript对象标记法书写的文本
    JSON主要用做数据载体，在网络中进行数据传输，JSON数据的value部分，主要支持三种类型的数据：
        1. 简单类型：数字、字符串、布尔、时间、null
        2. 数组：使用 [] 表示，let studentName = ["张三","李四","王五"];
        3. 对象：使用 {} 表示，let user = {"name":"Jerry","age":18};
    
2. 转换
    JSON字符串转为JS对象:var jsObject = JSON.parse(userStr);
    JS对象转为JSON字符串:var jsonStr = JSON.stringify(jsObject);

二、BOM对象

BOM（Browser Object Model ）浏览器对象模型，其作用是把浏览器抽象成为一个对象模型，然后可以使用js模拟浏览器的一些功能。

 

2.1 Window

Window对象可以实现两种定时器：
​
设置定时器：setInterval（周期性任务）、setTimeout（一次性任务）
    let xxx = setTimeout(function(){
        执行的代码
    },时间间隔)
清除定时器：clearInterval     clearTimeout
    clearTimeout(xxx);

    清除timeout一次性任务
    清除Interval周期性任务

2.2 Location

Location对象指的是浏览器的地址栏，它的主要作用是：使用href属性完成地址的获取和跳转

获取当前浏览器地址




 跳转页面(重点)
​

三、DOM对象

DOM（Document Object Model）文档对象模型，其作用是把HTML页面内容抽象成为一个Document对象，然后可以使用js动态修改页面内容。

 

1. 获取元素(标签)对象
        document.getElementById(id属性值)
        document.getElementsByTagName(标签名)
        document.getElementsByClassName(class属性值)
        document.getElementsByName(name属性值)
   
2. 读取和设置dom对象属性
        对象.属性名
        对象.属性名=""
    
3. 读取和设置dom对象中的文本
        对象.innerHTML
        对象.innerHTML=""

    

        姓名  


        性别
        男 
        女


        爱好
        抽烟
        喝酒
        烫头


        学历
        
            请选择
            入门
            精通
            放弃
        
        


    
        
程序猿最讨厌的四件事：
自己写注释、自己写文档……
    
    
    

 

四、Ajax

概念：Asynchronous JavaScript And XML，异步的JavaScript和XML

作用：通过Ajax可以给服务器发送请求，并获取服务器响应的数据，然后在不重新加载整个页面的情况下，更新网页的部分区域

Ajax的原生语法十分繁琐，而Axios是一个封装好的ajax的框架

//axios 发送get请求 
axios.get("url").then(resp=>{
   resp.data;//返回结果
})
​
// axios发送post请求
axios.post("url",{username:"张三",age:18}).then(resp=>{
   resp.data;// axios发送post请求
})

  
  
  
      
  


​

案例

使用Axios向指定后台发送请求，将拉取的数据渲染成HTML表格

后台的数据地址是：https://mock.apifox.cn/m1/3128855-0-default/emp/list

 

    
    
    
    



    
        
            
            
            
            
            
            
            
        
    
编号
姓名
图像
性别
职位
入职日期
最后操作时间

​


​

获取数据如图所示：