初学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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
js实现时钟定时器
Mar 26 Javascript
JavaScript链式调用原理与实现方法详解
May 16 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 数组之count 函数
2016/06/13 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
python自动发送邮件脚本
2018/06/20 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
英国著名药妆店:Superdrug
2021/02/13 全球购物
医药营销专业个人自荐信
2013/09/29 职场文书
初中家长寄语
2014/04/02 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
付款承诺函范文
2015/01/21 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB