04 HTML & CSS & JavaScript

已于 2024-07-23 18:31:18 修改
阅读量420 收藏 16
点赞数 17
分类专栏： JavaWeb 文章标签： html css javascript
于 2024-07-21 21:21:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62504976/article/details/140583143
版权

文章目录

HTML

1、HTML介绍

  1. HTML(HyperText Markup Language)：超文本标记语言
    • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
    • 标记语言：由标签构成的语言
      HTML中的标签都是预定义好的，运行在浏览器上并由浏览器解析
  2. W3C标准：
    W3C是万维网联盟，这个组成是用来定义标准的。他们规定了一个网页是由三部分组成，分别是：
    • 结构：对应的是 HTML 语言
    • 表现：对应的是 CSS 语言
    • 行为：对应的是 JavaScript 语言
      HTML定义页面的整体结构；CSS是用来美化页面，让页面看起来更加美观；JavaScript可以使网页动起来，比如轮播图也就是多张图片自动的进行切换等效果

2、快速入门

  1. 需求：实现如图页面

  2. 实现步骤

    • 新建文本文件，后缀名改为 .html
    • 编写 HTML 结构标签
      <html>
 <head>
   <title> </title>
 </head>
    <body>
        
    </body>
</html>
      （1）html标签是根标签，head 标签和 body 标签这两个子标签
      （2）head 标签的 title 子标签是用来定义页面标题名称的，它定义的内容会展示在浏览器的标题位置
      （3）body 标签的内容会被展示在内容区中
    • 定义文字
      <html>
 <head>	
   <title>html 快速入门</title>
    </head>
    <body>
    	乾坤未定，你我皆是黑马~
        <font color='red'>乾坤未定，你我皆是牛马！！！</font>
    </body>
</html>

  3. 细节

    • HTML 文件以.htm或.html为扩展名

    • HTML 结构标签

    • HTML 标签不区分大小写

    • HTML 标签属性值 单双引皆可

    • HTML 语法松散

3、基础标签

<!-- html5 标识-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面的字符集-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>我是标题 h1</h1>
<h2>我是标题 h2</h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4</h4>
<h5>我是标题 h5</h5>
<h6>我是标题 h6</h6>

<hr>
<!--
    html 表示颜色：
        1. 英文单词：red,pink,blue...
        2. rgb(值1,值2,值3)：值的取值范围：0~255  rgb(255,0,0)
        3. #值1值2值3：值的范围：00~FF
-->
<font face="楷体" size="5" color="#ff0000">传智教育</font>

<hr>
刚察草原绿草如茵，沙柳河水流淌入湖。藏族牧民索南才让家中，茶几上摆着馓子、麻花和水果，炉子上刚煮开的奶茶香气四溢……<br>

<hr>
<p>
刚察草原绿草如茵，沙柳河水流淌入湖。藏族牧民索南才让家中，茶几上摆着馓子、麻花和水果，炉子上刚煮开的奶茶香气四溢……
</p>
<p>
6月8日下午
</p>

<hr>
沙柳河水流淌<br>
<b>沙柳河水流淌</b><br>
<i>沙柳河水流淌</i><br>
<u>沙柳河水流淌</u><br>

<hr>
<center>
<b>沙柳河水流淌</b>
</center>

</body>
</html>

转移字符：

4、图片、音频、视频标签

  • 图片、音频、视频标签

    • img：定义图片
      src：规定显示图像的 URL（统一资源定位符）
      height：定义图像的高度
      width：定义图像的宽度
    • audio：定义音频。支持的音频格式：MP3、WAV、OGG
      src：规定音频的 URL
      controls：显示播放控件
    • video：定义视频。支持的音频格式：MP4, WebM、OGG
      src：规定视频的 URL
      controls：显示播放控件

  • 尺寸单位：
    height属性和width属性有两种设置方式：

    • 像素：单位是px
    • 百分比。占父标签的百分比
      例如，宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）

  • 资源路径：
    资源路径有如下两种设置方式：

    • 绝对路径：完整路径
      这里的绝对路径是网络中的绝对路径。 格式为： 协议://ip地址:端口号/资源名称
      如：
      <img src="https://th.bing.com/th/id/R33674725d9ae34f86e3835ae30b20afe?
