Of Stack

Js dom and jquery are used to implement simple additions and deletions

  • 2020-03-30 03:55:55
  • OfStack

Software development is actually the data, javascript front-end development is no exception. Today you learned about the simple use of the jquery framework. So you use it to do simple additions and deletions, and then you use the original javascript to do the same, to see how powerful jquery is:

The code is as follows: 


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


//Is highlighted
function gaoliang() {

$("li").click(function () {
$("li").css(
"backgroundColor", "red"
);
this.style.backgroundColor = "yellow";
$seldel = $(this);

seldel = this;
});
}
//Add objects using jquery
$("#btnAdd1").click(function () {
var input = window.prompt(" The input data ");
var $newli = $("<li>" + input + "</li>");
$newli.appendTo("#Ol");
gaoliang();
});
//Use dom elements to add objects
document.getElementById("btnAdd2").onclick = function () {
var input = window.prompt(" The input data ");

var newli = document.createElement("li");
newli.innerHTML = input;
document.getElementById("Ol").appendChild(newli);
gaoliang();

}
//Use jquery to delete objects
$("#btnDel1").click(function () {
$seldel.remove();

});
//Use the dom element to delete the object
document.getElementById("btnDel2").onclick = function () {
seldel.parentNode.removeChild(seldel);

}
//Insert data using jquery
$("#btnInsert1").click(function () {
var input=window.prompt(" Enter the inserted data ");
var $newli=$("<li>"+ input+"</li>");

$newli.insertBefore($seldel);
gaoliang();
});
//Use the dom to insert data
document.getElementById("btnInsert2").onclick = function () {
var Ol = document.getElementById("Ol");
var input = window.prompt(" Enter the inserted data ");
var newli = document.createElement("li");
newli.innerHTML = input;
Ol.insertBefore(newli, seldel);



gaoliang();

}

//Edit the selected data using 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);
});


});
//Use the dom to edit the selected data
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 Add data " />
<input id="btnAdd2" type="button" value="dom Add data " />
<input id="btnDel1" type="button" value="jquery Delete the data " />
<input id="btnDel2" type="button" value="dom Delete the data " />
<input id="btnInsert1" type="button" value="jquery Insert data " />
<input id="btnInsert2" type="button" value="dom Insert data " />
<input id="btnEdit1" type="button" value="jquery Edit the data " />
<input id="btnEdit2" type="button" value="dom Edit the data " />
</body>
</html>
Related articles: