04 HTML CSS JavaScript

news2024/11/14 14:40:51

文章目录

  • HTML
    • 1、HTML介绍
    • 2、快速入门
    • 3、基础标签
    • 4、图片、音频、视频标签
    • 5、超链接标签
    • 6、列表标签
    • 7、表格标签
    • 8、布局标签
    • 9、 表单标签
  • CSS
    • 1、 概述
    • 2、 css 导入方式
    • 3、 css 选择器
    • 4、 css 属性
  • JavaScript
    • 1、JavaScript简介
    • 2、JavaScript引入方式
    • 3、JavaScript基础语法
    • 4、JavaScript常用对象
    • 5、BOM
    • 6、DOM
    • 7、事件监听
    • 8、表单验证案例
    • 9、RegExp对象

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);

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1945125.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Adobe Audition（AU）安装包软件下载

Adobe Audition（AU）安装包软件下载

目录 一、下载 二、AU软件介绍 三、使用技巧 四、快捷键操作 常用快捷键&#xff1a; 一、下载 链接https://pan.baidu.com/s/1Ax9pro_Q75YgLYaKDzZg8w?pwd3mi1 二、AU软件介绍 Adobe Audition是一个专业级的音频工作站&#xff0c;适用于音乐制作、广播、播客、视频后…
阅读更多...
C#数组复习

C#数组复习

一、一维数组 using System.Collections; using System.Collections.Generic; using UnityEngine;public class ShuZu : MonoBehaviour {#region 知识点一 基本概念//数组是存储一组相同类型数据的集合//数组分为 一维、二维、交错数组//一般情况 一维数组 就简称为数组#en…
阅读更多...
Onenet模拟Mqtt调试物联网设备

Onenet模拟Mqtt调试物联网设备

本章节目录 一.调试器模拟设备登录 二.调试器模拟上传数据 三.调试器接受下发控制消息 一.调试器模拟设备登录(让设备处于在线状态) 1.打开文档中心(open.iot.10086.cn) 2,Onenet物联网开放平台 3.产品开发,设备接入->设备开发 4.mqtt协议接入->最佳实践 5.物模型数据交…
阅读更多...
样式迁移及代码

样式迁移及代码

一、定义 1、使用卷积神经网络&#xff0c;自动将一个图像中的风格应用在另一图像之上&#xff0c;即风格迁移&#xff1b;两张输入图像&#xff1a;一张是内容图像&#xff0c;另一张是风格图像。 2、训练一些样本使得样本在一些cnn的特征上跟样式图片很相近&#xff0c;在一…
阅读更多...
PHP教程002：PHP变量介绍

PHP教程002：PHP变量介绍

文章目录 一、PHP程序1、PHP标记2、PHP代码3、语句结束符;4、注释 二、PHP变量2.1 声明变量2.2 赋值运算符3、变量命名规则 一、PHP程序 PHP文件的默认扩展名是".php"PHP文件可以包含html、css、js 序号组成描述1<?php ... ?>PHP标记2PHP代码函数、数组、流…
阅读更多...
二、原型模式

二、原型模式

文章目录 1 基本介绍2 实现方式深浅拷贝目标2.1 使用 Object 的 clone() 方法2.1.1 代码2.1.2 特性2.1.3 实现深拷贝 2.2 在 clone() 方法中使用序列化2.2.1 代码 2.2.2 特性 3 实现的要点4 Spring 中的原型模式5 原型模式的类图及角色5.1 类图5.1.1 不限制语言5.1.2 在 Java 中…
阅读更多...
Java之集合底层-数据结构

Java之集合底层-数据结构

Java集合之数据结构 1 概述 数据结构是计算机科学中研究数据组织、存储和操作的一门学科。它涉及了如何组织和存储数据以及如何设计和实现不同的数据操作算法和技术。常见的据结构有线性数据结构&#xff08;含数组、链表、栈和队列等&#xff09;&#xff0c;非线性数据结构…
阅读更多...
四、GD32 MCU 常见外设介绍(1)RCU 时钟介绍

四、GD32 MCU 常见外设介绍(1)RCU 时钟介绍

系统架构 1.RCU 时钟介绍 众所周知&#xff0c;时钟是MCU能正常运行的基本条件&#xff0c;就好比心跳或脉搏&#xff0c;为所有的工作单元提供时间 基数。时钟控制单元提供了一系列频率的时钟功能&#xff0c;包括多个内部RC振荡器时钟(IRC)、一个外部 高速晶体振荡器时钟(H…
阅读更多...
Meta发布最强AI模型，扎克伯格公开信解释为何支持开源？

Meta发布最强AI模型，扎克伯格公开信解释为何支持开源？

凤凰网科技讯 北京时间7月24日&#xff0c;脸书母公司Meta周二发布了最新大语言模型Llama 3.1&#xff0c;这是该公司目前为止推出的最强大开源模型&#xff0c;号称能够比肩OpenAI等公司的私有大模型。与此同时&#xff0c;Meta CEO马克扎克伯格(Mark Zuckerberg)发表公开信&a…
阅读更多...
力扣1792.最大平均通过率

力扣1792.最大平均通过率

力扣1792.最大平均通过率 每个班级加上一个人以后得通过率增量不同 将优先级最高的班级放队列顶&#xff0c;每次操作即可 class Solution {public:struct Radio{int pass;int total;//满足该条件 oth的优先级更高bool operator < (const Radio& oth)const{return (l…
阅读更多...
【中项】系统集成项目管理工程师-第4章 信息系统架构-4.1架构基础

【中项】系统集成项目管理工程师-第4章 信息系统架构-4.1架构基础

前言&#xff1a;系统集成项目管理工程师专业&#xff0c;现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。 软考同样是国家人社部和工信部组织的国家级考试&#xff0c;全称为“全国计算机与软件专业技术资格&#xff08;水平&#xff09;考试”&…
阅读更多...
Java习题二

Java习题二

一题目要求&#xff1a; 二具体代码&#xff1a; package three;import sun.util.resources.LocaleData;import java.time.LocalDate; import java.time.format.DateTimeFormatter; import java.util.*;public class test {public static void main(String[] args) {String us…
阅读更多...
php--高级文件绕过

php--高级文件绕过

&#x1f3bc;个人主页&#xff1a;金灰 &#x1f60e;作者简介:一名简单的大一学生;易编橙终身成长社群的嘉宾.✨ 专注网络空间安全服务,期待与您的交流分享~ 感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持&#xff01;❤️ &#x1f34a;易编橙终身成长社群&#…
阅读更多...
UCOS-III 任务调度接口(OSSched)详解

UCOS-III 任务调度接口(OSSched)详解

在实时操作系统uC/OS-III中&#xff0c;调度器是核心组件之一&#xff0c;它负责管理任务的执行顺序和优先级。本文将详细解析uC/OS-III内核中的调度函数OSSched。 OSSched函数简介 OSSched函数用于检查并确定是否有更高优先级的任务需要运行。该函数通常在任务级别代码中调用…
阅读更多...
【快速逆向四/无过程/有源码】浙江工商职业技术学院 统一身份认证

【快速逆向四/无过程/有源码】浙江工商职业技术学院 统一身份认证

逆向日期&#xff1a;2024.07.23 使用工具&#xff1a;Node.js 加密方法&#xff1a;RSAUtils 文章全程已做去敏处理&#xff01;&#xff01;&#xff01; 【需要做的可联系我】 AES解密处理&#xff08;直接解密即可&#xff09;&#xff08;crypto-js.js 标准算法&#xf…
阅读更多...
使用 Socket和动态代理以及反射 实现一个简易的 RPC 调用

使用 Socket和动态代理以及反射 实现一个简易的 RPC 调用

使用 Socket、动态代理、反射 实现一个简易的 RPC 调用 我们前面有一篇 socket 的文章&#xff0c;再之前&#xff0c;还有一篇 java动态代理的文章&#xff0c;本文用到了那两篇文章中的知识点&#xff0c;需要的话可以回顾一下。 下面正文开始&#xff1a; 我们的背景是一个…
阅读更多...
掌握Rust：函数、闭包与迭代器的综合运用

掌握Rust：函数、闭包与迭代器的综合运用

掌握Rust&#xff1a;函数、闭包与迭代器的综合运用 引言&#xff1a;解锁 Rust 高效编程的钥匙函数定义与模式匹配&#xff1a;构建逻辑的基石高阶函数与闭包&#xff1a;代码复用的艺术迭代器与 for 循环&#xff1a;高效数据处理的引擎综合应用案例&#xff1a;构建一个简易…
阅读更多...
最新App崩溃率出炉！这样的行业均值水平如何？

最新App崩溃率出炉！这样的行业均值水平如何？

前不久发布的《2024 Q1 移动应用性能体验报告》(以下简称报告),公布了最新的App崩溃率行业均值。基于友盟覆盖的终端设备,观测启动次数和崩溃次数,《报告》综合计算得出iOS APP崩溃率0.21%,Android Java崩溃率0.22%、native 0.16%、ANR 0.53%。 作为国内领先的第三方全域数据智…
阅读更多...
PyMol在Windows系统上的免费安装指南

PyMol在Windows系统上的免费安装指南

PyMOL是一个强大的分子可视化工具&#xff0c;广泛应用于生物化学、分子生物学和材料科学等领域。对于需要在Windows系统上进行分子结构分析和可视化的用户来说&#xff0c;安装一个免费版本的PyMol至关重要。本文将提供详细的步骤&#xff0c;指导如何在Windows系统上免费安装…
阅读更多...
有哪些好用的 AI 学术研究工具和科研工具？

有哪些好用的 AI 学术研究工具和科研工具？

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频百万播放量https://aitools.jurilu.com/ AI 应用其实分两个层面&#xff0c;第一是模型&#xff0c;第二是应用。现在很多模型厂家都是既做 toC 的对话应用&#xff0c;也做 t…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023