web开发之 HTML、CSS、JavaScript、以及JavaScript的高级框架Vue（学习版1）

.ccl

已于 2024-11-04 22:32:44 修改

阅读量840

点赞数 5

分类专栏： javaweb开发文章标签：前端

于 2024-09-04 11:56:14 首次发布

本文链接：https://blog.youkuaiyun.com/2301_76876837/article/details/141887499

版权

javaweb开发专栏收录该内容

3 篇文章

订阅专栏

一、Web网站的开发流程

我们在访问的网站的时候，一般就是在浏览器的网址栏里输入对应的域名，再敲个回车，我们就可以访问到我们想要的网站（比如京东）。

这是为什么呢？我们访问的浏览器是一个程序，京东也是一个程序，只是京东在人家电脑上运行着，我们只是远程访问了人家的前端页面。

我们根据下图来讲解一下web网站的工作流程：

我们在浏览器输入我们想要查找的域名，回车（搜索）后，会请求到前端服务器，前端服务器接受到请求后会把相对应的前端代码返回给浏览器，浏览器会自动解析前端代码（因为内置了解析引擎），展示出页面效果。

前端代码里由一句代码会是访问后端服务器的代码，然后浏览器会根据这个路径去（http://localhost:8080/item/selectAll）访问后端浏览器，后端浏览器又会去请求数据库服务器的数据，后端服务器又会将数据再返回给浏览器。

二、web前端开发

（一）总述：

我们所看到的网页都是前端代码经浏览器的转化（解析和渲染）后所展现出来的。

（二）HTML CSS

1.基础标签&样式

（1）新浪新闻-标题

什么是HTML？

HTML: HyperText Markup Language，超文本标记语言。

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

标记语言：由标签 "<标签名>" 构成的语言

HTML标签都是预定义好的。例如：使用 <h1> 标签展示标题，使用<a>展示超链接，使用<img>展示图片，<video>展示视频。

HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

标题排版

<!-- 文档类型 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集类型 -->
    <meta charset="UTF-8">
    <!-- 电脑适配（兼容） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body>
    <!--
    src:图片资源路径 
    width：宽度 px(像素) % 占父级元素的百分比
    height:高度 px(像素) % 占父级元素的百分比
    alt:图片加载失败时显示的文本
    -->
    <!-- 
    绝对路径：
        磁盘路径：D:\learn\web\img\news_logo.png
        网络路径：https://pics7.baidu.com/feed/f3d3572c11dfa9ec092ecf8a177c720d908fc162.jpeg@f_auto?token=fcab19a61930989e176d8d97fb3c80bd
    相对路径：
        ./同级目录
        ../上一级目录
        ../../上上级目录
    -->

    <!-- 不知道为啥：我的绝对路径显示不出来啥 ，后来发现是因为没有open in default browser-->
    <img src="https://pics7.baidu.com/feed/f3d3572c11dfa9ec092ecf8a177c720d908fc162.jpeg@f_auto?token=fcab19a61930989e176d8d97fb3c80bd" alt="这里是网络路径的图片">
    <img src="D:\learn\web\img\news_logo.png" alt="">
    <img src="./img/news_logo.png" alt="">

</body>
</html>

标题样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈</title>

    <!-- 内嵌式 -->
     <!-- <style>
        /* 标签选择器（或元素选择器） */
        h1{
            color:  rgb(77, 79, 83);
        }

     </style> -->
     
     <!-- 外联式 -->
      <link rel="stylesheet" href="./css/news.css">
</head>
<body>
    <!-- 
    css引入方式：
    行内式
    内嵌式
    外联式 
    -->
    <img src="./img/news_logo.png" alt="">新浪政务 > 正文
    <!-- 行内式 -->
    <!-- <h1 style="color: rgb(77, 79, 83);">焦点访谈</h1> -->
    <h1 >焦点访谈</h1>
    <hr>
    2023年03月02日 21:50 央视网
    <hr>

</body>
</html>

