jQuery для начинающих. Часть 4. Селекторы



    Последнее время мне всё чаще задают вопрос как выбрать тот или иной элемент в DOM'е, и данный пост будет сплошь посвящен селекторам в jQuery, возможно большинство из них Вы видели в различных источниках, но собрать их воедино все же стоит…


    Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)


    Селекторы в jQuery базируются на CSS селекторах, а так же поддерживают XPath. Дабы не закапываться в документацию буду приводить примеры, много примеров. Но начнем с самых азов…

    Для начала нам понадобиться макет HTML странички (вполне типичный макет):
    <div id="header">
        <h1><a href="/" title="homepage">Title</a></h1>
        <h2>Sub-title <span>small description</span></h2>
    </div>
    <div id="wrapper">
        <div id="content">
            <div class="post">
                <h3>Post Title</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
                   Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
                   vel varius augue tortor vel tortor.</p>
                <span>Image Title</span>
                <img src="/image1.jpg" alt="Image Alt Text"/>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
                   Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
                   vel varius augue tortor vel tortor.</p>
                <span class="inner-banner">Banner Text</span>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
                   Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
                   vel varius augue tortor vel tortor.</p>
            </div>
            <span id="banner"><img src="/banner1.jpg" alt="Big Banner"/></span>
            <div class="post">
                <h3>Post Title</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
                   Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
                   vel varius augue tortor vel tortor.</p>
                <span>Image Title</span>
                <img src="/image2.jpg" alt="Image Alt Text"/>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
                   Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
                   vel varius augue tortor vel tortor.</p>
                <span class="inner-banner">Banner Text</span>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
                   Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
                   vel varius augue tortor vel tortor.</p>
            </div>
        </div>
    </div>
    <div id="sidebar">
        <ul> 
             <li><a href="/item0.html">Menu Item 0</a></li>
             <li><a href="/item1.html">Menu Item 1</a></li>
             <li><a href="/item2.html">Menu Item 2</a></li>
             <li><a href="/item3.html">Menu Item 3</a></li>
        </ul>
    </div>
    <div id="footer">
        Copyright &copy; 2008
    </div>


    А теперь приступим к выборкам:

    Выбор элементов по Id либо ClassName аналогично используемому в CSS
    $('#sidebar');    // выбор элемента с id = sidebar
    $('.post');       // выбор элементов с class = post
    $('div#sidebar')// выбор элемента div с id = sidebar
    $('div.post');    // выбор элементов div с class = post

    Примечание: используйте валидные имена классов и id

    Бродим по иерархии объектов в DOM'е



    Простой выбор потомков:
    $('div span');            // выбор всех span элементов в элементах div


    Аналогичный результат так же можно получить используя следующую конструкцию:
    $('div').find('span');    // выбор всех span элементов в элементах div


    Выбор только непосредственных потомков
    $('div > span');          // выбор всех span элементов в элементах div, где span является прямым потомком div'a


    Как же лучше поступить, что работает быстрее? Надо бы протестировать…

    Так же селекторы можно группировать:
    $('div, span');          // выбор всех div и span элементов


    Поиск по соседям:
    $('span + img');         // выбор всех img элементов перед которыми идут span элементы
    $('span ~ img');         // выбор всех img элементов после первого элемента span
    $('#banner').prev();     // выбор предыдущего элемента от найденого
    $('#banner').next();     // выбор следующего элемента от найденого


    Выбор всех элементов, всех предков, всех потомков
    $('*');                // выбор всех элементов
    $('p > *');            // выбор всех потомков элементов p
    $('p').children();     // --
    $('p').parent();       // выбор всех прямых предков элементов p
    $('* > p');            // выбор всех предков элементов p (скорей всего Вам не понадобится)
    $('p').parents();      // --
    $('p').parents('div')// выбор всех предков элемента p которые есть div (parents принимает в качестве параметра селектор)


    Фильтры


    Фильтров в jQuery реализовано достаточно много, и пользоваться ими одно удовольствие:
    $('div:first');     // выбираем первый div в доме
    $('div:last');      // выбираем последний div в доме
    $('div:not(.red)')// выбираем div'ы у которых нету класса red
    $('div:even');      // выбираем четные div'ы
    $('div:odd');       // выбираем нечетные div'ы
    $('div:eq(N)');     // выбираем div идущим под номером N в DOMe
    $('div:gt(N)');     // выбираем div'ы, индекс которых больше чем N в DOMe
    $('div:lt(N)');     // выбираем div'ы, индекс которых меньше чем N в DOMe
    $(':header');       // выбо заголовоков h1, h2, h3 и т.д.
    $('div:animated');  // выбор элементов с активной анимацией


    Фильтры по контенту и видимости:
    $('div:contains(text)')// выбираем div'ы содержащие текст
    $('div:empty');          // выбираем пустые div'ы
    $('div:has(p)');         // выбираем div'ы которые содержат p
    $('div.red').filter('.bold') // выбираем div'ы которые содержат класс red и класс bold
    $('div:hidden');         // выбираем скрытые div'ы
    $('div:visible');        // выбираем видимые div'ы


    Так же есть фильтры по атрибутам:
    $("div[id]");           // выбор всех div с атрибутом id
    $("div[title='my']");   // выбор всех div с атрибутом title=my
    $("div[title!='my']");  // выбор всех div с атрибутом title не равного my
    $("div[title^='my']");  // выбор всех div с атрибутом title начинающихся с my 
                            // <div title="myCat">,<div title="myCoffee">, <div title="my...">
    $("div[title$='my']");  // выбор всех div с атрибутом title заканчивающихся на my 
                            // <div title="itsmy">,<div title="somy">, <div title="...my">
    $("div[title*='my']");  // выбор всех div с атрибутом title содержащим my
                            // <div title="itsmy">,<div title="myCat">, <div title="its my cat">,<div title="...my...">


    так же стоит отдельно отметить следующий фильтр:
    $("a[rel~='external']")// выбор всех A с атрибутом rel содержащим external в списке значений разделенных пробелом


    В результате его работы будут выбраны следующие теги:
    <a href="" rel="external">link</a> — да
    <a href="" rel="nofollow external">link</a> — да
    <a href="" rel="external nofollow">link</a> — да
    <a href="" rel="friend external follow">link</a> — да
    <a href="" rel="external-link">link</a> — нет


    Для работы с элементами форм есть ряд селекторов позволяющий выбирать по типу элемента и фильтров — enabled/disabled/selected/checked:
    $(":text");            // выбор всех input элементов с типом =text 
    $(":radio");           // выбор всех input элементов с типом =radio
                           // и так далее
    $("input:enabled");    // выбор всех включенных элементов input
    $("input:checked");    // выбор всех отмеченных чекбоксов


    Фильтры так же можно группировать:
    $("div[name=city]:visible:has(p)")// выбор видимого div'a с именем city, который содержит тег p


    Приведу так же ряд полезных селекторов для работы с элементами форм:
    $("form select[name=city] option:selected").val()// получение выбранного(-ых) элементов в селекте city
    $("form :radio[name=some]:checked").val()// получение выбранного значения радиобатона с именем some
    $("form :checkbox:checked")// выбор всех выбранных чекбоксов


    Еще советую почитать статью jQuery: 8 полезных советов при работе с элементом SELECT

    Если Вам хочеться опробывать как это все работает — то для этого можете воспользоваться тестовой страничкой

    Слайды


    Как-то слишком много текста получилось, пожалуй пора показывать слайды ;)

    Данная статья написана с использованием следующих ресурсов:


    Цикл статей


    1. jQuery для начинающих
    2. jQuery для начинающих. Часть 2. JavaScript Меню
    3. jQuery для начинающих. Часть 3. AJAX
    4. jQuery для начинающих. Часть 4. Селекторы
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 30
    • +3
      Круто. Спасибо. С удовольствием почитал. Даешь статью о написании плагинов!?
      • 0
        Здесь была очень неплочая статья про написание плагинов для jQuery для валидации формы.
      • 0
        По написанию плагинов мне очень понравилась статья тут
      • +4
        Статья хорошая. Чувствуется труд.
        Есть несколько дополнений по оптимизированному коду.

        Лучше писать
        не $('.classname');, а $('element.classname');, если позволяет ситуация так как вторая конструкция работает быстрее.

        Вместо
        $('element#idname'); лучше писать $('#idname'); — будет также работать быстрее, к тому же айдишник должен быть уникальным на странице, поэтому имя элемента не несет смысловой нагрузки.

        За статьи по jQuery — респект.
        • 0
          вот здесь чуть подробнее про оптимизацию.
          Есть даже тест на скорость разных селекторов (но как по мне он чуть глючит=))
          • 0
            Насчет теста на скорость — там используется библиотека версии 1.1.2
            Сейчас же актуальны 1.2.6 и 1.3.1
            Изменения с каждой версией делают библиотеку быстрее.
        • +1
          Наконец то четвертая часть! Спасибо!
          • 0
            Огромное спасибо!!! Все кратко и по делу. =)
            Можно распечатать и использовать как шпаргалку…
            • 0
              Кстати, насчет шпаргалки по jQuery — отлично подойдет сервис visualjquery.com
              Все по сути.
              • 0
                Уже лучше использовать api.jquery.com
                • +1
                  Большое спасибо. Я раньше был там, но АПИ еще не было локальным приложением. Сделали супер. Зачет.
            • +1
              1) $('p').parent(); // выбор всех прямых предков элементов p
              2) $('* > p'); // выбор всех предков элементов p (скорей всего Вам не понадобится)
              3) $('p').parents(); // — 1) Как я понимаю, прямой предок может быть только один.
              2) Это выбор всех элемнтов р, у коорых есть любые предки.
              3) Почему нет описания? Выбор всех предков любого уровня.
              • 0
                Да что за беда с парсером? Он превратил два дифиса в тире и съел перводы строк и пункты 3) и 1) оказались на одной строке.
                • 0
                  1) Но элементов «p» может быть много.
                  • +1
                    3) это типа ---"---, т.е. «то же самое»
                    2) тоже удивило
                  • +1
                    Забыл упомянуть про группировку атрибутов, например:
                    $("#content[rel='main'][tooltip='content']");
                    • +1
                      За 6 часов до появления этой статьи как раз искал такой материал. Надо больше спать.
                      • 0
                        На docs.jquery.com/Selectors все это внятно и подробно описано, и, кроме того, если потыкать в другие ссылки на этой странице, то можно найти еще много интересного ;)
                      • 0
                        Спасибо за статью! Все очень понятно разжевано расписано =)
                        • 0
                          Вот чем я займусь в ближайшем будущем :) спасибо за столь интересные статьи.
                          • 0
                            Спасибо — будем делать из всего этого шпаргалку :)
                            А то все в памяти не помещается.
                            • 0
                              Вот еще грабли (может кому помогут):

                              В jQuery 1.2.6 нормально работал селектор вида $("#id1 #id2"). Он был нужен, когда id2 не уникальный в документе (скажем, получался при клонировании куска кода). В jQuery 1.3 такой селектор не работает, и вместо этого надо использовать $("#id1").find("#id2").
                              • 0
                                Приветствую, Антон !
Ваши посты мне понравились на хабре. Я сейчас ищу срочно программиста для доводки проекта.
Оплата достойная, требования — тоже.
Пожалуйста, ответьте мне на мейл, я перешлю Вам ТЗ.
Заранее спасибо! Удачного дня!
                                • 0
                                  всем в помощь — VisualjQuery
                                  • 0
                                    Большое спасибо)
                                    Долго ждал продолжения цикла статей… и вот наконец дождался)
                                    • 0
                                      В конце после прочтения можно закрепить на практике.
                                      • 0
                                        подскажите пожалуйста, как правильно написать такую вещь
                                        <div class="header">
                                            <div class="content"></div>
                                        </div>
                                        
                                        $(".header").click(function () {
                                            this.find(".content").show();
                                        });
                                        

                                        то есть после выбора элемента в функции требуется выбрать вложенный в него элемент нужного класса, как это сделать?
                                        • 0
                                          вопрос снимается,
                                          $(this).parent().find(".content").show();
                                        • 0
                                          Отличная статья!

                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.