JS框架设计读书笔记之-选择器引擎01
选择符
选择符是指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节点的元素
待续...
