Heim > Artikel > Web-Frontend > Verwenden Sie js dom und jquery, um einfache Hinzufügungen, Löschungen und Änderungen zu implementieren_jquery

Verwenden Sie js dom und jquery, um einfache Hinzufügungen, Löschungen und Änderungen zu implementieren_jquery

WBOYOriginal: 2016-05-16 16:36:361086Durchsuche

Softwareentwicklung ist eigentlich das Hinzufügen, Löschen, Ändern und Überprüfen von Daten, und die JavaScript-Frontend-Entwicklung bildet da keine Ausnahme. Heute habe ich die einfache Verwendung des JQuery-Frameworks gelernt. Also habe ich es verwendet, um einfache Hinzufügungen, Löschungen und Änderungen zu implementieren, und dann das Original-Javascript verwendet, um dieselbe Funktion zu implementieren, um die Leistungsfähigkeit von jquery zu sehen:

Der Code lautet wie folgt:

<!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>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zeigen Sie den JS-Code für große Bilder automatisch an, nachdem Sie die Maus drei Sekunden lang bewegt haben_Javascript-KenntnisseNächster Artikel：Zeigen Sie den JS-Code für große Bilder automatisch an, nachdem Sie die Maus drei Sekunden lang bewegt haben_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen