项目示例：待办事项列表应用

界面： 使用HTML和CSS创建一个用户友好的界面，包括输入框、添加按钮和待办事项列表。

 

html

Copy code

Todo List App   body {     font-family: Arial, sans-serif;   }   #todoInput {     width: 70%;     padding: 8px;   }   #addBtn {     padding: 8px 12px;     background-color: #4CAF50;     color: white;     border: none;   }   ul {     list-style-type: none;   }   li {     margin: 10px 0;     display: flex;     align-items: center;     justify-content: space-between;     padding: 5px;     border: 1px solid #ccc;   }   .completed {     text-decoration: line-through;   }   .actions {     display: flex;   }   .actions button {     margin-left: 5px;     padding: 2px 6px;     cursor: pointer;   }

Todo List App

重难点分析：

 

页面结构：在HTML中，我们创建了一个输入框和一个添加按钮，以及一个用于显示待办事项的无序列表（UL）。

 

样式美化：使用CSS样式为页面元素添加了一些装饰，包括输入框、按钮和待办事项列表的样式。

JavaScript 交互逻辑：当用户点击添加按钮时，我们获取输入框的值，创建一个新的待办事项列表项，并将其添加到列表中。

createTodoItem 函数负责创建包含待办事项和操作按钮的列表项。

添加按钮包括 "Complete"、"Edit" 和 "Delete" 按钮，每个按钮都附加了相应的事件处理函数。

"Complete" 按钮将切换列表项的 "completed" 类，以便标记为已完成。

"Edit" 按钮将允许用户编辑列表项的文本。

"Delete" 按钮将从列表中删除该项。

 

初学者建议：

逐步实现： 从基本功能开始，逐步添加更复杂的功能，不要一开始就陷入复杂的逻辑。

学习资源： 学习关于JavaScript事件、DOM操作和基本语法的教程，例如MDN Web Docs。

练习： 尝试自己编写代码，多做练习，加深对JavaScript的理解和掌握。

收获和体会：

对于我自己来说，道格拉斯·克罗克福德的《JavaScript语言精粹》对我的帮助很大

这本书是JS的经典之作之一。虽然这本书比较短，但它精深而扼要，适合初学者。这本书还可以帮助你更深入地了解JS语法，以及如何避免JS编写时常见的陷阱。

对于js交互的理解：

交互三步曲：找到对应的标签，添加事件，事件发生时的反馈

 

2.1 获取标签

通过id获取

语法：document.getElementById("id名")：获取到的是一个唯一标签

//1.通过id获取元素

var oSs = document.getElementById("ss");

//2.添加事件  标签.onclick = function(){  事件发生时要执行的操作  }

oSs.onclick = function(){

    alert("easy");

}

通过标签名获取

语法：

document.getElementsByTagName("标签名") ： 获取整个文档中对应标签名的标签

父元素.getElementsByTagName("标签名") ： 获取对应父元素中对应标签名的标签

//3.通过标签名获取元素:document.getElementsByTagName("标签名")

var oLis = document.getElementsByTagName("li");

console.log(oLis); //HTMLCollection(5)  元素集合

console.log(oLis.length); //5  获取元素集合的个数

console.log(oLis[2]); //通过下标获取元素，下标从0开始

//元素集合是一个整体，必须通过下标一个一个取出来使用

oLis[2].onclick = function(){

    alert("hello world");

}

oLis[1].onclick = function(){

    alert("hello world");

}

2.2 添加事件

 

事件：添加在标签上，可以被浏览器监听到的一些行为

 

语法：标签.事件 = function(){ 事件触发时执行 的代码 }

 

鼠标事件

 

onclick：点击

 

onmouseover/onmouseenter：鼠标移入(悬停)

 

onmoueout/onmouseleave：鼠标移出

 

onmousemove：鼠标移动

 

onmouseup：鼠标抬起

 

onmousedown：鼠标按下

 

ondblclick ： 双击

 

oncontextmenu：右击

 

//2.添加事件  标签.事件名 = function(){ 事件发生时执行的操作 }

oDiv.onclick = function(){

    console.log("pink");

}

 

//2.onmouseover：鼠标移入

oDiv.onmouseover = function(){

    console.log("鼠标移入");

}

2.3 js操作标签

 

样式：height width

2.3.1 操作标签内容

 

标签内容：开始标签和结束标签中间的都是标签内容

 

操作表单元素内容

 

获取内容： var 变量 = 表单元素.value

 

设置内容： 标签.value = "值"

 

//2.给button添加点击事件

oBtns[0].onclick = function(){

    //3.获取输入框的值  ：var 变量 = 表单元素.value

    var v = oInp.value;

    console.log(v);

}

//4.设置

oBtns[1].onclick = function(){

    // 设置内容： 标签.value = "值"

    oInp.value = "hello world";

}

 

//5.所有的表单元素都是  标签.value

var v = oSel.value;

console.log(v);

操作闭合标签内容

 

获取：var 变量 = 标签.innerHTML / 标签.innerText

 

设置：标签.innerHTML / 标签.innerText = “值”

 

innerHTML和innerText

 

都是操作闭合标签内容，都会覆盖原有的内容

innerHTML能识别标签，innerText不能识别标签

/*

  获取：var 变量 = 标签.innerHTML  /  标签.innerText

  设置：标签.innerHTM  /  标签.innerText = “值”

 

  innerHTML：识别标签,覆盖原有的内容

  innerText：只操作文本不识别标签,覆盖原有的内容

*/

//1.获取元素

var oDiv = document.getElementsByTagName("div")[0];

 

//2.获取标签内容

var html = oDiv.innerHTML;

console.log(html); //  

代码之难，难于上青天

var text = oDiv.innerText;

console.log(text); // 代码之难，难于上青天

 

//3.设置标签内容，覆盖原有内容

//oDiv.innerHTML = "

蚕丛及鱼凫，开国何茫然！

";

//oDiv.innerText = "

蚕丛及鱼凫，开国何茫然！

";

 

//4.追加    之前的 + 现在的

//oDiv.innerHTML = oDiv.innerHTML + "

蚕丛及鱼凫，开国何茫然！

";

oDiv.innerHTML += "

蚕丛及鱼凫，开国何茫然！

";

2.3.2 操作标签属性