Вставка гиперссылки в html. Гиперссылка — что это такое, как сделать ссылку и вставить в HTML код (href, target blank и другие атрибуты тега a). Гиперссылка в пределах html страницы

– это библиотека JavaScript, основанная на принципе «пиши меньше, делай больше». Это не язык программирования, а инструмент, который упрощает написание общих задач JavaScript. Кроме того, jQuery обладает кроссбраузерной совместимостью, а значит, вы можете быть уверены в том, что любой современный браузер корректно отобразит вывод программы.

Сравните код простого приложения «Hello, World» в JavaScript и jQuery:

#JavaScript
document.getElementById("demo").innerHTML = "Hello, World!";
#jQuery

Как видите, jQuery позволяет достичь того же результата гораздо быстрее.

Данное руководство охватывает основы работы с jQuery, а именно такие темы:

• Установка jQuery в веб-проект;
• Определения важных понятий веб-разработки (API, DOM и CDN).
• Общие селекторы, события и эффекты jQuery.
• Примеры использования jQuery.

Требования

• Базовые навыки работы с HTML и CSS. Вы должны уметь настроить простой веб-сайт и понимать работу базовых селекторов CSS.
• Базовые навыки программирования. В целом вы можете работать с jQuery, не зная основ JavaScript, но понимание переменных и типов данных, навыки в математике и логике очень облегчат вам жизнь.

Установка и настройка jQuery

jQuery – это файл JavaScript, на который можно сослаться в HTML-файле. Добавить jQuery в проект можно двумя способами:

• загрузить локальную копию;
• сослаться на файл через сеть доставки контента.

Примечание: Сеть доставки контента (Content Delivery Network, CDN) – это система серверов, которая обслуживает веб-контент на основе географического положения пользователя. Файл jQuery по CDN будет обслуживаться быстрее и эффективнее, чем файл, размещённый на сервере вместе с остальными компонентами приложения.

Ниже показано, как сослаться на jQuery в CDN. Найти последнюю версию jQuery можно . Если же вы все же хотите загрузить jQuery на сервер, скопируйте пакет с официального сайта .

Для начала создайте простой веб-проект. Он будет включать в себя файл style.css в каталоге css/, scripts.js в js/ и index.html в корневом каталоге проекта.

project/
├── css/
| └── style.css
├── js/
| └── scripts.js
└── index.html

Создайте простой HTML-файл и назовите его index.html.

jQuery Demo

Сошлитесь на CDN jQuery перед тем, как закрыть тег , и укажите свой пользовательский файл JavaScript, scripts.js.

jQuery Demo

Файл JavaScript scripts.js нужно добавить под библиотекой jQuery, или же он не будет работать.

Примечание: Если вы используете локальную копию пакета jQuery, сохраните её в каталоге js/ и сошлитесь на неё в js/jquery.min.js.

Теперь библиотека jQuery загружена на сайт, а у вас есть полный доступ к jQuery API .

Примечание: Интерфейс прикладного программирования (Application Programming Interface, или API) – это интерфейс, который позволяет программам взаимодействовать друг с другом. API JQuery содержит всю необходимую информацию и документацию, необходимую для доступа к JQuery.

Использование jQuery

В общих чертах, jQuery используется для соединения с HTML-элементами в браузере с помощью DOM.

Document Object Model (DOM) – это метод, с помощью которого JavaScript (и JQuery) взаимодействует с HTML в браузере. Чтобы понять, что такое DOM, щелкните правой кнопкой мыши по текущей веб-странице и выберите Inspect, это откроет инструменты разработчика. Здесь вы увидите HTML код – это и есть DOM.

Каждый HTML-элемент в DOM считается нодой – это объект, с которым может взаимодействовать JavaScript.

Эти объекты расположены в виде древовидной структуры, где каждый вложенный элемент является ветвью, а — корнем. JavaScript может добавлять, удалять и изменять такие элементы.

