Native: Element

$関数を用いて、要素のすべてのメソッドにセレクターを閊えるようにするカスタムクラスです。

Elementプロパティ: getElements

与えられたセレクターにマッチする要素をすべて取得します。

構文:

var myElements = myElement.getElements(selector);

引数:

1. selector - (文字列) マッチするCSSセレクター。

戻り値:

• (配列) Elementコレクション。

例:

//myElement内のすべてのアンカーを返します。
$('myElement').getElements('a');

//nameが"dialog"であるすべてのinputタグを返します。
$('myElement').getElements('input[name=dialog]');

//nameが'log'で終わるinputタグを返します。
$('myElement').getElements('input[name$=log]');

//すべてのEメールリンク("mailto:"で始まるもの)を返します。
$('myElement').getElements('a[href^=mailto:]');

//'email'というクラス名を持つ要素にイベントを添附します。
$(document.body).getElements('a.email').addEvents({

    'mouseenter': function(){
        this.href = 'real@email.com';
    },
    'mouseleave': function(){

        this.href = '#';
    }
});

注意点:

• 属性セレクターにはこれらの演算子がサポートされています。
  • '=' : 等しい
  • '^=' : で始まる
  • '$=' : で終わる
  • '!=' : 等しくない

Elementプロパティ: getElement

Element:getElementsと同じ働きをしますが、最初のものだけを返します。

構文:

var anElement = myElement.getElement(selector);

引数:

1. selector - (文字列) マッチするCSSセレクター。

戻り値:

• (いろいろ) 拡張されたElementか、見つからなければnull。

例:

var found = $('myElement').getElement('.findMe').setStyle('color', '#f00');

Selectors.Pseudo

Selectorsの仮称セレクターです。

参考情報:

• W3C Pseudo Classes

セレクター: enabled

enabledにされた要素にマッチします。

使用法:

':enabled'

例:

$$('*:enabled')

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

セレクター: empty

空の要素にマッチします。

使用法:

':empty'

例:

$$('div:empty');

セレクター: contains

テキストを持つ要素にマッチします。

使用法:

':contains(text)'

変数:

• text - (文字列) 要素が含んでいるテキスト。

例:

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

セレクター: nth-child

n番目の子要素にマッチします。

使用法:

Nth表記:

':nth-child(nExpression)'

変数:

• nExpression - (文字列) n番目"ごと"の子要素にマッチします。

例:

$$('#myDiv:nth-child(2n)'); //偶数番目の子要素にマッチします。

$$('#myDiv:nth-child(n)'); //すべての子要素にマッチします。

$$('#myDiv:nth-child(2n+1)') //奇数番目の子要素にマッチします。

$$('#myDiv:nth-child(4n+3)') //戻り値は3, 7, 11, 15......番目の要素です。

奇数番目の子要素:

':nth-child(odd)'

偶数番目の子要素:

':nth-child(even)'

単一の子要素:

':nth-child(only)'

最初の子要素:

'nth-child(first)'

最後の子要素:

'nth-child(last)'

注意点:

このセレクターはw3cの指定に準拠しているため、1が最初の要素であり、0ではありません。したがって、０ベースのインデックスを想定した場合、nth-child(odd)が実際に返すのは偶数番目になってしまいます。

セレクター: even

偶数番目の要素を返します。

使用法:

':even'

例:

$$('td:even');

注意点:

このセレクターはw3c指定に準拠していないため、インデックスが0からはじまります。nth-child(even)よりも、このセレクターを使う方が強く推奨されます。実際に偶数版目の要素を返すからです。

セレクター: odd

奇数番目の要素を返します。

使用法:

':odd'

例:

$$('td:odd');

注意点:

このセレクターはw3c指定に準拠していないため、インデックスが0からはじまります。nth-child(odd)よりも、このセレクターを使う方が強く推奨されます。実際に奇数版目の要素を返すからです。

セレクター: first

最初の子要素にマッチします。

使用法:

':first-child'

例:

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

セレクター: last

最後の子要素にマッチします。

使用法:

':last-child'

例:

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

セレクター: only

親要素にとって唯一の子要素にマッチします。

使用法:

':only-child'

例:

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