初學(xué)js 新節(jié)點(diǎn)的創(chuàng)建 刪除 的步驟
更新時(shí)間:2011年07月04日 23:26:57 作者:
對于js 我是個(gè)初學(xué)者 甚至還不入門,我比較喜歡js做出的特效。
特羨慕寫出這些特效的高級程序員。我想學(xué)習(xí),可總是不知道怎么去思考,不知道怎么去邏輯。有時(shí)候也很著急,這些都不怕,幸好還有人教我,指點(diǎn)我,這是我比較幸運(yùn)的。但是我過不了自己這關(guān)了,自己最大的缺點(diǎn)就是 逃避,不會做的就放棄了,不會了就不會了,也不敢問了。改,這個(gè)大缺點(diǎn)一定得改。以下,是洋哥指點(diǎn)我的學(xué)習(xí)技巧,思路清晰,效率也有很大的提高。。廢話就不扯了,言歸正傳:
題目:btton 按鈕 一個(gè)添加 一個(gè)刪除 ,點(diǎn)擊添加按鈕就會添加一個(gè)節(jié)點(diǎn),點(diǎn)擊刪除按鈕就會刪除最后一個(gè)節(jié)點(diǎn),添加的新元素點(diǎn)擊一下就會被刪除。
步驟一: 分析思路 做好準(zhǔn)備工作 (結(jié)構(gòu) 行為 表現(xiàn) 分離既是 html結(jié)構(gòu) js腳本 css樣式 分離)
首先:搭建html 結(jié)構(gòu),定義下css樣式,寫基本的腳本(由于js腳本與html結(jié)構(gòu)是分離的 所以)。
<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 分析:首先兩個(gè)button 的onclick 事件,其次,把添加和刪除都封裝成 方法,以便調(diào)用函數(shù),達(dá)到重用的目的。
window.onload = function() {
addBtn.onclick = function() {}
removeBtn.onclick = function() {}
}
步驟二: 寫個(gè)創(chuàng)建的方法:創(chuàng)建新節(jié)點(diǎn)
function createEle() {
var newEle = document.createElement("div");// 定義新的元素節(jié)點(diǎn)變量
var newBtn = document.createElement("input");// 定義新的元素節(jié)點(diǎn)變量
var boxEle = document.getElementById ("boxcon");
//找到所要添加到里面的那個(gè)元素 既是上一級元素,這里用id標(biāo)識符來查找
newEle.className="con";//賦予新建元素的屬性 樣式寫在css里
newBtn.type ="button";
newBtn.value = " remove ";
boxEle.appendChild(newEle);// 把新建的節(jié)點(diǎn) 添加到boxcon里
}
步驟三: 寫刪除方法:刪除元素。
function removeEle(removeObj) {
removeObj.parentNode.removeChild(removeObj);
// 刪除元素
}
步驟四:調(diào)用函數(shù)
window.onload = function() {
addBtn.onclick = function() {
createEle();
}
removeBtn.onclick = function() {
var box = document.getElementById("boxcon");
removeEle(box.lastChild);
}
}
呵呵總算完成的差不多了, 別急 還有一個(gè)功能。最后的一個(gè)功能。。(添加的新元素點(diǎn)擊一下就會被刪除)
over了。。。呵呵 關(guān)于這個(gè)this的用法 我還是不太懂。。。以后還需要仔細(xì)探究下。。。
題目:btton 按鈕 一個(gè)添加 一個(gè)刪除 ,點(diǎn)擊添加按鈕就會添加一個(gè)節(jié)點(diǎn),點(diǎn)擊刪除按鈕就會刪除最后一個(gè)節(jié)點(diǎn),添加的新元素點(diǎn)擊一下就會被刪除。
步驟一: 分析思路 做好準(zhǔn)備工作 (結(jié)構(gòu) 行為 表現(xiàn) 分離既是 html結(jié)構(gòu) js腳本 css樣式 分離)
首先:搭建html 結(jié)構(gòu),定義下css樣式,寫基本的腳本(由于js腳本與html結(jié)構(gòu)是分離的 所以)。
復(fù)制代碼 代碼如下:
<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 分析:首先兩個(gè)button 的onclick 事件,其次,把添加和刪除都封裝成 方法,以便調(diào)用函數(shù),達(dá)到重用的目的。
復(fù)制代碼 代碼如下:
window.onload = function() {
addBtn.onclick = function() {}
removeBtn.onclick = function() {}
}
步驟二: 寫個(gè)創(chuàng)建的方法:創(chuàng)建新節(jié)點(diǎn)
復(fù)制代碼 代碼如下:
function createEle() {
var newEle = document.createElement("div");// 定義新的元素節(jié)點(diǎn)變量
var newBtn = document.createElement("input");// 定義新的元素節(jié)點(diǎn)變量
var boxEle = document.getElementById ("boxcon");
//找到所要添加到里面的那個(gè)元素 既是上一級元素,這里用id標(biāo)識符來查找
newEle.className="con";//賦予新建元素的屬性 樣式寫在css里
newBtn.type ="button";
newBtn.value = " remove ";
boxEle.appendChild(newEle);// 把新建的節(jié)點(diǎn) 添加到boxcon里
}
步驟三: 寫刪除方法:刪除元素。
復(fù)制代碼 代碼如下:
function removeEle(removeObj) {
removeObj.parentNode.removeChild(removeObj);
// 刪除元素
}
步驟四:調(diào)用函數(shù)
復(fù)制代碼 代碼如下:
window.onload = function() {
addBtn.onclick = function() {
createEle();
}
removeBtn.onclick = function() {
var box = document.getElementById("boxcon");
removeEle(box.lastChild);
}
}
呵呵總算完成的差不多了, 別急 還有一個(gè)功能。最后的一個(gè)功能。。(添加的新元素點(diǎn)擊一下就會被刪除)
over了。。。呵呵 關(guān)于這個(gè)this的用法 我還是不太懂。。。以后還需要仔細(xì)探究下。。。
您可能感興趣的文章:
- JS常見疑難點(diǎn)分析之match,charAt,charCodeAt,map,search用法分析
- Javascript技術(shù)難點(diǎn)之a(chǎn)pply,call與this之間的銜接
- javascript下數(shù)值型比較難點(diǎn)說明
- 初學(xué)JavaScript_03(ExtJs Grid的簡單使用)
- 初學(xué)js者對javascript面向?qū)ο蟮恼J(rèn)識分析
- 國外的為初學(xué)者寫的JavaScript教程
- 走出JavaScript初學(xué)困境—js初學(xué)
- 初學(xué)JavaScript第一章
- JavaScript初學(xué)者的10個(gè)迷你技巧
- 你有必要知道的10個(gè)JavaScript難點(diǎn)
相關(guān)文章
總結(jié)兩個(gè)Javascript的哈稀對象的一些編程技巧
總結(jié)兩個(gè)Javascript的哈稀對象的一些編程技巧...2007-04-04解析微信JS-SDK配置授權(quán),實(shí)現(xiàn)分享接口
這篇文章是微信開發(fā)的很多前置條件,包括了服務(wù)端基于JAVA的獲取和緩存全局的access_token,獲取和緩存全局的jsapi_ticket,以及前端配置授權(quán)組件封裝,調(diào)用分享組件封裝。需要的朋友可以看下2016-12-12