JS事件代理的实现机制|JS留言板添加删除|JS字符串常用方法 - JavaScript

Home > List of blog posts > JS事件代理的实现机制|JS留言板添加删除|JS字符串常用方法

Blogger Information

Blog 41

fans 0

comment 0

visits 41334

Special Recommendation

More>

Related recommendations

Related Tutorials

Popular Recommendations

Latest courses

The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

1427216 times of learning
Collection
PHP introductory tutorial one: Learn PHP in one week

4277030 times of learning
Collection
JAVA Beginner's Video Tutorial

2576382 times of learning
Collection

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

JS事件代理的实现机制|JS留言板添加删除|JS字符串常用方法

幸福敲门的博客

Original

714 people have browsed it

实例演示事件代理的实现机制;
完成留言板,添加留言删除功能
自选不少于10个字符串方法进行练习

预习常用的数组方法
一、事件代理的实现机制
1.1元素的事件属性

<body>
 <!-- 1. 添加到元素的事件属性上 -->
 <button ">Button1</button>
 <button >Button2</button>
 <button onclick="console.log(this.innerHTML)>Button3</button>
 <button>点击广告</button>
</body>

图示：

1.2通过脚本添加事件属性

<body>
 <button >Button1</button>
 <button >Button2</button>
 <button >Button3</button>
 <button>点击广告</button>
</body>
<script>
   const btn3 = document.querySelector("body button:nth-of-type(3)");
   // 添加事件
   btn3.onclick = function () {
     console.log(this.innerHTML);
   };
   btn3.onclick = function () {
     this.style.color = "green";
   };
</script>

图示：

1.3通过事件监听器添加事件

 <body>
    <button >Button1</button>
    <button >Button2</button>
    <button >Button3</button>
    <button>点击广告</button>
</body>
 <script>
       const btn2 = document.querySelector("body button:nth-of-type(2)");
      btn2.addEventListener("click", function () {
        console.log(this.innerHTML, "第1次");
      });
      btn2.addEventListener("click", function () {
        console.log(this.innerHTML, "第2次");
      });
      btn2.addEventListener("click", function () {
        console.log(this.innerHTML, "第3次");
      });
      btn2.addEventListener("click", function () {
        console.log(this.innerHTML, "第4次");
      });
 </script>

图示：
事件监听器添加事件
1.4事件派发(广告点击计费)

 <script>
      const btn4 = document.querySelector("body button:nth-of-type(4)");
      const ev = new Event("click");
      let i = 0;
      btn4.addEventListener("click", function () {
        console.log("点击了广告, 共计: " + i + "元");
        i += 1.3;
      });
      //   btn4.dispatchEvent(ev);
    // 使用间歇式定时器来自动点击广告
      setInterval("btn4.dispatchEvent(ev)", 1000);
 </script>

广告点击计费

二、留言板添加删除

<body>
    <label><input type="text" name="message" /></label>
    <ol id="list"></ol>
    <script>
      // 获取元素
      const msg = document.querySelector("input");
      const list = document.querySelector("#list");
      msg.onkeydown = ev => {
        // 键盘事件中,key表示按下的键名
        // console.log(ev.key);
        if (ev.key === "Enter") {
          // 非空判断
          if (ev.currentTarget.value.length === 0) {
            alert("内容不能为空");
          } else {
            //   将留言内容添加到列表中
            // 创建留言
            let str = `<li>${ev.currentTarget.value}</li>`;
            // 应该将最新的信息永远放在第一条
            list.insertAdjacentHTML("afterbegin", str);
            // 清空上一条留言
            ev.currentTarget.value = null;
          }
        }
      };
    </script>
  </body>

图示：
添加留言

删除留言：

<body>
    <label>请留言:&nbsp;<input type="text" name="message" /></label>
    <ol id="list"></ol>
    <script>
      // 获取元素
      const msg = document.querySelector("input");
      const list = document.querySelector("#list");
      msg.onblur = ev => {
        console.log(ev.currentTarget);
      };
      msg.onkeydown = ev => {
        //   ev.key: 键盘事件中,key表示按下的键名
        // console.log(ev.key);
        if (ev.key === "Enter") {
          // 非空判断
          if (ev.currentTarget.value.length === 0) {
            alert("内容不能为空");
          } else {
            // 创建包括留言内容的html字符串
            let str = `<li>${ev.currentTarget.value}<button onclick="del(this)">删除</button></li>`;
            // 最新留言应该始终做为第一条插入
            list.insertAdjacentHTML("afterbegin", str);
            // 请空上一条留言
            ev.currentTarget.value = null;
          }
        }
      };
      // 删除留言
      function del(ele) {
        return confirm("是否删除?") ? (ele.parentNode.outerHTML = null) : false;
      }
    </script>
  </body>

图示：
删除留言

三、字符串常用方法
3.1 concat()拼装

<script>
      // 1. concat()拼装
      let str = "student".concat("name", "age","sex", "school", "height");
      console.log(str);
      str ="student name age sex school height";
      console.log(str);
</script>

图示：
concat()拼装
3.2 slice(start, end):取子串

<script>
     let str = "welcome to beijing";
     let res = str.slice(0, 8);
      console.log(res);
      res = str.slice(0);
      console.log(res);
      res = str.slice(7);
      console.log(res);
      res = str.slice(-7);
      console.log(res);
      res = str.slice(-4, 10);
      console.log(res);
      //   正方向从0开始,反方向从-1开始
      res = str.slice(-8, -4);
      console.log(res);
</script>

图示：
取子串

3.3 substr(start, length)截取子串

<script>
  let str = "welcome to beijing";
 str=str.substr(6, 8);
 console.log(str);
</script>

截取字串

3.4trim():删除二端空格

<script>
     let psw = "       admin123456        ";
      console.log(psw.length);
      psw = "  admin123456     ";
      console.log(psw.trim().length);
 </script>

图示：
删除二端空格

3.5将字符串打成数组

<script>
   let  res = "chinamade|Beautiful hometown".split("|");
      console.log(res[0]);
 </script>

图示：
将字符串打成数组

3.6用repeat多次复制字符串

<script>
let str = "china.made";
str = str.repeat(3);
console.log(str);
</script>

图示：
repeat多次复制字符串

3.7填充一个字符串到指定的长度

<script>
let str = "china.made";
str = '001'.padStart(8, '0')
console.log(str);
</script>

图示：

3.8length计算字符串中的字符

<script>
const word = "china.made";
console.log(word.length)
</script>

图示：
计算长度

3.9(…)、Array.reverse和Array.join方法反转字符串中的字符

<script>
const word = "china.made";
const reversedWord = [...word].reverse().join("")
console.log(reversedWord)
</script>

图示：
反转字符串

3.10用String.startsWith和String.endsWith检查字符串是否以特定序列开头或结尾

<script>
const word = "china.made!beautiful girl!"   
console.log(word.startsWith("china")); // true   
console.log(word.endsWith("made")); // false
</script>

图示：
特定序列开头或结尾

3.11search() 搜索子串

<script>
let str = '';
console.log(str.search(/5c\-/));
</script>

图示：
搜索子串

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

Markdown日常使用方法和Html标签理解

2020-12-17 09:21:25