rik=Pb3C9e5%2b%2b3a9Vw&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f2
0180626%2f4c8157d07c14a30fd76f9bc110b1314e.jpg&ehk=9tpmnrrRNi0eBGq3CnhwvuU8PPmKuy1Yma0zL%2b
a14T0%3d&risl=&pid=ImgRaw" width="300" height="400">
    • 相对路径：相对位置关系
      根据.html所在位置通过相对位置关系来寻找资源
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img src="../img/a.jpg" width="300" height="400">
<img src="https://th.bing.com/th/id/R33674725d9ae34f86e3835ae30b20afe?rik=Pb3C9e5%2b%2b3a9Vw&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20180626%2f4c8157d07c14a30fd76f9bc110b1314e.jpg&ehk=9tpmnrrRNi0eBGq3CnhwvuU8PPmKuy1Yma0zL%2ba14T0%3d&risl=&pid=ImgRaw" width="300" height="400">
<audio src="b.mp3" controls></audio>
<video src="c.mp4" controls width="500" height="300"></video>

</body>
</html>

5、超链接标签

  • 超链接标签：a 标签
    • href：指定访问资源的URL
    • target：指定打开资源的方式
      • _self：默认值，在当前页面打开
      • _blank：在空白页面打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <a href="https://www.itcast.cn" target="_self">点我有惊喜</a>
</body>
</html>

6、列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ol type="A">
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ol>
    
    <ul type="circle">
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ul>
</body>
</html>

效果：

7、表格标签

  • table ：定义表格

    • border：规定表格边框的宽度
    • width ：规定表格的宽度
    • cellspacing：规定单元格之间的空白

  • tr ：定义行
    align：定义表格行的内容对齐方式

  • th：定义表头单元格

  • td ：定义单元格

    • rowspan:规定单元格可横跨的行数
    • colspan:规定单元格可横跨的列数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" cellspacing="0" width="500">
    <tr>
        <th>序号</th>
        <th>品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>
    <tr align="center">
        <td>010</td>
        <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>
    <tr align="center">
        <td>009</td>
        <td><img src="../img/优衣库.png" width="60" height="50"></td>
        <td>优衣库</td>
        <td>优衣库</td>
    </tr>
    <tr align="center">
        <td>008</td>
        <td><img src="../img/小米.png" width="60" height="50"></td>
        <td>小米</td>
        <td>小米科技有限公司</td>
    </tr>
</table>
</body>
</html>

8、布局标签


这两个标签，一般都是和css结合到一块使用来实现页面的布局。
div 标签 在浏览器上会有换行的效果，而 span 标签在浏览器上没有换行效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>我是div</div>
    <div>我是div</div>
    <span>我是span</span>
    <span>我是span</span>
</body>
</html>

效果：

9、 表单标签

  • 介绍
    表单：在网页中主要负责数据采集功能
    表单项(元素)：不同类型的 input 元素、下拉列表、文本域等

  • form标签
    form 是表单标签，它在页面上没有任何展示的效果，需要借助于表单项标签来展示不同的效果

    • action：规定当提交表单时向何处发送表单数据，该属性值就是URL
    • method ：规定用于发送表单数据的方式
      • get：默认值。如果不设置method属性则默认就是该值
        （1）请求参数会拼接在URL后边
        （2）url的长度有限制 4KB
      • post：
        （1）浏览器会将数据放到http请求消息体中
        （2）请求参数无限制的

  • 表单项标签

    • input：表单项，通过type属性控制输入形式

    • select：定义下拉列表，option 定义列表项

    • textarea：文本域
      可以输入多行文本，而 input 数据框只能输入一行文本

    （1） 以上标签项的内容要想提交，必须得定义 name 属性。
    （2）每一个标签都有id属性，id属性值是唯一的标识。
    （3）单选框、复选框、下拉列表需要使用 value 属性指定提交的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="post">
        <input type="hidden" name="id" value="123">
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username"><br>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password"><br>
        
       性别：
        <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
        <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label><br>

       爱好：
        <input type="checkbox" name="hobby" value="1"> 旅游
        <input type="checkbox" name="hobby" value="2"> 电影
        <input type="checkbox" name="hobby" value="3"> 游戏 <br>
        
       头像：
        <input type="file"><br>
       
       城市:
        <select name="city">
            <option>北京</option>
            <option value="shanghai">上海</option>
            <option>广州</option>
        </select>
        <br>
       
       个人描述：
        <textarea cols="20" rows="5" name="desc"></textarea>
        <br>
        <br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重置">
        <input type="button" value="一个按钮">
    </form>
