Utilisez js dom et jquery pour implémenter des ajouts, suppressions et modifications simples

Utilisez js dom et jquery pour implémenter des ajouts, suppressions et modifications simples_jquery

WBOY

Libérer： 2016-05-16 16:36:36

original

1129 Les gens l'ont consulté

Le développement de logiciels consiste en fait à ajouter, supprimer, modifier et vérifier des données, et le développement frontal JavaScript ne fait pas exception. Aujourd'hui, j'ai appris l'utilisation simple du framework jquery. Je l'ai donc utilisé pour implémenter de simples ajouts, suppressions et modifications, puis j'ai utilisé le javascript original pour implémenter la même fonction afin de voir la puissance de jquery :

Le code est le suivant :

<!DOCTYPE html>
<html xmlns="http://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>

Copier après la connexion