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

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

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

Что такое jQuery? Подключение к библиотекам и начало работы

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

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

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

Библиотека JavaScript - это коллекция кодов, предоставляющая простые решения многих повседневных задач программирования.

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

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

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

jQuery.com

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

Код подключения можно взять здесь: https://developers.google.com/speed/libraries/#jquery

Чтобы использовать CDN Google для загрузки версии jQuery, добавте следующую строку кода между тегами и :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

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

<script src="../js/jquery-3.1.1.min.js"></script>

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

Второй набор тегов <script> включает в себя фрагмент кода, который вы хотите добавить на определную веб-страницу и вас наверно интересует, что означает $(document).ready(function().

Функция $(document).ready(function(). - это встроенная функция библиотеки jQuery, которая ожидает, пока HTML страница полностью загрузится, прежде чем запустить ваш сценарий.

Эта функция нужна, чтобы сделать что-нибудь интересное с элементом страницы.

Кроме всего прочего:

  • Ссылка на файл jQuery должна предшествоать любому коду, который использует библиотеку.
  • Помещайте ваш script-код после любых таблиц стилей CSS. Возьмите за правило помещать script-код после любого другого контента в разделе заголовка, но до закрывающегося тега </head>
  • Добавляйте комментарии, которое отмечает окончание функции ready() и позволяющим определить конец программы.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/
jquery.min.js"
>
</script>
<script>
$(document).ready(function(){

//Программный код

});//Окончание ready()
</script>

jQuery обеспечивает упрощенный способ записи функции:


$(function(){

//Программный код

});//Окончание ready()

Библиотека jQuery не единственная библиотека javaScript, в которой используется переменная $, что может привести к конфликтам имен, если в одном документе используется несколько библиотек. К этому надо быть готовым и причину в отказе работы скрипта, в первую очередь искать именно в этом. Чтобы не допустить проблем такого рода, можно передать контроль над переменной $ другим библиотекам, вызвав метод jQuery.noConflict(), как это показано ниже:


var jq = jQuery.noConflict();
jq(function(){

jq("#bar").text("Альтернативный псевдоним");

});//Окончание ready()

Независимо от выбранного способа обращения с основной функцией jQuery(), ей передается один и тот же набор аргументов.

Таблица. Варианты вызова основной функции
Вариант вызова Описание
$(функция) Позволяет указать функцию, которая должна быть выполнена по завершении построения DOM
$(селектор)
$(селектор, контекст)
Осуществляет выбор группы элементов в документе с помощью селектора
$(HTMLElement)
$(HTMLElement())
Создает объект jQuery из объекта или массива объектов HTMLElement
$() Создает пустой набор элементов
$(HTML-код) Создает новые элементы из фрагмента HTML-кода