Одна из основных особенностей jQuery это то, что данная технология позволяет изменять HTML страницу в реальном времени. В данной части нашей статьи мы поговорим о том, как же нам найти нужный элемент (ы) на странице.
Поиск нужных нам объектов осуществляется очень просто, рассмотрим простой пример:
$(“p”)
Вышеприведенная конструкция найдет все теги «p» на странице.
Еще один пример для большего понимания.
$(“p a.test”)
Данная конструкция найдет все ссылки “a” с классом “test” которые объявлены внутри тега “p”.
Как вы можете заметить поиск элементов осуществляется достаточно просто, синтаксис написания селекторов схож с синтаксисом CSS. Данная особенность помогает людям знакомым с CSS быстро освоить отбор элементов на странице.
Ниже мы приведем список основных базовых селекторов для отбора элементов на странице.
Селектор | Описание |
* | Соответствует любому элементу |
G | Соответствует всем элементам с именем G, где G это имя тега. |
G D | Соответствует всем элементам с именем D, вложенным в элемент с именем G |
G>D | Соответствует всем элементам с именем тега D, являющимся прямыми потомками элементов с именем G |
G+D | Соответствует всем элементам D, которые предшествуют любому элементу G на том же уровне |
G~D | Соответствует всем элементам D, которым предшествует любой элемент G на том же уровне вложенности |
G:has(D) | Соответствует всем элементам с именем тега G. Имеющим хотя бы один вложенный элемент с именем тега D |
G.class | Соответствует всем элементам G с именем класса class. |
G#id | Соответствует всем элементам G с именем идентификатором id. |
G[attribute] | Соответствует всем элементам G с атрибутом attribute. |
G[attribute=value] | Соответствует всем элементам G с атрибутом attribute со значением value. |
G[attribute~=value] | Соответствует всем элементам G с атрибутом attribute со значением которое наинается с value. |
G[attribute$=value] | Соответствует всем элементам G с атрибутом attribute со значением которое заканчивается value. |
G[attribute*=value] | Соответствует всем элементам G с атрибутом attribute со значением которого содержит value. |
Изучите данную таблицу и в последующем уроке мы научим Вас совершать операции с найденными элементами.
Желаем удачи.