CSS-селекторы в js-core

В описываемой версии js-core нет собственного движка CSS-селекторов, но легко внедрить один из существующих.

Возьмем готовые решения Sizzle, Peppy и Yass, и сделаем расширение для js-core, которое будет автоматически преобразовывать список элементов, выдаваемый этими движками, в объект для работы со списками узлов, предусмотренный в framework’е.

Sizzle

core.query = function(selector, context) {
    return new core.list(Sizzle(selector, context), false);
};
core.prototype.query = function(selector) {
    return new core.list(Sizzle(selector, this.node), false);
};

Peppy

core.query = function(selector, context) {
    return new core.list(peppy.query(selector, context), false);
};
core.prototype.query = function(selector) {
    return new core.list(peppy.query(selector, this.node), false);
};

Yass

core.query = function(selector, context) {
    return new core.list(yass(selector, context), false);
};
core.prototype.query = function(selector) {
    return new core.list(yass(selector, this.node), false);
};

Добавьте одно из этих расширений сразу после загрузки js-core и соответствующего движка выборки элементов по CSS-селекторам.

Рассмотрим, как это можно использовать. Возьмем следующий XHTML-код:

<ul id="list">
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
    <li>Fourth list item</li>
    <li>Fifth list item</li>
    <li>Sixth list item</li>
    <li>Seventh list item</li>
    <li>Eighth list item</li>
</ul>

Опишем CSS-класс:

.odd {
    background: #ffc;
}

Теперь, с помощью JavaScript, добавим класс odd всем нечетным элементам списка list:

$.query('#list > li:nth-child(odd)').each('addClass', 'odd');

// или
$('list').query('li:nth-child(odd)').each('addClass', 'odd');

Получим так называемую «зебру» из элементов списка:

<ul id="list">
    <li class="odd">First list item</li>
    <li>Second list item</li>
    <li class="odd">Third list item</li>
    <li>Fourth list item</li>
    <li class="odd">Fifth list item</li>
    <li>Sixth list item</li>
    <li class="odd">Seventh list item</li>
    <li>Eighth list item</li>
</ul>

В функции $.query(…) вторым параметром можно указать контекст поиска. Это бывает удобно, например, при поиске элементов ввода внутри форм или нахождении элементов в XML-данных, пришедших с сервера через AJAX.

// найти все чекбоксы в первой форме документа
$.query('input[type="checkbox"]', document.forms[0]);

В методе $('id'|node).query('selector'), в качестве контекста поиска, автоматически передается текущий элемент.

Скачать: пример, js-core.