Обращение к элементам с помощью 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)
