Эта мини-статья посвящена очень простой вещи, которая будет интересна, прежде всего, для начинающих пользователей библиотеки jquery.com > jQuery .
Я покажу вам, как прикрепить небольшое изображение к каждой ссылке, чтобы она выделялась.
Задача №1
Нашей первой задачей будет прикрепить к каждой ссылке небольшое изображение «стрелочки» справа, которое показывает, что данный текст является ссылкой.Эта функция позволяет дополнительно указать пользователю ссылку в тексте страницы, и ее используют многие сайты, в том числе один из самых популярных интернет-ресурсов — Википедия.
Решение займет всего одну строку (точнее, три, если считать стандартное начало и конец):
$(document).ready(function() { $("a").
append("<img src='link_arrow.png' />"); });
$(документ).
готово
Теперь давайте разберемся, как это работает. Для обработки событий мы используем асинхронный механизм, то есть передаем в метод функцию, которая должна вызываться при возникновении события.
Первое событие, которое мы обрабатываем, — $(document).
ready. Это происходит, когда документ готов к обработке, когда он загружен.
Грубо говоря, это событие можно сравнить с традиционным событием window.onload в JavaScript. Но $(document).
ready работает быстрее, поскольку не ожидает загрузки всех элементов веб-страницы, которые могут не потребоваться для загрузки сценария, например больших изображений.
$(.
)
Теперь пришло время более подробно рассмотреть функцию $(…).
Это основа фреймворка jQuery, который по данному ему описанию находит на странице нужные элементы.
Я не зря использовал слово «описание» — это может быть и CSS, и XPath, и с помощью плагинов и другие дополнительные форматы.
То есть конструкция $("a") находит список всех ссылок, точнее элементов, представляющих тег "a".
Чтобы выбрать текущий элемент, для которого происходит обработка, необходимо использовать переменную this. Метод добавления присваивает справа строку, которая передается ему в параметрах.
Теперь любые ссылки на нашей странице будут иметь небольшую стрелку, изображение которой хранится в файле link_arrow.png. Но внимательный читатель скажет вам, что аналогичного эффекта можно добиться, используя чистый CSS; он также может заметить, что на страницах Википедии стрелками отмечены только внешние ссылки.
Этого невозможно добиться без серверного кода с использованием чистого CSS (или, по крайней мере, такое решение сложно найти, особенно кроссбраузерное).
О том, как сделать более сложный выбор (включая внешние ссылки), читайте в следующих частях.
PS или планы на будущее
Если эта статья будет востребована, я постараюсь опубликовать еще несколько частей, что сделаю, обрабатывая свои материалы о jQuery. У меня есть материалы для верстальщиков и программистов (на хабе был хорошая статья по этой теме) и AJAX (внутри jQuery).Размер статей будет небольшим и они будут посвящены небольшим практическим проблемам.
Серия статей
jQuery для верстальщика (часть 1): стрелки для ссылок jQuery для верстальщика (часть 2): вкусные меню Теги: #JavaScript #jQuery #Разработка веб-сайтов-
Мюллер, Иоганнес Петер
19 Oct, 24 -
Защита От Темных Искусств, Эпизод I
19 Oct, 24 -
Краткая История Веб-Дизайна
19 Oct, 24 -
Фукусимская Железная Компания
19 Oct, 24 -
Введение В Комплексные Числа
19 Oct, 24 -
/Dev/Null Как Услуга
19 Oct, 24
