Обращение к элементам с помощью JQuery
jQuery позволяет легко получать доступ к любым элементам на странице (ссылкам, изображениями, блочным элементам, текстовым полям и т.п.). При этом нам не требуется писать длинные конструкции, как это делается, например, в JavaScript. Ниже – небольшое справочное руководство.
Основная конструкция для выбора того или иного элемента на странице – $(селектор).
Допустим мы имеем следующий html-код:
<!DOCTYPE html> <html> <head></head> <body> <span id="top">Текст 1</span> <a href="1.html" class="main">1</a> <a href="2.html">2</a> <a href="3.pdf">3</a> <span rel="bottom">Текст 2</span> <h2><a href="other.php">Разное</a></h2> </body> </html>
Вот несколько примеров, как мы можем обратиться к некоторым элементам этого кода:
$('.main')— получаем доступ к ссылке с классом main$('#top')— получаем доступ к элементу span c идентификатором «top»$("a[href$='.pdf']")— получаем доступ к ссылкам, ведущим на pdf документ$("span[rel='bottom']")— получаем доступ к элементу span, имеющему атрибут rel, равный значению bottom$("h2 > a")— получаем доступ к ссылкам, являющимся прямыми потомками элемента h2
Очень просто, не правда ли?
Другие примеры выбора элементов страницы, не связанные с вышеприведенным кодом:
$("a[href^='http://']")— все ссылки на странице, начинающиеся с http://$("a[href*='codernote.ru']")— все ссылки на странице, содержащие в адресе codernote.ru$("input[type=text]")— все текстовые поля (с типом text)$("a.my")— ссылки, имеющие класс my$("div#cat")— элемент div с идентификатором (id) cat$("p:first")— первый элемент p на странице$("p:last")— последний элемент p на странице$("li:odd")— нечетный элементы li в списке$("li:even")— четные элементы li в списке$("li:first-child")— первый элемент li в списке$("li:last-child")— последний элемент li в списке$("li:nth-child(2)")— второй li в списке (отсчет с 1)$("p:eq(5)")— шестой элемент p на странице$("a:gt(3)")— все ссылки после 4-й (отсчет с 0)$("a:lt(3)")— все ссылки до 4-й (отсчет с 0)