</body>
</html>

CSS

1、 概述

Cascading Style Sheet（层叠样式表）：用于控制网页表现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
       }
    </style>
</head>
<body>
<div>Hello CSS~</div>
</body>
</html>

2、 css 导入方式

css 导入方式就是 css 代码和 html 代码的结合方式，CSS 导入 HTML有三种方式

  • 内联样式：在标签内部使用style属性，属性值是css属性键值对
    只能作用在这一个标签上,复用性太差

    <div style="color: red">Hello CSS~</div>

  • 内部样式：定义style标签，在标签内部定义css样式
    可以做到在该页面中复用

    <style type="text/css">
	div{
		color: red;
    }
</style>

  • 外部样式：定义link标签，引入外部的css文件
    可以在多个页面进行复用

    div{
	color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: red;
        }
    </style>
    <link href="../css/demo.css" rel="stylesheet">
</head>
<body>
    <div style="color: red">hello css</div>

    <span>hello css </span>

    <p>hello css</p>
</body>
</html>

demo.css：

p{
    color: red;
}

3、 css 选择器

（1）css 选择器就是选取需设置样式的元素（标签）
（2）常用三种选择器：

  • 元素选择器：元素名称{color: red;}
  • id选择器：#id属性值{color: red;}
  • 类选择器：.class属性值{color: red;}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }

        #name{
            color: blue;
        }

        .cls{
            color: pink;
        }
    </style>

</head>
<body>
    <div>div1</div>
    <div id="name">div2</div>
    <div class="cls">div3</div>
    <span class="cls">span</span>
</body>
</html>

4、 css 属性

需要时去官网https://www.w3school.com.cn/css/index.asp查看即可

JavaScript

1、JavaScript简介

（1） JavaScript 是一门跨平台、面向对象的脚本语言
（2）JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行
（3）JavaScript 是用来控制网页行为的，它能使网页可交互

2、JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：

  • 内部脚本：将 JS代码定义在HTML页面中
    在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    alert("hello js1");
</script>
</body>
</html>

    （1）在 HTML 文档中可以在任意地方，放置任意数量的标签
    （2）一般把脚本置于 元素的底部，可改善显示速度

  • 外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中
    在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径

    //demo.js 文件内容
alert("hello js");

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../js/demo.js"></script>
</body>
</html>

    （1）外部脚本不能包含 <script> 标签
    在js文件中直接写 js 代码即可，不要在 js文件 中写 script 标签
    （2）<script> 标签不能自闭合
    在页面中引入外部js文件时，不能写成 <script src="../js/demo.js" />

3、JavaScript基础语法

  1. 书写语法

    • 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
    • 每行结尾的分号可有可无
      如果一行上写多个语句时，必须加分号用来区分多个语句。
    • 注释
      • 单行注释：// 注释内容
      • 多行注释：/* 注释内容 */
        注意：JavaScript 没有文档注释
    • 大括号表示代码块

  2. 输出语句

    • 使用 window.alert() 写入警告框
    • 使用 document.write() 写入 HTML 输出
    • 使用 console.log() 写入浏览器控制台
      按 F12 就可以看到控制台

  3. 变量

    • JavaScript 是一门弱类型语言，变量可以存放不同类型的值
      （1）JavaScript 中用 var 关键字（variable 的缩写）来声明变量
      （2）格式： var 变量名 = 数据值;
      var test = 20;
test = "张三";
    • 变量名命名规则
      和java语言基本都相同
      • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
      • 数字不能开头
      • 建议使用驼峰命名
    • var 关键字
      • 作用域：全局变量
      • 变量可以重复定义
    • let 关键字
      • 代码块内有效
      • 不允许重复声明
    • const关键字
      • 声明一个只读的常量
      • 一旦声明，常量的值就不能改变

  4. 数据类型

    • 两类数据类型：原始类型 和 引用类型
      使用 typeof 运算符可以获取数据类型：typeof 变量名
    • 原始数据类型：
      • number：数字（整数、小数、NaN(Not a Number)）
      • string：字符、字符串，单双引皆可
      • boolean：布尔
      • null：对象为空
      • undefined：当声明的变量未初始化时，该变量的默认值是 undefined

  5. 运算符

    • JavaScript 提供了如下的运算符
      大部分和 Java语言 都是一样的

    • ==和 ===区别

      • ==：1. 判断类型是否一样，如果不一样，则进行类型转换，2. 再去比较其值
      • ===：1. 判断类型是否一样，如果不一样，直接返回false，2. 再去比较其值

    • 类型转换

      • 其他类型转为number
        • string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN
          //将 string 转换为 number 有两种方式：
//（1）使用 + 正号运算符：
var str = +"20";
alert(str + 1) //21
//（2）使用 parseInt() 函数(方法)：
var str = "20";
alert(parseInt(str) + 1);
        • boolean 转换为 number 类型：true 转为1，false转为0
          var flag = +false;
alert(flag); // 0
      • 其他类型转为boolean
        • number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
        • string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
        • null类型转换为 boolean 类型是 false
        • undefined 转换为 boolean 类型是 false
      • 使用场景：
        由于 JavaScript 会自动进行类型转换，所以可以简化判断字符串不是null
        var str = "abc";
//健壮性判断
//if(str != null && str.length > 0){
if(str){
    alert("转为true");
}else {
    alert("转为false");
}

  6. 流程控制语句
    JavaScript 中提供了和 Java 一样的流程控制语句，如下

    • if
    • switch
    • for
    • while
    • dowhile

  7. 函数

    • 定义格式
      JavaScript 函数通过 function 关键词进行定义，定义格式有两种

      • 方式1
        function 函数名(参数1,参数2..){
    要执行的代码
}
      • 方式二
        var 函数名 = function (参数列表){
    要执行的代码
}
      • 细节
        （1）形式参数不需要类型。因为JavaScript是弱类型语言
        （2）返回值也不需要定义类型，可以在函数内部直接使用return返回即可

    • 函数调用

      • 函数调用格式：函数名称(实际参数列表);
      • 细节：JS中，函数调用可以传递任意个数参数，多的不接收，少了设空

4、JavaScript常用对象

  1. Array对象
    JavaScript Array对象用于定义数组

    • 定义格式

      • 方式1：var 变量名 = new Array(元素列表);
      • 方式2：var 变量名 = [元素列表];

    • 元素访问：arr[索引] = 值; 索引从0开始

    • 特点
      （1）JavaScript 中的数组相当于 Java 中集合。
      （2）数组的长度是可以变化的
      （3）可以存储任意的类型的数据

    • 属性

    • 方法

      • push 函数：给数组添加元素，也就是在数组的末尾添加元素
        参数表示要添加的元素
      • splice 函数：删除元素
        参数1：索引。表示从哪个索引位置删除
        参数2：个数。表示删除几个元素
     // 方式一
var arr = new Array(1,2,3);

// 方式二
var arr2 = [1,2,3];

// 访问
arr2[0] = 10;
alert(arr2)

//属性length
for (let i = 0; i < arr.length; i++) {
    alert(arr[i]);
}

// push:添加方法
var arr5 = [1,2,3];
arr5.push(10);
alert(arr5);  //数组的元素是 {1,2,3,10}

// splice:删除元素
var arr5 = [1,2,3];
arr5.splice(0,1); //从 0 索引位置开始删除，删除一个元素 
alert(arr5); // {2,3}

  2. String对象

    • 定义
      • 方式1：var 变量名 = new String(s);
      • 方式2：var 变量名 = “数组”;
    • 属性
      length ，该属性是用于动态的获取字符串的长度
    • 函数

      trim()：去掉字符串两端的空格
    var str4 = ' abc   ';
alert(1 + str4.trim() + 1);

  3. 自定义对象

    • 定义

      var 对象名称 = {
    属性名称1:属性值1,
    属性名称2:属性值2,
    ...,
    函数名称:function (形参列表){},
 ...
};

    • 调用

      对象名.属性名
对象名.函数名()

    var person = {
        name : "zhangsan",
        age : 23,
        eat: function (){
            alert("干饭~");
       }
   };
alert(person.name);  //zhangsan
alert(person.age); //23
person.eat();  //干饭~

