第17章 0107-事件与常用函数，学习心得、笔记

今天所学心得、笔记

1、事件代理的实现机制

<ul id="list">
    <li class="ls">item1</li>
    <li class="ls">item2</li>
    <li class="ls">item3</li>
    <li class="ls">item4</li>
    <li class="ls">item5</li>
</ul>    
    <script>
   // 通过事件监听器添加事件(采用事件方法函数方式)，因通过回调添加的事件无法移除
   // 事件绑定者(ev.currentTarget)，事件触发者,通常是"事件绑定者"的子元素
   //(ev.target)
    const handle = ev => console.log(ev.target.innerHTML);
    //给li元素添加事件
    let item = document.querySelector("#list");
    item.addEventListener("click", handle);
    //移除事件
    // item.removeEventListener("click", handle);
    </script>

---

1、留言板，添加留言，删除功能

    let msg = document.querySelector("input");
    let msgList = document.querySelector("#msgList");
    // 留言板，升级版(添加、删除留言功能)
    let msgArr = [];    //留言数据的数组
    msg.onkeydown = ev => {
        if(ev.key === "Enter"){
            if(ev.currentTarget.value.length === 0){
                alert("留言内容不能为空");
            }else {
                msgArr.push(ev.currentTarget.value);
                // console.log(msgArr);
                load();
                // 清空input框内容
                ev.currentTarget.value = null;
            }
        }
    }
    // 渲染数据到页面
    function load() {
        let li = document.querySelectorAll(".li");
        // 渲染数据到页面前，删除所有li
        for (i=0; i<li.length; i++) {
            msgList.removeChild(li[i]);
        }
        console.log(msgArr);
        for(i=0; i<msgArr.length; i++) {
   //在这里使用 button 标签不行，没有冒泡效果，最后只能用 input标签代替，
   //不知道为什么？？？
        let str =  `<li class="li"><div class="box">
        <span>${msgArr[i]}</span><input type="button" class="btn" id="${i}" value="删除">
         </div></li>`;
        //添加留言内容到页面
        msgList.insertAdjacentHTML("afterbegin", str);
        }
    }
    // 删除指定的留言数据，并重新渲染数据到页面
    msgList.addEventListener("click", function (ev) {
        msgArr.splice(ev.target.id,1);
        load();
    });

代码功能截图

1、字符串方法

    // 1. concat()拼装
    let str = "html".concat(" css ", "www.", "php.", "cn ", 888);
    console.log(str);
    str = "www.PHP.cn";
    // 2. slice(start, end):取子串
    let res = str.slice(0, 3);
    console.log(res);
    res = str.slice(3, -2);
    console.log(res);
    // 3. substr(start, length):取子串
    res = str.substr(3, 5);
    console.log(res);
    // 4. indexOf()返回字符串中匹配子串的第一个字符的下标
    res = str.indexOf("p");
    console.log(res);
    // 5. 将字符串打成数组
    res = str.split("");
    console.log(res);
    // 比如说从邮箱中解析出用户和和邮箱地址
    res = "admin@php.cn".split("@");
    console.log(res[0]);
    console.log(res[1]);
    // 6. join()指定的分隔符将一个数组合并为一个字符串
    var arr= ["jpg","bmp","gif","ico","png"];
    res = arr.join("|");
    console.log(res);
    // 7. charAt()返回指定位置的字符，下标由0开始；
    res = str.charAt(5);;
    console.log(res);
    // 8. toLowerCase()转小写
    res = str.toLowerCase();;
    console.log(res);
    // 9. toUpperCase()转大写
    res = str.toUpperCase();;
    console.log(res);
    // 10. trim():删除二端空格
    pwd = "   root888    ";
    console.log(pwd.trim().length);
    // 11. search() 搜索特字符串，返回匹配位置
    res = str.search("PHP");
    console.log(res);
    // 12. replace() 替换在字符串中指定的值
    res = str.replace("PHP", "JAVA");
    console.log(res);