前言

        历时两天半,今天终于把老师布置的小作业搞完了,虽然有一个小bug,但整体还是不错的.基于本次作业有一些收获想发表.

---

开搞

1.css

cursor: pointer;/* 鼠标变小手 */
background-color: transparent;/*颜色透明,用于按钮  */
border-radius: 5px;/* 按钮边角有5px的圆弧 */

border-collapse: separate;/*tr间距*/
border-spacing: 1px;

box-shadow: 2px 2px  10px #909090;/*设置div阴影*/

resize:none;/*textarea不可拖动*/

2.jquery

2.1不用写入口函数直接初始化数据

$.get("${pageContext.request.contextPath}/notice?method=findIdAndTitle", function(data) {
       /* console.log(data.list); */
        data.list.forEach((item)=>{
           /*  console.log(item); */
            /* console.log(index); */
            var first = $("<td></td>").append('<span class="detials" value='+item.id+'>'+item.title+'</span>');
            var second_one = $('<button id="update" value='+item.id+'>修改</button>');
            var second_two = $('<button id="delete" value='+item.id+'>删除</button>');
            var second = $("<td></td>").append(second_one).append(second_two);
            $("<tr></tr>").append(first).append(second).appendTo("#table1");
       })  
   }, "json");

2.2初始化的按钮的使用

    $(document).on('click','#update',function(){
        
    })
    

2.3初始化下拉框数据并使用

//初始化
    $.get("${pageContext.request.contextPath}/type?method=findAllType", function(data) {
        /* console.log(data.list); */
        data.list.forEach((item)=>{ 
             var first = $('<option value='+item.id+'>'+item.name+'</option>');
             $('#select').append(first);
             var second = $('<option value='+item.id+' >'+item.name+'</option>');
             $('.selectselect').append(second);
        })   
    }, "json");
    
//使用
    $("#select").change(function() {
        d = $("#select option:selected").text();//获取选中的那个下拉框的text
    })

//设置下拉框第一个默认选中
    $("#select").find("option:first").prop("selected", true);

//通过value设置哪个被选中
    $("#select option[value='"+data.map.type_id+"']").prop('selected', true);

2.4设置跳转页面

//网页的返回箭头没用
window.location.replace("页面相对地址");

//网页的返回箭头可以用
window.location.href="页面绝对地址";

//网页刷新
window.location.reload();

//原路返回
window.location.go(负数);//负多少表示返回多少页,这个必须是你通过那个页面的按钮跳转过来的

2.5jQuery函数使用

$(".right-child-second").show().siblings().hide();
  show()显示,里面可以填毫秒数搞成动画
  siblings()兄弟,就是同级的标签
  hide()隐藏,里面可以填毫秒数搞成动画

2.6发送delete请求

        $.ajax({
            type: "POST",
            url: "${pageContext.request.contextPath}/notice?method=delete",
            data: {_method:"DELETE",'id':k},
            success:(res)=>{
                 if(res !== null){
                        alert("删除成功");
                        return true;
                 }
            },
            error:(err)=>{
                alert("删除失败");
            }
        }); 

2.7多选按钮获取选中的值和取消选中

//获取选中
$("input[type=checkbox]:checked").each(function() {
    console.log($(this).val());
});
//取消选中
$("input[type=checkbox]").each(function() {
    this.checked = false;
});

注:搞完这个小项目感觉心累,老师给的需求好模糊,图片都不能下载,还看不清楚.我只能截屏放大(放大还看不清字的那种)连带猜的在搞项目.老师的需求仿佛还用到了iframe这么古老的东西,我呢,又不喜欢用那些老东西,就用jQuery局部刷新了,这才有了好多初始化数据.