自学内容网 自学内容网
自学内容网 > 正文

【Day02-JS+Vue+Ajax】

🕗 发布于 2024-09-21 16:30 javascript  vue.js  ajax  学习  笔记  

1. JS介绍

在前面的课程中，我们已经学习了HTML、CSS的基础内容，我们知道HTML负责网页的结构，而CSS负责的是网页的表现。 而要想让网页具备一定的交互效果，具有一定的动作行为，还得通过JavaScript来实现。那今天,我们就来讲解JavaScript，这门语言会让我们的页面能够和用户进行交互。

那什么是JavaScript呢 ?

  • JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。

  • 组成：

    • ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。

    • BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。

    • DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。

备注：ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的。

2. 引入方式

2.1 介绍

同样，js代码也是书写在html中的，那么html中如何引入js代码呢？主要通过下面的2种引入方式：

第一种方式：内部脚本，将JS代码定义在HTML页面中

  • JavaScript代码必须位于<script></script>标签之间

  • 在HTML文档中，可以在任意地方，放置任意数量的<script>

  • 一般会把脚本置于<body>元素的底部，可改善显示速度

<body>
  <!-- 页面内容 -->
  
  <script>
    alert("Hello World");
  </script>
</body>

第二种方式：外部脚本， 将JS代码定义在外部 JS文件中，然后引入到 HTML页面中

  • 外部JS文件中，只包含JS代码，不包含<script>标签

  • 引入外部js的<script>标签，必须是双标签

例子：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">script</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"js/demo.js"</span><span style="color:#117700">></</span><span style="color:#117700">script</span><span style="color:#117700">></span></span></span>

注意1：demo.js中只有js代码，没有<script>标签

注意2：通过<script></script>标签引入外部JS文件时，标签不能自闭合

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
</head>
<body>

    <!-- 方式一: 内部脚本 -->
    <script>
        alert("Hello World");
    </script>
</body>
</html>

外部脚本需创建js文件夹在里边创建js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
</head>
<body>

    <!-- 方式一: 内部脚本 -->
    <!-- <script>
        alert("Hello World");
    </script> -->
    <script src="js/demo.js"></script>
</body>
</html>

3. 基础语法

3.1 书写规范

掌握了js的引入方式，那么接下来我们需要学习js的书写了，首先需要掌握的是js的书写语法，语法规则如下：

  • 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的 。

  • 每行结尾的分号可有可无 【推荐要么全都写，要么全都不写】。

  • 大括号表示代码块 。

  • 注释：

    • 单行注释：// 注释内容

    • 多行注释：/* 注释内容 */

我们需要借助js中3钟输出语句，来演示书写语法

api描述
window.alert(...)警告框
document.write(...)在HTML 输出内容
console.log(...)写入浏览器控制台

 创建html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基本语法-输出语句</title>
</head>
<body>

    <script>
        //方式一: 写入浏览器的body区域
        document.write("Hello JS (document.write)");

        //方式二: 弹出框
        window.alert("Hello JS (window.alert)");

        //方式三: 控制台
        console.log("Hello JS (console.log)")
    </script>
</body>
</html>

3.2 变量

3.2.1 let

基本的书写语法我们清楚了之后，接下来，我们再来讲解JS中的变量。在js中，变量的声明和java中还是不同的。

  • JS中主要通过 let 关键字来声明变量的。

  • JS是一门弱类型语言，变量是可以存放不同类型的值的。

  • 变量名需要遵循如下规则：

    • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$），且数字不能开头

    • 变量名严格区分大小写，如：name和Name是不同的变量

    • 不能使用关键字作为变量名，如：let、if、for等

变量的声明示例如下所示：

<script>
    //变量
    let a = 20;
    a = "Hello";
    alert(a);
</script>

上述的示例中，大家会看到变量a既可以存数字，又可以存字符串。 因为JS是弱类型语言。

 3.2.2 const

在JS中，如果声明一个场景，需要使用`const`关键字。一旦声明，常量的值就不能改变 （不可以重新赋值）。 

<body>

    <script>
        //常量
        const PI = 3.14;
        PI = 3.15;
        alert(PI);
    </script>
</body>

 浏览器打开之后，会报如下错误：常量不可以被重新分配值。（右键或者F12检查在控制台中）

3.2.3 注意

在早期的JS中，声明变量还可以使用 var 关键字来声明。例如：

<body>

    <script>
         //var声明变量
var name = "A";
name = "B";
alert(name);
        
         var name = "C"
         alert(name);
    </script>
</body>

打开浏览器运行之后，大家会发现，可以正常执行，第一次弹出 B，第二次弹出 C 。我们看到 name变量重复声明了，但是呢，如果使用var关键字，是没有问题的，可以重复声明。

var声明的变量呢，还有一些其他不严谨的地方，这里就不再一一列举了，所以这个声明变量的关键字，并不严谨 【不推荐】。

3.3 数据类型

虽然JS是弱数据类型的语言，但是JS中也存在数据类型，JS中的数据类型分为 ：原始数据类型 和 引用数据类型。那这部分，我们先来学习原始数据类型，主要包含以下几种类型：

数据类型描述
number数字（整数、小数、NaN(Not a Number)）
string字符串，单双引('...')、双引号("...")、反引号(`...`)皆可，正常使用推荐单引号
boolean布尔。true，false
null对象为空。 JavaScript 是大小写敏感的，因此 null、Null、NULL是完全不同的
undefined当声明的变量未初始化时，该变量的默认值是 undefined

使用typeof 关键字可以返回变量的数据类型，接下来我们需要通过书写代码来演示js中的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-数据类型</title>
</head>
<body>

    <script>
        //原始数据类型
        alert(typeof 3); //number
        alert(typeof 3.14); //number

        alert(typeof "A"); //string
        alert(typeof 'Hello');//string

        alert(typeof true); //boolean
        alert(typeof false);//boolean

        alert(typeof null); //object 

        var a ;
        alert(typeof a); //undefined

    </script>
</body>
</html>

对于字符串类型的数据，除了可以使用双引号（"..."）、单引号（'...'）以外，还可以使用反引号 （`...`） 。 而使用反引号引起来的字符串，也称为 模板字符串。

  • 模板字符串的使用场景：拼接字符串和变量。

  • 模板字符串的语法：

    • `...` ：反引号 （英文输入模式下键盘 tab 键上方波浪线 ~ 那个键）

    • 内容拼接时，使用 ${ } 来引用变量

具体示例如下：

 <script>
    let name = 'Tom';
    let age = 18;
    console.log('大家好, 我是新入职的' + name + ', 今年' + age + '岁了, 请多多关照'); //原始方式 , 手动拼接字符串
    console.log(`大家好, 我是新入职的${name}, 今年${age}岁了, 请多多关照`); //使用模板字符串方式拼接字符串
  </script>

3.4 运算符

3.4.1 运算符

那接下来，我们再来介绍JS中的运算符。JS中的运算规则绝大多数还是和JAVA中是一致的，具体运算符如下：

运算规则运算符
算术运算符+ , - , * , / , % , ++ , --
赋值运算符= , += , -= , *= , /= , %=
比较运算符> , < , >= , <= , != , == , === 注意 == 会进行类型转换，=== 不会进行类型转换
逻辑运算符&& , || , !
三元运算符条件表达式 ? true_value: false_value

上述所罗列的这些运算符中，绝大部分的运算符和Java中的使用方式、含义都是一样的。那这里，我们主要介绍一下 = 、==、=== 的区别：

  • = 是赋值操作

  • == 会在比较时，判断左右两边的值是否相等 （会自动进行类型转换）

  • === 全等，在比较时，判断左右两边的类型和值是否都相等，都相等才为true（不会进行类型转换）

接下来我们通过代码来演示JS中的运算法，主要记忆JS中和JAVA中不一致的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-运算符</title>
</head>
<body> 

    <script>
         var age = 20;
         var _age = "20";
         var $age = 20;

         alert(age == _age); //true ，只比较值
         alert(age === _age); //false ，类型不一样
         alert(age === $age); //true ，类型一样，值一样
    </script>
</body>
</html>

3.4.2 类型转换

在某些运算被执行时，系统内部自动将数据类型进行转换，这种转换成为 隐式转换。

  • 字符串 <-> 数字：

    • +号两边只要有一个是字符串，都会把另外一个转成字符串。

    • 除了+外的算术运算符，比如：- * / 都会把字符串转为数字类型。

    • 通过parseInt(...)函数，可以将一个字符串转为数字。

  • 其他类型 -> 布尔类型：

    • Number：0 和 NaN为false，其他均转为true。

    • String：空字符串为false，其他均转为true。

    • Null 和 undefined ：均转为false。

演示1: 字符串 <-> 数字

//类型转换 - 字符串 <-> 数字
alert(typeof ('10' - 1)); //number
alert(typeof ('10' + 1)); //string

alert(parseInt("12")); //12
alert(parseInt("12A45")); //12
alert(parseInt("A45"));//NaN (not a number)

演示2: 其他类型 <-> 布尔类型

在js中，还有非常重要的一点是：0，null，undefined，""，NaN 理解成false，反之理解成true。

// 类型转换 - 其他类型转为boolean
if(0){//false
    alert("0 转换为false");
}
if(NaN){//false
    alert("NaN 转换为false");
}
if(1){//true
    alert("除0和NaN其他数字都转为 true");
}

if(""){//false
    alert("空字符串为 false, 其他都是true");
}

if(" "){//true
    alert("空格字符串为 true");
}


if(null){//false
    alert("null 转化为false");
}
if(undefined){//false
    alert("undefined 转化为false");
}

需要注意的是：在JS中，0，null，undefined，""，NaN理解成false，反之都为 true。

## 3.5 流程控制语句

在JS中，当然也存在对应的流程控制语句。常见的流程控制语句如下：

- if ... else if ... else ...
- switch
- for
- while
- do ... while

4. 函数

在JAVA中我们为了提高代码的复用性，可以使用方法 。同样，在JavaScript中可以使用函数来完成相同的事情。JavaScript中的函数被设计为执行特定任务的代码块，方便程序的封装复用。在JS中，需要通过关键字function来定义。接下来我们学习一下JavaScript中定义函数的2种语法：

4.1 格式一

function 函数名(参数1,参数2..){
    要执行的代码
    return a;
}

因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：

  • 形参不需要声明类型，并且JS中不管什么类型都是let去声明，加上也没有意义。

  • 返回值也不需要声明类型，直接return即可

示例：

function add(a, b){
    return a + b;
}

 调用上述函数

let result = add(10,20);
alert(result);

我们在调用add函数时，再添加2个参数，修改代码如下：

var result = add(10,20,30,40);
alert(result);

浏览器打开，发现没有错误，并且依然弹出30，这是为什么呢？

因为在JavaScript中，函数的调用只需要名称正确即可，参数列表不管的。如上述案例，10传递给了变量a，20传递给了变量b,而30和40没有变量接受，但是不影响函数的正常调用。

注意：由于JS是弱类型语言，形参、返回值都不需要指定类型。在调用函数时，实参个数与形参个数可以不一致，但是建议一致。 

4.2 格式二

