11 февраля 2009 в 17:12

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. Селекторы
Антон Шевчук @AntonShevchuk
карма
490,9
рейтинг 0,0
Похожие публикации
Самое читаемое Разработка

Комментарии (30)

  • +3
    Круто. Спасибо. С удовольствием почитал. Даешь статью о написании плагинов!?
    • 0
      Здесь была очень неплочая статья про написание плагинов для jQuery для валидации формы.
      • 0
        *неплохая
    • 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
    Отличная статья!

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