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