选择器	写法	示例	示例说明
元素选择器	元素名称 {...}	h1 {...}	选择页面上所有的<h1>标签
类选择器	.class属性值 {...}	.cls {...}	选择页面上所有class属性为cls的标签
id选择器	#id属性值 {...}	#hid {...}	选择页面上id属性为hid的标签
分组选择器	选择器1,选择器2{...}	h1,h2 {...}	选择页面上所有的<h1>和<h2>标签
属性选择器	元素名称[属性] {...}	input[type] {...}	选择页面上有type属性的<input>标签
属性选择器	元素名称[属性名="值"] {...}	input[type="text"] {...}	选择页面上type属性为text的<input>标签
后代选择器	元素1元素2{...}	form input {...}	选择<form>标签内的所有<input>标签

标签	作用	属性/说明
<video>	视频标签	src：指定视频的url（绝对路径/相对路径）
		controls：是否显示播放控件
		width：宽度（像素/相对于父元素百分比）；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。
		height：高度（像素/相对于父元素百分比）；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。
<img>	图片标签	src, width，height
<p>	段落标签
<br>	换行标签
<b> / <strong>	加粗	<strong> 具有强调语义
<u> / <ins>	下划线	<ins> 具有强调语义
<i> / <em>	倾斜	<em> 具有强调语义
<s> / <del>	删除线	<del> 具有强调语义

字符实体	属性/说明
	空格
<	<
>	>

超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈</title>

      <link rel="stylesheet" href="./css/news.css">


      <style>
        #time{
            color: rgb(77,88 ,83 );
            font-size: 13px;
        }
        .t{
            font-size: 18px;
        }
        a{
            color: black;
            text-decoration: none;
        }
      </style>
</head>
<body>
    <img src="./img/news_logo.png" alt=""><span class="t"><a href="https://gov.sina.com.cn/" target="_self">晓之女神</a> > 正文</span>
    <h1 >焦点访谈</h1>
    <hr>
    <span class="time" id="time">2023年03月02日 21:50</span> <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">性能</a></span>
    <hr>

</body>
</html>

（2）新浪新闻-正文

正文排版

这里代码可以私我查看，应该涉证，审核不通过

页面布局

这里代码可以私我查看，应该涉证，审核不通过

盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
<style>
    div{
        width: 200px;
        height: 200px;
        box-sizing: border-box;
        background-color: cadetblue;

        padding: 20px; /*内边距*/
        border: 10px solid blue; /*边框*/
        margin: 30px; /*外边距*/
    }
</style>

</head>
<body>
    <div>
    aaaaaaaaaaaa

    </div>
</body>
</html>

盒子的大小，其实就包括三个部分： border、padding、content，而margin外边距是不包括在盒子之内的

上述的padding、margin属性值，可以是4个值、也可以是两个值、也可以是一个值，具体的含义如下：

padding: 20px 20px 20px 20px; -------> 表示上、右、下、左都是20px；

padding: 20px 10px; ----------------------> 表示上下是20px，左右是10px；

padding: 20px; -----------------------------> 表示上、右、下、左都是20px；

2.表格、表单标签

标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
    <style>
        td{
            text-align: center;
        }
    </style>
</head>
<body>

    <table border="1px"  cellspacing="0" width="700px">

        <tr>
            <th>序号</th>
            <th>品牌logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>

        <tr>
            <td>001</td>
            <td><img src="./img/huawei.jpg" alt="" width="100px"></td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>

        <tr>
            <td>002</td>
            <td><img src="./img/alibaba.jpg" alt="" width="100px"></td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>

    </table>
    
</body>
</html>

表单

get方式：

post方式：（从后台可以看到数据）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>
<body>
    
    <!-- form
        action:表单数据提交的地址
        method:
            get:将表单数据提交在url地址后面，以问号的形式拼接 ？username=lcc&age=20 默认为get 长度有限制
            post:表单数据提交在请求体中,没有长度限制

        注意：表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。 否则，无法提交该表单项。
    -->

    <form action="" method="get">

        <input type="text" name="username">用户名
        <input type="text" name="age">年龄

        <input type="submit" value="提交">

    </form>


</body>
</html>

