DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 使用js dom和jquery分別實現簡單增刪改
使用js dom和jquery分別實現簡單增刪改
編輯:JQuery特效代碼     

軟件開發實際就是數據的增刪改查,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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved