JS/JQuery操作DOM元素笔记

自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下。

页面大概是酱紫的(我使用的AdminLTE和LayUI,AdminLTE用的是一个大神改的,链接https://github.com/weituotian/AdminLTE-With-Iframe):

JS/JQuery操作DOM元素笔记

 我的需求就是如果用户要用除查询之外的权限,必须要有查询权限才可以,如果没有查询权限,则不能具有其他权限,这里记录的只是前端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的最后一个子节点

 

上一篇:自制编译器 青木峰郎 笔记 Ch10 语义分析(2) 静态类型检查


下一篇:shell变量的运算