初学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中实现trim()函数的两种方法
Feb 04 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
JS触摸与手势事件详解
May 09 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
react build 后打包发布总结
Aug 24 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
js实现全选和全不选
Jul 28 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
初学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中几种常见安全设置详解
2010/04/06 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
JavaScript 题型问答有答案参考
2010/02/17 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
Python玩转Excel的读写改实例
2019/02/22 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
python3代码中实现加法重载的实例
2020/12/03 Python
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
如何利用find命令查找文件
2016/11/18 面试题
医科大学生毕业的自我评价分享
2013/11/12 职场文书
党校培训思想汇报
2013/12/30 职场文书
小学教师办公室制度
2014/02/03 职场文书
文明寝室申报材料
2014/05/12 职场文书
企业总经理任命书
2014/06/05 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书