自己目前在搭建一個.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的最後一個子節點

JS/JQuery操作DOM元素筆記