网站首页 > 基础教程正文

javascript一个可以让你学会很多东西的实例「312」

ccvgpt 2024-10-09 09:06:23 基础教程 25 ℃

看过我【408】文章的人都知道，那是用jQuery写的，我觉得有必要用原生的javascript语句再把这个例子写一遍，更多的文章请关注我的头条号。

一、开始吧，先做一个输入框和一个按钮，记得给它们id。

二、在下面加个盒子，给它个class类名。

三、开始写javascript了，先取得三个元素对象，这就是dom。（对于dom不了解的朋友可以关注看我写的文【303】）。

四、添加按钮点击事件，试一下效果。（对于点击事件不了解的朋友可以看一下我写的文【305】）

五、我们把alert消息框去掉，改成插入html标签吧。

六、加个div，让插入的内容独立成行。

七、把输入框的内容通过span标签放进去。

八、每次输入新内容，还要把光标移到文本框，删除掉原先的文本，太麻烦，我们改一改。

九、经过第八步，效果好了许多了，我们开始添加三个按钮，分别是完成、取消、删除。

十、先试一下各个按钮的事件，看效果出来没有。

十一、在做“完成”按钮事件前，我们先做一个样式，就是给文字划线的样式。

十二、开始写“完成”按钮的点击事件，把划线样式加给span标签。

十三、接着做“取消”按钮，把样式给删除掉。

十四、最后做出“删除”按钮的事件。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .textdone{
 text-decoration: line-through;
 }
 </style>
</head>
<body>
 <input type="text" id="inp"><button id="btadd">添加</button>
 <div class="box"></div>
 <script>
 var ebtadd = document.querySelector("#btadd");
 var ebox = document.querySelector(".box");
 var einp = document.querySelector("#inp");
 ebtadd.onclick = function () {
 ebox.insertAdjacentHTML("beforeend",
 `<div>
 <button>完成</button><button>取消</button><button>删除</button>
 <span>` + einp.value + `</span>
 </div>
 `);
 // insertAdjacentHTML的具体用法，以后我专业写个文介绍一下。
 //这里的beforeend参数是指在box的结尾之前插入html
 einp.value = "";
 // 输入框内容为空
 einp.focus();
 // 输入框为光标焦点
 }
 // 以下是盒子box的点击事件
 ebox.onclick = function () {
 var tg = event.target;
 // 这里取得被点击的元素对象
 if (tg.innerHTML == "完成"){
 var tgkids = tg.parentElement.children;
 // 返回父节点的所有字节点对象的集合
 tgkids[3].classList.add("textdone");
 // span标签是集合的第四个
 }
 if (tg.innerHTML == "取消"){
 var tgkids = tg.parentElement.children;
 tgkids[3].classList.remove("textdone");
 }
 if (tg.innerHTML == "删除"){
 var tgpar = tg.parentElement;
 // 这里是取得父节点对象
 tgpar.remove();
 // 直接把父节点删除了，就删除一行了。
 }
 }
 </script>
</body>
</html>

上一篇： Webpack基础应用篇 -「9」管理资源(下)
下一篇：很多人不知道 Vue 中的组件就是一个函数

网站首页 > 基础教程 正文

javascript一个可以让你学会很多东西的实例「312」

猜你喜欢

网站首页 > 基础教程正文