大家都知道用angular或者vue來進行數據的循環並操作數據很簡單，最近試了試用jquery來進行數據的操縱，了解一下底層的原理。
工作中用到后台提供的接口並處理得到的json數據，然后展現到頁面上，這時候用戶可以通過一些交互來操作自己的一些數據。而我們就需要寫出一系列處理這些數據的代碼。
歸根結底，就是通過方法來操作array數組來進行數據的增改。也就是說用戶通過某一個操作 我們通過一些列事件最后來對數組就行操作。以下是純jquery來進行數據的增加與刪除。
沒有規定太多樣式，只寫了一些功能。
上代碼；html部分：
<div class="box">
<ul>
</ul>
<button class='btnadd'>添加</button>
</div>
<div class="addarr">
<div class="addtitle">
添加名字
</div>
<lable>
姓名：<input type="text" id='name'/>
</lable>
<lable>
年齡：<input type="number" id='age'/>
</lable>
<button class='btnsure'>
確定
</button>
<button class='btncal'>
取消
</button>
</div>
</div>
js部分
var arr1=[
{name:'張三','age':'18'},
{name:'李四','age':'16'},
{name:'王五','age':'19'},
]
//這個數組該是后台傳給我的
function getarry(){
$('.box ul li').remove();
for(var i=0;i<arr1.length;i++){
$('.box ul').append("<li>"+'姓名：'+arr1[i].name+'年齡：'+arr1[i].age+'<span class="del">刪除</span>'+"</li>");
} ;
}
getarry(); //先把數據給輸出到頁面上
$(".btnadd").click(function(){
$(".addarr").show();
});
//點擊出現添加框
$(".btnsure").click(function(){
var name=$('#name').val();
var age=$("#age").val();
var obj1={"name":name,'age':age};
arr1.push(obj1);
getarry();
$('#name').val("");
$("#age").val("");
$(".addarr").hide();
})
//點擊確定將名字添加到數組中並展現到頁面上
$(".btncal").on('click',function(){
$('.addarr').hide();
})
//取消添加
$('body').delegate('.del','click',function(){
console.log("gjlkjg");
var index=$(this).parent('li').index();
arr1.splice(index,1);
getarry();
})
其總思路是：先拿到服務器給到我們的json數據，我這里給定了一個假數組，然后用jquery進行一個循環輸出到頁面上。之后點擊添加的時候，會出現添加框，然后輸入名字，之后再push到數組里，將輸出的數據清空再循環輸出一遍。刪除的時候就選擇到當前元素的下標，對應到數組的長度，用splic的方法進行刪除操作並重現執行我寫好的輸出函數。
其中遇到一個問題就是對於用js添加出的標簽，我無法讓他綁定事件。通過$('body').delegate('.del','click',function(){})這個方法綁定到事件並解決了這個問題。
這個函數的理解就是通過冒泡機制來解決這個問題，就是說通過js動態創建出的標簽，我們無法直接選擇到，因為我們只能選擇到頁面上加載完成的標簽，動態添加的選擇不到，我們通過冒泡，子元素的事件會一直冒泡到父元素上，可以通過父元素來監聽子元素的事件。通過這個函數就解決了給動態產生的元素綁定事件。