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

2019-11-20 14:09:25

字体：大中小

来源：转载

供稿：网友

软件开发实际就是数据的增删改查，javascript前端开发也不例外。今天学了jquery框架的简单使用。于是用它实现简单的增删改，接着也用原始的javascript实现同样的功能，以便看出jquery的强大：

代码如下：

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

上一篇：jQuery 复合选择器应用的几个例子

下一篇：sogou地图API用法实例教程