Обращение к элементам с помощью JQuery

jQuery позволяет легко получать доступ к любым элементам на странице (ссылкам, изображениями, блочным элементам, текстовым полям и т.п.). При этом нам не требуется писать длинные конструкции, как это делается, например, в JavaScript. Ниже – небольшое справочное руководство.

Основная конструкция для выбора того или иного элемента на странице – $(селектор).

Допустим мы имеем следующий html-код:

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

  1. $('.main') — получаем доступ к ссылке с классом main
  2. $('#top') — получаем доступ к элементу span c идентификатором «top»
  3. $("a[href$='.pdf']") — получаем доступ к ссылкам, ведущим на pdf документ
  4. $("span[rel='bottom']") — получаем доступ к элементу span, имеющему атрибут rel, равный значению bottom
  5. $("h2 > a") — получаем доступ к ссылкам, являющимся прямыми потомками элемента h2

Очень просто, не правда ли?
Другие примеры выбора элементов страницы, не связанные с вышеприведенным кодом:

  1. $("a[href^='http://']") — все ссылки на странице, начинающиеся с http://
  2. $("a[href*='codernote.ru']") — все ссылки на странице, содержащие в адресе codernote.ru
  3. $("input[type=text]") — все текстовые поля (с типом text)
  4. $("a.my") — ссылки, имеющие класс my
  5. $("div#cat") — элемент div с идентификатором (id) cat
  6. $("p:first") — первый элемент p на странице
  7. $("p:last") — последний элемент p на странице
  8. $("li:odd") — нечетный элементы li в списке
  9. $("li:even") — четные элементы li в списке
  10. $("li:first-child") — первый элемент li в списке
  11. $("li:last-child") — последний элемент li в списке
  12. $("li:nth-child(2)") — второй li в списке (отсчет с 1)
  13. $("p:eq(5)") — шестой элемент p на странице
  14. $("a:gt(3)") — все ссылки после 4-й (отсчет с 0)
  15. $("a:lt(3)") — все ссылки до 4-й (отсчет с 0)

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *