事件代理:
样式代码:
<body> <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ul> <script> //事件代理: 也叫"事件委托" const lis = document.querySelectorAll("li"); document.querySelector("ul").addEventListener("click", ev => { //事件绑定者 console.log(ev.currentTarget); //事件触发者,通常是"事件绑定者"的子元素 console.log(ev.target.innerHTML); }); </script></body>
效果预览:
留言板:
样式代码:
<body> <label>请留言: <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表示按下的键名 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>
效果预览:
常用字符串方法:
// 1. concat()拼装 let str = "html".concat(" css ", "php !", 888); console.log(str); str = "html css php !"; console.log(str); // 2. slice(start, end):取子串 str = "hello php.cn"; let res = str.slice(0, 5); console.log(res); //默认全部拿出来 res = str.slice(0); console.log(res); res = str.slice(6); console.log(res); res = str.slice(-6); console.log(res); res = str.slice(-6, 9); console.log(res); // 正方向从0开始,反方向从-1开始 res = str.slice(-6, -3); console.log(res); //3. substr(start, length) res = str.substr(0, 5); console.log(res); res = str.substr(-6, 3); console.log(res); // 4. trim():删除二端空格 let psw = " root888 "; console.log(psw.length); psw = " root888 "; console.log(psw.trim().length); // 5. 将字符串打成数组 res = str.split(""); console.log(res); // 比如说从邮箱中解析出用户和和邮箱地址 res = "admin@php.cn".split("@"); console.log(res[0]); console.log(res[1]);</script>
效果预览:
