初学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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
JavaScript 指导方针
Apr 05 Javascript
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
Javascript 遍历对象中的子对象
Jul 03 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
初学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
星际玩家的三大定律
2020/03/04 星际争霸
解决CodeIgniter伪静态失效
2014/06/09 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
Python删除空文件和空文件夹的方法
2015/07/14 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
python实现银行管理系统
2019/10/25 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
中学生校园广播稿
2014/01/16 职场文书
保密普查工作实施方案
2014/02/25 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
团结主题班会
2015/08/13 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
个人售房合同协议书
2016/03/21 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库