JS/JQuery操作DOM元素笔记

原因

自己目前在搭建一个.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的最后一个子节点