5、BOM

  • BOM介绍
    • BOM：Browser Object Model 浏览器对象模型
    • JavaScript 将浏览器的各个组成部分封装为对象
    • 通过操作 BOM 中的对象可以实现操作浏览器的各个组成部分
    • BOM 中包含了如下对象：
      • Window：浏览器窗口对象
      • Navigator：浏览器对象
      • Screen：屏幕对象
      • History：历史记录对象
      • Location：地址栏对象

  1. Window对象

    • 获取window对象
      • 该对象不需要创建直接使用 window ，其中 window. 可以省略
      • 显式使用 window 对象调用：window.alert(“abc”);
      • 隐式调用：alert(“abc”)
    • window对象属性
      window 对象提供了用于获取其他 BOM 组成对象的属性

      （1）想使用 Location 对象的话，就可以使用 window 对象获取，写成 window.location
      （2）window. 可以省略，简化写成 location 来获取 Location 对象
    • window对象函数
      常用的函数
    • 案例
      需求：每隔1秒，灯泡切换一次状态
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
</head>
<body>
<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">
<script>
    function on(){
        document.getElementById('myImage').src='../imgs/on.gif';
   }
    function off(){
        document.getElementById('myImage').src='../imgs/off.gif'
   }
    
    //定义一个变量，用来记录灯的状态，偶数是开灯状态，奇数是关灯状态
    var x = 0;
    //使用循环定时器
    setInterval(function (){
        if(x % 2 == 0){//表示是偶数，开灯状态，调用 on() 函数
            on();
       }else {  //表示是奇数，关灯状态，调用 off() 函数
            off();
       }
        x ++;//改变变量的值
   },1000);
</script>
</body>
</html>

  2. History对象
    （1）使用 window.history获取，其中window. 可以省略
    （2）常用方法：

  3. Location对象
    （1）使用 window.location获取，其中window. 可以省略
    （2）常用属性：

6、DOM

  1. 概述

    • DOM：Document Object Model 文档对象模型

    • JavaScript 将 HTML 文档的各个组成部分封装为对象

    • 封装的对象分为

      • Document：整个文档对象
      • Element：元素对象
      • Attribute：属性对象
      • Text：文本对象
      • Comment：注释对象

    • 如下图，左边是 HTML 文档内容，右边是 DOM 树

    • 作用：JavaScript 通过 DOM， 就能够对 HTML进行操作了

      • 改变 HTML 元素的内容
      • 改变 HTML 元素的样式（CSS）
      • 对 HTML DOM 事件作出反应
      • 添加和删除 HTML 元素

    • DOM相关概念：
      DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。
      该标准被分为 3 个不同的部分：
      （1）核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
      （2） XML DOM： 针对 XML 文档的标准模型
      （3）HTML DOM： 针对 HTML 文档的标准模型

    • HTML DOM
      该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象
      例如：<img>标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象；<input type='button'> 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是Element 对象。

  2. 获取 Element对象

    • HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取
    • Document 对象中提供了以下获取 Element 元素对象的函数
      • getElementById() ：根据id属性值获取，返回单个Element对象
      • getElementsByTagName() ：根据标签名称获取，返回Element对象数组
      • getElementsByName() ：根据name属性值获取，返回Element对象数组
      • getElementsByClassName() ：根据class属性值获取，返回Element对象数组
    //1.  getElementById() ：根据id属性值获取,返回单个Element对象
var img = document.getElementById("light");
alert(img);

//2. getElementsByTagName() ：根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName("div");
for (let i = 0; i < divs.length; i++) {
    alert(divs[i]);
}

//3. getElementsByName：根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
    alert(hobbys[i]);
}

//4. getElementsByClassName：根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName("cls");
for (let i = 0; i < clss.length; i++) {
    alert(clss[i]);
}

  3. HTML Element对象使用
    HTML 中的 Element 元素对象有很多，不可能全部记住，根据具体的需求查阅文档使用
    案例演示：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="../imgs/off.gif"> <br>
    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div> <br>
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <script>
        //在此处写js低吗
    </script>
</body>
</html>

    • 需求1：点亮灯泡

      • 此案例由于需要改变 img 标签 的图片，所以我们查询文档，下图是查看文档的流程：

      • 代码实现：
        //1，根据 id='light' 获取 img 元素对象
var img = document.getElementById("light");
//2，修改 img 对象的 src 属性来改变图片
img.src = "../imgs/on.gif";

    • 需求2：将所有的 div 标签的标签体内容替换为 呵呵

      //1，获取所有的 div 元素对象
var divs = document.getElementsByTagName("div");
/*
       style:设置元素css样式
       innerHTML：设置元素内容
   */
//2，遍历数组，获取到每一个 div 元素对象，并修改元素内容
for (let i = 0; i < divs.length; i++) {
    //divs[i].style.color = 'red';
    divs[i].innerHTML = "呵呵";
}

    • 需求3： 使所有的复选框呈现被选中的状态

      //1，获取所有的 复选框 元素对象
var hobbys = document.getElementsByName("hobby");
//2，遍历数组，通过将 复选框 元素对象的 checked 属性值设置为 true 来改变复选框的选中状态
for (let i = 0; i < hobbys.length; i++) {
    hobbys[i].checked = true;
}

7、事件监听

（1）HTML 事件是发生在 HTML 元素上的“事情”
（2）事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码

  1. 事件绑定
    JavaScript 提供了两种事件绑定方式：

    • 方式一：通过 HTML标签中的事件属性进行绑定
    • 方式二：通过 DOM 元素属性绑定
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--方式1：在下面input标签上添加 onclick 属性，并绑定 on() 函数-->
    <input type="button" value="点我" onclick="on()"> <br>
    <input type="button" value="再点我" id="btn">
    <script>
        function on(){
            alert("我被点了");
       }
     //方式2：获取 id="btn" 元素对象，通过调用 onclick 属性 绑定点击事件
        document.getElementById("btn").onclick = function (){
            alert("我被点了");
       }
        </script>
</body>
</html>

  2. 常见事件

8、表单验证案例

  1. 需求

    1、当输入框失去焦点时，验证输入内容是否符合要求
    2、当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交

  2. 环境准备

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>
    <div class="form-div">
        <div class="reg-content">
            <h1>欢迎注册</h1>
            <span>已有帐号？</span> <a href="#">登录</a>
        </div>
        <form id="reg-form" action="#" method="get">
            <table>
                <tr>
                 <td>用户名</td>
                    <td class="inputs">
                        <input name="username" type="text" id="username">
                        <br>
                        <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td class="inputs">
                        <input name="password" type="password" id="password">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                    </td>
                </tr>
                <tr>
                    <td>手机号</td>
                    <td class="inputs"><input name="tel" type="text" id="tel">
                        <br>
                        <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                    </td>
                </tr>
            </table>
            <div class="buttons">
                <input value="注 册" type="submit" id="reg_btn">
            </div>
            <br class="clear">
        </form>
    </div>
    <script>
    </script>
</body>
</html>

  3. 验证输入框
    此小节完成如下功能：
    （1）校验用户名。当用户名输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使id=‘username_err’ 的span标签显示出来，给出用户提示。
    （2）校验密码。当密码输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使id='password_err’的span标签显示出来，给出用户提示。
    （3）校验手机号。当手机号输入框失去焦点时，判断输入的内容是否符合 长度是 11 位 规则，不符合使 id=‘tel_err’ 的span标签显示出来，给出用户提示。

    //1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");
//1.2 绑定onblur事件 失去焦点
usernameInput.onblur = function () {
    //1.3 获取用户输入的用户名
    var username = usernameInput.value.trim();
    //1.4 判断用户名是否符合规则：长度 6~12
    if (username.length >= 6 && username.length <= 12) {
        //符合规则
        document.getElementById("username_err").style.display = 'none';
   } else {
        //不合符规则
        document.getElementById("username_err").style.display = '';
   }
}
//2. 验证密码是否符合规则
//2.1 获取密码的输入框
var passwordInput = document.getElementById("password");
//2.2 绑定onblur事件 失去焦点
passwordInput.onblur = function() {
    //2.3 获取用户输入的密码
    var password = passwordInput.value.trim();
    //2.4 判断密码是否符合规则：长度 6~12
    if (password.length >= 6 && password.length <= 12) {
        //符合规则
        document.getElementById("password_err").style.display = 'none';
   } else {
        //不合符规则
        document.getElementById("password_err").style.display = '';
   }
}
//3. 验证手机号是否符合规则
//3.1 获取手机号的输入框
var telInput = document.getElementById("tel");
//3.2 绑定onblur事件 失去焦点
telInput.onblur = function() {
    //3.3 获取用户输入的手机号
    var tel = telInput.value.trim();
    //3.4 判断手机号是否符合规则：长度 11
    if (tel.length == 11) {
        //符合规则
        document.getElementById("tel_err").style.display = 'none';
   } else {
        //不合符规则
        document.getElementById("tel_err").style.display = '';
   }
}

  4. 验证表单
    当用户点击 注册 按钮时，需要同时对输入的 用户名 、 密码 、 手机号 ，如果都符合规则，则提交表单；如果有一个不符合规则，则不允许提交表单。实现该功能需要获取表单元素对象，并绑定 onsubmit 事件

    //1. 获取表单对象
