Количество просмотров:
0Для работы с библиотекой JQuery необходимо обладать базовыми знаниями в JavaScript. Надо хотя бы изучить, что такое переменные, операторы, массивы, циклы, пользовательские и встроенные функции. Также будет полезно уметь работать с DOM. Как минимум нужно знать, как находить элементы на странице и менять стили, ловить события.
Зачем нужен JQuery
В первую очередь надо разобраться с тем, нужно ли вообще пользоваться JQuery, в чём преимущества библиотеки. Главным достоинством является простота и краткость кода. Сравните 2 примера.
Вот так на JavaScript надо находить и менять содержимое объекта:
document.getElementById("test").innerHTML = "@";
На jQuery тот же самый код в 2 раза короче:
$("#test").html("@");
Но на самом деле этот код демонстрирует преимущество JQuery не так уж хорошо. Достоинство библиотеки становится очевиднее при более сложном скрипте. Сравним простейшие циклы.
Типичный цикл на JavaScript, который придаёт определённый стиль CSS объектам с конкретным классом:
var tests = document.getElementsByClassName("paragraph");
for (var a = 0; a < tests.length; a++) {
tests[a].style.color = "green";
}
Тот же самый код, но уже через JQuery (почти ничего не изменилось):
$("paragraph").css("color", "green");
Ряд других преимуществ JQuery прямо вытекает из его главной особенности (краткости):
- Скорость написания кода. Программировать на JQuery гораздо проще и удобнее. Многие типичные задачи решаются гораздо легче с помощью библиотеки.
- Быстрота усвоения. По сравнению с другими фреймворками, JQuery усваивается и начинает применяться гораздо быстрее.
- Скорость работы. При множестве динамичных и анимированных элементов на странице лучше пользоваться JQuery, а не JavaScript.
Кроме того, данная библиотека имеет ряд других достоинств:
- Кроссбраузерность. Все современные виды браузеров способны распознавать любой код JQuery. Этим не может похвастаться даже JavaScript, который имеет различия на Firefox, Опере, Chrome и IE.
- Широкое применение. В интернете есть большое количество готовых шаблонов на все случаи жизни.
- Совместимость. Все версии JQuery прекрасно сочетаются между собой.
Благодаря всем этим преимуществам данная библиотека используется почти во всех популярных CMS, а также многих фреймворках (Bootstrap и другие).
Подключение jQuery
Всего существует 2 способа подключения файла. Хотя их можно насчитать больше, но пользуются популярностью всего 2 метода. Оба варианта предполагают подключение в шапке файла. Вот так:
<head> <title></title> <script src="путь к документу"></script> </head>
Вариант №1: Подключение через CDN
Библиотеку можно подключить, используя популярные ресурсы. В частности Google, Yandex или официальный портал JQuery. Беспокоиться за стабильность не стоит, так как эти ресурсы более защищённые, чем подавляющее большинство сайтов в интернете.
Вот так можно подключить JQuery через Google (самый стабильный портал):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
Многие больше доверяют Яндекс, для использования CDN от этого портала нужно вставить такую строку:
<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>
Вариант №2: Собственный документ
Но самым любимым способом является сохранение файла на собственном хостинге. Желательно назвать документ jquery, чтобы не путаться, и положить его в папку js, где должны располагаться все скрипты. Выглядит такой способ так:
<script src="./js/jquery.js"></script>
Функция $()
Наиболее распространённой функцией в JQuery является функция $. Её используют для указания элементов, с которыми взаимодействует скрипт. Для этого после доллара надо в скобочках (и кавычках) поставить класс или идентификатор. Вот так:
var test = $("#elements"); // идентификатор
var test = $(".element"); // класс
При этом в переменную запишутся все элементы с соответствующим классом. То есть с помощью одной функции можно менять все объекты. Чтобы выбрать только ссылки с соответствующим классом, нужно указать конкретную группу элементов:
var test = $("a.element");
Таким способом можно менять все объекты, при этом никакого цикла создавать не надо.
Цепочка методов
Совсем не обязательно записывать элемент в переменную, чтобы изменить какие-то его параметры. Различные методы можно применять сразу к функции $() поочерёдно через точку, создавая этим длинные цепочки команд.
Другими словами, нет необходимости писать вот так:
$("a.element").css("color", "green");
$("a.element").html("меняем ссылку");
Можно сократить код почти вдвое:
$("a.element").css("color", "green").html("меняем ссылку");
В большинстве случаев таким способом можно сильно сократить код так и время разработки.