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

特羡慕写出这些特效的高级程序员。我想学习,可总是不知道怎么去思考,不知道怎么去逻辑。有时候也很着急,这些都不怕,幸好还有人教我,指点我,这是我比较幸运的。但是我过不了自己这关了,自己最大的缺点就是 逃避,不会做的就放弃了,不会了就不会了,也不敢问了。改,这个大缺点一定得改。以下,是洋哥指点我的学习技巧,思路清晰,效率也有很大的提高。。废话就不扯了,言归正传:
题目: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的用法 我还是不太懂。。。以后还需要仔细探究下。。。

(0)

相关推荐

  • 初学JavaScript第一章第1/2页

    JavaScript的数据类型 Number:整形,浮点型 String:字符型数据,JavaScript不区分单个字符和字符串, 任何字符或字符串都可以用又引号或单引号引起来. Boolean:布尔型 Undefined:未定义类型,用于不存在或者没有被赋初值的变量或对象的属性如: var name;此时的name即为Undefined Null:空值,一般将Undefined型和Null型等同对待 Function:函数,可以通过new操作符和构造函数Function()来动态创建所需要功能

  • 国外的为初学者写的JavaScript教程

    Embedding and including write and writeln Document object Message box Function Event handler Form Link Date Window Frame Embedding and including Let's first see a simple example: <html> <head> <title>This is a JavaScript example</titl

  • 走出JavaScript初学困境—js初学

    从开始接触JS这东西有一年时间了,心头总是有一些说不出来的苦闷.在论坛里也常常有人这么说.那么苦在何处呢?总是感觉学的不深入,一些简单的东西可以做但也是不能得心应手.能不能把这种苦再说的具体点儿呢?都说了是"说不出来的苦闷"怎么具体呀? 何为难言之隐?说不出来,不能具体,不能把问题落到实处就不能得到解决的办法.这就是难言之隐!我认为这也就是初学者的"困境".之所以要用"我认为"正好迎合了本文标题中的"心得"二字.如果能对大家有

  • 你有必要知道的10个JavaScript难点

    能够读懂这篇博客的JavaScript开发者,运气不会太差- 1. 立即执行函数 立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是创建函数的同时立即执行.它没有绑定任何事件,也无需等待任何异步操作: (function() { // 代码 // ... })(); function(){-}是一个匿名函数,包围它的一对括号将其转换为一个表达式,紧跟其后的一对括号调用了这个函数.立即执行函数也可以理解为立即调用一个匿名

  • javascript下数值型比较难点说明

    1.数字长长的,在c#里合法的长整型数字在javascript下竟然...... 看下面几行简单代码: 复制代码 代码如下: var a = 2010060612120909191; //按时间生成的Id1 var b = 2010060612120909199; //按时间生成的Id2 alert(a == b); //alert(a); //有什么惊人发现吗? //alert(b); //最后几位好像... //alert(Number(a) == Number(b)); //alert(p

  • JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析

    本文实例讲述了JS常见疑难点分析之match,charAt,charCodeAt,map,search用法.分享给大家供大家参考,具体如下: JavaScript match() 方法 定义和用法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. 该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置. 语法 匹配字符串,返回指定的值 stringObject.match(searchvalue) 匹配正则,返回指定

  • 初学JavaScript_03(ExtJs Grid的简单使用)

    <html> <head> <title>Ext中的Grid例子</title> <link rel="stylesheet" type="text/css" href="../AllRes/resources/css/ext-all.css"/> <script type="text/javascript" src="../AllRes/adapte

  • 初学js者对javascript面向对象的认识分析

    复制代码 代码如下: var obj = document.getElementById("name"); function clickMe() { alert(this.value); this.value += "!!!!"; alert(this.value); } var ActionBinder = function() {//定义一个类 } ActionBinder.prototype.registerDOM = function(doms) { thi

  • JavaScript初学者的10个迷你技巧第1/2页

    在之前的编程语言排行榜中,我们曾介绍过转正在即的JavaScript语言,正如文章中阐明的那样,JavaScript不仅是最具活力的脚本语言,还是是最有用的编程语言之一.因为绝大多数的浏览器都和它兼容,你可以在这些浏览器中使用它.JavaScript被接受的相当快,因为它是如此的简单,而且使用范围相当广泛.许多程序员过去常常认为JavaScript是一门"玩具语言",但是,AJAX进入市场后表现出了完全相反的一面,它让JavaScript展现出了完全不同的能力和功能. 由于这个发明的出

  • Javascript技术难点之apply,call与this之间的衔接

    1.apply定义 apply:调用函数,并用指定对象替换函数的 this 值,同时用指定数组替换函数的参数. 语法:apply([thisObj[,argArray]]) thisObj 可选.要用作 this 对象的对象. argArray 可选.要传递到函数的一组参数. 2.call定义 call:调用一个对象的方法,用另一个对象替换当前对象. 语法:call([thisObj[, arg1[, arg2[, [, argN]]]]]) thisObj 可选.将作为当前对象使用的对象. a

随机推荐