qidao123.com ToB IT社区-企服评测·应用市场»论坛 › 数据库 › SQL-Server › 前端Web-JavaScript(下)

前端Web-JavaScript(下)

[复制链接]
发表于 2026-2-13 18:35:02 | 显示全部楼层 |阅读模式
告急是补全一下JavaScript

根本对象:

String对象

语法格式

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

比方：
var str = new String("Hello String");
 方式2：
var 变量名 = '…' ; //方式二
 比方：
 var str = 'Hello String';

 属性和方法

String对象也提供了一些常用的属性和方法：
属性:
属性形貌length字符串的长度。方法：
方法形貌charAt()返回在指定位置的字符。indexOf()检索字符串。trim()去除字符串两边的空格substring()提取字符串中两个指定的索引号之间的字符。length属性：
length属性可以用于返回字符串的长度，添加如下代码：
//length
console.log(str.length);
charAt()函数：
charAt()函数用于返回在指定索引位置的字符，函数的参数就是索引。添加如下代码：
 console.log(str.charAt(4));
indexOf()函数
indexOf()函数用于检索指定内容在字符串中的索引位置的，返回值是索引，参数是指定的内容。添加如下代码：
console.log(str.indexOf("lo"));
trim()函数
trim()函数用于去除字符串两边的空格的。添加如下代码：
var s = str.trim();
console.log(s.length);
substring()函数
substring()函数用于截取字符串的，函数有2个参数。
参数1：表现从谁人索引位置开始截取。包罗
参数2：表现到谁人索引位置竣事。不包罗
 console.log(s.substring(0,5));
 团体代码如下：
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>JS-对象-String</title>
  9. </head>
  10. <body>
  11.    
  12. </body>
  13. <script>
  14.     //创建字符串对象
  15.     //var str = new String("Hello String");
  16.     var str = "  Hello String    ";
  18.     console.log(str);
  20.     //length
  21.     console.log(str.length);
  23.     //charAt
  24.     console.log(str.charAt(4));
  26.     //indexOf
  27.     console.log(str.indexOf("lo"));
  29.     //trim
  30.     var s = str.trim();
  31.     console.log(s.length);
  33.     //substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
  34.     console.log(s.substring(0,5));
  36. </script>
  37. </html>
复制代码
JSON对象

自界说对象

在 JavaScript 中自界说对象特殊简朴，其语法格式如下：
  2. var 对象名 = {
  3.     属性名1: 属性值1,
  4.     属性名2: 属性值2,
  5.     属性名3: 属性值3,
  6.     方法名称: function(形参列表){}
  7. };
复制代码
我们可以通过如下语法调用属性：
对象名.属性名
 通过如下语法调用函数：
对象名.方法名()
 代码示例:
  2. <script>
  3.     //自定义对象
  4.     var user = {
  5.         name: "soyo",
  6.         age: 17,
  7.         gender: "女",
  8.         sing: function(){
  9.              console.log("为什么要演奏春日影");
  10.          }
  11.     }
  13.     console.log(user.name);
  14.     user.eat();
  15. <script>
复制代码
简化版:
  2. <script>
  3.     //自定义对象
  4.     var user = {
  5.         name: "soyo",
  6.         age: 17,
  7.         gender: "女",
  8.         sing(){
  9.              console.log("为什么要演奏春日影");
  10.          }
  11.     }
  13.     console.log(user.name);
  14.     user.eat();
  15. <script>
复制代码
 JSON先容

JSON对象：JavaScript Object Notation，JavaScript对象标记法。JSON是通过JavaScript标记法誊写的文本。其格式如下：
  2. {
  3.     "key":value,
  4.     "key":value,
  5.     "key":value
  6. }
复制代码
此中，key必须使用引号而且是双引号标记，value可以是恣意数据范例。
比方我们可以直接百度搜索“json在线剖析”，任意挑一个进入，然后编写内容如下：
  2. {
  3.         "name": "李传播"
  4. }
复制代码

但是当我们将双引号切换成单引号，再次校验，则报错，如下图所示： 
 

 而由于语法简朴，层级结构光显，现多用于作为数据载体，在网络中举行数据传输。
 

 界说
  2. var userStr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
  3. alert(userStr.name);
复制代码
欣赏器输出效果如下：
 

由于上述是一个json格式的字符串，不是JS对象，以是我们必要借助JS中提供的JSON对象，来将json字符串和JS对象之间来完成转换。  
 JSON字符串 -> JS对象
  2. var obj = JSON.parse(userStr);
  3. alert(obj.name);
复制代码
 此时欣赏器输出效果如下：

 JS对象 -> JSON字符串
  2. alert(JSON.stringify(obj));
复制代码
 欣赏器输出效果如图所示：

团体全部代码如下：
  1. <!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>        // JSON对象        var userStr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';        // alert(userStr.name);        var obj = JSON.parse(userStr);        alert(obj.name);               
  2. alert(JSON.stringify(obj));    </script></body></html>
