MooTools的css选择器Slick

 
Js/Css/jQuery

Slick

Slick是MooTools使用的选择器引擎。它支持一些css3选择器和更多其它的。

参考:

反向组合

反向组合转换选择器或组合的方向。Slick通过在选择器或者组合的前面加上!来实现。

举例:

document.getElement('p ! div') //是p的父元素的divdocument.getElement('p !> div') //是p元素的直接父元素的divdocument.getElements('.foo !+ p') //获得.foo类的父元素的兄弟元素。//(这里注意一下，官方的API有问题，最后一个我测试了好几遍都不行。//后来因为这个查询的是多个元素，我加了个s，果然成功！)

注意:

反向组合在Mootools内部被用在一些遍历方法中。Mootools提供一个简洁和强大的方法代替遍历比如getParent()。

方法: Slick.definePseudo

definePseudo允许创建自定义的伪类选择器。

举例:

Slick.definePseudo('display', function(value){    return Element.getStyle(this, 'display') == value;});<div style="display: none">foo</div><div style="display: block">bar</div>$$(':display(block)');      // 将返回block的元素。Slick.definePseudo('my-custom-pseudo', function(){    // 'this'是要检查的节点。     return Element.retrieve(this, 'something-custom').isAwesome;});$$(':my-custom-pseudo')     // 将返回第一个awesome的p元素

选择器: Next Siblings ('~')

获得后面的兄弟节点。

举例:

$$('p.foo ~')        // 获得类为foo的p后面的所有兄弟节点$$('p.foo ~ blockquote') // 获得所有在类为foo的p节点后的blockquote元素。

选择器: Previous Siblings ('!~')

获得前面的兄弟节点。

举例:

$$('p.foo !~')        // 获得类为foo的p前面的所有兄弟节点$$('p.foo !~ blockquote') // 获得所有在类为foo的p节点前的blockquote元素。

选择器: All Siblings ('~~')

获得所有兄弟节点。

举例:

$$('p.foo ~~')        // 获得类为foo的p的所有兄弟节点$$('p.foo ~~ blockquote') // 获得所有类为foo的p节点的所有blockquote兄弟元素。

选择器: First Child ('^')

获得元素的第一个子节点。

举例:

$$('p.foo ^')       // 获得所有类为foo的p元素的第一个子节点$$('p.foo ^ strong')    // 获得所有类为foo的p元素的第一个strong元素。

选择器: Last Child ('!^')

获得元素的最后一个子节点。

举例:

$$('p.foo !^')       // 获得所有类为foo的p元素的最后一个子节点$$('p.foo !^ strong')    // 获得所有类为foo的p元素的最后一个strong元素。

选择器: checked

匹配所有选中的元素。

举例:

$$(':checked')$('myForm').getElements('input:checked');

选择器: enabled

匹配所有可用的元素。

举例:

$$(':enabled')$('myElement').getElements(':enabled');

选择器: empty

匹配所有空元素。

举例:

$$(':empty');

选择器: contains

匹配所有包含指定文字的元素。

变量:

  • text - (string) 元素要需要包含的文字。

举例:

$$('p:contains("find me")');

选择器: focus

获得包含焦点的元素。

举例:

$$(':focus');       // 获得获得焦点的元素。

选择器: not

匹配所有不匹配给定选择器的元素。

注意: :not伪类的实现比标准的要超前，

举例:

$$(':not(div.foo)'); // 除了类为foo的div元素外的所有元素。$$('input:not([type="submit"])'); // 除了提交按钮外的所有input元素。myElement.getElements(':not(a)');$$(':not(ul li)');

选择器: nth-child

匹配所有的第几个子节点。

用法:

Nth 表达式:

':nth-child(nExpression)'

变量:

  • nExpression - (string) nth-child的nth表达式。

举例:

<span id="i1"></span><span id="i2"></span><span id="i3"></span><span id="i4"></span><span id="i5"></span>$$(':nth-child(1)'); //返回#i1元素$$(':nth-child(2n)'); //返回#i2和#i4元素$$(':nth-child(2n+1)') //返回#i1, #i3和#i5元素$$(':nth-child(3n+2)') //返回#i2和#i5元素

所有单数元素 (同2n+1):

':nth-child(odd)'

所有双数元素(同2n):

':nth-child(even)'

注意:

这个选择器遵循W3C规范，所以1为第一个元素，而不是0。因此如果你认为是从0开始，奇数将选择偶数。

选择器: nth-last-child

匹配所有的第几个节点，从最后一个开始。

用法:

Nth 表达式:

':nth-last-child(nExpression)'

变量:

  • nExpression - (string) nth-child的nth表达式。

举例:

<span id="i1"></span><span id="i2"></span><span id="i3"></span><span id="i4"></span><span id="i5"></span>$$(':nth-last-child(1)'); //返回#i5元素。$$(':nth-last-child(2n)'); //返回#i2和#i4元素。$$(':nth-last-child(2n+1)') //返回#i1, #i3和#i5元素。$$(':nth-last-child(3n+2)') //返回#i1和#i4元素。

所有单数元素 (同2n+1):

':nth-last-child(odd)'

所有双数元素(同2n):

':nth-last-child(even)'

注意:

这个选择器遵循W3C规范，所以1为第一个元素，而不是0。因此如果你认为是从0开始，奇数将选择偶数。

选择器: even

匹配所有偶数子节点。

举例:

$$('td:even');

注意:

这个选择器不是W3C规范的一部分。因为它是从0开始的。强烈建议用这个代替 nth-child(even), 因为它返回的是真正的偶数节点。

选择器: odd

匹配所有奇数子节点。

举例:

$$('td:odd');

注意:

这个选择器不是W3C规范的一部分。因为它是从0开始的。强烈建议用这个替代nth-child(odd), 因为这个返回真正的奇数子节点。

选择器: index

返回指定索引的元素。

举例:

$$('p:index(2)');       // 获取第三个p元素。

注意:

这个是从0开始的索引。

选择器: first-child

匹配第一个子节点。

用法:

':first-child'

举例:

$$('td:first-child');

选择器: last-child

匹配最后一个子节点。

用法:

':last-child'

举例:

$$('td:last-child');

选择器: only-child

匹配只有一个子元素的父元素的子元素。

用法:

':only-child'

举例:

$$('td:only-child');

有话要说