欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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