复制代码
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汗青记载对象Locationd所在栏对象 上述5个对象与欣赏器各构成对应的关系如下图所示：

 对于上述5个对象，比力常用的是Window对象、Location对象这2个。
 Window对象

window对象指的是欣赏器窗口对象，是JavaScript的全部对象，以是对于window对象，可以直接使用，而且对于window对象的方法和属性，可以省略window.比方：alert()函数实在是属于window对象的，其完备的代码如下：
  2. window.alert('hello');//可以简写
  3. alert('hello')
复制代码
以是对于window对象的属性和方法，都是接纳简写的方式。window提供了很多属性和方法，下表列出了常用属性和方法
window对象提供了获取其他BOM对象的属性：
属性形貌history用于获取history对象location用于获取location对象Navigator用于获取Navigator对象Screen用于获取Screen对象 要使用location对象，只必要通过代码window.location大概简写location即可使用
alert()函数：弹出告诫框，函数的内容就是告诫框的内容

confirm()函数：弹出确认框，而且提供用户2个按钮，分别是确认和取消。
添加如下代码：
  2. confirm("您确认删除该记录吗?");
复制代码
 

但是怎么知道用户点击了确认还是取消呢？以是这个函数有一个返回值，当用户点击确认时，返回true，点击取消时，返回false。根据返回值来决定是否实行后续操纵。修改代码如下：再次运行，可以检察返回值true大概false  
  1. var flag =
  2. confirm("您确认删除该记录吗?");alert(flag);
复制代码
setInterval(fn,毫秒值)：定时器，用于周期性的实行某个功能，而且是循环实行。该函数必要转达2个参数：
fn:函数，必要周期性实行的功能代码
毫秒值：隔断时间
解释掉之前的代码，添加代码如下：
  2. //定时器 - setInterval -- 周期性的执行某一个函数
  3. var i = 0;
  4. setInterval(function(){
  5.      i++;
  6.      console.log("定时器执行了"+i+"次");
  7. },2000);
复制代码

setTimeout(fn,毫秒值) ：定时器，只会在一段时间后**实行一次功能**。参数和上述setInterval划一
解释掉之前的代码，添加代码如下：
  2. //定时器 - setTimeout -- 延迟指定时间执行一次
  3. setTimeout(function(){
  4.         alert("JS");
  5. },3000);
复制代码
 欣赏器打开，3s后弹框，关闭弹框，发现再也不会弹框了。

Location对象

location是指代欣赏器的所在栏对象，对于这个对象，我们常用的是href属性，用于获取大概设置欣赏器的所在信息，添加如下代码：
  2. //获取浏览器地址栏信息
  3. alert(location.href);
  4. //设置浏览器地址栏信息
  5. location.href = "https://www.bilibili.com";
复制代码
欣赏器效果如下：起首弹框展示欣赏器所在栏信息，
 

然后点击确定后，由于我们设置了所在栏信息，以是欣赏器跳转到bilibili 
完备代码如下：
  1. <!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 =
  2. 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.bilibili.com";</script></html>
复制代码
DOM

 DOM先容

DOM：Document Object Model 文档对象模子。也就是 JavaScript 将 HTML 文档的各个构成部分封装为对象。
封装的对象分为
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：解释对象

告急作用如下：
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 变乱作出反应
- 添加和删除 HTML 元素
从而到达动态改变页面效果目的

DOM对象

- DOM对象：欣赏器根据HTML标签天生的JS对象
  - 全部的标签属性都可以在这个对象上面找到
  - 修改这个对象的属性，就会主动映射到标签身上
- DOM的焦点头脑：将网页的内容当做对象来处置处罚
- document对象
  - 网页中全部内容都封装在document对象中
  - 它提供的属性和方法都是用来访问和操纵网页内容的，如：document.write(…)
- DOM操纵步调:
  - 获取DOM元素对象
  - 操纵DOM对象的属性或方法 (查阅文档)
 获取DOM对象

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

  •         根据CSS选择器来获取DOM元素，获取到匹配到的第一个元素：document.querySelector('CSS选择器');
  •         根据CSS选择器来获取DOM元素，获取匹配到的全部元素：document.querySelectorAll('CSS选择器');
注意：获取到的全部元素，会封装到一个NodeList节点聚集中，是一个伪数组（有长度、有索引的数组，但是没有push、pop等数组方法）
代码示例:
  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <title>JS-对象-DOM</title>
  10. </head>
  12. <body>
  13.     <span id="sid">DOM元素1</span>
  14.     <span class="txt">DOM元素2</span>
  15.     <span class="txt">DOM元素3</span>
  17.     <script>
  18.         //根据CSS选择器获取DOM元素, 获取到匹配的第一个元素
  19.         let s1 = document.querySelector('#sid');
  20.         console.log(s1);
  21.             
  22.         //根据CSS选择器获取DOM元素, 获取到匹配的所有元素
  23.         let s2 = document.querySelectorAll('.txt');
  24.         s2.forEach(s => console.log(s))
  25.     </script>
  26. </body>
  28. </html>
复制代码
操纵属性
通过查询文档资料，如下图所示：

案例

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

分析
- 要实现倒计时效果，那实在倒计时，就是每1秒钟，实行一次，把数字往下减1，直到数据减为0 。以是，这里我们必要用到一个定时器：setInterval(...)
- 跳转网页，实在控制的所在栏的所在，那这里我们就必要通过 location 来设置所在栏的信息 。
 实现
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .center {
  11.             text-align: center;
  12.             margin-top: 50px;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <div class="center">
  19.         您好, 支付完成, <span id="time">5</span> 秒之后将自动跳转至 <a href="https://www.jd.com">官网</a> 首页 ~
  20.     </div>
  21.        
  22.     <script>
  23.         //1. 获取时间对应的DOM元素
  24.         let time = document.querySelector('#time');
  26.         //2. 开启定时器, 每秒将时间往下减一 , 如果时间>0 , 更新DOM元素的内容 ; 如果时间 < 0 , 则跳转页面 ;
  27.         count = time.innerHTML;
  28.         let timer = setInterval(() => {
  29.             count--;
  30.             if (count > 0) {
  31.                 time.innerHTML = count;
  32.             } else {
  33.                 clearInterval(timer);
  34.                 location.href = 'https://www.jd.com';
  35.             }
  36.         }, 1000);
  37.     </script>
  38. </body>
  39. </html>
复制代码


JS变乱

当我们用户在注册页面输入完内容，网页可以主动的提示我们用户名已经存在还是可以使用。那么是怎么知道我们用户名输入完了呢？这就必要用到JavaScript中的变乱了。
 


变乱先容

什么是变乱呢？HTML变乱是发生在HTML元素上的 “变乱”，比方：
- 按钮被点击
- 鼠标移到元素上
- 输入框失去焦点
- 按下键盘按键
- ........
而我们可以给这些变乱绑定函数，当变乱触发时，可以主动的完成对应的功能。这就是变乱监听。比方：对于我们所说的百度注册页面，我们给用户名输入框的失去焦点变乱绑定函数，当我们用户输入完内容，在标签外点击了鼠标，对于用户名输入框来说，失去焦点，然后实行绑定的函数，函数举行用户名内容的校验等操纵。JavaScript变乱是js非常告急的一部分
以是告急围绕：
- 变乱监听
- 常用变乱
变乱监听

JS变乱监听的语法: 
  2. 事件源.addEventListener('事件类型', 要执行的函数);
复制代码
在上述的语法中包罗三个要素: 
- 变乱源: 哪个dom元素触发了变乱, 要获取dom元素
- 变乱范例: 用什么方式触发, 比如: 鼠标单击 click, 鼠标颠末 mouseover
- 要实行的函数: 要做什么事
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>JS-事件-事件绑定</title>
  9. </head>
  11. <body>
  12.     <input type="button" id="btn1" value="点我一下">
  13.     <input type="button" id="btn2" value="点我一下试试">
  14.         
  15.     <script>
  16.         document.querySelector("#btn1").addEventListener('click', ()=>{
  17.             alert("按钮1被点击了...");
  18.         })
  19.     </script>
  20. </body>
  21. </html>
复制代码
JavaScript对于变乱的绑定还提供了别的2种方式（早期版本）：
1). 通过html标签中的变乱属性举行绑定
比方一个按钮，对于按钮可以绑定单机变乱，可以借助标签的onclick属性，属性值指向一个函数。
  2. <input type="button" id="btn1" value="点我一下试试" onclick="on()">
  3. <script>
  4.         function on(){
  5.         alert('试试就试试')
  6.     }
  7. </script>
复制代码
通过DOM中Element元素的变乱属性举行绑定
html中的标签被加载成element对象，以是也可以通过element对象的属性来操纵标签的属性。
比方一个按钮，可以绑定单机变乱，可以通过DOM元素的属性，为其办变乱绑定。
  2. <body>
  3.       <input type="button" id="btn1" value="点我一下试试1">
  4.       
  5.   <script>
  6.       document.querySelector('#btn1').onclick = function(){
  7.           alert("按钮2被点击了...");
  8.       }
  9.   </script>
  10.   </body>
复制代码
 团体代码如下：
  2. <!DOCTYPE html>
  3.   <html lang="en">
  4.   <head>
  5.       <meta charset="UTF-8">
  6.       <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.       <title>JS-事件-事件绑定</title>
  9.   </head>
  10.   
  11.   <body>
  12.       <input type="button" id="btn1" value="事件绑定1">
  13.       <input type="button" id="btn2" value="事件绑定2">
  14.       
  15.       <script>
  16.           document.querySelector("#btn1").addEventListener('click', ()=>{
  17.               alert("按钮1被点击了...");
  18.           })
  19.                  
  20.           document.querySelector('#btn2').onclick = function(){
  21.               alert("按钮2被点击了...");
  22.           }
  23.       </script>
  24.   </body>
  25.   </html>
复制代码
addEventListener 与 on变乱 区别:
- on方式会被覆盖，addEventListener 方式可以绑定多次，拥有更多特性，保举使用 addEventListener . 

常见变乱


示例演示： 
  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <title>JS-事件-常见事件</title>
  10. </head>
  12. <body>
  13.     <form action="" style="text-align: center;">
  14.         <input type="text" name="username" id="username">
  15.         <input type="text" name="age" id="age">
  16.         <input id="b1" type="submit" value="提交">
  17.         <input id="b2" type="button" value="单击事件">
  18.     </form>
  20.     <br><br><br>
  22.     <table width="800px" border="1" cellspacing="0" align="center">
  23.         <tr>
  24.             <th>学号</th>
  25.             <th>姓名</th>
  26.             <th>分数</th>
  27.             <th>评语</th>
  28.         </tr>
  29.         <tr align="center">
  30.             <td>001</td>
  31.             <td>张三</td>
  32.             <td>90</td>
  33.             <td>很优秀</td>
  34.         </tr>
  35.         <tr align="center" id="last">
  36.             <td>002</td>
  37.             <td>李四</td>
  38.             <td>92</td>
  39.             <td>优秀</td>
  40.         </tr>
  41.     </table>
  45.     <script>
  46.         //click: 鼠标点击事件
  47.         document.querySelector('#b2').addEventListener('click', () => {
  48.             console.log("我被点击了...");
  49.         })
  51.         //mouseenter: 鼠标移入
  52.         document.querySelector('#last').addEventListener('mouseenter', () => {
  53.             console.log("鼠标移入了...");
  54.         })
  56.         //mouseleave: 鼠标移出
  57.         document.querySelector('#last').addEventListener('mouseleave', () => {
  58.             console.log("鼠标移出了...");
  59.         })
  61.         //keydown: 某个键盘的键被按下
  62.         document.querySelector('#username').addEventListener('keydown', () => {
  63.             console.log("键盘被按下了...");
  64.         })
  66.         //keydown: 某个键盘的键被抬起
  67.         document.querySelector('#username').addEventListener('keyup', () => {
  68.             console.log("键盘被抬起了...");
  69.         })
  71.         //blur: 失去焦点事件
  72.         document.querySelector('#age').addEventListener('blur', () => {
  73.             console.log("失去焦点...");
  74.         })
  76.         //focus: 元素获得焦点
  77.         document.querySelector('#age').addEventListener('focus', () => {
  78.             console.log("获得焦点...");
  79.         })
  81.         //input: 用户输入时触发
  82.         document.querySelector('#age').addEventListener('input', () => {
  83.             console.log("用户输入时触发...");
  84.         })
  86.         //submit: 提交表单事件
  87.         document.querySelector('form').addEventListener('submit', () => {
  88.             alert("表单被提交了...");
  89.         })
  90.     </script>
  91. </body>
  93. </html>
复制代码
表格隔行换色案例


