关于javascript:JS30Wes-Bos待办清单-10

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()

输出文本框 input
定位在文本框上的 div 元素，点击后 display: none
四个类名为 task-item 是 checkbox 和工作文本 p
新添工作的占位标签，新增加的工作将会 append 在这里

获取类型为 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)
}

:checked 选择器
紧邻兄弟组合器：A+ B 组合器抉择相邻元素，即后一个元素 B 紧跟在前一个 A 之后，并且共享同一个父节点
增加删除线 text-decoration: line-through;

DOM 为文档对象模型，每个 HTML 标签都是一个对象。

DOM 将 HTML 示意为标签的树形构造。标签被称为 元素节点 （或者仅仅是元素），并造成了树状构造：<html> 在根节点，<head> 和 <body> 是其子项，等。元素内的文本造成 文本节点，被标记为 #text。一个文本节点只蕴含一个字符串。它没有子项，并且总是树的叶子。

创立一个元素（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.

关于javascript:JS30Wes-Bos待办清单-10

我的项目形容

我的项目过程

html 局部

Js 局部

CSS 局部

我的项目知识点

DOM 树

利用 JS 批改文档