$$ 

$$(cssRule...) -> [HTMLElement...]

Принимает произвольное количество CSS правил (strings) и возвращает массив DOM элементов, соответствующих им.

Иногда обычные инструменты из арсенала DOM -- document.getElementById() инкапсулированый в $(), getElementsByTagName() и даже getElementsByClassName() -- не хватает чтобы быстро найти элемент или коллекцию элементов. Если вы знаете древовидную структуру DOM, вы можете прибегнуть к CSS селекторам чтобы выполнить задание.

Короткий пример

$$('div');
// -> все DIVы в документе.  Аналогично document.getElementsByTagName('div')!

$$('#contents');
// -> аналогично $('contents'), только он вернет массив элементов в любом случае.

$$('li.faux');
// -> все LI элементы с классом 'faux'

Функция $$ ищет по всему документу. Для выбора конкретных селекторов используйте Element#select.

Поддерживаемый CSS синтаксис

Функция $$ function does not rely on the browser's internal CSS parsing capabilities (otherwise, we'd be in cross-browser trouble...), and therefore offers a consistent set of selectors across all supported browsers.

поддерживается в v1.5.0

  • Type selector: tag names, as in div.
  • Descendant selector: the space(s) between other selectors, as in #a li.
  • Attribute selectors: the full CSS 2.1 set of [attr], [attr=value], [attr~=value] and [attr|=value]. It also supports [attr!=value]. If the value you're matching against includes a space, be sure to enclose the value in quotation marks ([title="Привет!"]).
  • Class selector: CSS class names, as in .highlighted or .example.wrong.
  • ID selector: as in #item1.

поддерживается с версии v1.5.1

Virtually all of CSS3 is supported, with the exception of pseudo-elements (like ::first-letter) and some pseudo-classes (like :hover). Some examples of new selectors that can be used in 1.5.1:

  • Child selector: selects immediate descendants, as in #a > li.
  • Attribute selectors: all attribute operators are supported, including ~= (matches part of a space-delimited attribute value, like rel or class); ^= (matches the beginning of a value); $= (matches the end of a value); and *= (matches any part of the value).
  • The :not pseudo-class, as in #a *:not(li) (matches all descendants of #a that aren't LIs).
  • All the :nth, :first, and :last pseudo-classes. Examples include tr:nth-child(even) (all even table rows), li:first-child (the first item in any list), or p:nth-last-of-type(3) (the third-to-last paragraph on the page).
  • The :empty pseudo-class (for selecting elements without children or text content).
  • The :enabled, :disabled, and :checked pseudo-classes (for use with form controls).

Примеры

$$('#contents a[rel]');
// -> all links inside the element of ID "contents" with a rel attribute

$$('a[href="#"]');
// -> all links with a href attribute of value "#" (eyeew!)

$$('#navbar a', '#sidebar a');
// -> all links within the elements of ID "navbar" or "sidebar"

В версии 1.5.1 и выше, вы можете использовать различные типы современных селекторов:

$$('a:not([rel~=nofollow])');
// -> all links, excluding those whose rel attribute contains the word "nofollow"

$$('table tbody > tr:nth-child(even)');
// -> all even rows within all table bodies

$$('div:empty');
// -> all DIVs without content (i.e., whitespace-only)
Защитная, полная, оптимальная и надежная оклейка автомобилей от производителя. . Новый элитный женский аромат gucci envy me - женственный и выразительный.