Снова кликните правой кнопкой мыши и выберите View Page Source. Вы увидите неформатированный HTML-вывод сайта. Сначала можно легко спутать DOM с исходным HTML-кодом, но они отличаются. Исходный код страницы – это тот же код, что написан в файле HTML. Он статичен, не изменяется, JavaScript не влияет на него. DOM динамичен и может меняться.

Наружный уровень DOM, нода , является объектом document. Чтобы начать управлять страницей с помощью JQuery, сначала нужно обеспечить этот уровень.

Создайте файл scripts.js в каталоге js/ и добавьте в него код:

// all custom jQuery will go here
});

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

Во вступительной части статьи вы видели пример сценария Hello, World!. Чтобы инициировать этот сценарий и вывести фразу в браузере с помощью jQuery, создайте пустой блок и присвойте ему идентификатор demo. Поместите в index.html:

...

...

jQuery вызывается и представляется с помощью символа доллара, $. Доступ к DOM jQuery обычно получает с помощью синтаксиса CSS, действие определяется методом. Базовый синтаксис jQuery выглядит так:

$("selector").method();

В CSS ID представляется с помощью символа #; получить доступ к ID demo можно с помощью селектора #demo.

html() – это метод, который изменяет HTML внутри элемента.

Теперь нужно поместить программу «Hello, World» в функцию ready(). Добавьте в scripts.js такую строку:

$(document).ready(function() {
$("#demo").html("Hello, World!");
});

Сохраните файл, а затем откройте файл index.html в браузере. Если все настройки выполнены правильно, вы увидите на экране:

Если вы спутали DOM, сейчас вы об этом узнаете. Кликните правой кнопкой мыши по тексту «Hello, World!» и выберите Inspect Element. DOM будет отображать:

Hello, World!

Выберите View Page Source, и вы увидите только:

то есть неформатированный HTML.

Селекторы

Селекторы сообщают jQuery, с каким элементом нужно работать. Большинство селекторов jQuery похожи на CSS, но все же они имеют некоторые особенности. Полный список селекторов jQuery можно найти в документации .

Чтобы получить доступ к селектору, используйте символ jQuery, $, и круглые скобки:

Ниже перечислены некоторые популярные селекторы:

• $(«*»): Wildcard, выбирает все элементы страницы.
• $(this): Current, выбирает текущий элемент.
• $(«p»): Tag, выбирает каждый экземпляр тега

  .