var regForm = document.getElementById("reg-form");
//2. 绑定onsubmit 事件
regForm.onsubmit = function () {
    //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false
    var flag = checkUsername() && checkPassword() && checkTel();
    return flag;
}

//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");
//1.2 绑定onblur事件 失去焦点
usernameInput.onblur = checkUsername;
function checkUsername() {
    //1.3 获取用户输入的用户名
    var username = usernameInput.value.trim();
    //1.4 判断用户名是否符合规则：长度 6~12
    var flag = username.length >= 6 && username.length <= 12;
    if (flag) {
        //符合规则
        document.getElementById("username_err").style.display = 'none';
   } else {
        //不合符规则
        document.getElementById("username_err").style.display = '';
   }
    return flag;
}
//1. 验证密码是否符合规则
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");
//1.2 绑定onblur事件 失去焦点
passwordInput.onblur = checkPassword;
function checkPassword() {
    //1.3 获取用户输入的密码
    var password = passwordInput.value.trim();
    //1.4 判断密码是否符合规则：长度 6~12
    var flag = password.length >= 6 && password.length <= 12;
    if (flag) {
        //符合规则
        document.getElementById("password_err").style.display = 'none';
   } else {
        //不合符规则
        document.getElementById("password_err").style.display = '';
   }
    return flag;
}
//1. 验证手机号是否符合规则
//1.1 获取手机号的输入框
var telInput = document.getElementById("tel");
//1.2 绑定onblur事件 失去焦点
telInput.onblur = checkTel;
function checkTel() {
    //1.3 获取用户输入的手机号
    var tel = telInput.value.trim();
    //1.4 判断手机号是否符合规则：长度 11
    var flag = tel.length == 11;
    if (flag) {
        //符合规则
        document.getElementById("tel_err").style.display = 'none';
   } else {
        //不合符规则
        document.getElementById("tel_err").style.display = '';
        }
    return flag;
}

9、RegExp对象

  1. RegExp简介
    （1）RegExp 是正则对象
    （2）正则对象用于判断指定字符串是否符合规则
    （3）正则表达式是和语言无关的
    （4）正则表达式在不同的语言中的使用方式不同
    （5）js 中需要使用正则对象来使用正则表达式

  2. 正则对象使用

    • 创建对象
      正则对象有两种创建方式：
      • 直接量方式：var reg = /正则表达式/; 注意不要加引号,
      • 创建 RegExp 对象：var reg = new RegExp(“正则表达式”);
    • 函数
      test(str) ：判断指定字符串是否符合规则，返回 true或 false

  3. 正则表达式

    • 常用的规则
      • ^：表示开始
      • $：表示结束
      • [ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
      • .：代表任意单个字符，除了换行和行结束符
      • \w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]
      • \d：代表数字字符： 相当于 [0-9]
    • 量词：
      • +：至少一个
      • *：零个或多个
      • ？：零个或一个
      • {x}：x个
      • {m,}：至少m个
      • {m,n}：至少m个，最多n个
    // 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;
