事件委托
1、事件委托:主要是通过冒泡原理(委托父集或者祖先集),委托就是让别人也可以完成所指定的事件,对于新创建的元素,直接拥有指定事件。
例子:使用委托添加按钮
在页面中加入一个按钮,通过这个按钮添加其他按钮,再利用委托,使得新生成的按钮点击后也能生成其他新的按钮。
<div class="contain">
<button class="button button-3d button-action button-pill">添加</button>
</div>
委托是利用on()函数,第一个参数为事件,第二个参数为对象,第三个参数为触发元素而进行的回调函数。
<script>
$(function(){
$('.contain').on('click','button',function(){
//委托父集或者祖先集
let btn=$('<button/>').html('添加').addClass('button button-3d button-action button-pill')//设置新建的按钮的属性
$('.contain').append(btn)//触发点击事件,将按钮添加到父元素中
})
})
</script>
jq制作表格
2、首先对表格的样式进行布局页面中仅含有类名为contain的div盒子,利用jq制作表格并将表格添加到div中。
<script>
$(function () {
//制作表格数据,之后可以使用ajax进行数据的读取
arr = [{
id: 1,
nickname: 'jack',
age: 18,
},
{
id: 2,
nickname: 'mike',
age: 20,
},
{
id: 3,
nickname: 'simba',
age: 30,
},
]
//制作表头,并将表头加入到生成的表格中
let table = $('<table/>').addClass('tb')
let th1 = $('<th/>').html('编号') //th作为表格标题会被加粗
let th2 = $('<th/>').html('姓名')
let th3 = $('<th/>').html('年龄')
let th4 = $('<th/>').html('操作')
let thead = $('<tr/>').append(th1).append(th2).append(th3).append(th4) //建立表头