刚才我们定义函数，是为函数指定了一个名字。 那我们也可以不为函数指定名字，那这一类的函数，我们称之为匿名函数。那接下来，方式二，就来介绍一下匿名函数的定义和调用。

匿名函数：是指一种没有名称的函数，由于它们没有名称，因此无法直接通过函数名来调用，而是通过变量或表达式来调用。

匿名函数定义可以通过两种方式：函数表达式 和 箭头函数。

 

 跟上边调用方法一致，直接调用

也可以在定义匿名函数之后，让该函数立即执行，这类函数我们也称为 立即执行函数。

(function (a,b) {console.log(a + b);})(10,20);

((a,b) => {console.log(a + b);})(100,200);

5. JS对象

JavaScript中的对象有很多，主要可以分为如下3大类，我们可以打开W3school在线学习文档，来到首页，在左侧栏找到浏览器脚本下的JavaScript。  

5.1 基本对象

5.1.1 Array对象

5.1.1.1 语法格式

Array对象时用来定义数组的。常用语法格式有如下2种：

//方式1：
let 变量名 = new Array(元素列表); 

//例如：
let arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）

//方式2：
let 变量名 = [ 元素列表 ]; 

//例如：
let arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）

//获取数组值
arr[索引] = 值;

 示例：

<script>
     //定义数组
     //let arr = new Array(1,2,3,4);
     let arr = [1,2,3,4];
    
//获取数组中的值，索引从0开始计数
     console.log(arr[0]);
     console.log(arr[1]);
</script>
5.1.1.2 特点

与java中不一样的是，JavaScript中数组相当于java中的集合，数组的长度是可以变化的。而且JavaScript是弱数据类型的语言，所以数组中可以存储任意数据类型的值 【总结起来：长度可变、类型可变】。

//特点: 长度可变 类型可变
let arr = [1,2,3,4];
arr[10] = 50;

console.log(arr[10]);
console.log(arr[9]);
console.log(arr[8]);

 因为索引8和9的位置没有值，所以输出内容undefined。 当然，我们也可以给数组添加其他类型的值，添加代码如下：注释掉之前控制台输出的代码

//特点: 长度可变 类型可变
let arr = [1,2,3,4];
arr[10] = 50;

// console.log(arr[10]);
// console.log(arr[9]);
// console.log(arr[8]);

arr[9] = "A";
arr[8] = true;

console.log(arr);
5.1.1.3 属性和方法

Array作为一个对象，那么对象是有属性和方法的，所以接下来我们介绍一下Array对象的属性和方法

官方文档中提供了Array的很多属性和方法，但是我们只学习常用的属性和方法，如下图所示：

  • 属性：

属性描述
length设置或返回数组中元素的数量。

  • 方法：

方法描述
forEach()遍历数组中的每个有值的元素，并调用一次传入的函数
map()遍历每个数组元素，调用函数进行处理，并将结果封装到一个新数组中
push()将一个或多个元素添加到数组的末尾，并返回新的长度。
pop()从数组移除最后一个元素，并返回该元素。
unshift()在数组开头添加一个或多个元素，并返回数组的新长度。
shift()从数组移除第一个元素，并返回该元素。
splice()从数组中删除元素。

  • length属性：

    length属性可以用来获取数组的长度，所以我们可以借助这个属性，来遍历数组中的元素，添加如下代码：

let arr = [1,2,3,4];
arr[10] = 50;
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
  • forEach()方法

首先我们学习forEach()方法，顾名思义，这是用来遍历的，那么遍历做什么事呢？所以这个方法的参数，需要传递一个函数，而且这个函数接受一个参数，就是遍历时数组的值。修改之前的遍历代码如下：

//e是形参，接受的是数组遍历时的值
arr.forEach(function(e){
     console.log(e);
})

//箭头函数，类似于java中lambda表达式
arr.forEach((e) => {
     console.log(e);
})
  • map() 方法

该方法是用于遍历数组中的元素，调用传入的函数对元素进行处理，并将结果封装到一个新数组中。 如下所示：

//map: 对arr中的每一个元素进行处理, 在原来的基础上加10, 并将其封装到一个新的数组 arr2 中.
let arr2 = arr.map((e) => e = e+10);
console.log(arr2);
  • push()方法

push()方法是用于向数组的末尾添加元素的，其中函数的参数就是需要添加的元素。编写如下代码：向数组的末尾添加3个元素

//push: 添加元素到数组末尾
arr.push(7,8,9);
console.log(arr);
  • pop()方法

pop()方法是用来移除数组中的最后一个元素，并返回该元素。编写如下代码：

//pop: 移除最后一个元素
arr.pop();
console.log(arr);
  • unshift() 方法

该方法是用于在数组的开头添加元素(一个或多个)，并返回新的数组的长度。示例如下：

//unshift: 往数组的头部添加元素 A
arr.unshift('A', 'B');
console.log(arr);
  • shift() 方法

该方法用来在数组的头部移除第一个元素，并返回该元素。示例如下：

arr.shift();
console.log(arr);
  • splice()方法

splice()方法用来删除数组中的元素，函数中填入2个参数。

参数1：表示从哪个索引位置删除

参数2：表示删除元素的个数

如下代码表示：从索引2的位置开始删，删除2个元素

//splice: 删除元素
arr.splice(2,2);
console.log(arr);

完整代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-Array</title>
</head>

