特羡慕写出这些特效的高级程序员。我想学习,可总是不知道怎么去思考,不知道怎么去逻辑。有时候也很着急,这些都不怕,幸好还有人教我,指点我,这是我比较幸运的。但是我过不了自己这关了,自己最大的缺点就是 逃避,不会做的就放弃了,不会了就不会了,也不敢问了。改,这个大缺点一定得改。以下,是洋哥指点我的学习技巧,思路清晰,效率也有很大的提高。。废话就不扯了,言归正传:
题目:btton 按钮 一个添加 一个删除 ,点击添加按钮就会添加一个节点,点击删除按钮就会删除最后一个节点,添加的新元素点击一下就会被删除。
步骤一: 分析思路 做好准备工作 (结构 行为 表现 分离既是 html结构 js脚本 css样式 分离)
首先:搭建html 结构,定义下css样式,写基本的脚本(由于js脚本与html结构是分离的 所以)。
复制代码 代码如下:
<div class="btns">
<input type="button" value="Add" id="addBtn"></input>
<input type="button" value="Remove" id="removeBtn"></input>
</div>
<div class="box" id="boxcon"></div>

js 分析:首先两个button 的onclick 事件,其次,把添加和删除都封装成 方法,以便调用函数,达到重用的目的。
复制代码 代码如下:
window.onload = function() {
addBtn.onclick = function() {}
removeBtn.onclick = function() {}
}

步骤二: 写个创建的方法:创建新节点
复制代码 代码如下:
function createEle() {
var newEle = document.createElement("div");// 定义新的元素节点变量
var newBtn = document.createElement("input");// 定义新的元素节点变量
var boxEle = document.getElementById ("boxcon");
//找到所要添加到里面的那个元素 既是上一级元素,这里用id标识符来查找
newEle.className="con";//赋予新建元素的属性 样式写在css里
newBtn.type ="button";
newBtn.value = " remove ";
boxEle.appendChild(newEle);// 把新建的节点 添加到boxcon里
}

步骤三: 写删除方法:删除元素。
复制代码 代码如下:
function removeEle(removeObj) {
removeObj.parentNode.removeChild(removeObj);
// 删除元素
}

步骤四:调用函数
复制代码 代码如下:
window.onload = function() {
addBtn.onclick = function() {
createEle();
}
removeBtn.onclick = function() {
var box = document.getElementById("boxcon");
removeEle(box.lastChild);
}
}

呵呵总算完成的差不多了, 别急 还有一个功能。最后的一个功能。。(添加的新元素点击一下就会被删除)
over了。。。呵呵 关于这个this的用法 我还是不太懂。。。以后还需要仔细探究下。。。
标签:
新节点,创建,删除

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“初学js 新节点的创建 删除 的步骤”

暂无“初学js 新节点的创建 删除 的步骤”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。