表单项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单项</title>
</head>
<body>
    <form action="" method="post">
        姓名：<input type="text" name="username"><br><br>
        密码：<input type="password" name="password"><br><br>

        <!--label标签可以提高用户的体验-->
        <label for="">性别：<input type="radio" name="gender" value="1">男</label>
        <label for=""><input type="radio" name="gender" value="2">女</label><br><br>
    
        爱好：<label for=""><input type="checkbox" name="hobby" value="java">java</label>
        <label for=""><input type="checkbox" name="hobby" value="game">game</label>
        <label for=""><input type="checkbox" name="hobby" value="sing">sing</label><br><br>

        图像：<input type="file" name="image"><br><br>
        生日：<input type="date" name="birthday"><br><br>
        时间：<input type="time" name="time"> <br><br>
        时间日期：<input type="datetime-local" name="datetime"><br><br>

        邮箱：<input type="email" name="email"><br><br>
        年龄：<input type="number" name="age"><br><br>

        学历：<select name="degree" id="">

            <option value="">------请选择------</option>
            <option value="1">小学</option>
            <option value="1">高中</option>
            <option value="1">本科</option>
            <option value="1">硕士</option>
            <option value="1">博士</option>

        </select><br><br>

        描述：<textarea name="description" cols="30" rows="10" id=""></textarea> <br><br>

        <!-- 隐藏 -->
        <input type="hidden" name="id" value="1">
        
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <input type="submit" value="提交">


    </form>
</body>
</html>

而对于<input type="hidden">，是一个隐藏域，在表单中并不会显示出来，但是在提交表单的时候，是会提交到服务端的。接下来，我们就点击提交按钮，来提交当前表单，看看提交的数据：

3.flex布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      display: flex;
      /* justify-content: space-between; */ /* 先两边贴边，再平分剩余空间 */
      /* justify-content: flex-start;*/ /* 从头开始排列  */
      /* justify-content: flex-end; */ /* 从尾开始排列 */
      /* justify-content: center; */ /* 居中排列 */
      /* justify-content: space-around; */ /* 两边留白，中间平分，平分剩余空间 */
      flex-direction: row;
      justify-content: space-between;
      background-color: #aeea6a;
      width: 400px;
      height: 300px;
    }

    #container div {
      background-color: #e866ef;
      width: 100px;
      height: 50px; 
    }
  </style>
</head>
<body>
  <div id="container">
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
  </div>
</body>
</html>

属性	说明	取值	含义
display	模式	flex	使用flex布局
flex-direction	设置主轴	row	主轴方向为x轴，水平向右。（默认）
flex-direction	设置主轴	column	主轴方向为y轴，垂直向下。
justify-content	子元素在主轴上的对齐方式	flex-start	从头开始排列
		flex-end	从尾部开始排列
		center	在主轴居中对齐
		space-around	平分剩余空间
		space-between	先两边贴边，再平分剩余空间

如果主轴设置为row，其实就是横向布局。主轴设置为column，其实就是纵向布局。

（三）JS

1.js引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
    <!-- 内部引入 -->
     <!-- <script>
        alert('hello js');

     </script> -->
     <!-- 外部引入 -->
      <script src="./js/demo1.js"></script>
</head>
<body>
    

</body>
</html>

2.js基础语法

（1）书写语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js基础语法-输出语句</title>
</head>
<body>
    
</body>

<script>

// <!-- 方式一：弹出警告框 -->
    window.alert('hello js');
    // <!-- 方式二：输出在html页面当中 -->
    document.write('heiheiehi js');

    // <!-- 方式三：输出在控制台 -->
     console.log('yayayayya js');
</script>
   
</html>

（2）变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基础语法-变量</title>
</head>
<body>
</body>

<script>

    // var变量 作用范围比较大 全局变量,里面的值能更改
    {
        var a = 1;
        var a = '开心就好';
        // alert(a);

    }
    alert(a);


    //let局部变量，不允许重复声明
    {
        let b = 2;
        b=4;
        // let b = 5;//不允许重复声明
        // alert(b);//输出4
    }
    alert(b);//没有弹窗,说明是局部变量


    //const常量，里面的值不能更改
    {
        const c = 3;
        // c=4;//没有弹窗显示，说明常量不能修改
        alert(c);
    }
    // alert(c);//没有弹窗显示，说明是局部变量