分析：当鼠标引入表格，出现一个颜色，脱离之后颜色立刻变为默认的白色了。 那这就涉及到鼠标移入变乱 mouseenter、鼠标移失变乱 mouseleave。
实现：
  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <title>Document</title>
  10.     <style>
  11.         table {
  12.             /* 设置表格的宽度 */
  13.             width: 60%;
  14.             /* 将表格边框合并，消除单元格之间的间距 */
  15.             border-collapse: collapse;
  16.             /* 将表格边框间的距离设置为0，确保没有任何间距 */
  17.             border-spacing: 0;
  18.             /* 文本居中对齐 */
  19.             text-align: center;
  20.             /* 版心居中展示 */
  21.             margin: auto;
  22.             /* 距离顶部的外边距 */
  23.             margin-top: 20px;
  24.             /* 行高 */
  25.             line-height: 30px;
  26.             /* 字体 */
  27.             font-family: 'Courier New', 华文中宋, monospace;
  28.         }
  30.         table,tr,th,td {
  31.             /* 设置表格的边框 */
  32.             border: 1px solid black;
  33.         }
  35.         h1 {
  36.             /* 文本居中对齐 */
  37.             text-align: center;
  38.         }
  40.         .footer_btn {
  41.             /* 文本居中对齐 */
  42.             text-align: center;
  43.             margin-top: 10px;
  44.         }
  45.     </style>
  46. </head>
  48. <body>
  49.     <h1 id="title">用户信息表</h1>
  51.     <table>
  52.         <tr>
  53.             <th>编号</th>
  54.             <th>姓名</th>
  55.             <th>年龄</th>
  56.             <th>性别</th>
  57.             <th>爱好</th>
  58.         </tr>
  59.         <tr class="data">
  60.             <td>1</td>
  61.             <td>Tom</td>
  62.             <td>18</td>
  63.             <td>男</td>
  64.             <td>Java , JS , HTML , Vue</td>
  65.         </tr>
  66.         <tr class="data">
  67.             <td>2</td>
  68.             <td>Cat</td>
  69.             <td>12</td>
  70.             <td>女</td>
  71.             <td>Java , JS , HTML , Vue</td>
  72.         </tr>
  73.         <tr class="data">
  74.             <td>3</td>
  75.             <td>Lee</td>
  76.             <td>21</td>
  77.             <td>男</td>
  78.             <td>Java , Vue</td>
  79.         </tr>
  80.         <tr class="data">
  81.             <td>4</td>
  82.             <td>Jerry</td>
  83.             <td>19</td>
  84.             <td>女</td>
  85.             <td>JS , HTML , Vue</td>
  86.         </tr>
  87.         <tr class="data">
  88.             <td>5</td>
  89.             <td>Jack</td>
  90.             <td>25</td>
  91.             <td>男</td>
  92.             <td>Java</td>
  93.         </tr>
  94.         <tr class="data">
  95.             <td>6</td>
  96.             <td>Jones</td>
  97.             <td>22</td>
  98.             <td>女</td>
  99.             <td>HTML , Vue</td>
  100.         </tr>
  101.     </table>
  103.     <script>
  104.         //1. 获取表格中的数据行 DOM对象
  105.         let trs = document.querySelectorAll('.data');
  107.         //2. 判断, 如果是奇数行, 设置背景颜色为 #FBFBD4; 如果是偶数行, 设置背景颜色为: #D9D9FA
  108.         for (let i = 0; i < trs.length; i++) {
  109.             const tr = trs[i];
  110.             tr.addEventListener('mouseenter', ()=> {
  111.                 if(i % 2 == 0){ //偶数
  112.                     tr.style = "background-color: #D9D9FA";
  113.                 }else { //奇数
  114.                     tr.style = "background-color: #FBFBD4";
  115.                 }
  116.             })
  117.             
  118.             tr.addEventListener('mouseleave', ()=> {
  119.                 tr.style = "background-color: #FFFFFF";
  120.             })
  121.         }
  122.     </script>
  123. </body>
  125. </html>
复制代码
表单校验案例

需求：完成用户注册的表单校验操纵，要求做到以下两点。
1. 在表单项中输入完成，鼠标脱离焦点时，举行表单项内容的校验，假如内容格式不精确，表现提示信息。
2. 在表单提交时，校验整个表单内容，假如内容格式有一项不精确，弹出提示信息，克制表单数据提交。

分析：

  •         JS的变乱监听：离焦变乱 blur，表单提交变乱 submit
  •         DOM对象操纵
 实现：
  2. <!DOCTYPE html>
  3. <html>
  5. <head>
  6.     <title>表单</title>
  7.     <style>
  8.         label {
  9.             display: inline-block;
  10.             width: 80px;
  11.             text-align: right;
  12.             margin-right: 10px;
  13.         }
  15.         input {
  16.             width: 250px;
  17.             padding: 10px;
  18.             border: 1px solid #ccc;
  19.             border-radius: 5px;
  20.             margin-bottom: 10px;
  21.         }
  23.         .btn {
  24.             width: 150px;
  25.         }
  27.         .tip {
  28.             color: #ff0000;
  29.             font-size: 12px;
  30.         }
  31.     </style>
  32. </head>
  34. <body>
  35.     <div>
  36.         <h1>用户注册</h1>
  37.         <form>
  38.             <label for="username">用户名：</label>
  39.             <input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16个字符">
  40.             <span class="tip" id="name_msg"></span> <br>
  42.             <label for="phone">手机号：</label>
  43.             <input type="text" id="phone" name="phone" placeholder="手机号不能为空且长度为11位">
  44.             <span class="tip" id="phone_msg"></span>
  45.             <br>
  47.             <input type="submit" value="提交" class="btn">
  48.             <input type="reset" value="重置" class="btn">
  49.         </form>
  50.     </div>
  53.     <script>
  54.         //1. 校验用户名 - 失去焦点时校验 - blur
  55.         function checkUsername(){ //true, 合法; false, 不合法;
  56.             let flag = true;
  57.             let usernameValue = document.querySelector('#username').value;
  58.             let errMsg = "";
  59.             if(usernameValue.length < 4 || usernameValue.length > 16){
  60.                 errMsg = "用户名不合法";
  61.                 flag = false;
  62.             }
  63.             document.querySelector('#name_msg').innerHTML = errMsg;
  64.             return flag;
  65.         }
  66.         document.querySelector('#username').addEventListener('blur', checkUsername);
  69.         //2. 校验手机号
  70.         function checkPhone(){ //true, 合法; false, 不合法;
  71.             let flag = true;
  72.             let phoneValue = document.querySelector('#phone').value;
  73.             let errMsg = "";
  74.             if(phoneValue.length != 11 ){
  75.                 errMsg = "手机号不合法";
  76.                 flag = false;
  77.             }
  78.             document.querySelector('#phone_msg').innerHTML = errMsg;
  79.             return flag;
  80.         }
  81.         document.querySelector('#phone').addEventListener('blur', checkPhone)
  84.         //3. 表单提交的时候 - 校验整个表单 - submit
  85.         document.querySelector('form').addEventListener('submit', function(event){
  86.             //判断用户名及手机号是否合法, 如果不合法, 提示错误信息;
  87.             if(!checkUsername() || !checkPhone()){
  88.                 alert('表单数据不合法');
  89.                
  90.                 //组织表单默认的提交事件
  91.                 event.preventDefault();//组织事件的默认行为
  92.             }
  93.         })
  94.     </script>
  95. </body>
  97. </html>
复制代码
注意：JavaScript中，可以通过变乱对象event中的preventDefault() 方法来克制变乱的默认举动，比如克制表单提交。
固然表单校验功能，基于DOM操纵已经完成了，乐成的校验了用户名和暗码的长度，长度不符合条件，直接提示错误信息，并不允许表单提交，但是对于手机号，是只要11位就可以了吗？
- 12209120990
- 11009120990
- 1220912abcd
我们发现，上述的字符串，长度都是11位，但是却不是正当的手机号 。由于手机号，是必要符合特定规则的，比如全部都是数字，而且第一位，必须是1，第二位，可以是 3/4/5/6/7/8/9 ，然后背面是9位数字。
应该怎样来校验雷同于手机号这种，特定规则的字符串就必要通过正则表达式来校验了

 正则表达式

- 先容：正则表达式（Regular Expression，也简称为正则），界说了字符串构成的规则。
- 作用：通常用来验证数据格式、查找更换文本 等。
- 界说：
  - 正则表达式字面量 （注意不要加引号）
  2. const reg1 = /abc/;
复制代码
创建正则对象RegExp
  2. const reg2 = new RegExp('abc');
复制代码

  •         方法：
            test(str)：判定指定字符串是否符合规则，符合返回true；不符合返回false。
  •         语法：

    •                 平常字符：大多数的字符仅能形貌它们本身，这些字符称作平常字符，比如字母和数字。
    •                 特殊字符：是一些具有特殊寄义的字符，可以极大进步了机动性和强盛的匹配功能。
    •                 量词：表现要匹配的字符或表达式的数量。

符号寄义^表现以谁开始$表现以谁竣事[]表现某个范围内的单个字符，如：[0-9]单个数字字符.表现恣意单个字符，除了换行和行竣事符\w代表单词字符：字母、数字、下划线（_），相当于[A-Za-z0-9_]\d代表数字字符：相当于[0-9]\s代表空格（包罗换行符、制表符、空格等）符号寄义?零个或一个*零个或多个+一个或多个（至少一个）{n}n个{m,}至少m个{m,n}至少m个，最多n个示例： 
  1. <script>    let str1 = 'hello World';    let str2 = '二哈很二o';    let str3 = 'er哈就是很二o';    let str4 = '二哈就是很二';    console.log(/\w+/.test(str1)); //true    console.log(/\w+/.test(str2)); //true    console.log(/\w+/.test(str3)); //true    console.log(/\w+/.test(str4)); //false   
  2. const reg1 = /abc/;   
  3. const reg2 = new RegExp('abc');    console.log(reg1.test('my name is : abc')); //true    console.log(reg2.test('my name is : abc')); //true  </script>
