Slick

Slick

Slick是MooTools的选择器引擎。它支持多种CSS2/CSS3选择器！

Reverse Combinators

逆向选则器.

示例:

document.getElement('p ! div')    //一个<div>,并这个<div>是<p>的祖先
document.getElement('p !> div')   // 一个<div>,并这个<div>是<p>的直接父类(中间没有间隔其它元素)
document.getElement('.foo !+ p')  // 获取上一个相邻<P>兄弟节点

Function: Slick.definePseudo

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

示例:

Slick.definePseudo('display', function(value){
    return Element.getStyle(this, 'display') == value;
});
 
foo

bar $$(':display(block)'); // Will return the block element Slick.definePseudo('my-custom-pseudo', function(){ // 'this' is the node to check return Element.retrieve(this, 'something-custom').isAwesome; }); $$(':my-custom-pseudo') // Will return the first

tag that is awesome

Selector: Next Siblings ('~')

获取下一个兄弟节点。

例如:

$$('p.foo ~')        // Gets all next siblings of 

$$('p.foo ~ blockquote') // Gets every 
 with a 
 sibling somewhere *before* it

Selector: Previous Siblings ('!~')

获取上一个兄弟节点。

例如:

$$('p.foo !~')            // Gets all previous siblings of 

$$('p.foo !~ blockquote') // Gets every 
 with a 
 sibling somewhere *after* it

Selector: All Siblings ('~~')

获取所有的兄弟节点。

例如:

$$('p.foo ~~')            // Gets all previous and next siblings of 

$$('p.foo ~~ blockquote') // Gets every 
 with a 
 sibling before OR after it

Selector: First Child ('^')

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

例如:

$$('p.foo ^')       // Gets the first child of 

$$('p.foo ^ strong')    // Gets every  that is the first element child of a 

Selector: Last Child ('!^')

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

例如:

$$('p.foo !^')      // Gets the last child of 

$$('p.foo !^ strong')   // Gets every  that is the last element child of a 

Selector: checked

匹配所有checked的元素。

示例:

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

Selector: enabled

匹配所有enabled的元素。

示例:

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

Selector: empty

匹配的是空的所有元素。

例如:

$$(':empty');

Selector: contains

匹配所有包含文本的元素。

变量:

• text - (string)该元素应包含的文本。

例如:

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

Selector: focus

获取取得焦点的元素。

例如:

$$(':focus');       // Gets the element in focus

Selector: not

匹配那些不匹配的所有元素。

示例:

$$(':not(div.foo)'); // all elements except divs with class 'foo'
 
$$('input:not([type="submit"])'); // all inputs except submit buttons
 
myElement.getElements(':not(a)');
 
$$(':not(ul li)');

Selector: nth-child

匹配第n(表达式)个子元素。

用法:

':nth-child(nExpression)'

变量:

• nExpression - ( String)一个数学表达式。

示例:

 
$$(':nth-child(1)'); //Returns Element #i1.
 
$$(':nth-child(2n)'); //Returns Elements #i2 and #i4.
 
$$(':nth-child(2n+1)') //Returns Elements #i1, #i3 and #i5.
 
$$(':nth-child(3n+2)') //Returns Elements #i2 and #i5.

每个奇数节点(同为2n+1):

':nth-child(odd)'

每个偶数数节点(同为2n):

':nth-child(even)'

Selector: nth-last-child

匹配每n(表达式)个子元素，从最后一个子元素开始。

用法:

':nth-last-child(nExpression)'

变量:

• nExpression - ( String)一个数学表达式。

示例:

 
$$(':nth-last-child(1)'); //Returns Element #i5.
 
$$(':nth-last-child(2n)'); //Returns Elements #i2 and #i4.
 
$$(':nth-last-child(2n+1)') //Returns Elements #i1, #i3 and #i5.
 
$$(':nth-last-child(3n+2)') //Returns Elements #i1 and #i4.

每个奇数元素(同为2n+1):

':nth-last-child(odd)'

每一个偶数元素(同为2n):

':nth-last-child(even)'

Selector: even

匹配每个偶数节点.

例如:

$$('td:even');

Selector: odd

匹配每个奇数节点.

例如:

$$('td:odd');

Selector: index

匹配指定索引的节点.

例如:

$$('p:index(2)');       // Gets the third 
 tag.

注意:

这是零基数索引。

Selector: first-child

匹配的第一个子元素。

语法:

':first-child'

例如:

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

Selector: last-child

匹配最后一个子元素。

语法:

':last-child'

例如:

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

Selector: only-child

匹配其父元素的唯一的子元素。

语法:

':last-child'

例如:

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