Для создания гиперссылки используется тег. Вставка изображений и ссылок в html. Как убрать подчеркивание и изменить цвет ссылки

Этой публикацией я решил открыть цикл статей для тех, кто хочет овладеть фреймворком jQuery. Как всегда я буду стараться быть кратким и приводить как можно больше примеров. Последующие статьи, в принципе, можно рассматривать как вольный перевод документации c http://docs.jquery.com .

Итак, вы решили освоить jQuery, с чего начать? С JavaScript вы, конечно же, уже знакомы, иначе не решили бы. Что еще полезно знать для лучшего понимания этого волшебного фреймворка:

• CSS селекторы (посмотреть можно )
• XPath (посмотреть можно )

На первый взгляд связь не очевидна, но дело в том, что в основе функционирования jQuery лежит возможность легкого доступа к любому узлу xml дерева, коим и является html документ, а доступ этот осуществляется с помощью механизмов

CSS и XPath. Поэтому если эти понятия вам знакомы, то считайте, что вы уже на 50% знакомы с jQuery, а если нет — все в ваших руках.

Итак, для начала неплохо бы научиться получать любой нужный нам элемент на странице или группу элементов, отобранную по определенному признаку:

$("div") // все div"ы на странице $("div:first") // только первый div $("div:last") // только последний $("div:even") // все четные div"ы $("div.myclass") // div имеющий class="myclass" $("#mydiv") // элемент с id="mydiv", не обязательно div $("input:text") // все элементы input с type="text" $("input:checkbox:checked") // все чекбоксы с checked=true $("div", "#myid") // все div"ы, находящиеся в контейнере с id="myid" $("div.myclass img") // img, который находится в div"е с class="myclass" $("div.myclass, div.my2") // div"ы имеющие class="myclass" и class="my2"

Список можно продолжать долго, но для этого существует документация (благо у jQuery она превосходная, с примерами и бес лишней писанины), а мы сейчас пытаемся понять суть вопроса. Пытливый взор сразу обратил внимание на конструкцию $() в каждом примере. Что это? Это функция: имя — $ (разве запрещено?), а в круглых скобках — параметры. Теперь становится понятным, для чего нужны CSS и XPath — их конструкции и выступают в качестве параметров для выборки.

Функция $ — это фундамент jQuery, она так или иначе, вызывается всеми его методами. Если это функция, то она может что-то возвращать. А возвращает она как раз массив элементов, выбранных из документа на основе заданных параметров, т.о.

Var tmp = $("div"); // можно присвоить значение alert(tmp.length) // и посмотреть количество элементов массива

Элементами данного массива можно манипулировать:

$("div").not(".red") // все div"ы, кроме тех, у которых есть класс "red", // т.е. не только class="red", но и class="myclass red" $("span.green").add("span.gray") // в данном случае // идентично $("span.green, span.gray"), // но бывает, что без add не обойтись $("div").filter(".red, :first") // выбирает все дивы, а потом выбирает // из них первый и с классом red

В данном примере кроме операций над выборкой элементов вы также познакомились с методами jQuery и способом их применения. Методы вызываются через точку и применяются к массиву, после которого они были вызваны. Методы возвращают новый или модифицированный массив. Количество вызовов методов не ограничено.

$("div") //вернул все div"ы.not(".red") //отсек div"ы с классом red и вернул остальные.add("span.green") //добавил к выборке span"ы c классом green .addClass("myclass") //добавил класс myclass каждому элементу выборки.removeAttr("title") //удалил атрибут title у каждого элемента выборки (если был)

Методы выполняются в порядке вызова (за исключением ajax методов, которые ожидают ответа сервера) слева направо. Это можно использовать для свободного перемещения по DOM дереву:

здесь текст

этот текст будет удален

а этот нет

del

$("#myid").click(function (){ $(this).parent().prev().prev().empty(); }); Думаю, названия методов в предыдущем примере говорят сами за себя, подробнее они будут рассмотрены в соответствующей статье.

Ну вот, пожалуй, и все основы — выбрать нужный элемент (или группу) и произвести над ним нужные действия (читай применить нужный метод). Просто, как все гениальное! Основываясь на двух этих простых вещах jQuery имеет свой гибкий механизм обработки событий и ajax взаимодействия с сервером, весомый набор визуальных эффектов и многое другое. Все это я постараюсь осветить в последующих публикациях.

jQuery — библиотека JavaScript, содержащая в себе готовые функции языка JavaScript, все операции jQuery выполняются из кода JavaScript.

Библиотека jQuery производит манипуляции с html-элементами, управляя их поведением и используя DOM для изменения структуры веб-страницы. При этом исходные файлы HTML и CSS не меняются, изменения вносятся лишь в отображение страницы для пользователя.

Для выбора элементов используются селекторы CSS. Выбор осуществляется с помощью функции $() . При вызове функция $() возвращает новый экземпляр объекта JQuery, который оборачивает ноль или более элементов DOM и позволяет взаимодействовать с ними различными способами.

Выполнение различных сценариев возможно только после окончания загрузки структуры документа document , когда браузер преобразует html-код страницы в дерево DOM. Управление процессом загрузки обеспечивает конструкция

JQuery(document).ready(function() { ... });

Сначала производится обертывание экземпляра document в функцию jQuery() , после применяется метод ready() , которому передается функция function() {...} , исполняемая после загрузки документа.

На практике обычно используется сокращенная форма такой записи jQuery(function() {...}); , или $(function() {...}); .

Для хранения информации при работе с библиотекой jQuery используются переменные JavaScript. В переменных могут храниться элементы. Имена переменных, предназначенных для хранения возвращаемых элементов, начинаются со знака $ , например:

$h = $(".list").parent().parent().detach();

Для хранения нескольких элементов используются массивы JavaScript:

$k = 15;

Правила работы с библиотекой jQuery 1. Как добавить jQuery на веб-страницу

Добавить библиотеку jQuery на свою веб-страницу можно двумя способами:

Использовать версию файла jQuery, размещенную на ресурсах Google , Microsoft или jQuery.com .
Данный метод использует «Сеть дистрибуции контента» (CDN, content distribution network), т.е. файл jQuery расположен на другом веб-сайте, который при запросе пользователем отправляет данный файл на его компьютер. Очевидные преимущества данного способа — снижение нагрузки на собственный веб-сервер и ускорение загрузки файла в силу разветвленности сети серверов дистрибьютора.

Чтобы воспользоваться данным способом, необходимо перейти по одной из ссылок:



После перехода на сайт ресурса вам потребуется всего лишь скопировать ссылку на jQuery-файл и добавить её на свою веб-страницу между тегами .... В результате у вас должно получиться, например,

Загрузить последнюю версию библиотеки jQuery с официального сайта. Для этого вам необходимо перейти по адресу jQuery.com и выбрать интересующую вас версию библиотеки. Для загрузки предлагается две версии jQuery-файла — минимизированный и несжатый. Размер несжатого файла около 300 Кб, он содержит комментарии, поэтому его лучше использовать с целью разработки и отладки кода.
Минимизированная версия файла весит около 100Кб, в ней удалены все комментарии и ненужные пробелы, что ускоряет загрузку файла браузером.

Для загрузки нужно перейти по ссылке, и в открывшемся окне щелкнуть правой кнопкой мыши и выбрать «Сохранить как …». После этого поместить файл в нужную папку (обычно для этого используется папка «scripts») и добавить его на вашу страницу:

2. Правила добавления jQuery на страницу

Размещайте ссылки на jQuery-файл внутри тега .
Размещайте ссылки на jQuery-файл после ссылок на стили CSS, так как зачастую библиотека jQuery производит манипуляции со стилями элементов веб-страницы.
Размещайте другие теги ... только после ссылки на файл jQuery, если данный скрипт использует библиотеку jQuery.

3. Как создать новый html-элемент

Создать пустой html-элемент, например, блок, можно несколькими способами:

1) с помощью краткой формы записи $("")
2) с помощью инструкции $("")
3) с помощью инструкции $("")

Все три способа рабочие, но, тем не менее, рекомендуется включать открывающие и закрывающие теги, чтобы показать, что данный элемент может содержать другие элементы.

При создании нового элемента методу $() можно передать второй параметр в виде объекта JavaScript, определяющий дополнительные атрибуты элемента:

$("", {src: "images/flower.jpg", title: "Rose_in_garden", click: function() {...} }).appendTo("body");

Таким образом создается элемент с заданными атрибутами и включается в дерево DOM.