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的最后一个子节点