简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 常用的字符串方法介绍以及使用事件代理实现一个简单的留言板
Blogger Information
Blog 29
fans 1
comment 0
visits 35293
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
常用的字符串方法介绍以及使用事件代理实现一个简单的留言板
祥子弟弟
Original
622 people have browsed it

一、常用的字符串方法

1.concat()方法:字符串拼接，在大量的生成 html 代码时用处很大，而且可以自动类型转换

  1. let str = " html ".concat(" css ", " js ", " ! ", 666);
  2. console.log(str);
  3. // str = "html css js ! 666";

2.slice(起始位置，结束位置)方法:取子串

  1. // 支持负数操作
  2. str = "hello world!";
  3. let str1 = str.slice(0, 5);
  4. console.log(str1);
  5. // str1 = "hello";
  6. // 省略第二个参数就是从当前起始位置一直到字符串结束
  8. // 从倒数第一个字符开始往前数，也就是-1开始
  9. str1 = str.slice(-6);
  10. console.log(str1);
  11. // str1 = world!

3.substr(起始位置，获取的长度)方法：取子串

  1. let str2 = str.substr(0, 7);
  2. console.log(str2);
  3. // str2 = "hello w";
  5. // 同样支持负数操作,取操作是从左至右
  6. str2 = str.substr(-6, 3);
  7. console.log(str2);
  8. // str2 = "wor";

4.trim()方法:删除两端空格

  1. let psd = "   root123456   ";
  2. console.log(psd.length);
  3. // psd = "   root123456   ";
  4. // psd.length = 16;
  6. // 去空格
  7. console.log(psd.trim().length);
  8. // psd = "root123456";
  9. // psd.length = 10;

5.split()方法:将字符串打包成数组

  1. let res = str.split("");
  2. console.log(res);
  3. //res = ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"];
  4. // 用途：比如说从邮箱中解析出用户名和邮箱地址
  6. res = "admin@admin.com".split("@");
  7. console.log(res);
  8. // res = ["admin", "admin.com"];

6.charAt(n)方法:从字符串中获取单个字符，n 代表字符串中字符的索引值

  1. let cat = "cat";
  2. console.log(cat.charAt(1));
  3. // cat.charAt(1) = 'a';
  5. // 将字符串当成一个类数组使用
  6. console.log(cat[1]);
  7. // cat[1] = 'a';

7.toLowerCase()方法:将字符串全部转换成小写

  1. let str = "Hello world";
  2. let res = str.toLowerCase();
  3. console.log(res);
  4. // res = "hello world";

8.toUpperCase()方法:将字符串转换为大写

  1. let str = "hello world";
  2. let res = str.toUpperCase();
  3. console.log(res);
  4. // res = "HELLO WORLD";

9.includes()方法:判断一个字符串是否包含另一个字符串,返回结果是布尔值

  1. let str = "Hello World";
  2. console.log(str.include("hello"));
  3. // 返回值为false,因为include方法是区分大小写的

10.replace()方法:替换掉字符串中的一段

  1. let str = "HELLO World";
  2. let res = str.replace("HELLO", "Hello");
  3. console.log(res);
  4. // res = "Hello World";

二、事件代理机制，以及使用事件代理完成一个简单的留言板案例

事件代理，又称之为事件委托。是 JS 中常用绑定事件的技巧。“事件代理”是把原本需要绑定在子元素的响应事件（click、keydown……）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是 DOM 元素的事件冒泡。

想要知道事件代理，首先需要知道的是事件传递。事件的传递行为分为两种，一种是捕获，另一种就是冒泡。捕获行为：从最外层元素，逐级向内捕获，直到事件的绑定者/触发者（从模糊到清晰的过程）;冒泡行为:从目标由内向外逐级向上直到最外层元素（从清晰到模糊的过程）,冒泡行为是事件传递过程中的默认行为。

冒泡行为的演示：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>事件冒泡</title>
  7.   </head>
  8.   <body onclick="alert(this.tagName)">
  9.     <div onclick="alert(this.tagName)">
  10.       <ul onclick="alert(this.tagName)">
  11.         <li onclick="alert(this.tagName)">text</li>
  12.       </ul>
  13.     </div>
  14.   </body>
  15. </html>

通过给每个元素添加了点击事件来模拟一下事件的冒泡行为，点击一下 text




而事件代理是基于事件的冒泡行为来完成的，在事件代理中，事件的触发者(ev.target)通常是事件绑定者(ev.currentTarget)的的子元素，因为这样会让事件的传递效率更加的高效。

使用事件代理来完成一个简单的留言板案例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>留言板</title>
  6.   </head>
  7.   <body>
  8.     <label>留言板:&nbsp;&nbsp;<input type="text" name="messageBoard" /></label>
  9.     <ol id="list"></ol>
  10.     <script>
  11.       // 获取元素
  12.       const msg = document.querySelector("input");
  13.       const lists = document.querySelector("#list");
  15.       // 创建事件，当内容输入文本框时，将其打印到下边
  16.       msg.onkeydown = (ev) => {
  17.         // 键盘事件中的key属性，表示按下的键名
  18.         // console.log(ev.key);
  19.         if (ev.key === "Enter") {
  20.           // 非空判断
  21.           if (ev.currentTarget.value.length === 0) {
  22.             alert("内容为空");
  23.             msg.focus();
  24.           } else {
  25.             // 将留言内容添加到列表中
  26.             // 创建留言
  27.             let olStr = `<div><li>${ev.currentTarget.value}</li><button onclick="del(this)">删除</button></div>`;
  28.             // 应该将最新的信息放在第一条
  29.             lists.insertAdjacentHTML("afterBegin", olStr);
  30.             // 按下回车后，清空留言板
  31.             ev.currentTarget.value = null;
  32.           }
  33.         }
  34.       };
  36.       // 删除留言
  37.       function del(ele) {
  38.         // DOM接口的outerHTML属性获取描述元素（包括其后代）的序列化HTML片段。它也可以设置为用从给定字符串解析的节点替换元素。
  39.         // 返回时，内容包含描述元素及其后代的序列化HTML片段。
  40.         return confirm("是否删除?") ? (ele.parentNode.outerHTML = null) : false;
  41.       }
  42.     </script>
  43.   </body>
  44. </html>

显示效果如下：

由于设置的是每次都是将最新的留言置顶，所以会让原来的留言自动向下排列

点击删除按钮，会弹窗提示，然后确认后会删除，如果是删除的中间的留言，会将后边的留言顺序自动调整一位。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！