2019-03-01

图1代码段的功能是设置某些元素某些属性的值，涉及的知识点有：
（1）jquery选择器： $([name='applicant']) name属性选择（2）jquery元素操作方法：$ ([name='applicant']).attr("lay-verify","required")设置元素lay-verify属性的值。
（3）原生方式获取DOM文档的表单、节点（元素）。getElementsByName根据名称获取元素；attributes['lay-verify']获取元素属性，attributes['lay-verify'].value获取/设置元素该属性的值。
（4）原生方式、jquery方式选择操作dom文档的元素对比：query选择器在语法上来说更加简洁清晰，但掌握原生的写法也是很有必要的（不仅可以了解底层原理，也可以适用于使用其他框架如Vue而非jquery时的场景）

for (var i=0;i <document.forms[0].length;i++){
    if (document.forms[0][i].attributes['lay-verify']){
        document.forms[0][i].attributes['lay-verify'].value = '';
    }
}
// $([name='applicant']).attr("lay-verify","required"); //jquery
document.getElementsByName('applicant')[0].attributes['lay-verify'].value = "required";// 原生

图1

图2代码段的功能是实现表单验证以及数据格式转化。涉及到的知识点有：
（1）jquery选择器： $("#submitBtn")/$ ("#descisionBasis")
（2）layuij的表单处理方法。form.on(event,function(){})监听表单事件，form.verify({})进行表单验证。
（3）layui.form具有的表单验证机制不满足需求（提示信息要包含字段名），故自定义表单验证，重写form.verify({})中的required函数，使提示信息包含字段名。

// 自定义表单验证
$("#submitBtn").click(function(){
    if (model.fileLists.length > 0){
        $("#descisionBasis").val("not null");
    }
})
form.verify({
    required: function(value,item){
        if (!value){
            return item.attributes[0].value + "不能为空";
        }
    },
})
form.on('submit(commit)',function(data){
    formData = controller.arrTransObject($(data.form));
})

图2

图3代码段的功能是监听元素点击，并操作其祖先/兄弟节点元素的样式，涉及到的知识点有：
（1）. juqery选择器： $("#orgTree")、$ (this).parent()获取当前元素的祖先元素、 $(this).children(".layui-nav-more")获取当前元素的孩子中含有layui-nav-more的元素。（2）jquery方法： ①$ ("#orgTree").on('click','.companyName',function(){})，通过on()方法将click事件绑定在id为orgTree的元素及其孩子元素中包含companyName样式的元素上。相较于$(element).click(function(){})的监听方法，on()将事件绑定在相应元素上，更加灵活，用法更为广泛。
②hasClass("layui-nav-itemed")、addClass("layui-nav-itemed")、removeClass("layui-nav-itemed")的使用。

$("#orgTree").on('click','.companyName',function(){()
    console.log($(this).parent());
    console.log($(this).children(".layui-nav-more"));
    if (!$(this).parent().hasClass("layui-nav-itemed")){
        $(this).parent().addClass("layui-nav-itemed");
        // shrink only when click element[span]
        $(this).children(".layui-nav-more").click(function(){
            // when clicking, $(this) = $(this).children(".layui-nav-more")
            $(".layui-nav-itemed").removeClass("layui-nav-itemed");
        })
    }
})

图3

4.图4代码实现了对新生成的元素的监听。
（1） $(element).click(function(){})、$ (document).on('click',element,function(){}) 是两种监听事件的方式。后一种方式更为灵活。如果要监听新生成的元素（如弹出层），那么要采取后一种写法方可生效（即将事件绑定在document文档中新生成的元素上）。

var targetEle = $(".layui-input-block gender").children(".layui-unselect layui-form-select").children(".layui-input layui-unselect");
$(document).on("click",targetEle,function(){
    console.log($(this))
})

图4

event.stopPropagation()的用法
（1）event.stopPropagation()的用法（阻止事件向上冒泡，例如：当你想要监听某元素的点击事件，但是不想监听其父元素或祖先元素的点击事件时，就可以使用event.stopPropagation()来阻止事件向上冒泡）

最后编辑于：2021.01.17 22:53:48