1、JS:
1.1、jquery:
1.1.1、定位标签:
直接定位:
// 选择所有 p 元素
$("p")
// 选择 id 为 "myElement" 的元素
$("#myElement")
// 选择所有 class 为 "myClass" 的元素
$(".myClass")
// 选择所有带有属性 data-name 的元素
$("[data-name]")
// 选择所有带有属性 data-category="example" 的元素
$("[data-category='example']")
。。。。。。。等
间接定位:
//通常用来寻找固定标签的下一个,返回的是一个jquery对象,通常配合.text()、.html()来进行下一步操作。
$("#id").next()
//通常用来动态插入下一个,也跟上面一样配合.text()、.html()使用。
$("#id_" + name).next()
例如
success: function (res) {
if (res.status) {
alert("添加成功");
} else {
$.each(res.error, function (name,data) {
console.log(name,data);
$("#id_" + name).next().text(data[0])
})
}
}
这样当name=“x”时,相当于定位到id=“id_x”这个标签的下一个标签。
而在django中,生成的表单id默认为id="id_yourname",嘿嘿
1.1.2页面刷新/表单置空/动态删除和添加:
//页面刷新
alert("添加成功");
location.reload();
这样添加成功弹窗后,就可以自动刷新界面来重新请求数据了
//特定表单置空
$("#formadd")[0].reset();
这个是找到对应的form表单,然后置空。
$("#formadd")是jquery对象,$("#formadd")[0]是dom对象
//动态删除
删除可以通过路由跳转方法,也可以用这种动态的
<tr uid="{{ i.id }}">
。。。。。
<input uid="{{ i.id }}" 。。。。
。。。。。
在js部分定义一个全局变量,然后用这个获取 当前点击(this) 的标签的 自定义uid 值。
var DELETE_ID;
$(".btn-delete").click(function () {
$("#DeleteModal").modal('show');
DELETE_ID=$(this).attr("uid");
})然后就可以通过ajax请求把这个变量传到后端了
success:function (res){
if (res.status){
//隐藏动态删除框
$("#DeleteModal").modal('hide');
//将页面上当前一行的数据给删除
其实这一步本质就是$("tr['uid=对应id']")
其实用刷新的方式更简单,但这个方式可以拓展思维,方便以后做动态页面
$("tr[uid='" + DELETE_ID + "']").remove();
//全局变量置空,方便下一次删除操作
DELETE_ID=0;
}
}
2、CSS:
2.1、标签的相对位置调整调整:
例如:
//下边距
<div style="margin-bottom: 10px;"><..>
<div><..>
//将内部标签移到标签的右侧
<p style="text-align: right;">
<button id="deletedata" type="button" class="btn btn-danger">确定</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</p>
2.2、bootstrap:
以下是bootstrap动态模组的一些常用设置。
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>里
的data-dismiss="modal"可以让动态模组消失,这样就不用写js绑定了