<body>
    <script>
        //1. 定义数组
        //let arr = new Array(1,2,3,4);
        // let arr = [1,2,3,4];
        
        //获取数组中的值，索引从0开始计数
        // console.log(arr[0]);
        // console.log(arr[1]);

        //特点: 长度可变 类型可变
        // let arr = [1,2,3,4];
        // arr[10] = 50;
        
        // arr[9] = "A";
        // arr[8] = true;

        // console.log(arr);

        // console.log(arr[10]);
        // console.log(arr[9]);
        // console.log(arr[8]);

        //2. 数组属性 - length
        let arr = [1,2,3,4];
        arr[10] = 50;
        // for (let i = 0; i < arr.length; i++) {
        //     console.log(arr[i]);
        // }

        //3. 数组方法 - forEach , map, push , pop , unshift , shift , splice
        // arr.forEach(function(e){
        //     console.log(e);
        // })

        // let arr2 = arr.map((e) => e = e+10);
        // console.log(arr2);

        // arr.push(7,8,9);
        // console.log(arr);

        // arr.pop();
        // console.log(arr);

        // arr.unshift('A', 'B');
        // console.log(arr);

        // arr.shift();
        // console.log(arr);

        //splice: 删除元素
        arr.splice(2,2);
        console.log(arr);

    </script>
</body>

</html>

5.1.2 String对象

5.1.2.1 语法格式

String对象的创建方式有2种：

//方式1：
let 变量名 = new String("…") ; //方式一

//例如：
let str = new String("Hello String");

方式2：
let 变量名 = '…' ; //方式二

例如：
let str = 'Hello String';

<script>
    //创建字符串对象
    //var str = new String("Hello String");
    let str = '  Hello String    ';

    console.log(str);
</script>
5.1.2.2 属性和方法

String对象也提供了一些常用的属性和方法，如下表格所示：

属性：

属性描述
length字符串的长度。

方法：

方法描述
charAt()返回在指定位置的字符。
indexOf()检索字符串。
trim()去除字符串两边的空格
substring()提取字符串中两个指定的索引号之间的字符。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-String</title>
</head>
<body>
    
</body>
<script>
    //创建字符串对象
    //var str = new String("Hello String");
    var str = "  Hello String    ";

    console.log(str);

    //length
    console.log(str.length);

    //charAt
    console.log(str.charAt(4));

    //indexOf
    console.log(str.indexOf("lo"));

    //trim
    var s = str.trim();
    console.log(s.length);

    //substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
    console.log(s.substring(0,5));

</script>
</html>

5.1.3 JSON对象

5.1.3.1 自定义对象

在 JavaScript 中自定义对象特别简单，其语法格式如下：

let 对象名 = {
    属性名1: 属性值1, 
    属性名2: 属性值2,
    属性名3: 属性值3,
    方法名称: function(形参列表){}
};

演示：

<script>
    //自定义对象
    let user = {
        name: "Tom",
        age: 10,
        gender: "男",
        sing: function(){
             console.log("悠悠的唱着最炫的民族风~");
         }
    }

    console.log(user.name);
    user.sing();
</script>

<script>
    //简化
    //自定义对象
    var user = {
        name: "Tom",
        age: 10,
        gender: "男",
        sing(){
             console.log("悠悠的唱着最炫的民族风~");
         }
    }

    console.log(user.name);
    user.eat();
<script>
定义
var userStr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(userStr.name)

1). JSON字符串 -> JS对象

var obj = JSON.parse(userStr);
alert(obj.name);

2). JS对象 -> JSON字符串

alert(JSON.stringify(obj));

示例：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-JSON</title>
</head>

<body>


    <script>
        //1. 自定义JS对象
        // var user = {
        //     name: "Tom",
        //     age: 10,
        //     gender: "男",
        //     sing: function(){
        //         console.log("悠悠的唱着最炫的民族风~");
        //     }
        // }

        // console.log(user.name);
        // user.sing();

        //2. JSON对象
        var userStr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
        // alert(userStr.name);

        var obj = JSON.parse(userStr);
        alert(obj.name);
        
        alert(JSON.stringify(obj));
    </script>
</body>

</html>

5.2 BOM对象

接下来我们学习BOM对象，BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。

也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。

例如：我们想要将浏览器的地址改为http://www.baidu.com,我们就可以通过BOM中提供的location对象的href属性来完成，代码如下：location.href='http://www.baidu.com'

BOM中提供了如下5个对象：

对象名称描述
Window浏览器窗口对象
Navigator浏览器对象
Screen屏幕对象
History历史记录对象
Location地址栏对象

window对象提供了获取其他BOM对象的属性：

属性描述
history用于获取history对象
location用于获取location对象
Navigator用于获取Navigator对象
Screen用于获取Screen对象

也就是说我们要使用location对象，只需要通过代码window.location或者简写location即可使用

window也提供了一些常用的方法，如下表格所示：

函数描述
alert()显示带有一段消息和一个确认按钮的警告框。
comfirm()显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()在指定的毫秒数后调用函数或计算表达式。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-BOM</title>
</head>
<body>
    
</body>
<script>
    //获取
    // window.alert("Hello BOM");
    // alert("Hello BOM Window");

    //方法
    //confirm - 对话框 -- 确认: true , 取消: false
    // var flag = confirm("您确认删除该记录吗?");
    // alert(flag);

    //定时器 - setInterval -- 周期性的执行某一个函数
    // var i = 0;
    // setInterval(function(){
    //     i++;
    //     console.log("定时器执行了"+i+"次");
    // },2000);

    //定时器 - setTimeout -- 延迟指定时间执行一次 
    // setTimeout(function(){
    //     alert("JS");
    // },3000);
    
    //location
    alert(location.href);

    location.href = "https://www.itcast.cn";

</script>
</html>

5.3 DOM对象

5.3.1 DOM介绍

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

  • Document：整个文档对象

  • Element：元素对象

  • Attribute：属性对象

  • Text：文本对象

  • Comment：注释对象

那么我们学习DOM技术有什么用呢？主要作用如下：

  • 改变 HTML 元素的内容

  • 改变 HTML 元素的样式（CSS）

  • 对 HTML DOM 事件作出反应

  • 添加和删除 HTML 元素

从而达到动态改变页面效果目的，具体我们可以查看代码中提供的 11. JS-对象-DOM-演示.html 来体会DOM的效果。

5.3.2 DOM对象

  • DOM对象：浏览器根据HTML标签生成的JS对象

    • 所有的标签属性都可以在这个对象上面找到

    • 修改这个对象的属性，就会自动映射到标签身上

  • DOM的核心思想：将网页的内容当做对象来处理

  • document对象

    • 网页中所有内容都封装在document对象中

    • 它提供的属性和方法都是用来访问和操作网页内容的，如：document.write(…)

  • DOM操作步骤:

    • 获取DOM元素对象

    • 操作DOM对象的属性或方法 (查阅文档)

5.3.3 获取DOM对象

我们可以通过如下两种方式来获取DOM元素。

  1. 根据CSS选择器来获取DOM元素，获取到匹配到的第一个元素：document.querySelector('CSS选择器');

  2. 根据CSS选择器来获取DOM元素，获取匹配到的所有元素：document.querySelectorAll('CSS选择器');

注意：获取到的所有元素，会封装到一个NodeList节点集合中，是一个伪数组（有长度、有索引的数组，但是没有push、pop等数组方法）

函数描述
document.getElementById()根据id属性值获取，返回单个Element对象
document.getElementsByTagName()根据标签名称获取，返回Element对象数组
document.getElementsByName()根据name属性值获取，返回Element对象数组
document.getElementsByClassName()根据class属性值获取，返回Element对象数组
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-DOM</title>
</head>

<body>
    <span id="sid">DOM元素1</span>
    <span class="txt">DOM元素2</span>
    <span class="txt">DOM元素3</span>

    <script>
        //根据CSS选择器获取DOM元素, 获取到匹配的第一个元素
        let s1 = document.querySelector('#sid');
        console.log(s1);
    
        //根据CSS选择器获取DOM元素, 获取到匹配的所有元素
        let s2 = document.querySelectorAll('.txt');
        s2.forEach(s => console.log(s))
    </script>
</body>

</html>

示例： 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-DOM</title>
</head>

<body>
    <span id="sid">DOM元素1</span>
    <span class="txt">DOM元素2</span>
    <span class="txt">DOM元素3</span>

    <script>
        //根据CSS选择器获取DOM元素, 获取到匹配的第一个元素
        let s1 = document.querySelector('#sid');
        console.log(s1);
        s1.innerHTML = '草莓菠萝'

        //根据CSS选择器获取DOM元素, 获取到匹配的所有元素
        let s2 = document.querySelectorAll('.txt');
        s2.forEach(s => console.log(s))
    </script>
</body>

</html>

5.3.4 案例

鲁迅说的好，光说不练假把式，光练不说傻把式。所以接下来我们需要通过案例来加强对于上述DOM知识的掌握。需求如下2个：

5.3.4.1 需求

需求：订单支付完成后，5秒之后跳转到系统首页（www.jd.com）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .center {
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="center">
        您好, 支付完成, <span id="time">5</span> 秒之后将自动跳转至 <a href="https://www.jd.com">官网</a> 首页 ~
    </div>

    <script>
        //1. 获取时间对应的DOM元素
        let time = document.querySelector('#time');

        //2. 开启定时器, 每秒将时间往下减一 , 如果时间>0 , 更新DOM元素的内容 ; 如果时间 < 0 , 则跳转页面 ;
        count = time.innerHTML;
        let timer = setInterval(() => {
            count--;
            if (count > 0) {
                time.innerHTML = count;
            } else {
                clearInterval(timer);
                location.href = 'https://www.jd.com';
            }
        }, 1000);
    </script>
</body>
</html>

6. JS事件

6.1 事件介绍

如下图所示的百度注册页面，当我们用户输入完内容，百度可以自动的提示我们用户名已经存在还是可以使用。那么百度是怎么知道我们用户名输入完了呢？这就需要用到JavaScript中的事件了。

什么是事件呢？HTML事件是发生在HTML元素上的 “事情”，例如：

  • 按钮被点击

  • 鼠标移到元素上

  • 输入框失去焦点

  • 按下键盘按键

  • ........

而我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。例如：对于我们所说的百度注册页面，我们给用户名输入框的失去焦点事件绑定函数，当我们用户输入完内容，在标签外点击了鼠标，对于用户名输入框来说，失去焦点，然后执行绑定的函数，函数进行用户名内容的校验等操作。JavaScript事件是js非常重要的一部分，接下来我们进行事件的学习。那么我们对于JavaScript事件需要学习哪些内容呢？我们得知道有哪些常用事件，然后我们得学会如何给事件绑定函数。

所以主要围绕2点来学习：

  • 事件监听

  • 常用事件

6.2 事件监听

 JS事件监听的语法:

         事件源.addEventListener('事件类型', 要执行的函数);

  • 事件源: 哪个dom元素触发了事件, 要获取dom元素

  • 事件类型: 用什么方式触发, 比如: 鼠标单击 click, 鼠标经过 mouseover

  • 要执行的函数: 要做什么事

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-事件绑定</title>
</head>

<body>
    <input type="button" id="btn1" value="事件绑定1">
    <input type="button" id="btn2" value="事件绑定2">
    
    <script>
        document.querySelector("#btn1").addEventListener('click', ()=>{
            alert("按钮1被点击了...");
        })

        document.querySelector('#btn2').onclick = function(){
            alert("按钮2被点击了...");
        }
    </script>
</body>
</html>

 addEventListener 与 on事件 区别:

  • on方式会被覆盖，addEventListener 方式可以绑定多次，拥有更多特性，推荐使用 addEventListener .

6.3 常见事件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-常见事件</title>
</head>

<body>
    <form action="" style="text-align: center;">
        <input type="text" name="username" id="username">
        <input type="text" name="age" id="age">
        <input id="b1" type="submit" value="提交">
        <input id="b2" type="button" value="单击事件">
    </form>

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center" id="last">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>



    <script>
        //click: 鼠标点击事件
        document.querySelector('#b2').addEventListener('click', () => {
            console.log("我被点击了...");
        })

        //mouseenter: 鼠标移入
        document.querySelector('#last').addEventListener('mouseenter', () => {
            console.log("鼠标移入了...");
        })

        //mouseleave: 鼠标移出
        document.querySelector('#last').addEventListener('mouseleave', () => {
            console.log("鼠标移出了...");
        })

        //keydown: 某个键盘的键被按下
        document.querySelector('#username').addEventListener('keydown', () => {
            console.log("键盘被按下了...");
        })

        //keydown: 某个键盘的键被抬起
        document.querySelector('#username').addEventListener('keyup', () => {
            console.log("键盘被抬起了...");
        })

        //blur: 失去焦点事件
        document.querySelector('#age').addEventListener('blur', () => {
            console.log("失去焦点...");
        })

        //focus: 元素获得焦点
        document.querySelector('#age').addEventListener('focus', () => {
            console.log("获得焦点...");
        })

        //input: 用户输入时触发
        document.querySelector('#age').addEventListener('input', () => {
            console.log("用户输入时触发...");
        })

        //submit: 提交表单事件
        document.querySelector('form').addEventListener('submit', () => {
            alert("表单被提交了...");
        })
    </script>
</body>

</html>

6.4 案例

6.4.1 表格隔行换色

需求：实现表格隔行换色效果，奇数行设置背景色为： #FBFBD4，偶数行设置背景色为： #D9D9FA 。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tlias智能学习辅助系统</title>
    <style>
      body {
        margin: 0;
      }

      /* 顶栏样式 */
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #c2c0c0;
        padding: 20px 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      }
      
      /* 加大加粗标题 */
      .header h1 {
        margin: 0;
        font-size: 24px;
        font-weight: bold;
      }

      /* 文本链接样式 */
      .header a {
        text-decoration: none;
        color: #333;
        font-size: 16px;
      }

      /* 搜索表单区域 */
      .search-form {
        display: flex;
        align-items: center;
        padding: 20px;
        background-color: #f9f9f9;
      }

      /* 表单控件样式 */
      .search-form input[type="text"], .search-form select {
        margin-right: 10px;
        padding: 10px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 26%;
      }

      /* 按钮样式 */
      .search-form button {
        padding: 10px 15px;
        margin-left: 10px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      /* 清空按钮样式 */
      .search-form button.clear {
        background-color: #6c757d;
      }

      .table {
         min-width: 100%; 
         border-collapse: collapse;
      }
      thead {
        background-color: #ccc;
        line-height: 30px;
      }
      /* 设置表格单元格边框 */
      .table td, .table th { 
        border: 1px solid #ddd; 
        padding: 8px; 
        text-align: center;
      }
      
      .avatar { 
        width: 30px; 
        height: 30px; 
        object-fit: cover; 
        border-radius: 50%; 
      }

      /* 页脚版权区域 */
    .footer {
        background-color: #c2c0c0;
        color: white;
        text-align: center;
        padding: 10px 0;
        margin-top: 30px;
    }

    .footer .company-name {
        font-size: 1.1em;
        font-weight: bold;
    }

    .footer .copyright {
        font-size: 0.9em;
    }

    #container {
      width: 80%;
      margin: 0 auto;
    }
    </style>
