Руководство по JQuery-селекторам

В этом руководстве мы рассмотрим различные аспекты использования JQuery селекторов. Чтобы вам было понятно содержание этой статьи, у вас должны быть базовые знания об объектах JavaScript и DOM.

Некоторые считают, что селекторы используются, чтобы применять свойства CSS к элементам, использующим JQuery. Но с их помощью можно сделать гораздо больше, чем просто применить свойства CSS. Так как JQuery-селекторы создают объекты DOM, с их помощью можно сделать то, что нельзя сделать с помощью объекта DOM. Например: изменить текст элемента, добавить HTML-элемент внутри другого и т.д.

Признаки JQuery-селекторов

Вот некоторые признаки JQuery-селекторов:

  • Способ создания объектов DOM: JQuery-селекторы - это способ создания объектов JavaScript в HTML-элементах. Если в JavaScript используется document.getElementById, чтобы создать объект HTML-элемента, то это признак JQuery-селектора;
  • Похожи на CSS-селекторы: селекторы JQuery похожи на CSS-селекторы;
  • Не что иное, как функции JQuery: В JQuery селекторы являются функциями, в которые передаются аргументы, как в CSS-селекторах;
  • Встроенный способ прохождения DOM до определенного уровня: После передачи селектором значения аргумента методу JQuery он проходит DOM и выбирает элементы, которые попадают под действие этого селектора.

Как использовать JQuery-селекторы

$() или Jquery() - это функция, в которой можно передать параметр селектора, как в CSS-селекторе. Ниже приведено несколько примеров:

Чтобы выбрать или создать объект DOM "testdiv" (JQuery селектор по атрибуту):

var objTestDiv = $('#testdiv');

Этот код вызывает document.getElementById(‘testdiv’).

Чтобы выбрать все теги span страницы:

var objAllSpan = $('span');

Мы снова вызываем родную функцию JavaScript document.getElementsByName(‘span’);

Чтобы выбрать все элементы с классом “red-div”:

var redDiv  = $('.red-div');

Снова используем document.getElementsByClassName(‘red-div’).

Чтобы выбрать все элементы страницы:

var allElement = $('*');

Так в чем же преимущество использования JQuery-селекторов? Вот несколько примеров, которые ответят на этот вопрос:

Чтобы выбрать все элементы div с классом “red-div” (JQuery селектор по классу):

var objRedDiv = $('div.red-div');

Выбираем все элементы div с классом red-div.

Другой сложный пример: Выбрать все дочерние элементы span из div с идентификатором “form”, которые имеют класс “button”:

var spanButton = $('form span.button');

JQuery несколько селекторов через запятую:

var multiple = $('#div1, #div2 ');

Мы выбираем элементы div с идентификатором div1 и div2.

Во всех приведенных выше выражениях, если вы внимательно посмотрите на аргумент, передаваемый функцией $(), то поймете, что он похож на CSS-селекторы. Например, “#form span.button” , “red-div” , “span” , “#testdiv”.

Различные типы JQuery-селекторов

В этом разделе мы кратко рассмотрим различные типы JQuery-селекторов, которые можно использовать.

JQuery-селекторы можно разделить на следующие категории:

  1. Основные селекторы CSS;
  2. JQuery селектор по атрибуту;
  3. Селекторы формы;
  4. Селекторы контента;
  5. Селекторы иерархии.

Основные селекторы CSS

JQuery-селектор, который работает как селекторы CSS1, относится к этой категории. Например, выборка по id элемента, класса элемента, * (для всех элементов) и разделенных запятой нескольких элементов, относится к этой категории. Селекторы, которые рассматривались в предыдущих разделах, являются основными селекторами CSS.

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

В JQuery можно выбрать элемент на основе HTML-атрибутов. Например, выбрать все теги анкоров, которые содержат атрибут target со значением "_blank". Или все div, которые содержат элемент data-id. JQuery селектор по атрибуту можно создать и в CSS. Но некоторые из них могут не работать в отдельных браузерах.

Ниже приведены примеры селекторов атрибутов разных типов, доступных в JQuery.

Выбор элементов по указанному атрибуту.

Чтобы выбрать все элементы span, которые имеют атрибут id, нужно написать такой селектор:

var spanwithid = $('span[id]')

Выбор элементов с определенным значением атрибута.

Чтобы выбрать все теги анкоров, которые содержат атрибут target со значением "_blank":

var target_blank = $('a[target="_blank"]');

Выбор элементов с атрибутом, содержащим определенное значение.

Чтобы выбрать все элементы div, id которых содержит строку “test”:

var id_has_test = $('div[id*="test"]');

Приведенный выше код будет выбирать все элементы div, id которых содержит “test”: “1-test-1” , “test-1” , “1-test”.

Селекторы формы

С помощью селекторов JQuery можно выбрать элемент form с различным набором правил. Например, все элементы формы disabled, все элементы формы enabled. Ниже приведено несколько JQuery-селекторов, которые могут быть использованы в форме.

Чтобы выбрать все элементы формы, с установленными флажками:

var checked = $('input:checked');

Выбрать все отключенные элементы:

var allDisable = $('input:disabled');

JQuery селектор input:

var text_input = $('input:text');

Выбрать все радио-кнопки:

var radio = $('input:radio')

Селекторы контента

В JQuery элемент также может быть выбран на основе его содержимого. Например, можно выбрать все элементы, содержащие слово "test". Или выбрать все элементы, которые не содержат какой-либо фрагмент, которые содержат тег р. Ниже приведено несколько примеров селекторов контента.

Соответствующие JQuery селекторов примеры использования:

Выбрать все теги р, которые содержат слово test:

var p_with_test = $('p:contains("test")');

Выбрать все элементы div, которые содержат тег p:

var div_has_p = $('div:has(p)');

Выбрать все пустые теги span:

var empty_span = $('span:empty');

Выбрать элементы div, которые не являются пустыми:

var not_empty_div = $(‘div:parent’);

Селекторы иерархии

В jQuery селекторы также могут быть применены на основе иерархии. Например, можно выбрать элементы одного уровня, родительский элемент на уровень выше или дочерние элементы. Ниже приведено несколько примеров:

Получить все элементы div одного уровня с конкретным элементом (JQuery селектор по id):

var div_sibling('#test ~ div');

Этот код выбирает все элементы div одного уровня с элементом, имеющим id test.

Вывести все элементы div одного уровня с абзацами:

var div_sib_p = $('div + p');

Получить все элементы li конкретного элемента ul:

var objli = $('ul.nav > li');

Перевод статьи «jQuery Selectors Tutorial» был подготовлен дружной командой проекта Сайтостроение от А до Я.

16 июня 2016 в 15:06
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок