tiny-selectors.js - CSS3 Selectors for tinyJS

tiny-selectors.js ergänzt die Selektor-Filter um CSS3-Kompatibilität und einige weitere hilfreiche Filter.

Download

tiny-selectors.js [2901b] - tiny-selectors-min.js.gz [609b]

Hinweis

tiny-selectors benötigt lediglich tiny.js. Andere Scripte sind nicht erforderlich.

Verwendung

Die Selektion mit t() unterstützt nach dem Laden des Plugins die nachfolgenden zusätzlichen Selektoren:

CSS3-Selektoren

Die folgenden Selektoren stellen CSS3-Kompatibilität her:

:target

Gibt nur Elemente zurück, deren ID in location.hash steht.

location.hash='#top'; t('h1:target').length===1; location.hash='';

:enabled, :disabled

Prüft, ob die disabled-Eigenschaft von Formular-Feldern gesetzt ist oder nicht.

t('#testfeld input:enabled').length===11; t('#testfeld input:disabled').length===2

:checked

Filtert Checkboxen und Radio-Buttons auf ihren Aktivierungszustand.

t('#testfeld input:checked').length===2

:root

Läßt nur das HTML-Element durch.

t('#testfeld:root').length===0

:nth-last-child()

Selektiert nur Nodes, die vom letzten Node im Eltern-Element n Nodes entfernt sind.

t('#testfeld :nth-last-child(2)').length===2

:nth-of-type()

Selektiert nur Nodes, die innerhalb ihres Eltern-Elements das n-te Node vom gleichen Typ sind.

t('#testfeld :nth-of-type(2)').length===3

:nth-last-of-type()

Selektiert nur Nodes, die innerhalb ihres Eltern-Elements das n-te Node gleichen Typs vom letzten Node gleichen Typs sind.

t('#testfeld :nth-last-of-type(3)').length===2

:first-of-type

Selektiert nur Nodes, die innerhalb ihres Eltern-Elements das erste Nodes gleichen Typs ist.

t('#testfeld :first-of-type').length===5

:last-of-type

Selektiert nur Nodes, die innerhalb ihres Eltern-Elements das letzte Nodes gleichen Typs ist.

t('#testfeld :last-of-type').length===5

:only-of-type

Selektiert nur Nodes, die innerhalb ihres Eltern-Elements das einzige Nodes gleichen Typs ist.

t('#testfeld :only-of-type').length===1

Zusätzliche Selektoren

Die folgenden Selektoren sind nicht standardisiert, aber überaus hilfreich.

:gt()

Selektiert nur die Nodes nach dem n-ten Element.

t('#testfeld input:gt(7)').length===5

:lt()

Selektiert nur die Nodes bis vor das n-te Element.

t('#testfeld input:lt(5)').length===5

:eq()

Reduziert die Selektion auf ihr n-tes Element.

t('#testfeld :eq(4)').length===1

:hidden

Filter auf unsichtbare Elemente. Im IE8 kann dieser Filter möglicherweise fehlschlagen.

t('#testfeld:hidden').length===1

:visible

Gibt nur sichtbare Elemente zurück. Im IE8 kann dieser Filter möglicherweise fehlschlagen.

t('#testfeld:visible').length===0

:selected

Liefert <option>-Tags, die selektiert sind, zurück.

t('#testfeld :selected').length===3

Input Selectors

Die nachfolgenden Selektoren sind für Input-Felder hilfreich:

:checkbox

Selektiert nur <input type="checkbox">.

t('#testfeld input:checkbox').length===2

:file

Selektiert nur <input type="file">.

t('#testfeld input:file').length===1

:hidden

Selektiert nur <input type="hidden">.

t('#testfeld input[type=hidden]:hidden').length===2

:image

Selektiert nur <input type="image">.

t('#testfeld input:image').length===1

:password

Selektiert nur <input type="password">.

t('#testfeld input:password').length===1

:radio

Selektiert nur <input type="radio">.

t('#testfeld input:radio').length===3

:reset

Selektiert nur <input type="reset">.

t('#testfeld input:reset').length===1

:submit

Selektiert nur <input type="submit">.

t('#testfeld input:submit').length===1

:text

Selektiert nur <input type="text">.

t('#testfeld input:text').length===1