</head>
<body>
    
  <div id="container">
    <!-- 顶栏 -->
    <div class="header">
      <h1>Tlias智能学习辅助系统</h1>
      <a href="#">退出登录</a>
    </div>

    <!-- 搜索表单区域 -->
    <form class="search-form" action="#" method="post">
      <input type="text" name="name" placeholder="姓名" />
      <select name="gender">
          <option value="">性别</option>
          <option value="male">男</option>
          <option value="female">女</option>
      </select>
      <select name="position">
          <option value="">职位</option>
          <option value="班主任">班主任</option>
          <option value="讲师">讲师</option>
          <option value="学工主管">学工主管</option>
          <option value="教研主管">教研主管</option>
          <option value="咨询师">咨询师</option>
      </select>
      <button type="submit">查询</button>
      <button type="reset" class="clear">清空</button>
    </form>

    <table class="table table-striped table-bordered">
      <thead>
          <tr>
              <th>姓名</th>
              <th>性别</th>
              <th>头像</th>
              <th>职位</th>
              <th>入职日期</th>
              <th>最后操作时间</th>
              <th>操作</th>
          </tr>
      </thead>
      <tbody>
        <tr>
            <td>令狐冲</td>
            <td>男</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲" class="avatar"></td>
            <td>讲师</td>
            <td>2021-03-15</td>
            <td>2023-07-30T12:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
            <td>任盈盈</td>
            <td>女</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈" class="avatar"></td>
            <td>学工主管</td>
            <td>2020-04-10</td>
            <td>2023-07-29T15:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
            <td>岳不群</td>
            <td>男</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="岳不群" class="avatar"></td>
            <td>教研主管</td>
            <td>2019-01-01</td>
            <td>2023-07-30T10:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
            <td>宁中则</td>
            <td>女</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="宁中则" class="avatar"></td>
            <td>班主任</td>
            <td>2018-06-01</td>
            <td>2023-07-29T09:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
          <td>令狐冲</td>
          <td>男</td>
          <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲" class="avatar"></td>
          <td>讲师</td>
          <td>2021-03-15</td>
          <td>2023-07-30T12:00:00Z</td>
          <td class="btn-group">
              <button class="edit">编辑</button>
              <button class="delete">删除</button>
          </td>
        </tr>
        <tr>
            <td>任盈盈</td>
            <td>女</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈" class="avatar"></td>
            <td>学工主管</td>
            <td>2020-04-10</td>
            <td>2023-07-29T15:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
            <td>岳不群</td>
            <td>男</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="岳不群" class="avatar"></td>
            <td>教研主管</td>
            <td>2019-01-01</td>
            <td>2023-07-30T10:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
            <td>宁中则</td>
            <td>女</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="宁中则" class="avatar"></td>
            <td>班主任</td>
            <td>2018-06-01</td>
            <td>2023-07-29T09:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
          <td>令狐冲</td>
          <td>男</td>
          <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲" class="avatar"></td>
          <td>讲师</td>
          <td>2021-03-15</td>
          <td>2023-07-30T12:00:00Z</td>
          <td class="btn-group">
              <button class="edit">编辑</button>
              <button class="delete">删除</button>
          </td>
        </tr>
        <tr>
            <td>任盈盈</td>
            <td>女</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈" class="avatar"></td>
            <td>学工主管</td>
            <td>2020-04-10</td>
            <td>2023-07-29T15:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
            <td>岳不群</td>
            <td>男</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="岳不群" class="avatar"></td>
            <td>教研主管</td>
            <td>2019-01-01</td>
            <td>2023-07-30T10:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
            <td>宁中则</td>
            <td>女</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="宁中则" class="avatar"></td>
            <td>班主任</td>
            <td>2018-06-01</td>
            <td>2023-07-29T09:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
      </tbody>
    </table>

    <!-- 页脚版权区域 -->
    <footer class="footer">
      <p class="company-name">江苏传智播客教育科技股份有限公司</p>
      <p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p>
    </footer>
  </div>
  <script>
    //1.获取所有列表行的元素DOM对象
    let trList = document.querySelectorAll("tr");
    //2.遍历元素对象集合，给每一行的元素对象，添加绑定事件：移入移出事件
    for (let i = 0; i < trList.length; i++) {
      //获取当前行的元素对象
      let tr = trList[i];
      //判断奇偶行
      if (i % 2 == 0){
        //奇数行，绑定鼠标的移入和移出事件，移入改变行的背景色，移出要把背景色恢复
        tr.addEventListener("mouseenter", () => {
          tr.style = "background-color: #F9FBD4";
        });
      } else {
        //偶数行，绑定鼠标的移入和移出事件，移入改变行的背景色，移出要把背景色恢复
        tr.addEventListener("mouseenter", () => {
          tr.style = "background-color: #E8F5FF";
        });
      }
      tr.addEventListener("mouseleave", () => {
        tr.style = "background-color: white";
      });
    }
    //给每一行的删除按钮绑定事件：点击删除当前行
    let delBtns = document.querySelectorAll(".delete");
    for (let i = 0; i < delBtns.length; i++) {
      delBtns[i].addEventListener("click", () => {
        if (confirm("确定要删除吗？")) {
          //删除当前行
          let tr = delBtns[i].parentNode.parentNode;
          tr.remove();
        }  
      })
    }
  </script>
</body>
</html>

