使用js dom和jquery分別實(shí)現(xiàn)簡(jiǎn)單增刪改
軟件開發(fā)實(shí)際就是數(shù)據(jù)的增刪改查,javascript前端開發(fā)也不例外。今天學(xué)了jquery框架的簡(jiǎn)單使用。于是用它實(shí)現(xiàn)簡(jiǎn)單的增刪改,接著也用原始的javascript實(shí)現(xiàn)同樣的功能,以便看出jquery的強(qiáng)大:
代碼如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" src="jq/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ gaoliang(); var $seldel = undefined; var seldel = undefined; //高亮選中 function gaoliang() { $("li").click(function () { $("li").css( "backgroundColor", "red" ); this.style.backgroundColor = "yellow"; $seldel = $(this); seldel = this; }); } //使用jquery添加對(duì)象 $("#btnAdd1").click(function () { var input = window.prompt("輸入數(shù)據(jù)"); var $newli = $("<li>" + input + "</li>"); $newli.appendTo("#Ol"); gaoliang(); }); //使用dom元素添加對(duì)象 document.getElementById("btnAdd2").onclick = function () { var input = window.prompt("輸入數(shù)據(jù)"); var newli = document.createElement("li"); newli.innerHTML = input; document.getElementById("Ol").appendChild(newli); gaoliang(); } //使用jquery刪除對(duì)象 $("#btnDel1").click(function () { $seldel.remove(); }); //使用dom元素刪除對(duì)象 document.getElementById("btnDel2").onclick = function () { seldel.parentNode.removeChild(seldel); } //使用jquery插入數(shù)據(jù) $("#btnInsert1").click(function () { var input=window.prompt("輸入插入的數(shù)據(jù)"); var $newli=$("<li>"+ input+"</li>"); $newli.insertBefore($seldel); gaoliang(); }); //使用dom插入數(shù)據(jù) document.getElementById("btnInsert2").onclick = function () { var Ol = document.getElementById("Ol"); var input = window.prompt("輸入插入的數(shù)據(jù)"); var newli = document.createElement("li"); newli.innerHTML = input; Ol.insertBefore(newli, seldel); gaoliang(); } //使用jquery編輯選中的數(shù)據(jù) $("#btnEdit1").click(function () { var oldtxt = $seldel.html(); var $edit = $("<input id='btnE' type='text' value='" + oldtxt + "'/>"); $seldel.html($edit); $edit.focus(); $edit.blur(function () { var newtxt = $(this).val(); $seldel.html(newtxt); }); }); //使用dom編輯選中的數(shù)據(jù) document.getElementById("btnEdit2").onclick = function () { var edittext = document.createElement("input"); edittext.type = "text"; edittext.value = seldel.innerHTML;; seldel.innerHTML = ""; seldel.appendChild(edittext); edittext.focus(); edittext.onblur = function () { seldel.innerHTML = edittext.value; } } } ) </script> </head> <body> <ol id="Ol"> <li id="haha">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <input id="btnAdd1" type="button" value="jquery添加數(shù)據(jù)" /> <input id="btnAdd2" type="button" value="dom添加數(shù)據(jù)" /> <input id="btnDel1" type="button" value="jquery刪除數(shù)據(jù)" /> <input id="btnDel2" type="button" value="dom刪除數(shù)據(jù)" /> <input id="btnInsert1" type="button" value="jquery插入數(shù)據(jù)" /> <input id="btnInsert2" type="button" value="dom插入數(shù)據(jù)" /> <input id="btnEdit1" type="button" value="jquery編輯數(shù)據(jù)" /> <input id="btnEdit2" type="button" value="dom編輯數(shù)據(jù)" /> </body> </html>
- 詳解JS獲取HTML DOM元素的8種方法
- javascript 獲取HTML DOM父、子、臨近節(jié)點(diǎn)
- Js 獲取HTML DOM節(jié)點(diǎn)元素的方法小結(jié)
- 通過JS動(dòng)態(tài)創(chuàng)建一個(gè)html DOM元素并顯示
- JS添加或刪除HTML dom元素的方法實(shí)例分析
- JS中使用DOM來控制HTML元素
- JavaScript基于Dom操作實(shí)現(xiàn)查找、修改HTML元素的內(nèi)容及屬性的方法
- JavaScript操作HTML DOM節(jié)點(diǎn)的基礎(chǔ)教程
- JavaScript中對(duì)DOM節(jié)點(diǎn)的訪問、創(chuàng)建、修改、刪除
- JS常見DOM節(jié)點(diǎn)操作示例【創(chuàng)建 ,插入,刪除,復(fù)制,查找】
- JavaScript DOM元素常見操作詳解【添加、刪除、修改等】
- JavaScript 實(shí)現(xiàn)HTML DOM增刪改查操作的常見方法詳解
相關(guān)文章
jquery實(shí)現(xiàn)側(cè)邊彈出的垂直導(dǎo)航
這篇文章主要介紹了jquery動(dòng)畫特效結(jié)合css實(shí)現(xiàn)側(cè)邊彈出的垂直導(dǎo)航的方法及代碼分享,需要的朋友可以參考下2014-12-12jQuery中的CSS樣式屬性css()及width()系列大全
本文給大家分享jQuery的CSS樣式屬性css(),width()系列,offset()與position(),scrollLeft()與scrollTop()的相關(guān)知識(shí),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2021-08-08完美兼容各大瀏覽器的jQuery仿新浪圖文淡入淡出間歇滾動(dòng)特效
本文是作者學(xué)習(xí)jQuery之后練手之作,兼容各大瀏覽器,非常的精美實(shí)用,這里放出來給小伙伴們,有需要的直接拿走,別跟我客氣^_^2014-11-11Bookmarklet實(shí)現(xiàn)啟動(dòng)jQuery(模仿 云輸入法)
最近流行的 sogo云輸入法, QQ云輸入法,都用到了bookmarklet技術(shù)。2010-09-0930個(gè)經(jīng)典的jQuery代碼開發(fā)技巧
這篇文章主要介紹了30個(gè)經(jīng)典的jQuery代碼開發(fā)技巧,包含了常見屬性、方法、元素等的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12jQuery中的$是什么意思及 $. 和 $().的區(qū)別
這篇文章主要介紹了jQuery中的$是什么意思及 $. 和 $().的區(qū)別,需要的朋友可以參考下2018-04-04jQuery.fn和jQuery.prototype區(qū)別介紹
jQuery.fn和jQuery.prototype想必大家對(duì)它并不陌生吧,那么你們知道它們之間的區(qū)別嗎?在本文有個(gè)不錯(cuò)的示例大家可以參考下2013-10-10jQuery.Validate 使用筆記(jQuery Validation范例 )
學(xué)習(xí)jQuery Validation,于是手寫一公共范例,并收藏以便后用,里面附有測(cè)試代碼,需要的朋友一起來測(cè)試。2010-06-06