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