web小作业收获
2020-05-28 本文已影响0人
GG_lyf
前言
历时两天半,今天终于把老师布置的小作业搞完了,虽然有一个小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;
});
