Задать вопрос

Тел: +7 965 3737 888

jQuery Selectors

jQuery Selectors – это один из важнейших элементов библиотеки jQuery, которая фокусируется на взаимодействии Javascript и HTML. 

Ее инструменты помогают пользователю находить любые необходимые элементы HTML разметки и манипулировать ими. Давайте посмотрим, что представляет из себя сервис jQuery Selectors, как он работает и чем он может быть Вам полезен.

 

Что такое jQuery Selectors

jQuery Selectors – это инструмент, позволяющий выбирать определенные элементы HTML кода и управлять ими.

Селекторы позволяют Вам осуществлять поиск элементов HTML по следующим параметрам: id, классы, типы, атрибуты и так далее. jQuery поддерживает существующие CSS селекторы, а также имеет несколько дополнительных нестандартных селекторов.

Выбор  элемента

Селектор элемента jQuery позволяет отбирать элементы по их имени.

Например, Вы можете выбрать все элементы с тегом <p> на странице следующим образом:

$("p")

 

Выбор элементов по #id

Селектор jQuery по #id позволяет находить определенный элемент HTML кода по атрибуту id.

Id должен быть уникальным для конкретной страницы, поэтому Вам следует  использовать селектор #id, когда Вы хотите найти одиночный уникальный элемент.

Для того чтобы найти элемент с определенным id, напишите знак решетки, а после него – идентификатор элемента HTML кода:

$("#test")

 

Выбор элемента по параметру .class

Селектор jQuery по параметру class позволяет находить элементы определенного класса.

Например, набрав в строке поиска $(".intro"), Вы сможете найти все теги класа intro.

Больше примеров Вы сможете найти, изучив данную таблицу:

 

Селектор

Пример

Выбор элементов

*

$("*")

Все элементы

#id

$("#lastname")

Элемент с id="lastname"

.class

$(".intro")

Все элементы класса "intro"

.class,.class

$(".intro,.demo")

Все элементы класса "intro" или "demo"

element

$("p")

Все элементы с тегом <p>

el1,el2,el3

$("h1,div,p")

Все элементы с тегами

<h1>, <div> and <p>

 

 

 

:first

$("p:first")

Первый элемент с тегом <p>

:last

$("p:last")

Последний элемент с тегом <p>

:even

$("tr:even")

Все четные элементы с тегом <tr>

:odd

$("tr:odd")

Все нечетные элементы с тегом <tr>

:header

$(":header")

Все элементы хедера <h1>, <h2> ...

:animated

$(":animated")

Все анимированные элементы

:has(selector)

$("div:has(p)")

Все элементы с тегом <div>, которые содержат элемент <p>

:empty

$(":empty")

Все пустые элементы

:hidden

$("p:hidden")

Все скрытые элементы с тегом <p>

:visible

$("table:visible")

Все видимые таблицы

:root

$(":root")

Корневой элемент документа