初学js 新节点的创建 删除 的步骤


Posted in Javascript onJuly 04, 2011

特羡慕写出这些特效的高级程序员。我想学习,可总是不知道怎么去思考,不知道怎么去逻辑。有时候也很着急,这些都不怕,幸好还有人教我,指点我,这是我比较幸运的。但是我过不了自己这关了,自己最大的缺点就是 逃避,不会做的就放弃了,不会了就不会了,也不敢问了。改,这个大缺点一定得改。以下,是洋哥指点我的学习技巧,思路清晰,效率也有很大的提高。。废话就不扯了,言归正传:
题目: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的用法 我还是不太懂。。。以后还需要仔细探究下。。。
Javascript 相关文章推荐
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 #Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 #Javascript
js静态方法与实例方法分析
Jul 04 #Javascript
JavaScript 变量作用域分析
Jul 04 #Javascript
JavaScript XML和string相互转化实现代码
Jul 04 #Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 #Javascript
jQuery 对Select的操作备忘记录
Jul 04 #Javascript
You might like
解析php中curl_multi的应用
2013/07/17 PHP
php中explode函数用法分析
2014/11/15 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
offsetParent 算法分析
2010/04/05 Javascript
JS的反射问题
2010/04/07 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
Python实现获取网站PR及百度权重
2015/01/21 Python
python实现批量改文件名称的方法
2015/05/25 Python
Django 路由系统URLconf的使用
2018/10/11 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
最热门的自我评价
2013/12/30 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
2015年仓库工作总结
2015/04/09 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS