Native: Element

Користувацький клас для дозволу використання всіх його методів з будь-яким елементом Selectors через доларову функцію $.

Element Property: getElements

Отримує всі елементи всередині елемента, які відповідають заданому селектору.

Синтаксис:

var myElements = myElement.getElements(selector);

Аргументи:

1. selector - (string) CSS-селектор для відповідності.

Повертає:

• (array) Колекція Element.

Приклади:

//Returns all anchors within myElement.
$('myElement').getElements('a');
 

//Returns all input tags with name "dialog".
$('myElement').getElements('input[name=dialog]');
 
//Returns all input tags with names ending with 'log'.
$('myElement').getElements('input[name$=log]');

 
//Returns all email links (starting with "mailto:").
$('myElement').getElements('a[href^=mailto:]');
 
//Adds events to all Elements with the class name 'email'.
$(document.body).getElements('a.email').addEvents({

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

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

Примітки:

• Підтримує ці оператори в селекторах атрибутів:

  • '=' : дорівнює
  • '^=' : починається з
  • '$=' : закінчується на
  • '!=' : не дорівнює

Element Property: getElement

Те саме, що й Element:getElements, але повертає лише перший.

Синтаксис:

var anElement = myElement.getElement(selector);

Аргументи:

1. selector - (string) CSS-селектор для відповідності.

Повертає:

• (mixed) Розширений Element, або null, якщо не знайдено.

Приклад:

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

Selectors.Pseudo

Деякі стандартні псевдо-селектори для Selectors.

Див. також:

• W3C Pseudo Classes

Selector: enabled

Відповідає всім елементам, які увімкнені.

Використання:

':enabled'

Приклади:

$$('*:enabled')

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

Selector: empty

Відповідає всім елементам, які порожні.

Використання:

':empty'

Приклад:

$$('div:empty');

Selector: contains

Відповідає всім елементам, які містять текст.

Використання:

':contains(text)'

Змінні:

• text - (string) Текст, який повинен містити елемент.

Приклад:

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

Selector: nth-child

Відповідає кожному nth дочірньому елементу.

Використання:

Nth Expression:

':nth-child(nExpression)'

Змінні:

• nExpression - (string) Вираз nth для "кожного" 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.

Кожен непарний дочірній елемент:

':nth-child(odd)'

Кожен парний дочірній елемент:

':nth-child(even)'

Єдиний дочірній елемент:

':nth-child(only)'

Перший дочірній елемент:

'nth-child(first)'

Останній дочірній елемент:

'nth-child(last)'

Примітка:

Цей селектор дотримується специфікацій W3C, тому він має 1 як перший дочірній елемент, а не 0. Тому nth-child(odd) фактично вибере парні дочірні елементи, якщо ви думаєте в нульових індексах.

Selector: even

Відповідає кожному парному дочірньому елементу.

Використання:

':even'

Приклад:

$$('td:even');

Примітка:

Цей селектор не є частиною специфікації W3C, тому його індекс починається з 0. Цей селектор є високо рекомендованим замість nth-child(even), оскільки він поверне реальні парні дочірні елементи.

Selector: odd

Відповідає кожному непарному дочірньому елементу.

Використання:

':odd'

Приклад:

$$('td:odd');

Примітка:

Цей селектор не є частиною специфікації W3C, тому його індекс починається з 0. Цей селектор є високо рекомендованим замість nth-child(odd), оскільки він поверне реальні непарні дочірні елементи.

Selector: first

Відповідає першому дочірньому елементу.

Використання:

':first-child'

Приклад:

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

Selector: last

Matches the last child.

Використання:

':last-child'

Приклад:

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

Selector: only

Відповідає єдиному дочірньому елементу свого батьківського елемента.

Використання:

':only-child'

Приклад:

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