使用js dom和jquery分别实现简单增删改
软件开发实际就是数据的增删改查,javascript前端开发也不例外。今天学了jquery框架的简单使用。于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquery的强大:
代码如下:
<!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title></title> <scripttype="text/javascript"src="jq/jquery-1.9.1.js"></script> <scripttype="text/javascript"> $(function(){ gaoliang(); var$seldel=undefined; varseldel=undefined; //高亮选中 functiongaoliang(){ $("li").click(function(){ $("li").css( "backgroundColor","red" ); this.style.backgroundColor="yellow"; $seldel=$(this); seldel=this; }); } //使用jquery添加对象 $("#btnAdd1").click(function(){ varinput=window.prompt("输入数据"); var$newli=$("<li>"+input+"</li>"); $newli.appendTo("#Ol"); gaoliang(); }); //使用dom元素添加对象 document.getElementById("btnAdd2").onclick=function(){ varinput=window.prompt("输入数据"); varnewli=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(){ varinput=window.prompt("输入插入的数据"); var$newli=$("<li>"+input+"</li>"); $newli.insertBefore($seldel); gaoliang(); }); //使用dom插入数据 document.getElementById("btnInsert2").onclick=function(){ varOl=document.getElementById("Ol"); varinput=window.prompt("输入插入的数据"); varnewli=document.createElement("li"); newli.innerHTML=input; Ol.insertBefore(newli,seldel); gaoliang(); } //使用jquery编辑选中的数据 $("#btnEdit1").click(function(){ varoldtxt=$seldel.html(); var$edit=$("<inputid='btnE'type='text'value='"+oldtxt+"'/>"); $seldel.html($edit); $edit.focus(); $edit.blur(function(){ varnewtxt=$(this).val(); $seldel.html(newtxt); }); }); //使用dom编辑选中的数据 document.getElementById("btnEdit2").onclick=function(){ varedittext=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> <olid="Ol"> <liid="haha">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <inputid="btnAdd1"type="button"value="jquery添加数据"/> <inputid="btnAdd2"type="button"value="dom添加数据"/> <inputid="btnDel1"type="button"value="jquery删除数据"/> <inputid="btnDel2"type="button"value="dom删除数据"/> <inputid="btnInsert1"type="button"value="jquery插入数据"/> <inputid="btnInsert2"type="button"value="dom插入数据"/> <inputid="btnEdit1"type="button"value="jquery编辑数据"/> <inputid="btnEdit2"type="button"value="dom编辑数据"/> </body> </html>