• $(«.example»): Class, выбирает каждый элемент класса example.
• $(«#example»): ID, выбирает один экземпляр уникального ID example.
• $(«»): Attribute, выбирает любой элемент с text атрибута type.
• $(«p:first-of-type»): Pseudo Element, выбирает первый тег

  .

Обычно используются селекторы класса (чтобы выбрать несколько элементов) и id (чтобы выбрать всего один элемент).

События jQuery

В программе «Hello, World!»2 код запустился как только загрузилась страница и был готов документ, потому она не нуждается во взаимодействии с пользователем. В этом случае написать текст можно было непосредственно в HTML, не применяя JQuery. Однако JQuery нужно использовать, чтобы настроить появление текста после нажатия кнопки.

Вернитесь в файл index.html и добавьте элемент , который будет отслеживать клики на странице.

...

Click me

С помощью метода click() вызовите функцию с кодом «Hello, World!».

$(document).ready(function() {
$("#trigger").click();
});

Элементу присвоен ID trigger, который выбирается при помощи селектора $(«#trigger»). С помощью метода click() элемент будет прослушивать клики. Теперь нужно реализовать внутри click() функцию, которая содержит код.

function() {
$("#demo").html("Hello, World!");
}

В результате получится такой код:

$(document).ready(function() {
$("#trigger").click(function() {
$("#demo").html("Hello, World!");
});
});

Сохраните файл scripts.js и обновите index.html в браузере. Кликните мышью, и только тогда появится текст «Hello, World!».

Событие – это любое взаимодействие пользователя с браузером (обычно с помощью мыши или клавиатуры). В данном случае событием был клик мыши. Полный список методов событий можно найти в документации jQuery. Ниже перечислены наиболее популярные события:

• click(): прослушивает клики на странице.
• hover(): выполняет действие при наведении курсора на элемент. Методы mouseenter() и mouseleave() относятся только к перемещениям курсора с помощью мыши (навести и отвести курсор соответственно).
• submit(): выполняется при заполнении формы.
• scroll(): выполняется при прокрутке экрана.
• keydown():выполняется при нажатии кнопки на клавиатуре.

Чтобы изображения двигались или исчезали при прокрутке экрана, используйте scroll(). Чтобы закрыть меню с помощью кнопки Esc, используйте keydown(). Чтобы добавить выпадающее меню, используйте click().

Разобравшись с событиями, вы сможете создавать динамический контент для сайта.

Эффекты jQuery

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

Удалите теги и

Из тела файла index.html, затем добавьте в документ HTML:

...

Open

Close

...

В файле style.css используйте CSS, чтобы спрятать элемент overlay с помощью display: none и поместить его в центре экрана.

Overlay {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200px;
width: 200px;
background: gray;
}

Вернитесь в файл scripts.js и используйте метод toggle(), который будет включать и отключать свойство CSS display (переключать none и block), скрывая и отображая наплывающий элемент при клике.

$(document).ready(function() {
$(".trigger").click(function() {
$(".overlay").toggle();
});
});

Обновите index.html. Теперь вы можете управлять наплывающим элементом, кликая по кнопкам. Вместо toggle() вы можете использовать другие встроенные элементы jQuery, например, fadeToggle() или slideToggle().

Вот краткий список популярных эффектов:

• toggle(): управляет видимостью элемента; с ним связаны эффекты show() и hide().
• fadeToggle(): управляет видимостью элемента с помощью прозрачности/непрозрачности; к нему относятся эффекты fadeIn() и fadeOut().
• slideToggle(): управляет видимостью элемента с помощью эффекта скольжения; с ним связаны slideDown() и slideUp().
• animate(): пользовательские эффекты анимации.

События jQuery прослушивают взаимодействие пользователя с сайтом, а эффекты jQuery управляют элементами, если указанное действие происходит.

Tags: , 05.03.17 1.2K Введение

JQuery HTML — это библиотека, предназначенная чтобы «писать меньше, а делать больше «. Это не язык программирования, а инструмент, используемый для того, чтобы упростить реализацию общих задач JavaScript .

JQuery имеет дополнительное преимущество — кроссбраузерную совместимость . Можете быть уверены, что ваш код будет интерпретироваться в любом современном браузере.

Сравнив написание простой программы «Hello, World! » с помощью JavaScript и jQuery , можно увидеть разницу между ними.

JavaScript

document.getElementById("demo").innerHTML = "Hello, World!";

JQuery

$("#demo").html("Hello, World!");

Этот короткий пример иллюстрирует, как с помощью jQuery можно получить тот же результат, что и с помощью стандартного JavaScript , но более кратко.

Цели

Данное руководство не предполагает наличие базовых познаний в jQuery , оно охватывает следующие темы:

• Как установить jQuery в веб-проекте;
• Определение важных концепций веб-разработки, таких как API , DOM и CDN ;
• Общие селекторы, события и эффекты jQuery ;
• Примеры для проверки концепций, изученных в рамках этой статьи.

Настройка jQuery

JQuery — это файл JavaScript , на который вы будете ссылаться в документе. Как подключить JQuery в HTML :

• Скачать локальную копию;
• Добавить ссылку на файл через сеть доставки контента (CDN ).

Примечание. Сеть доставки контента (CDN ) представляет собой систему из нескольких серверов, которые предоставляют пользователю веб-контент в зависимости от его географического положения. Когда вы добавляете ссылку на файл jQuery через CDN , он будет предоставлен пользователю быстрее и эффективнее, чем в случае его размещения на собственном сервере.

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

Создадим небольшой веб-проект. Он будет состоять из файла style.css , scripts.js и основного файла index.html .

Задайте основную HTML-разметку и сохраните ее в index.html .

Index.html

jQuery Demo

Index.html

jQuery Demo

Скрипт JavaScript (scripts.js ) должен подключаться в документе ниже библиотеки jQuery или он не будет работать.

Примечание. Если вы загрузили локальную копию jQuery, сохраните ее в папке js/ и подключите через ссылку js/jquery.min.js.

Библиотека jQuery добавлена в HTML , и у нас есть полный доступ к API jQuery .

Использование jQuery

jQuery используется для соединения с элементами HTML в браузере через DOM .

Объектная модель документа (DOM ) — это метод, с помощью которого JavaScript (и jQuery ) взаимодействуют с HTML в браузере. Чтобы увидеть, что собой представляет DOM , в браузере кликните правой кнопкой мыши на текущей веб-странице и выберите пункт «Просмотреть код «. В результате откроется панель «Инструментов для разработчиков «. HTML-код , который вы увидите в ней, это и есть DOM .

Каждый элемент HTML считается узлом DOM — объектом, к которому может обратиться JavaScript . Эти объекты имеют древовидную структуру, в которой элемент является ближайшим к корню, а каждый — ветвью дерева. JavaScript может добавлять, удалять и изменять любые из этих элементов.

Если вы снова кликните правой кнопкой мыши и выберете пункт «Просмотреть исходный код », то увидите необработанный HTML . Сначала вы можете путаться в понятиях DOM и исходный HTML-код , но это разные вещи. Исходный код страницы точно соответствует тому, что написано в HTML-файле . Он статичен и неизменен, на него не действует JavaScript . В свою очередь DOM — динамичен и может меняться.

Внешний слой DOM , который обертывает весь узел , является объектом документа. Чтобы использовать на странице jQuery , нужно убедиться, что документ «готов ».

Создайте в папке js/ файл scripts.js и добавьте в него следующий код:

js/scripts.js

Весь код jQuery , вставленный в HTML , будет обернут в указанный выше код. Он будет работать только после того, как DOM будет готов для выполнения кода JavaScript . Даже не смотря на то, что в некоторых случаях JavaScript не загружается, пока элементы не будут отображены, включение этого блока считается лучшей практикой.

Чтобы запустить скрипт «Hello, World !» и вывести текст в браузере с помощью jQuery , сначала создадим пустой элемент абзаца, к которому применен идентификатор demo .

Index.html

... ...

JQuery вызывается и обозначается знаком доллара ($) . Мы обращаемся к DOM с помощью jQuery , используя синтаксис CSS , и применяем действие с помощью method :

$("selector").method();

Так как идентификатор в CSS обозначается символом (#) , мы получаем доступ к идентификатору demo с помощью селектора #demo . html() — метод, который изменяет HTML-разметку внутри элемента.

Теперь мы поместим программу «Hello, World! » внутрь оболочки jQuery ready() . Добавьте эту строку в существующую функцию в файле scripts.js :

js/scripts.js

$(document).ready(function() { $("#demo").html("Hello, World!"); });

После сохранения изменений можно открыть в браузере файл index.html . Если все работает правильно, то вы увидите надпись «Hello, World! »

Кликните правой кнопкой мыши по надписи «Hello, World! » и выберите пункт «Просмотреть код «. Теперь в DOM отображается

Hello, World!

. Если вы просмотрите исходный код страницы, то увидите только , исходный HTML-код, который мы написали.

Селекторы

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

Чтобы получить доступ к селектору, используйте символ $ , за которым следуют круглые скобки () .

$("селектор")

Строки с двойными кавычками являются предпочтительными (согласно руководству jQuery ). Хотя часто используются и строки с одиночными кавычками.

Ниже приведен краткий обзор часто используемых селекторов.

• $(«*») — подстановочный знак : выбирает каждый элемент на странице;
• $(this) — текущий : выбирает текущий элемент, управляемый в данный момент внутри функции;
• $(«p») — тег : выбирает все экземпляры тега

  ;

• $(«.example») — класс : выбирает все элементы, к которым применяется класс example ;
• $(«#example») — идентификатор : выбирает один экземпляр с уникальным идентификатором example ;
• $(«») — атрибут : выбирает все элементы, в атрибуте type которых задано значение text ;
• $(«p:first-of-type») — псевдоэлемент : выбирает первый элемент

  .

При подключении JQuery к HTML вы будете иметь дело с классами и идентификаторами. Классы используются, когда нужно выбрать несколько элементов, а идентификаторы — когда только один.

События jQuery

В примере «Hello, World! » код запускался, когда страница загружена и документ готов, поэтому в нем не требовалось вмешательство пользователя. В этом случае мы могли бы написать текст непосредственно в HTML , без jQuery . Но нужно будет использовать jQuery , если мы хотим, чтобы текст отображался на странице после клика мыши.

Вернитесь к файлу index.html и добавьте в него элемент . Мы будем использовать эту кнопку для отслеживания события клика.

index.html

... Click me

Мы используем метод click() для вызова функции, содержащей код «Hello, World! ».

js/scripts.js

$(document).ready(function() { $("#trigger").click(); });

Иидентификатор элемента — trigger , мы выбираем его с помощью $(«#trigger») . Добавив click() , мы отслеживаем событие клика. Далее мы вызываем функцию, которая содержит наш код внутри метода click() .

function() { $("#demo").html("Hello, World!"); }

Вот полный код JQuery HTML элемента.

js/scripts.js

$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); }); });