</script>

</html>

（3）数据类型、运算符、流程控制语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基础语法-数据类型</title>
</head>
<body>
    
</body>

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

    alert(typeof 'nkas');//string
    alert(typeof 'A');//string

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

    alert(null);//null

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

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基础语法-运算符</title>
</head>
<body>
    
</body>

<script>
    // 运算符
    // 这里区别一下== 和===
    // ==会进行类型的转换
    // ===不会进行类型的转换
    var a = 10;
    alert(a == '10');
    alert(a === '10');
    alert(a === 10);

    //类型转换

    //字符串类型转换成数字 ：
    alert(parseInt('12')); //12
    alert(parseInt('12as34'));//12
    alert(parseInt("as43"));//NaN no a number

    //其他类型转换成Boolean类型
    // 1.数字转换成boolean类型,除了0和NaN，其他都是true
    if(0){
        alert('0是false');
    }
    if(NaN){
        alert('null是false');
    }
    if(-1){
        alert('除了0和NaN，其他都是true');
    }
    // 2.string转换成boolean类型，除了空字符串，其他都是true
    if(''){
        alert('空字符串转Boolean类型是false');
    }
    if(' '){
        alert('除了空字符串，其他都是true')
    }
    if('bjs'){
        alert('除了空字符串，其他都是true')
    }
    //3.null和undefined转换成boolean类型都是false
    if(null){
        alert('null转化成boolean类型是false');
    }
    if(undefined){
        alert('undefined转化成boolean是false');
    }


</script>
</html>

3.js函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js函数</title>
</head>
<body>
    
</body>

<script>
    //1.函数声明法一，参数可以不用指定类型
    // function add(a,b){
    //     return a+b;
    // }
    //1.函数声明法二
    var add = function(a,b){
        return a+b;
    }
    //2.函数调用
    var result = add(20,30);
    alert(result);//结果都是50
</script>
</html>

4.js对象

（1）array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-array数组</title>
</head>
<body>
    
</body>

<script>
    //1.定义数组
    var arr = new Array(1,2,3,4);
    var arr = [1,2,3,4];

    //2.访问数组
    
    console.log(arr[0]);
    console.log(arr[1]);

    //数组长度是可变的，并且可以存储任意类型的数据
    arr[10] = 10;
    console.log(arr[10]);
    console.log(arr[13]);

    arr[7] = 'happyhappy';
    arr[8] = true;
    console.log(arr[7]);
    console.log(arr[8]);

    console.log(arr);

    
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-array数组</title>
</head>
<body>
    
</body>

<script>
    // //1.定义数组
    // var arr = new Array(1,2,3,4);
    // var arr = [1,2,3,4];

    // //2.访问数组 
    // console.log(arr[0]);
    // console.log(arr[1]);

    // //数组长度是可变的，并且可以存储任意类型的数据
    // arr[10] = 10;
    // console.log(arr[10]);
    // console.log(arr[13]);

    // arr[7] = 'happyhappy';
    // arr[8] = true;
    // console.log(arr[7]);
    // console.log(arr[8]);

    // console.log(arr);

    //3.遍历数组
    var array = [1,2,3,4,5,6];
    array[10] = 10;

    //for循环是所有的值都遍历
    for(var i = 0 ;i <= array.length; i++){
        console.log(array[i]);
    }  

    //forEach 只遍历有值的元素
    array.forEach(function(e){
        console.log(e);
        
    })

    //ES6 箭头函数 用来简化函数的写法
    array.forEach((e) => {
        console.log(e);        
    })

    // 给数组的末尾加值
    array.push(23,24,25,26);
    console.log(array);
    
    //从数组中删除元素
    array.splice(3,2);
    console.log(array);  
</script>
</html>

（2）string

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>string字符串</title>
</head>
<body>
    
