首页 > 代码库 > 使用dom元素和jquery元素实现简单增删改的练习
使用dom元素和jquery元素实现简单增删改的练习
软件开发实际就是数据的增删改查，javascript前端开发也不例外。今天学了jquery框架的简单使用。于是用它实现简单的增删改，接着也用原始的javascript实现同样的功能，以便看出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="http://www.mamicode.com/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("输入数据"); var $newli = $("<li>" + input + "</li>"); $newli.appendTo("#Ol"); gaoliang(); }); //使用dom元素添加对象 document.getElementById("btnAdd2").onclick = function () { var input = window.prompt("输入数据"); 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插入数据 $("#btnInsert1").click(function () { var input=window.prompt("输入插入的数据"); var $newli=$("<li>"+ input+"</li>"); $newli.insertBefore($seldel); gaoliang(); }); //使用dom插入数据 document.getElementById("btnInsert2").onclick = function () { var Ol = document.getElementById("Ol"); var input = window.prompt("输入插入的数据"); var newli = document.createElement("li"); newli.innerHTML = input; Ol.insertBefore(newli, seldel); gaoliang(); } //使用jquery编辑选中的数据 $("#btnEdit1").click(function () { var oldtxt = $seldel.html(); var $edit = $("<input id=‘btnE‘ type=‘text‘ value=http://www.mamicode.com/‘" + oldtxt + "‘/>"); $seldel.html($edit); $edit.focus(); $edit.blur(function () { var newtxt = $(this).val(); $seldel.html(newtxt); }); }); //使用dom编辑选中的数据 document.getElementById("btnEdit2").onclick = function () { var edittext = document.createElement("input"); edittext.type = "text"; edittext.value = http://www.mamicode.com/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="http://www.mamicode.com/jquery添加数据" /> <input id="btnAdd2" type="button" value="http://www.mamicode.com/dom添加数据" /> <input id="btnDel1" type="button" value="http://www.mamicode.com/jquery删除数据" /> <input id="btnDel2" type="button" value="http://www.mamicode.com/dom删除数据" /> <input id="btnInsert1" type="button" value="http://www.mamicode.com/jquery插入数据" /> <input id="btnInsert2" type="button" value="http://www.mamicode.com/dom插入数据" /> <input id="btnEdit1" type="button" value="http://www.mamicode.com/jquery编辑数据" /> <input id="btnEdit2" type="button" value="http://www.mamicode.com/dom编辑数据" /></body></html>
使用dom元素和jquery元素实现简单增删改的练习
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。