Несколько jquery селекторов: Перечисление селекторов в jQuery? — Хабр Q&A

Селекторы jQuery

Селекторы jQuery выбирают элементы веб-страницы, а методы выполняют операции с этими элементами.

Чтобы выбрать элементы, нужно передать селектор функции $(), например, $("img:odd"). Данный селектор будет применен ко всему дереву DOM, и чтобы ограничить процедуру отбора элементов, можно указать определенный фрагмент дерева DOM — $("img:odd", "div#slideshow"). Таким образом будут выбраны все четные картинки из блока с id=slideshow.

Для более точного выбора элементов селекторы можно комбинировать, например, следующая запись позволит выбрать все флажки полей формы, которые были выделены пользователем — $("input[type=checkbox][checked]").

А с помощью этой комбинации селекторов $("input:checkbox:checked:enabled") можно выбрать только активные и отмеченные флажки полей формы.

Также, допускается объединять несколько селекторов в одно выражение, разделяя селекторы запятой — $("p,span"), что позволит отобрать все элементы <p> и <span>.

Все jQuery селекторы | jQuery справочник

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

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

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

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

Для начала нам понадобиться макет HTML странички (вполне типичный макет):

<div id=»header»>

    <h2><a href=»/» title=»homepage»>Title</a></h2>

    <h3>Sub-title <span>small description</span></h3>
</div>
<div id=»wrapper»>

    <div id=»content»>

        <div class=»post»>

            <h4>Post Title</h4>

            <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»>

            <h4>Post Title</h4>

            <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’);       // выбо заголовоков h2, h3, h4 и т.д.

$(‘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. Селекторы

Селекторы JQuery

В jQuery, селекторы в основном позаимствованы из CSS 1-3, также добавлены свои, что дало хороший набор инструментов для манипуляций с элементами в документе.

Описание всех селекторов на api.jquery.com.

Если в названии класса или атрибута есть спец-символы (!"#$%&'()*+,./:;<=>?@[]^`{|}~), то они должны экранироваться.

Например, для элемента с id="foo.bar", будет такой селектор $("#foo\.bar").

1

Теги, ID и классы

2

Атрибуты

3

Порядок элементов

Поиск в родителе

Поиск по индексу (индекс элементов начинается с нуля)

4

Состояние элементов

5

Поля форм

Состояние полей

Селекторы jQuery: как использовать?

JQuery – библиотека методов, написанных на языке JavaScript, которые предназначены для упрощенной работы с элементами HTML страницы. Данная библиотека также значительно упрощает выборку этих элементов, ведь поддерживает набор селекторов, большая часть которых заимствована из CSS. В данной статье мы подробно расскажем о всех селекторах jQuery и приведем примеры их использования.

CSS и jQuery

Как говорилось выше, селекторы в jQuery заимствованы из CSS, однако здесь есть несколько «НО».

• Во-первых, jQuery поддерживает только селекторы, выбирающие элементы DOM, т. е. вы не сможете работать с событийными селекторами, например, hover, и псевдо-элементами first-line.
• Во-вторых, у jQuery имеется множество других селекторов, которые вы не встречали в правилах CSS, именно поэтому, если вы уже знаете все элементы CSS, эта статья все равно будет актуальна для вас.

Базовые элементы

Данные селекторы используются чаще всего, ведь это самый простой и надежный способ выборки элементов. Эта группа полностью соответствует селекторам CSS:

Как и в CSS, вы можете выбрать несколько селекторов jQuery одновременно. Их можно прописать через запятую. Например, использовать селектор jquery по имени тега и по ID — $(«#IDone, b»). Допускается и выборка через тег+класс, либо тег+ID, например, $(«b.classA»).

Селекторы атрибутов

Используя различные CMS, вы можете столкнуться с ситуацией, когда элементу HTML-разметки невозможно задать Id или класс. Та же проблема возникает при обработке контента, генерируемого пользователем. Отсюда возникает проблема выборки конкретных элементов, однако ее легко решить, используя селектор по атрибуту из jquery.

Вы можете комбинировать атрибуты, чтобы сузить поиск подходящих элементов, например, $(«img[width=500][height=260]»).

Выборка элементов по содержанию

Покопаться в содержимом элементов HTML-страницы и выбрать по результатам нужный из них — уникальная возможность jQuery. Используя такой метод, вы можете, например, сделать селектор jquery по тексту, содержащемуся в параграфе (<p>текст</p>).

Каждый из представленных селекторов будет выбирать определенный элемент из кода на картинке ниже.

Такой jquery селектор также можно совмещать с другими, например, $(«p.mail:contains(‘e-mail’)») будет выбирать все параграфы с классом «mail», которые содержат в себе строку «e-mail».

Выбор элементов по иерархии

Данный метод абсолютно идентичен селекторам из CSS. Он позволяет выбрать элементы, в зависимости от их положения относительно родственных элементов в структуре DOM. Здесь лучше сразу разбирать селекторы jquery на примерах.

Отдельно стоит поговорить о jquery селекторе li:nth-child(n), ведь он позволяет задавать не только конкретные числа. Так он может выбирать все четные элементы, если вместо n задать константу even, либо нечетные, задав odd. Вместо n также можно использовать выражение, например, $(«li:nth-child(2n+3)») будет выбирать каждый второй элемент, начиная свой отсчет с третьего прямого потомка.

Работа с полями формы

Тег input имеет множество различных вариаций, работа которых зависит от атрибута type. Для выбора различных типов полей ввода в jQuery предусмотрены специальные селекторы.

Выбор по положению

JQuery селектор положения очень похож на селектор иерархии. Он выбирает элемент по его положению из списка подходящих под предыдущее условие элементов.

Прочие селекторы

Данные селекторы невозможно присоединить к какой-либо группе, однако они не менее важны. Например, селектор: not(), который можно назвать логическим, позволяет «перевернуть» условие или его часть, сделав выборку из неподходящих условий.

Также не менее полезным окажется селектор: hidden, который позволит развернуть элемент-картинку с размерами 0х0 рх на весь экран, например, по нажатию кнопки.

Как лучше использовать селекторы?

Оптимизация сайта — важная задача, ведь от качества ее выполнения зависит нагрузка на сервер, удобство работы пользователя, а также время отклика интерфейса. Об оптимизации скриптов на jQuery и на JavaScript в целом написано множество книг, однако они выходят за рамки данной статьи. Мы лишь дадим несколько простых советов, которые значительно увеличат производительность скриптов при выборке элементов.

1. Старайтесь обходиться базовыми селекторами jQuery.
2. При выборе нескольких элементов для обработки старайтесь объединить их в некоторую группу, а не выбирать каждый по отдельности. Сделать это можно через класс, либо используя более специфичные селекторы.
3. Используя выбор по положению, старайтесь максимально минимизировать список, из которого будет происходить выборка — это значительно снизит скорость поиска нужного элемента.

Пример скрипта с jQuery и его селекторами:

Заключение

Теперь вы знаете абсолютно все селекторы из jQuery, кроме того, надеемся, что примеры помогли вам понять, как строить нужное условие из нескольких различных селекторов.

javascript — Выбор нескольких классов с помощью jQuery

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

.

javascript — селектор jQuery с несколькими элементами, включая оператор И

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

6. О компании

.