欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

初學js 新節(jié)點的創(chuàng)建 刪除 的步驟

 更新時間:2011年07月04日 23:26:57   作者:  
對于js 我是個初學者 甚至還不入門,我比較喜歡js做出的特效。
特羨慕寫出這些特效的高級程序員。我想學習,可總是不知道怎么去思考,不知道怎么去邏輯。有時候也很著急,這些都不怕,幸好還有人教我,指點我,這是我比較幸運的。但是我過不了自己這關了,自己最大的缺點就是 逃避,不會做的就放棄了,不會了就不會了,也不敢問了。改,這個大缺點一定得改。以下,是洋哥指點我的學習技巧,思路清晰,效率也有很大的提高。。廢話就不扯了,言歸正傳:
題目:btton 按鈕 一個添加 一個刪除 ,點擊添加按鈕就會添加一個節(jié)點,點擊刪除按鈕就會刪除最后一個節(jié)點,添加的新元素點擊一下就會被刪除。
步驟一: 分析思路 做好準備工作 (結構 行為 表現(xiàn) 分離既是 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() {}
}

步驟二: 寫個創(chuàng)建的方法:創(chuàng)建新節(jié)點
復制代碼 代碼如下:

function createEle() {
var newEle = document.createElement("div");// 定義新的元素節(jié)點變量
var newBtn = document.createElement("input");// 定義新的元素節(jié)點變量
var boxEle = document.getElementById ("boxcon");
//找到所要添加到里面的那個元素 既是上一級元素,這里用id標識符來查找
newEle.className="con";//賦予新建元素的屬性 樣式寫在css里
newBtn.type ="button";
newBtn.value = " remove ";
boxEle.appendChild(newEle);// 把新建的節(jié)點 添加到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如何刪除對象的某個屬性詳析

    JavaScript如何刪除對象的某個屬性詳析

    這篇文章主要給大家介紹了關于JavaScript如何刪除對象的某個屬性的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-05-05
  • JavaScript 面向對象與原型

    JavaScript 面向對象與原型

    這篇文章主要介紹了JavaScript 面向對象與原型,需要的朋友可以參考下
    2015-04-04
  • layer.js open 隱藏滾動條的例子

    layer.js open 隱藏滾動條的例子

    今天小編就為大家分享一篇layer.js open 隱藏滾動條的例子,具有很好的參考價值,希望對大家有所幫助。 一起跟隨小編過來看看吧
    2019-09-09
  • js同比例縮放圖片的小例子

    js同比例縮放圖片的小例子

    這篇文章介紹了js同比例縮放圖片的小例子,有需要的朋友可以參考一下
    2013-10-10
  • js實現(xiàn)抽獎的兩種方法

    js實現(xiàn)抽獎的兩種方法

    這篇文章主要為大家詳細介紹了js實現(xiàn)抽獎的兩種方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • js 本地預覽的簡單實現(xiàn)方法

    js 本地預覽的簡單實現(xiàn)方法

    本篇文章主要是對js本地預覽的簡單實現(xiàn)方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-02-02
  • 總結兩個Javascript的哈稀對象的一些編程技巧

    總結兩個Javascript的哈稀對象的一些編程技巧

    總結兩個Javascript的哈稀對象的一些編程技巧...
    2007-04-04
  • 利用JS將圖標字體渲染為圖片的方法詳解

    利用JS將圖標字體渲染為圖片的方法詳解

    在軟件開發(fā)中肯定要用到圖標,比如下圖的?Groove?音樂中就用到了許多圖標。一種獲取這些圖標的方法是把?Groove?音樂截個圖,然后熟練地開啟?Photoshop,開始摳圖。這種方式很遜,效率也很低。本文將利用JS將圖標字體渲染為圖片,需要的可以參考一下
    2022-05-05
  • 再論Javascript的類繼承

    再論Javascript的類繼承

    說到Javascript的類繼承,就必然離不開原型鏈,但只通過原型鏈實現(xiàn)的繼承有著不少缺陷。
    2011-03-03
  • 解析微信JS-SDK配置授權,實現(xiàn)分享接口

    解析微信JS-SDK配置授權,實現(xiàn)分享接口

    這篇文章是微信開發(fā)的很多前置條件,包括了服務端基于JAVA的獲取和緩存全局的access_token,獲取和緩存全局的jsapi_ticket,以及前端配置授權組件封裝,調用分享組件封裝。需要的朋友可以看下
    2016-12-12

最新評論