pythonweb、前端语法

• 目录
• 1、JS：
• 1.1、jquery：
• 1.1.1、定位标签：
• 1.1.2页面刷新/表单置空/动态删除和添加：
• 2、CSS：
• 2.1、标签的相对位置调整调整：
• 2.2、bootstrap：

---

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绑定了