使用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>