Сохраните файл scripts.js и обновите в браузере index.html . Теперь, когда вы нажимаете кнопку, появляется текст «Hello, World! «.

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

• click() — клик : происходит при одиночном клике мыши;
• hover() — наведение курсора : происходит при наведении указателя мыши на элемент;
• submit() — отправка : происходит при отправке данных формы;
• scroll() — прокрутка : происходит при прокрутке страницы или элемента;
• keydown() — нажатие клавиши : происходит при нажатии на клавишу на клавиатуре.

Чтобы вывести элементы с помощью анимации или убрать их, когда пользователь прокручивает страницу, используется метод scroll() .

Чтобы выйти из меню с помощью клавиши ESC , используется метод keydown() . Чтобы создать выпадающее меню или с помощью JQuery добавить HTML в div , используется метод click() .

Эффекты jQuery

Эффекты jQuery позволяют добавлять анимацию и образом управлять элементами на странице.

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

Удалите существующие теги и

Из файла index.html и добавьте следующий код:

index.html

Open Close

В файле style.css мы будем использовать минимальное количество кода CSS , чтобы скрыть overlay с помощью display: none и расположить его по центру экрана.

css/style.css

Overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray; }

В файле scripts.js мы используем метод toggle() , который будет переключать значения свойства CSS display с none на block и наоборот, скрывая и выводя окно при нажатии мыши.

