MooTools学习笔记（一） DOM选择器

快下班了，简单总结一下，了解不多，可能有理解的不对的地方，以后再修改。

 

$

      1.按ID来获取元素

      2.让IE下的所有元素获得Element所提供的扩展方法（在IE浏览器中，当$第一次调用的时候，元素将进行对Element的扩展，将获得Element中提供的方法）

      3.参数是DOM元素的id或者DOM元素的引用

      备注：

      对原生HTMLElement支持的浏览器（如Safari,Firefox以及Opera），将自动获得Element对DOM元素的扩展

      MooTools会检测一个元素是否需要被扩展，所以$方法针对一个元素多次调用的话不会产生副作用

 

$$

      获取并扩展一组DOM元素，获取到的元素数组中的每个元素都获得了Element中的方法。

      可以接受任意个数的参数，参数类型如下：HTMLCollections，元素数组，多个单独的元素，或者CSS选择器字符串

      返回结果是多个参数选择结果的并集，如果未找到任何符合条件的元素，则返回一个空数组

 

getElement    

      返回第一个符合条件的元素，输入一个参数，可以是元素标签名，或者CSS Selector

getElements  

      返回所有符合条件的元素数组，只能输入一个参数，可以是元素标签名，或者CSS Selector

 

对于CSS Selector的属性选择器，支持如下几个操作：

=     等于 

^=  以..开头

$=  以..结尾

!=    不等于

举例：$$("input[name=mystr]")

 

对于CSS Selector，还支持：，包括

:enabled  Matches all Elements that are enabled

:empty  Matches all elements which are empty

:contains(text)  Matches all the Elements which contains the text

:nth-child(nExpression)  Matches every nth child.

    $$('#myDiv:nth-child(2n)'); //Returns every even child.
    $$('#myDiv:nth-child(n)'); //Returns all children.
    $$('#myDiv:nth-child(2n+1)') //Returns every odd child.
    $$('#myDiv:nth-child(4n+3)') //Returns Elements 3, 7, 11, 15, etc.
    $$('#myDiv:nth-child(first)')//Returns first child
    $$('#myDiv:nth-child(last)')//Returns last child
    $$('#myDiv:nth-child(even)')//Returns every even child.start index from 1.
    $$('#myDiv:nth-child(odd)')//Returns every odd child.start index from 1.
    $$('#myDiv:nth-child(only)')//Returns an only child of its parent Element.

:even  Matches every even child.

:odd   Matches every odd child.

:first-child  Matches the first child.

:last-child  Matches the last child.

:only-child  Matches an only child of its parent Element.

 

hoohoo~终于完了，收工！