提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

使用jsdom和jquery分别实现简单增删改

jQuery 实现 使用 简单 增删 分别 JSDOM
2023-06-13 09:15:45 时间

软件开发实际就是数据的增删改查，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>

相关文章