Jquery框架的应用（1）

1. jquery语法
   图1代码实现了一个reset重置功能，涉及到的知识点有：
   （1）jquery选择器：
   ①("#applicant")：使用("[lay-value='请选择公司']")：使用(".layui-form-checked")：使用(this)：可以选择当前操作的元素。
   （2）涉及到的jquery元素操作方法：
   ①("#applicant").val()：val()是元素赋值方法，也可以用于清空元素值（重置）；
   ③("this").removeClass("layui-form-checked")：removeClass()可以移除元素样式，addClass()可以添加元素样式。

// reset
$("#reset").click(function){
    $("#applicant").val();
    $("[lay-value='请选择公司']").trigger("click");
    $(".layui-form-checked").each(function(){
        // $(this).removeClass("layui-form-checked");
        // 移除样式无用的情况下想到通过模拟再次click事件来取消选中
        $(this).trigger("click");
    })
}

图1

2.jquery语法
图2代码段实现了一个渲染文件列表的功能，包括文件下载、文件删除（删除后重新渲染文件列表），涉及到的知识点有：
（1）jquery选择器：(#fileTableCommon-template)元素id选择、(".deleteBtn")元素样式选择、("#descisionBasis").html(fileComponent)渲染元素、(this).attr('data-name')获取元素属性值等。
（3）("#fileTableCommon-template").html())(model))。使用handlebars进行元素渲染。
（4）使用Ajax方式进行接口调用。（默认同步方式调用）
（5）window.location用于打开一个新窗口，splice()用于数组类型对象的分割。

function renderFileTable(){
    $("#descisionBasis").html(fileComponent);
    $("#descisionBasis").html(Handlebars.compile($("#fileTableCommon-template").html())(model));
    // downloadFile
    $(".downBtn").click(function(){
        var fileId = $(this).attr('data-id');
        var fileName = $(this).attr('data-name');
        var downData = {
            "body": {
                "fileId": fileId,
                "fileName": fileName
            }
        }
        tools.postHttpRequest('/glcs/v1/download', downData, function(data){
            window.location = data.body;
        })
    })
    // deleteFile
    $(".deleteBtn").click(function(){
        var index = $(this).attr('data-index');
        model.fileLists.splice(index,1);
        renderFileTable();
    })
}

图2

3.jquery与layui语法
①jquery选择器：("[lay-value='XX']").trigger("click")模拟click事件
③layui方法：form.on('select(filter)',function(){})，layui监听select下拉框选择。

// layui监听select的方式
form.on('select(filter)',function(){
    // 通过模拟选中第一个option，使select恢复默认
    $("[lay-value='XX']").trigger("click");
})

图3

4.如果弹出层的content是某个DOM元素的话，需要放在body根节点下，避免被遮罩
https://blog.csdn.net/q646926099/article/details/78797091（layer弹层遮罩挡住窗体解决）