var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);
Bigagu
关注
  • 17
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML & CSS 概述_1
qq_45370222的博客
04-10 3150
HTML & CSS 笔记_1
HTML & CSS & JavaScript - 一个简单数字时钟
qq_29761395的博客
07-15 2944
代码】HTML&CSS&JavaScript-一个简单数字时钟。
使用 HTML、CSS 和 JavaScript 的简单模拟时钟
努力是为了站在万人之中，成为别人的光
08-16 3万+
如果你想使用 JavaScript 制作一个模拟时钟，那么本文将对你有所帮助。我们都知道时钟有两种，一种是模拟的，一种是数字的。虽然数字时钟被广泛使用，但模拟时钟也被很多人所喜爱。 ????使用 HTML、CSS 和 JavaScript 的简单模拟时钟???? JavaScript 模拟时钟 [现场演示]???? 使用 HTML、CSS 和 JavaScript 的简单模拟时钟???? 第 1 步：创建时钟的基本结构???? 第 2 步：在时钟上标记 1 到 12???? 第 3 步：制作三只指针来指示
web前端 html+css+javascript网页设计实例 企业网站制作
热门推荐
weixin_44790790的博客
08-17 8万+
(案例源码链接在文章末尾，仅供学习参考) 一、在浏览器中的运行结果： 二、部分代码 1.HTML： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>启乐官网</title> <link rel="stylesheet" href="style.css"/> <script src="myjs.j
CSS&JavaScript讲解
weixin_51094637的博客
03-29 2091
CSS 概念 全称：Cascading Style Sheets 层叠样式表（用于美化页面，布局页面） 层叠：多个样式可以作用在同一个html的元素上，同时生效 好处： 功能强大 将内容展示和样式控制分离： ①降低耦合度，解耦 ②让分工写作更容易 ③提高开发效率 CSS的使用 ①内联样式：在标签内使用style属性指定css代码 如：<div style="color:red;">hello css</div> ②内部样式:在head标签内，定义style标签，
前端开发三件套HTML&CSS&JavaScript
02-23
0 前端三件套 HTML CSS JavaScript 1.HTML 1HTML常见文本标签 2HTML属性 3HTML块元素与行内元素 4HTML表单 2.CSS 5CSS导入方式 6CSS选择器 7CSS常见属性 8CSS盒子模型 9CSS浮动 10CSS定位 3.JavaScript 11JS导入方式...
JavaScript — 与HTML&CSS的关系1
08-08
JavaScript 与 HTML&CSS 的关系 JavaScript 是一门脚本语言，广泛应用于 Web 开发， especially when it comes to creating interactive and dynamic user experiences. 在 Web 开发中，JavaScript 通常与 HTML 和 ...
JavaScript 以及 HTML&CSS设计
06-09
JavaScript，HTML和CSS是构建网页和交互式用户体验的三大核心技术。在互联网开发中，它们各自承担着不同的职责，共同打造了丰富多彩的Web世界。 JavaScript，全称ECMAScript，是一种解释型的、跨平台的脚本语言，...
HTML&CSS&JAVASCRIPT
05-27
HTML、CSS和JavaScript是构建网页和交互式网络应用的基础技术，它们构成了Web开发的三位一体。这份资源包显然是为了帮助学习者全面理解这三个关键技术，并通过实际的范例来加强理解和应用能力。 HTML（HyperText ...
HTML&CSS&JS
04-15
HTML（HyperText Markup Language）、CSS（Cascading Style Sheets）和JavaScript是构建现代网页和应用程序的三大核心技术。这个压缩包包含的"HTML&CSS&JS"项目提供了五天的学习资源，分别以“day01”到“day05”的...
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
apple_68589597的博客
07-21 976
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
[HTML]一文掌握
CSDN20221005的博客
07-21 810
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
使用PicGo操作gitee图床(及web端html不能访问图片的解决办法)
weixin_68658847的博客
07-20 1045
使用PicGo操作gitee图床(及web端html不能访问图片的解决办法)
第2节课：文本内容与格式化——HTML中的文本处理技巧
学问小小谢的技术博客
07-20 1338
文本内容与格式化是HTML中的重要组成部分。通过本节课，我们学习了如何使用HTML标签来创建和格式化文本，包括段落、标题、加粗、斜体、下划线以及列表。这些技能是每个网页开发者的基础，掌握它们将帮助你创建出结构良好、易于阅读的网页。继续探索和实践，你将能够不断提升你的网页设计能力。
HTML启动本地EXE的通用方法
07-22 657
HTML启动本地应用的解决方案
HTML(五）——HTML区块，布局
m0_62701594的博客
07-23 281
HTML可以通过 <div> 和 <span>将元素组合起来，可以来布局，就是盒子，div是块级盒子，里面 可以放任何东西，span里面装的是文本。
HTML进阶：探索语义化标记与可访问性优化
2301_79375313的博客
07-19 512
随着Web技术的不断发展，HTML不再仅仅是用来定义网页内容的标记语言，它还被赋予了更多的责任，如提高网页的可读性、可维护性和可访问性。语义化标记（Semantic Markup）和可访问性优化（Accessibility Optimization）是HTML进阶学习中的两个重要方面。本文将深入探讨这两个话题，帮助您提升HTML编程的水平。
html 常用css样式及排布问题
最新发布
qq_75247548的博客
07-23 209
css常用属性
黑马JavaWeb企业级开发（知识清单）03——HTML实现正文：排版（音视频、换行、段落）、布局标签（div、span）、盒子模型
apple_68589597的博客
07-22 978
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）03：实现正文排版、布局的总结，包括：视频标签< video >、音频标签< audio >、换行标签< br >、段落标签< p >、盒子模型、布局标签< div > < span >。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值