选择符

　　选择符是指CSS样式规则最左边的部分,例如 p{}，#id{}，.class{}，p.class{} 等等

　　总共可以分为四大类：

　　并联选择器 => 逗号 => $('div,span')

　　简单选择器 => ID,CLASS,TAG,ATTR,* => $('#id')，$('.class')，$('div')，$('[attr]')，$('*')

　　关系选择器 => ' '、'>'、'+'、'~' => $('div span')、$('div>span')、$('div+div')、$('div~div')

　　伪类 => 动作伪类、目标伪类、语言伪类、状态伪类、结构伪类、取反伪类

　　关系操作符

　　关系操作符不可单独存在，必须在两个TAG之间(引擎可能允许放在开始，默认头部为*)。

　　后代选择器：通常在引擎中构建一个getAll的函数，在传入一个元素后，取得元素所有的后代元素。注意IE下使用document.all与document.getElementByTagName可能有将注释混入结果集。

　　亲子选择器：如果不打算兼容XML，直接用children就可以了。IE下也可能会有混入注释节点的问题。

    function getChildren(el) {

        // 该方法显示子节点数量

        if (el.childElementCount) {

            return [].slice.call(el.children);

        }

        var ret = [];

        // 用nextSibling遍历

        for (var node = el.firstchild; node; node = node.nextSibling) {

            // 只弹入元素节点

            node.nodeType == 1 && ret.push(node);

        }

        return ret;

    }

　　相邻选择器：取得当前元素向右的第一个元素节点

    function getNext(el) {

        // 有此方法直接用 返回下一个元素节点

        if ('nextElementSibling' in el) {

            return el.nextElementSibling;

        }

        // nextSibling会将回车当成#text 所以要进行判断

        while (el = el.nextSibling) {

            if (el.nodeType === 1) {

                return el;

            }

        }

    }

　　兄长选择器：取得右边所有同级元素节点

　　伪类

　　动作伪类：包括:visited,:link,:hover,:active,:focus

　　目标伪类：即target伪类，指id或者name属性与URL中#后面的部分匹配。

　　比如说：有<a href="#div">to div</a>与<div id='div'>got it</div>这个div就是target

    'target': function(elem) {

        // 获取所有链接

        var hash = window.location && window.location.hash;

        // 返回与id匹配的hash值

        return hash && hash.slice(1) === elem.id;

    }

　　语言伪类：<body lang='...'>内容</body> 用的少，不写了，这玩意还有继承性

　　状态伪类：标记一个元素当前状态，由 :checked、:enabled、:disabled、:indeterminate组成，可以通过元素checked,disabled,indeterminate判定。

　　话说这个:indeterminate啊，是checkbox的一个属性，可以console.dir('checkbox节点')查看，默认为false。然后只能通过js代码将其设为true，效果就是checkbox复选框默认中间加了个减号，点击后恢复正常的checkbox，没什么卵用。

　　结构伪类：分为根伪类、子元素过滤伪类、空伪类三种。根伪类由它在文档的位置判定，子元素过滤伪类根据它在其父亲所有孩子的位置或标签类型判定，空伪类是根据它孩子的个数判定。

　　:root 伪类用于选取根元素，HTML文档通常是html元素。

　　:nth-child 是所有子元素过滤伪类的蓝本，带有参数，可能包含字母n或数字。

　　:empty 用于选取那些不包含任何元素节点、文本节点、CDATA节点的元素

　　待续...

巴特西

JS框架设计读书笔记之-选择器引擎01

选择符

关系操作符

伪类

最新文章

热门文章