使用js dom和jquery分別實現(xiàn)簡單增刪改
軟件開發(fā)實際就是數(shù)據(jù)的增刪改查,javascript前端開發(fā)也不例外。今天學了jquery框架的簡單使用。于是用它實現(xiàn)簡單的增刪改,接著也用原始的javascript實現(xiàn)同樣的功能,以便看出jquery的強大:
代碼如下:
<!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添加對象 $("#btnAdd1").click(function () { var input = window.prompt("輸入數(shù)據(jù)"); var $newli = $("<li>" + input + "</li>"); $newli.appendTo("#Ol"); gaoliang(); }); //使用dom元素添加對象 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刪除對象 $("#btnDel1").click(function () { $seldel.remove(); }); //使用dom元素刪除對象 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é)點
- Js 獲取HTML DOM節(jié)點元素的方法小結(jié)
- 通過JS動態(tài)創(chuàng)建一個html DOM元素并顯示
- JS添加或刪除HTML dom元素的方法實例分析
- JS中使用DOM來控制HTML元素
- JavaScript基于Dom操作實現(xiàn)查找、修改HTML元素的內(nèi)容及屬性的方法
- JavaScript操作HTML DOM節(jié)點的基礎(chǔ)教程
- JavaScript中對DOM節(jié)點的訪問、創(chuàng)建、修改、刪除
- JS常見DOM節(jié)點操作示例【創(chuàng)建 ,插入,刪除,復制,查找】
- JavaScript DOM元素常見操作詳解【添加、刪除、修改等】
- JavaScript 實現(xiàn)HTML DOM增刪改查操作的常見方法詳解
相關(guān)文章
jQuery中的CSS樣式屬性css()及width()系列大全
本文給大家分享jQuery的CSS樣式屬性css(),width()系列,offset()與position(),scrollLeft()與scrollTop()的相關(guān)知識,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2021-08-08完美兼容各大瀏覽器的jQuery仿新浪圖文淡入淡出間歇滾動特效
本文是作者學習jQuery之后練手之作,兼容各大瀏覽器,非常的精美實用,這里放出來給小伙伴們,有需要的直接拿走,別跟我客氣^_^2014-11-11Bookmarklet實現(xiàn)啟動jQuery(模仿 云輸入法)
最近流行的 sogo云輸入法, QQ云輸入法,都用到了bookmarklet技術(shù)。2010-09-09jQuery中的$是什么意思及 $. 和 $().的區(qū)別
這篇文章主要介紹了jQuery中的$是什么意思及 $. 和 $().的區(qū)別,需要的朋友可以參考下2018-04-04jQuery.fn和jQuery.prototype區(qū)別介紹
jQuery.fn和jQuery.prototype想必大家對它并不陌生吧,那么你們知道它們之間的區(qū)別嗎?在本文有個不錯的示例大家可以參考下2013-10-10jQuery.Validate 使用筆記(jQuery Validation范例 )
學習jQuery Validation,于是手寫一公共范例,并收藏以便后用,里面附有測試代碼,需要的朋友一起來測試。2010-06-06