选择符
选择符是指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节点的元素
待续...