js/scripts.js

$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); }); });

После подключения JQuery к HTML обновите файл index.html . Теперь можно переключать видимость всплывающего окна, нажимая клавишу мыши. Вы можете заменить метод toggle() на fadeToggle() или slideToggle() , чтобы задать другие встроенные эффекты jQuery .

Ниже приведен перечень часто используемых эффектов:

• toggle() — переключение : переключает видимость элемента или элементов. show() и hide() — задают эффекты одного типа;
• fadeToggle() — переключение исчезновения : переключает видимость и задает анимацию непрозрачности элемента или элементов. fadeIn() и fadeOut () — это связанные односторонние эффекты;
• slideToggle() — переключает видимость элемента или элементов с эффектом слайд-шоу. slideDown() и slideUp() — задают эффекты одного типа;
• animate() — выполняет пользовательские эффекты анимации для свойства CSS элемента .

Мы используем события jQuery для отслеживания взаимодействий пользователя, таких как нажатия клавиш на клавиатуре, а jQuery-эффекты мы используем для дальнейшей обработки элементов, когда это взаимодействие произошло.

Заключение

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

Данная публикация представляет собой перевод статьи «An Introduction to jQuery » , подготовленной дружной командой проекта

Хорошо Плохо

jQuery быстро становится обязательным навыком для фронтенд-разработчиков. Целью этой книги является обзор JavaScript-библиотеки jQuery. После завершения чтения вы должны уметь решать основные задачи с помощью jQuery и иметь прочную основу для продолжения обучения. Эта книга задумывалась как материал, используемый в учебном классе, но вы можете найти его полезным и для самостоятельного изучения.

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