</body>
<script>
    //1.创建字符串对象
    // var str = new String("hello world");
    var str = "  hello world ";
    console.log(str);

    //2.字符串的属性（长度）
    console.log(str.length);

    //3.字符串的方法
    // charAt某个位置的字符
    console.log(str.charAt(2));

    // indexof返回字符串的位置
    console.log(str.indexOf('lo'));
    

    // trim去掉字符串两边的空格
    console.log(str.trim());

    //substring返回指定索引之间的字符串，含头不含尾
    console.log(str.substring(0,5));
    
</script>
</html>

（3）json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-JSON</title>
</head>
<body>
    
</body>

<script>
    //自定义对象
    var person = {
        name : 'lcc',
        age : 19,
        gender : 'female',
        eat : function(){
            alert('eat');
        },
        sleep(){
            alert('sleep');
        }
    }
    alert(person.name);
    person.eat();
    person.sleep();

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-JSON</title>
</head>
<body>
    
</body>

<script>
    //自定义对象
    var person = {
        name : 'lcc',
        age : 19,
        gender : 'female',
        eat : function(){
            alert('eat');
        },
        sleep(){
            alert('sleep');
        }
    }
    alert(person.name);
    person.eat();
    person.sleep();

    //JSON对象
    var jsonstr = ' {"name":"lcc", "age":19, "gender":"female", "address":{"province":"shanxi","city":"xian"}, "likefood":true, "clothes": ["shirt","dress"]}';
    alert(jsonstr.name);//undefined,因为是字符串，我们要转换成一个json对象

    var jsonobj = JSON.parse(jsonstr);
    alert(jsonobj.name);

    //json对象在转换成字符串
    alert(JSON.stringify(jsonobj));

</script>
</html>

（4）bom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象-Bom对象</title>
</head>
<body>
    
</body>

<script>
    // //获取Bom对象
    alert("window");
    window.alert("window浏览器对象");

    //BOM对象当中的方法
    var flag = confirm('你确定要退出吗？'); //返回的是true或false
    alert(flag);

    //按指定周期性（一毫秒计算）调用函数或表达式
    var i = 0;
    setInterval(function(){
        console.log('这是执行的'+i+'次');
        
    },2000);

    //按指定毫秒后执行函数或表达式
    setTimeout(function(){
        alert('点击我，看我还会不会出现')
    },3000)



    //location对象，设置或返回地址栏的url
    alert(location.href); //先弹出当前页面的地址栏的url

    location.href = 'http://www.baidu.com';//然后直接跳转到百度页面
</script>
</html>

（5）dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象-Dom对象-获取元素</title>
</head>
<body>
    <img id="img1" src="./img/off.gif" alt="" ><br><br>

    <div class="cla">传智教育-黑马程序员</div><br><br>
    <div class="cla">好好学习 为了自己！</div><br><br>

    <input type="checkbox" name="hobby">跑步
    <input type="checkbox" name="hobby">羽毛球
    <input type="checkbox" name="hobby">电影

    <script>

        //1.获取元素对象
        //根据id获取
        var img = document.getElementById("img1"); //弹窗出现一次[object HTMLImageElement]
        alert(img);

        //根据标签获取
        var tags = document.getElementsByTagName("div");
        for (let index = 0; index < tags.length; index++) { //弹窗出现两次[object HTMLDivElement]
            alert(tags[index]);
            
        }

        //根据class获取
        var clas = document.getElementsByClassName("cla");
        for (let index = 0; index < clas.length; index++) { //弹窗出现两次[object HTMLDivElement]
            alert(clas[index]);
            
        }
        //根基name获取
        var nams = document.getElementsByName("hobby");
        for (let i = 0; i < nams.length; i++) { //弹窗出现三次[object HTMLInputElement]
            alert(nams[i]);
            
        }

        //2.调用元素对象当中的方法、属性
        //修改文本
        // var tags1 = tags[0];
        // tags1.innerHTML = "传智教育超级厉害！！！";
        for (let I = 0; I < tags.length; I++) {
            const element = tags[I];
            element.innerHTML =+ "<font color='red'>GOOD</font>";//别忘记外面的双引号，里面的red是单引号
        }

        //修改图片的src属性
        img.src='./img/on.gif';
        

        //修改复选框的选中状态
        for (let i = 0; i < nams.length; i++) { //弹窗出现三次[object HTMLInputElement]
            nams[i].checked = true;
            
        }
       
    </script>
