jq制作表格、日历以及事件委托

事件委托

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) //建立表头