使用js dom和jquery分别实现简单增删改
程序员文章站
2023-11-11 18:03:04
软件开发实际就是数据的增删改查,javascript也不例外。今天学了jquery框架的简单使用。于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看...
软件开发实际就是数据的增删改查,javascript也不例外。今天学了jquery框架的简单使用。于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquery的强大:
代码如下:
<!doctype html> <html xmlns="https://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("输入数据"); 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='" + 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 = 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添加数据" /> <input id="btnadd2" type="button" value="dom添加数据" /> <input id="btndel1" type="button" value="jquery删除数据" /> <input id="btndel2" type="button" value="dom删除数据" /> <input id="btninsert1" type="button" value="jquery插入数据" /> <input id="btninsert2" type="button" value="dom插入数据" /> <input id="btnedit1" type="button" value="jquery编辑数据" /> <input id="btnedit2" type="button" value="dom编辑数据" /> </body> </html>
上一篇: Jenkins常用插件安装
下一篇: 2015:媒体(该)去哪了?