</body>
</html>

5.js事件监听

事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件绑定</title>
</head>
<body>
    <input type="button" id="bt1" value="按钮一" onclick="bt1()">
    <input type="button" id="bt2" value="按钮二">
</body>


<script>
    //事件绑定
    //方式1：直接在html标签中绑定
    function bt1(){
        alert("按钮一被点击了");
    }
    //方式2：在js代码中绑定
    document.getElementById("bt2").onclick=function(){
        alert("按钮二被点击了");
    }

</script>
</html>

常见事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-常见事件</title>
</head>

<body onload="fn1()">

    <form action="" style="text-align: center;" onsubmit="fn8()">
        <input type="text" name="username" onblur="fn3()" onfocus="fn4()" onkeydown="fn5()">
        <input type="submit" value="提交" id="b1">
        <input type="button" value="单击事件" id="b1" onclick="fn2()">
    </form>
    <br><br>

    <table width="800px" border="1" align="center" cellspacing="0" onmouseover="fn6()" onmouseout="fn7()">
        <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">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>非常优秀</td>  
        </tr>

        <tr align="center">
            <td>003</td>
            <td>王五</td>
            <td>83</td>
            <td>很努力，不错</td>
        </tr>

        <tr align="center">
            <td>004</td>
            <td>赵四</td>
            <td>67</td>
            <td>还待提高，继续加油</td>
        </tr>


    </table>
</body>

<script>
    //1.onload事件，页面加载完成后执行
    function fn1(){
        console.log('页面加载完成。');
        
    }

    //2.onclick事件，点击事件
    function fn2(){
        console.log('点击事件。');
        
    }

    //3.onblur事件，失去焦点事件

    function fn3(){
        console.log('失去焦点事件。');

    }

    //4.onfocus事件，得到焦点事件
    function fn4(){
        console.log('得到焦点事件。');
        
    }

    //4.onkeydown事件，键盘按下事件
    function fn5(){
        console.log('键盘按下事件。');
        
    }

    //5.onmouseover事件，鼠标移入事件
    function fn6(){
        console.log('鼠标移入事件');
        
    }

    //6.onmouseout事件，鼠标移出事件
    function fn7(){
        console.log('鼠标移出事件');
        
    }
    //7.onsubmit事件，表单提交事件
    function fn8(){
        alert('表单提交事件');
        
    }
</script>
</html>

事件案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件案例</title>
</head>
<body>
    <img src="./img/off.gif" alt="" id="light"><br>
    <input type="button" value="点亮" onclick="fn1()">
    <input type="button" value="熄灭" onclick="fn2()"><br><br>
    <!-- <input type="text" value="ITCAST" onfocus="fn3()" onblur="fn4()"> <br><br> -->
    <input type="text" value="ITCAST" onfocus="down()" onblur="upper()" id="text"> <br><br>

    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏<br><br>
    <input type="button" value="全选" onclick="fn5()">
    <input type="button" value="反选" onclick="fn6()">
</body>

<script>
    //dom和事件的综合运用，先获取元素对象，再绑定事件，最后写事件处理函数
    //1.点亮和熄灭
    function fn1(){
        document.getElementById('light').src = './img/on.gif';
    }
    function fn2(){
        document.getElementById('light').src = './img/off.gif';
    }

    //2.文本框获得焦点和失去焦点，获得焦点时显示小写，失去焦点时显示大写
    //第一种方式
    // function fn3(){
    //     document.getElementsByTagName('input')[2].value = 'itcast';

    // }
    // function fn4(){
    //     document.getElementsByTagName('input')[2].value = 'ITCAST';
    // }

    //第二种方式
    function upper(){
        var upper = document.getElementById('text');;
        upper.value = upper.value.toUpperCase();
    }
    function down(){
        var upper = document.getElementById('text');;
        upper.value = upper.value.toLowerCase();
    }

    //3.复选框全选和反选
    function fn5(){
        var hobby = document.getElementsByName("hobby");
        for (let i = 0; i < hobby.length; i++) {
            hobby[i].checked = true;
            
        }
    }
    function fn6(){
        var hobby = document.getElementsByName("hobby");
        for (let i = 0; i < hobby.length; i++) {
            hobby[i].checked = !hobby[i].checked;

        }
    }
</script>
</html>

（四）Vue

1.总述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue快速入门</title>
    <!-- 先引入js对象 -->
     <script src="./js/vue.js"></script>
</head>
<body>
    
    <!-- 最后是视图层 -->
     <div id="app">
        <input type="text" v-model="message"> <!-- v-model进行数据的双向绑定,显示数据模型里的数据，当你改变视图里的数据，数据模型里的数据也跟着改变-->
        {{message}}<!-- 正则表达式，直接将数据模型里的数据显示 -->
     </div>
     

</body>

<script>
    //再创建vue对象
    new Vue({
        el : '#app', //指定vue对象的管理范围
        data : {
            message : 'hello vue' //定义数据模型
        }
    })
</script>
</html>

2.vue常用指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-指令-v-bind和v-model</title>
    <!-- 先引入js -->
     <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url" value="按钮1">按钮1</a>
        <a :href="url" value="按钮2">按钮2</a>

        <input type="text" v-model="url">
    </div>
</body>

<script>
    // 定义vue对象
    new Vue({
        el: '#app',
        data : {
            url:'https://www.baidu.com'
        }
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="点我一下" v-on:click="handle()">
        <input type="text" value="点我一下" @click="click()">
    </div>

</body>
<script>
    //创建vue对象
    new Vue({
        el: '#app',
        data: {

        },
        methods: {
            handle : function(){
                alert('我被点了一下。。。')
            }
        },

    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-指令-v-if和v-show</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    

    <div id="app">
        <!-- v-if :页面只选择条件符合的去渲染-->
        年龄：<input type="text" v-model="age"><br>
        将判定为：<br>
        <span v-if="age <= 35">年轻人</span>
        <span v-else-if="age > 35 && age <= 60">中年人</span>
        <span v-else="age > 60">老年人</span>
        <!-- v-show ：将所有可能的都给渲染了，只不过是通过display属性决定是否展现在页面上-->
         <br><br><br>
        年龄：<input type="text" v-model="age"><br>
        将判定为：<br>
        <span v-show="age <= 35">年轻人</span>
        <span v-show="age > 35 && age <= 60">中年人</span>
        <span v-show="age > 60">老年人</span>
    </div>
</body>

<script>
    //创建vue对象
    new Vue({
        el:'#app',
        data:{
            age :20,
        },
        methods: {
            
        },
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-指令-v-for</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="address in arrs">{{address}}</div><br>
        <div v-for="(address, index) in arrs" >{{index}}:{{address}}</div><br>
        <div v-for="(address, index) in arrs" >{{index+1}}:{{address}}</div>
        
    </div>
</body>

<script>
    new Vue({
        el:'#app',
        data:{
            arrs:['北京', '上海', '广州', '西安', '西藏'] //当是数据模型是数组时，里面的元素要带引号
        }
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue指令案例</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table cellspacing="0" border="1" width="800px" align="center">
            <tr>
                <th >编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <tr v-for="(user, index) in users" >
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 65 ">及格</span>
                    <span v-else="user.score < 65" style="color: red;">不及格</span>
                </td>
            </tr>
        </table>
    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            users:[{
                name: '张三',
                age:20,
                gender:1,
                score:78
            },{
                name: '李四',
                age:18,
                gender:2,
                score:86
            },{
                name: '王五',
                age:26,
                gender:1,
                score:90
            },{
                name: '赵六',
                age:30,
                gender:1,
                score:52
            }]
        }
    })
</script>
</html>