大家都知道用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动态创建出的标签，我们无法直接选择到，因为我们只能选择到页面上加载完成的标签，动态添加的选择不到，我们通过冒泡，子元素的事件会一直冒泡到父元素上，可以通过父元素来监听子元素的事件。通过这个函数就解决了给动态产生的元素绑定事件。