title: 【原生javascript我的项目】Go list 10
date: 2022-01-09 20:27:51
tags: 原生javascript我的项目
categories: 30个原生javascript我的项目
作者：©Iaine 万一
简介：30 Day Challenge是 Wes Bos 设计的一个 30 天原生js编程挑战。我的项目收费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。本我的项目为第10天的“待办清单”我的项目，我减少了 双击删除工作 、增加工作的性能。Have fun with the website! ♪(^∇^*)
网页成果：https://janice143.github.io/g…
我的项目形容
利用一些 checkbox 类型的 input 元素，通过在js中实现特定性能，而设计的待办清单网页。在网页中，能够通过点击checkbox来标记工作状态，通过按住shift键能够对工作实现多项check。也能够通过点击增加来减少工作，实现的工作能够通过双击实现删除。
我的项目重点
-
类型为checkbox的input元素的点击事件，回调函数为
clickCheck- e.shiftKey
- this.checked
- 标记上一次点击的input，以及多选外部的Input
-
类型为text的input元素的change事件，回调函数为
displayTask- 应用createElement创立元素
- 应用append来在指定结点后增加html
- 输出文本回车后状况文本，this.value = ”
- 监听双击事件，移除工作
-
checkbox前面的文本双击事件，回调函数为
removeTask- e.path[1].remove()
我的项目过程
html局部
- 输出文本框input
- 定位在文本框上的div元素，点击后display: none
- 四个类名为task-item是checkbox和工作文本p
- 新添工作的占位标签，新增加的工作将会append在这里
Js局部
-
获取类型为checkbox的所有input，遍历点击事件
- 点击事件为
clickCheck - 多选操作的原理
- 点击事件为
if(e.shiftKey && this.checked)
inputChecks.forEach(inputCheck => {
console.log(inputCheck === this || inputCheck === lastChecked);
if (inputCheck === this || inputCheck === lastChecked) {
inBetween = !inBetween;
// console.log('Starting to check them in between!');
}
// console.log('行内是否',inBetween);
if (inBetween) {
inputCheck.checked = true;
}
})-
获取所有p元素，遍历双击事件
- 双击事件为
removeTask - 找到对应的工作门路，remove即可
- 双击事件为
function removeTask(e){
console.log(e.path[1].remove());
}-
获取类名为add-icon的元素，监听点击事件，点击暗藏
-
使页面元素暗藏和显示能够有两种形式：
- 形式1：设置元素style属性中的display
var t = document.getElementById('test');//选取id为test的元素 t.style.display = 'none'; // 暗藏抉择的元素 t.style.display = 'block'; // 以块级款式显示- 形式2：设置元素style属性中的visibility
var t = document.getElementById('test'); t.style.visibility = 'hidden'; // 暗藏元素 t.style.visibility = 'visible'; // 显示元素
-
二者的区别在于设置display暗藏后不占用原来的地位，而visibility暗藏后元素地位任然被占用。
-
获取类型为text的input元素，监听change事件
- change事件调用
displayTask -
动静插入html
- 应用createElement创立元素
- 应用append挂载元素
- 监听双击事件
function displayTask(){ // 应用createElement创立元素 const newTaskItem = document.createElement('div'); newTaskItem.className = 'new-task-item'; const html = ` <div class="task-item"> <input type="checkbox"> <p>${this.value}</p> </div> `; newTaskItem.innerHTML = html; newTask.append(newTaskItem); // console.log(newTask); // console.log(html); this.value = '' newTaskItem.addEventListener('dblclick',removeTask) } - change事件调用
CSS局部
:checked选择器- 紧邻兄弟组合器：A
+B 组合器抉择相邻元素，即后一个元素B紧跟在前一个A之后，并且共享同一个父节点 - 增加删除线 text-decoration: line-through;
我的项目知识点
DOM 树
DOM为文档对象模型，每个 HTML 标签都是一个对象。
DOM 将 HTML 示意为标签的树形构造。标签被称为 元素节点（或者仅仅是元素），并造成了树状构造：<html> 在根节点，<head> 和 <body> 是其子项，等。元素内的文本造成 文本节点，被标记为 ＃text。一个文本节点只蕴含一个字符串。它没有子项，并且总是树的叶子。
利用JS批改文档
-
创立一个元素（DOM节点）
document.createElement(tag)创立一个新 元素节点（element node）document.createTextNode(text)创立一个 文本节点
- 创立
div分为 3 个步骤：
// 1. 创立 <div> 元素
let div = document.createElement('div');
// 2. 将元素的类设置为 "alert"
div.className = "alert";
// 3. 填充音讯内容
div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";这时曾经创立了该元素。但到目前为止，它还只是在一个名为 div 的变量中，尚未在页面中。所以咱们无奈在页面上看到它。
-
append挂载元素为了让
div显示进去，咱们须要将其插入到document中的某处。append：document.body.append(div)。node.append(...nodes or strings)—— 在node开端 插入节点或字符串，node.prepend(...nodes or strings)—— 在node结尾 插入节点或字符串，node.before(...nodes or strings)—— 在node后面 插入节点或字符串，node.after(...nodes or strings)—— 在node前面 插入节点或字符串，node.replaceWith(...nodes or strings)—— 将node替换为给定的节点或字符串。
JS30的第10个我的项目圆满完成啦，尽管对原我的项目做了一些改良，然而整体上也实现了一些我本人的独特性能。PS：两头跳了第7和9个我的项目，如果有工夫我前面会补上滴！
感激浏览，有问题分割我的邮箱1803105538@qq.com.
发表回复