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的最後一個子節點