7.什么是Vue

  • Vue是一款用于构建用户界面的渐进式的JavaScript框架。 （官方：https://cn.vuejs.org/） 
  • 框架：就是一套完整的项目解决方案，用于快速构建项目 。
  • 优点：大大提升前端项目的开发效率 。
  • 缺点：需要理解记忆框架的使用规则 。（参照官网）

 案例：快速入门

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue-快速入门</title>
</head>
<body>
  <div id = "app">
    <!-- 3. vue管理的html区域 -->
     <!-- 使用插值表达式 显示vue的变量 -->
      {{ message }}
      {{ a + b }}
      <table>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
        <!-- 使用 v-for 进行循环 :key 属性，用于标识当前的元素，防止重复渲染-->
        <tr v-for="(user, index) in userList" :key="index">
          <td>{{user.name}}</td>
          <td>{{user.age}}</td>
          <td><span v-if="user.gender == 1">男</span><span v-else>女</span></td>
        </tr>
    </table>
    <a :href="url">百度</a>
    <!-- 使用 v-show 控制元素是否显示 -->
    <p v-show="boo == true">这是一个文字显示的段落</p>
    <br>
    <!-- 使用 v-model 双向绑定 -->
    <input type="text" v-model="message">
    <!-- <br> -->
    <!-- 演示 v-on:click 事件绑定 -->
    <input type="button" value="打印日志" @click="printLog"></p>
    {{count}}
  </div>

  <script type="module">
    //1.引入vue的模块
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    //2.创建Vue实例
    createApp({
      //4.在vue实例中准备要渲染的数据，写在data中，mount挂载
      data(){
        return {
          message:'hello vue3',
          a : 1,
          b : 2,
          url : 'http://www.itcast.com',
          boo : false,
          count : 0,
          userList:[
            {'name':'张三','age':18,'gender':'男'},
            {'name':'李四','age':19,'gender':'女'},
            {'name':'王五','age':20,'gender':'男'}
          ]
        }
      },
      methods: {
        printLog(){
          console.log('打印日志');
          this.count++;
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

1.Vue的使用步骤 ?

  • 准备工作
  • 引入Vue模块
  • 创建Vue的应用实例
  • 定义元素(div)，交给Vue控制
  • 数据驱动视图
  • 准备数据
  • 用插值表达式渲染

 2.Vue 常用指令

  • 指令：HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。
  • 常用指令：

 

指令

作用

v-for

列表渲染，遍历容器的元素或者对象的属性

v-bind

为HTML标签绑定属性值，如设置 href , css样式等

v-if/v-else-if/v-else

条件性的渲染某元素，判定为true时渲染,否则不渲染

v-show

根据条件展示某元素，区别在于切换的是display属性的值

v-model

在表单元素上创建双向数据绑定

v-on

为HTML标签绑定事件

 

 

 

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tlias智能学习辅助系统</title>
    <style>
      body {
        margin: 0;
      }

      /* 顶栏样式 */
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #c2c0c0;
        padding: 20px 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      }
      
      /* 加大加粗标题 */
      .header h1 {
        margin: 0;
        font-size: 24px;
        font-weight: bold;
      }

      /* 文本链接样式 */
      .header a {
        text-decoration: none;
        color: #333;
        font-size: 16px;
      }

      /* 搜索表单区域 */
      .search-form {
        display: flex;
        align-items: center;
        padding: 20px;
        background-color: #f9f9f9;
      }

      /* 表单控件样式 */
      .search-form input[type="text"], .search-form select {
        margin-right: 10px;
        padding: 10px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 26%;
      }

      /* 按钮样式 */
      .search-form button {
        padding: 10px 15px;
        margin-left: 10px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      /* 清空按钮样式 */
      .search-form button.clear {
        background-color: #6c757d;
      }

      .table {
         min-width: 100%; 
         border-collapse: collapse;
      }

      /* 设置表格单元格边框 */
      .table td, .table th { 
        border: 1px solid #ddd; 
        padding: 8px; 
        text-align: center;
      }
      
      .avatar { 
        width: 30px; 
        height: 30px; 
        object-fit: cover; 
        border-radius: 50%; 
      }

      /* 页脚版权区域 */
    .footer {
        background-color: #c2c0c0;
        color: white;
        text-align: center;
        padding: 10px 0;
        margin-top: 30px;
    }

    .footer .company-name {
        font-size: 1.1em;
        font-weight: bold;
    }

    .footer .copyright {
        font-size: 0.9em;
    }

    #container {
      width: 80%;
      margin: 0 auto;
    }
    </style>
</head>
<body>
    
  <div id="container">
    <!-- 顶栏 -->
    <div class="header">
      <h1>Tlias智能学习辅助系统</h1>
      <a href="#">退出登录</a>
    </div>

    <!-- 搜索表单区域 -->
    <form class="search-form" action="#" method="post">
      <input type="text" name="name" placeholder="姓名" v-model="searchForm.name" />
      <select name="gender" v-model="searchForm.gender">
          <option value="">性别</option>
          <option value="1">男</option>
          <option value="2">女</option>
      </select>
      <select name="position" v-model="searchForm.job">
          <option value="">职位</option>
          <option value="1">班主任</option>
          <option value="2">讲师</option>
          <option value="3">学工主管</option>
          <option value="4">教研主管</option>
          <option value="5">咨询师</option>
      </select>
      <button type="button" @Click="search">查询</button>
      <button type="reset" class="clear">清空</button>
    </form>

    <table class="table table-striped table-bordered">
      <thead>
          <tr>
              <th>姓名</th>
              <th>性别</th>
              <th>头像</th>
              <th>职位</th>
              <th>入职日期</th>
              <th>最后操作时间</th>
              <th>操作</th>
          </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in empList" :key="itemid">
          <td>{{item.name}}</td>
          <td>{{item.gender==1?'男':'女'}}</td>
          <td><img :src="item.image" alt="{{item.name}}" class="avatar"></td>
          <td>
            <span v-show="item.job == 1">班主任</span>
            <span v-show="item.job == 2">讲师</span>
            <span v-if="item.job == 3">学工主管</span>
          </td>
          <td>{{item.entrydate}}</td>
          <td>{{item.updatetime}}</td>
          <td class="btn-group">
            <button class="edit">编辑</button>
            <button class="delete">删除</button>
          </td>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 页脚版权区域 -->
    <footer class="footer">
      <p class="company-name">江苏传智播客教育科技股份有限公司</p>
      <p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p>
    </footer>

    <script src=" ./js/axios.js"></script>
    <script type="module">
      import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
      createApp({
        data() {
          return {
            searchForm: {
            name: '',
            gender: '',
            job: ''
            },
            empList: []
          }
        },
        methods:{
            search(){
               console.log("被点击了");
               //请求服务端的url,获取员工列表数据
               axios.get('https://web-server.itheima.net/emps/list?'+'name='+this.searchForm.name+'&gender='+this.searchForm.gender+'&job='+this.searchForm.job)
               .then(res => {
                 console.log(res.data);
                 this.empList = res.data.data;
               }).catch(err => {
                 console.error(err);
               })
          },
          mounted() {
            console.log('vue实例挂载完毕');
            this.search();
          }
      }).mount('#container')
    </script>

  </div>

</body>
</html>

 Ajax

 

1.Axios发送异步请求

  • GET:

                axios.get(url).then((res)=>{…}).catch((err)=>{…})

  • POST:

                 axios.post(url).then((res)=>{…}).catch((err)=>{…})  

 

 


原文地址：https://blog.csdn.net/Doshaxin/article/details/142385077

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024