复制代码
通过正则表达式来校验表单中用户名、手机号 具体代码如下：
  2. <!DOCTYPE html>
  3. <html>
  5. <head>
  6.     <title>表单</title>
  7.     <style>
  8.         label {
  9.             display: inline-block;
  10.             width: 80px;
  11.             text-align: right;
  12.             margin-right: 10px;
  13.         }
  15.         input {
  16.             width: 250px;
  17.             padding: 10px;
  18.             border: 1px solid #ccc;
  19.             border-radius: 5px;
  20.             margin-bottom: 10px;
  21.         }
  23.         .btn {
  24.             width: 150px;
  25.         }
  27.         .tip {
  28.             color: #ff0000;
  29.             font-size: 12px;
  30.         }
  31.     </style>
  32. </head>
  34. <body>
  35.     <div>
  36.         <h1>用户注册</h1>
  37.         <form>
  38.             <label for="username">用户名：</label>
  39.             <input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16个字符">
  40.             <span class="tip" id="name_msg"></span> <br>
  42.             <label for="phone">手机号：</label>
  43.             <input type="text" id="phone" name="phone" placeholder="手机号不能为空且长度为11位">
  44.             <span class="tip" id="phone_msg"></span>
  45.             <br>
  47.             <input type="submit" value="提交" class="btn">
  48.             <input type="reset" value="重置" class="btn">
  49.         </form>
  50.     </div>
  53.     <script>
  54.         //在鼠标离开焦点时, 校验输入框内容的长度 .
  55.         //校验用户名
  56.         function checkUsername(){ //true, 合法; false, 不合法;
  57.             let flag = true;
  58.             let usernameValue = document.querySelector('#username').value;
  59.             let errMsg = "";
  60.             if(!/^\w{4,16}$/.test(usernameValue)){
  61.                 errMsg = "用户名不合法";
  62.                 flag = false;
  63.             }
  64.             document.querySelector('#name_msg').innerHTML = errMsg;
  65.             return flag;
  66.         }
  67.         document.querySelector('#username').addEventListener('blur', checkUsername)
  70.         //校验密码
  71.          function checkPhone(){ //true, 合法; false, 不合法;
  72.             let flag = true;
  73.             let phoneValue = document.querySelector('#phone').value;
  74.             let errMsg = "";
  75.             if(!/^1[3-9]\d{9}$/.test(phoneValue)){
  76.                 errMsg = "手机号不合法";
  77.                 flag = false;
  78.             }
  79.             document.querySelector('#phone_msg').innerHTML = errMsg;
  80.             return flag;
  81.         }
  82.         document.querySelector('#phone').addEventListener('blur', checkPhone)
  85.         //在表单提交时, 判断是否所有的输入框输入的值合法 .
  86.         document.querySelector('form').addEventListener('submit', (e)=> {
  87.             if(!checkUsername() || !checkPhone()){
  88.                 alert('表单校验失败, 不能提交表单')
  89.                 e.preventDefault();
  90.             }
  91.         })
  93.     </script>
  94. </body>
  96. </html>
复制代码
 JS模块化

所谓JS模块化，指的是JS提供的一种，将JavaScript步伐拆分位多少个可按需导入的单独模块的机制。
比如，我们前面实现的表单校验的案例，我们是可以把JS代码单独的抽取到一个js文件中，然后在html中引入对应的js文件即可，如许做，便于管理、提升代码的复用性。具体操纵如下：
 界说一个js文件，定名位 check.js
  2. //在鼠标离开焦点时, 校验输入框内容的长度 .
  3. //校验用户名
  4. function checkUsername(){ //true, 合法; false, 不合法;
  5.     let flag = true;
  6.     let usernameValue = document.querySelector('#username').value;
  7.     let errMsg = "";
  8.     if(!/^\w{4,16}$/.test(usernameValue)){
  9.         errMsg = "用户名不合法";
  10.         flag = false;
  11.     }
  12.     document.querySelector('#name_msg').innerHTML = errMsg;
  13.     return flag;
  14. }
  15. document.querySelector('#username').addEventListener('blur', checkUsername)
  18. //校验密码
  19. function checkPhone(){ //true, 合法; false, 不合法;
  20.     let flag = true;
  21.     let phoneValue = document.querySelector('#phone').value;
  22.     let errMsg = "";
  23.     if(!/^1[3-9]\d{9}$/.test(phoneValue)){
  24.         errMsg = "手机号不合法";
  25.         flag = false;
  26.     }
  27.     document.querySelector('#phone_msg').innerHTML = errMsg;
  28.     return flag;
  29. }
  30. document.querySelector('#phone').addEventListener('blur', checkPhone)
  33. //在表单提交时, 判断是否所有的输入框输入的值合法 .
  34. document.querySelector('form').addEventListener('submit', (e)=> {
  35.     if(!checkUsername() || !checkPhone()){
  36.         alert('表单校验失败, 不能提交表单')
  37.         e.preventDefault();
  38.     }
  39. })
复制代码
 在html文件中，假如必要用到上述的JS代码，直接在 script 标签中引入该js即可。
  2. <!DOCTYPE html>
  3. <html>
  5. <head>
  6.     <title>表单</title>
  7.     <style>
  8.         label {
  9.             display: inline-block;
  10.             width: 80px;
  11.             text-align: right;
  12.             margin-right: 10px;
  13.         }
  15.         input {
  16.             width: 250px;
  17.             padding: 10px;
  18.             border: 1px solid #ccc;
  19.             border-radius: 5px;
  20.             margin-bottom: 10px;
  21.         }
  23.         .btn {
  24.             width: 150px;
  25.         }
  27.         .tip {
  28.             color: #ff0000;
  29.             font-size: 12px;
  30.         }
  31.     </style>
  32. </head>
  34. <body>
  35.     <div>
  36.         <h1>用户注册</h1>
  37.         <form>
  38.             <label for="username">用户名：</label>
  39.             <input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16个字符">
  40.             <span class="tip" id="name_msg"></span> <br>
  42.             <label for="phone">手机号：</label>
  43.             <input type="text" id="phone" name="phone" placeholder="手机号不能为空且长度为11位">
  44.             <span class="tip" id="phone_msg"></span>
  45.             <br>
  47.             <input type="submit" value="提交" class="btn">
  48.             <input type="reset" value="重置" class="btn">
  49.         </form>
  50.     </div>
  53.     <script src="./js/check.js"></script>
  54. </body>
  56. </html>