Получение кода

Код, который мы будем использовать в этой книге, расположен в хранилище GitHub . Вы можете скачать файл.zip или.tar, затем распаковать его, чтобы использовать на своём сервере. Если вы git-маньяк, то всегда можете клонировать или форкнуть хранилище.

Программы

Для выполнения большинства уроков вам потребуются следующие инструменты:

• Браузер Firefox
• Расширение Firebug для Firefox
• Простой текстовый редактор
• Для Ajax: локальный сервер (такой как MAMP или WAMP) или клиент FTP или SSH для доступа к удалённому серверу.

Добавление JavaScript на страницу

JavaScript может быть добавлен непосредственно в документ или как внешний файл через тег . Порядок добавления JavaScript имеет важное значение: зависимости должны быть включены до скрипта, который с ними связан.

Ради производительности, JavaScript должен быть добавлен как можно ближе к концу вашего HTML, насколько это возможно. Несколько файлов JavaScript должны быть объединены на рабочем сайте.

Пример 1.1. Встроенный JavaScript

console.log("привет");

Пример 1.2. Внешний JavaScript

Отладка JavaScript

Инструмент отладки имеет важное значение в JavaScript-разработке. Для Firefox популярным отладчиком является расширение Firebug; Safari и Chrome предоставляют встроенные консоли.

Каждая консоль предлагает:

• одно- и многострочные редакторы для экспериментов с JavaScript;
• инспектор для просмотра генерируемого исходного кода страницы;
• Вкладки Network и Resources для изучения сетевых запросов.

Когда вы пишете код на JavaScript, то можете использовать следующие методы для отправки сообщений в консоль:

• console.log() для общих сообщений;
• console.dir() для объектов браузера;
• console.warn() для предупреждений;
• console.error() для ошибок.

Также доступны и другие методы консоли, хотя они могут отличаться в разных браузерах. Кроме того консоли предоставляют возможность установки контрольных точек и слежения за кодом в целях отладки.

Упражнения

Большинство глав в этой книге содержит одно или несколько упражнений. С некоторыми упражнениями вы сможете работать непосредственно в Firebug, для других вы должны будете включить скрипты после jQuery, как указано в отдельных упражнениях.

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

Вот несколько советов для решения таких проблем:

• Для начала убедитесь, что вы полностью понимаете проблему, которую вас просят решить.
• Далее выясните, какие элементы вам требуются для решения проблемы и определите, как вы получите эти элементы. Используйте Firebug для проверки, что элементы получены.
• Наконец выясните, что вам нужно сделать с этими элементами для решения проблемы. Это может быть полезно для добавления комментариев, поясняющих, что вы собираетесь делать перед написанием кода.

Не бойтесь совершать ошибок! Не пытайтесь сделать код идеальным с первого раза! Ошибки и эксперименты с решениями является частью изучения библиотеки и вы станете лучшим разработчиком. Примеры решений этих упражнений находятся в папке /solutions.

Справочный материал

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

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