初学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 相关文章推荐
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
js的回调函数详解
Jan 05 Javascript
Sort()函数的多种用法
Mar 20 Javascript
js实现图片360度旋转
Jan 22 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 Javascript
详解vue v-model
Aug 31 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中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
js实现左右轮播图
2020/01/09 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
Django实现跨域请求过程详解
2019/07/25 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
关于python中的xpath解析定位
2020/03/06 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
LINUX下线程,GDI类的解释
2016/12/14 面试题
本科毕业生的求职信范文
2013/11/20 职场文书
便利店投资的创业计划书
2014/01/12 职场文书
住宅质量保证书
2014/04/29 职场文书
公司应聘求职信
2014/06/21 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
元旦主持词开场白
2015/05/29 职场文书
父亲节感言
2015/08/03 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python