复制代码
这是在html中，引入JS文件，可以直接使用 `<script src=".."></script>` 来引入。 假如是在一个js文件中，必要用到别的一个js文件中的方法呢
那在JS中，就给我们提供了模块化导入、导出的操纵，可以通过 `export` 关键字，来导出模块。 然后在别的必要用到的地方，通过 `import` 关键字导入模块。
如下所示：
 `checkFn.js` 中界说是校验方法
在变量前面加上 `export` 代表，将该变量、函数、对象导出为一个模块。别的js中要想使用，就可以  `import` 导入了。
  2. export function checkUsername(){ //true, 合法; false, 不合法;
  3.   let flag = true;
  4.   let usernameValue = document.querySelector('#username').value;
  5.   let errMsg = "";
  6.   if(!/^\w{4,16}$/.test(usernameValue)){
  7.       errMsg = "用户名不合法";
  8.       flag = false;
  9.   }
  10.   document.querySelector('#name_msg').innerHTML = errMsg;
  11.   return flag;
  12. }
  15. export function checkPhone(){ //true, 合法; false, 不合法;
  16.   let flag = true;
  17.   let phoneValue = document.querySelector('#phone').value;
  18.   let errMsg = "";
  19.   if(!/^1[3-9]\d{9}$/.test(phoneValue)){
  20.       errMsg = "手机号不合法";
  21.       flag = false;
  22.   }
  23.   document.querySelector('#phone_msg').innerHTML = errMsg;
  24.   return flag;
  25. }
复制代码
check.js 中界说的是校验的变乱监听
在check.js中必要用到 checkUsername、checkPhone函数，就可以通过 import 关键字将其导入进来。
  2. import {checkUsername, checkPhone} from './checkFn.js'
  4. //1. 校验用户名 - 失去焦点时校验 - blur
  5. document.querySelector('#username').addEventListener('blur', checkUsername)
  7. //2. 校验手机号
  8. document.querySelector('#phone').addEventListener('blur', checkPhone)
  10. //3. 表单提交的时候 - 校验整个表单 - submit
  11. document.querySelector('form').addEventListener('submit', function(event){
  12.     //判断用户名及手机号是否合法, 如果不合法, 提示错误信息;
  13.     if(!checkUsername() || !checkPhone()){
  14.         alert('表单数据不合法');
  15.         
  16.         //组织表单默认的提交事件
  17.         event.preventDefault();//组织事件的默认行为
  18.     }
  19. })
复制代码
`xxx.html` 中就是html的根本代码样式
注意：假如使用到了 `export`, `import` 这种模块化的js，那在通过 `<script src="..."></script>` 在引入JS文件时，必须指定 `type="module"` 属性，表名我们使用的是模块化的JS。 如下所示：
  2. <!DOCTYPE html>
  3. <html>
  5. <head>
  6.     <title>表单</title>
  7.     <style>
  8.         label {
  9.             display: inline-block;
  10.             width: 80px;
  11.             text-align: right;
  12.             margin-right: 10px;
  13.         }
  15.         input {
  16.             width: 250px;
  17.             padding: 10px;
  18.             border: 1px solid #ccc;
  19.             border-radius: 5px;
  20.             margin-bottom: 10px;
  21.         }
  23.         .btn {
  24.             width: 150px;
  25.         }
  27.         .tip {
  28.             color: #ff0000;
  29.             font-size: 12px;
  30.         }
  31.     </style>
  32. </head>
  34. <body>
  35.     <div>
  36.         <h1>用户注册</h1>
  37.         <form>
  38.             <label for="username">用户名：</label>
  39.             <input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16个字符">
  40.             <span class="tip" id="name_msg"></span> <br>
  42.             <label for="phone">手机号：</label>
  43.             <input type="text" id="phone" name="phone" placeholder="手机号不能为空且长度为11位">
  44.             <span class="tip" id="phone_msg"></span>
  45.             <br>
  47.             <input type="submit" value="提交" class="btn">
  48.             <input type="reset" value="重置" class="btn">
  49.         </form>
  50.     </div>
  52.         <!-- 模块化JS引入方式，需要指定type="module" -->
  53.     <script type="module" src="./js/check.js"></script>
  54. </body>
  56. </html>
复制代码
注意：假如使用模块的js，使用了 `export`，`import` ，要包管我们的代码，肯定是在服务器端运行，而不是在磁盘中直接打开。 以是运行的时间，在VSCode中已经要右键选择 "Open with Live Server"。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表

惊落一身雪
+ 我要发帖

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表