自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下。
页面大概是酱紫的(我使用的AdminLTE和LayUI,AdminLTE用的是一个大神改的,链接https://github.com/weituotian/AdminLTE-With-Iframe):
我的需求就是如果用户要用除查询之外的权限,必须要有查询权限才可以,如果没有查询权限,则不能具有其他权限,这里记录的只是前端JavaScript的操作,不包含后台验证。
比如我测试1下ces的管理选中的时候,要自动选中查询按钮。当查询按钮取消选中的时候,要把后边选中的按钮取消选中。
主要是操作DOM模拟点击:
$('.layui-form-checkbox').on('click', function (e) { debugger; //如果是选中的话,判断是不是Query 查询权限,不是的话,要先选中查询权限 if (this.classList.contains("layui-form-checked")) { //如果不是Query 并且Query 也没选中 if (this.previousElementSibling.name !== "Query" && !$(this).parent().find('input[name="Query"]').next()[0].classList.contains( "layui-form-checked")) { //让Query节点的那个点击选中 $(this).parent().find('input[name="Query"]').next().click(); } } else { //不是选中状态,判断是不是Query 如果是Query 取消选中,那么后边的也应该取消选中 if (this.previousElementSibling.name === "Query") { $(this).parent().find('input[name!="Query"]').next().each(function(index, item) { if (item.classList.contains("layui-form-checked")) { $(item).click(); } }); } } });
知识点:
JQuery
jQuery.parent(expr)//找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr)//类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(expr)//返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 jQuery.contents()//返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个jQuery对象返回,children()则只会返回节点 jQuery.prev()//返回上一个兄弟节点,不是所有的兄弟节点 jQuery.prevAll()//返回所有之前的兄弟节点 jQuery.next()//返回下一个兄弟节点,不是所有的兄弟节点 jQuery.nextAll()//返回所有之后的兄弟节点 jQuery.siblings()//返回兄弟姐妹节点,不分前后 jQuery.find(expr)//跟jQuery.filter(expr)完全不一样: jQuery.filter()//是从初始的jQuery对象集合中筛选出一部分,而 jQuery.find()//的返回结果,不会有初始集合中的内容,比如$("p").find("span"),是从<p>元素开始找<span>,等同于$("p span")
JavaScript
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSibling; //获得s的下一个兄弟节点 var ps=s.previousSibling; //得到s的上一个兄弟节点 var fc=s.firstChild; //获得s的第一个子节点 var lc=s.lastChild; //获得s的最后一个子节点