jQuery實現的對元素的增刪改查程式碼例項

admin發表於2017-04-01
jQuery

本章節介紹一段程式碼例項，它實現了dom元素的新增、刪除和編輯其中內容的功能。

下面就詳細介紹一下它的實現過程。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
Ol{
  width:500px;
  font-size:12px;
  line-height:25px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  hight();
  var $seldel = undefined;
  var seldel = undefined;
  
  //高亮選中
  function hight(){
    $("li").click(function(){
      $("li").css("backgroundColor", "#ccc");
      this.style.backgroundColor = "green";
      $seldel=$(this);
      seldel=this;
    });
  }
  //使用jquery新增物件
  $("#btnAdd").click(function(){
    var input = window.prompt("輸入資料");
    var $newli = $("<li>" + input + "</li>");
    $newli.appendTo("#Ol");
    hight();
  });
   
  //使用jquery刪除物件
  $("#btnDel").click(function(){
    $seldel.remove(); 
  });
   
  //使用jquery插入資料
  $("#btnInsert").click(function(){
    var input=window.prompt("輸入插入的資料");
    var $newli=$("<li>"+ input+"</li>");
    $newli.insertBefore($seldel);
    hight();
  });
   
  //使用jquery編輯選中的資料
  $("#btnEdit").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);
    });
  });
})
</script>
</head>
<body>
<ol id="Ol">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ol>
<input id="btnAdd" type="button" value="新增資料" />
<input id="btnDel" type="button" value="刪除資料" />
<input id="btnInsert" type="button" value="插入資料" />
<input id="btnEdit" type="button" value="編輯資料" />
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

程式碼註釋:

1.$(function(){})，當dom結構完全載入完畢再去執行函式中的程式碼。

2.hight()，執行此函式可以為每一個li註冊事件處理函式，也就是實現了點選高亮效果。3.var $seldel = undefined，建立一個變數並賦值為undefined，它是用來儲存當前選中元素的jquery物件。

4.function hight(){}，此函式可以實現選中當前li高亮效果。

5.$("li").click(function(){

  $("li").css("backgroundColor", "#ccc");

  this.style.backgroundColor = "green";

  $seldel=$(this);

})，為li註冊click事件處理函式。

當點選li的時候，能夠所有li的背景顏色設定為#ccc，當前被點選li的背景顏色為綠色。

同時將$seldel賦值為當前點選選中的li元素，這裡是個jquery物件。

6.$("#btnAdd").click(function(){})，為按鈕註冊click事件處理函式，可以實現新增新的li元素效果。

7.var input = window.prompt("輸入資料")，呼叫prompt()函式，可以彈出輸入框效果，返回值就是輸入的值。

8.var $newli = $("<li>" + input + "</li>")，建立一個新的li元素，內容設定為上面輸入的值。

9.$newli.appendTo("#Ol")，將新的li元素追加到ol中。

10.hight()，再進行一次註冊事件處理函式，否則新增的元素沒有點選高亮選中效果。

11.$("#btnDel").click(function(){$seldel.remove()})，點選刪除按鈕可以刪除當前選中的高亮的li。

12.$("#btnInsert").click(function(){

  var input=window.prompt("輸入插入的資料");

  var $newli=$("<li>"+ input+"</li>");

  $newli.insertBefore($seldel);

  hight();

})，為插入按鈕註冊click事件處理函式。

點選此按鈕可以將新的li元素插入到高亮li元素之前。

13.$("#btnEdit").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);

  });

})，為編輯按鈕註冊click事件處理函式。

點選此按鈕可以實現編輯儲存效果。

var oldtxt=$seldel.html()，獲取選中li元素中的html內容。

var $edit=$("<input id='btnE' type='text' value='" + oldtxt + "'/>")，建立一個文字框，並將之設定為選中li元素中的內容。

seldel.html($edit)，將當前li元素的內容設定為$edit。

$edit.focus()，讓文字框獲取焦點。

$edit.blur(function(){

  var newtxt = $(this).val();

  $seldel.html(newtxt);

})，焦點離開後，獲取文字框的值，並將其設定為li的內容。

相關文章