МДК 02.04. WEB программирование
Тема: Назначение и использование библиотеки jQuery
Методические указания
Изучите весь теоретический материал. Скачайте свежую библиотеку jQuery. Попробуйте выполнить примеры приведенные в лекции.
Что такое jQuery?
jQuery представляет собой библиотеку JavaScript - набор готовых функций, которые помогают делать некоторые вещи проще и удобнее, чем это делается в чистом JavaScript.
Сравните два кода, которые делают одно и тоже - первый на чистом JavaScript, а второй - на jQuery:
JavaScript:
document.getElementById('elem').innerHTML = '!';
jQuery:
$('#elem').html('!');
Код jQuery выглядит намного компактнее и проще для написания.
Сравните еще два кода: в первом мы получаем все элементы с классом .www и ставим им красный цвет текста с помощью чистого JavaScript, а во втором - на jQuery:
JavaScript:
var elems = document.getElementsByClassName('www');
for (var i = 0; i < elems.length; i++) {
elems[i].style.color = 'red';
}
jQuery:
$('.www').css('color', 'red');
Здесь уже ощущается огромная разница - в чистом JavaScript пришлось делать цикл, а код jQuery особо и не поменялся по сравнению с первым примером.
Подключение jQuery
Для начала нужно скачать jQuery с официального сайта. Затем положить полученный файл в папку с вашим сайтом и подключить его таким образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="путь к файлу с jQuery"></script>
</head>
<body>
</body>
</html>
После подключения можно начинать писать код с использованием этой библиотеки.
Начало работы с jQuery
Работа с библиотекой jQuery осуществляется с помощью универсальной функции $, которая для краткости состоит всего лишь из одного символа.
После доллара следует писать круглые скобки (это же функция), в которых указываются параметры (обычно один параметр), примерно вот так: $(параметр).
Чаще всего с помощью доллара $ получают группу HTML элементов по CSS селектору.
Давайте получим все элементы с классом .www:
var elems = $('.www');
А теперь получим только абзацы с классом p.www:
var elems = $('p.www');
А теперь получим элемент с id, равным www:
var elems = $('#www');
Наборы jQuery
Обратите внимание на переменную elems:
var elems = $('.www');
В нее запишется группа выбранных элементов, так называемый набор элементов jQuery.
Вы можете одновременно менять все элементы набора jQuery.
В принципе, переменная elems чаще всего и не нужна, так как jQuery позволяет применять полезные функции прямо к набору, в виде методов.
К примеру, вот так мы получим все элементы с классом .www и поставим им красный цвет:
$('.www').css('color', 'red');
Почти все методы jQuery возвращают набор, к которому этот метод был применен, что позволяет выстраивать цепочки методов любой длины.
Давайте получим все элементы с классом .www, поставим им красный цвет, и сменим их текст на 'новый текст':
$('.www').css('color', 'red').html('новый текст');
Изменение текста элемента через jQuery
Решим следующую задачу: получим все элементы с классом .www и одновременно поменяем всем им текст на '!!!'.
Через jQuery получим все элементы с помощью доллара, вот так: $('.www'), а потом применим к ним метод .html(), который параметром принимает новый текст - $('.www').html('Новый текст'). Всё!
<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p>Абзац.</p>
$('.www').html('!!!');
Можно не выстраивать цепочку $('.www').html('!!!'), а сначала записать набор элементов $('.www') в переменную, и затем уже к этой переменной применить метод .html('!!!'):
<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p>Абзац.</p>
var elems = $('.www');
elems.html('!!!');
Есть соглашение, которым желательно пользоваться для удобства: названия переменных, которые содержат в себе обернутый набор jQuery, принято начинать с доллара. То есть в нашем случае нужно не elems, а $elems.
это в нашем примере:
<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p>Абзац.</p>
var $elems = $('.www');
$elems.html('!!!');
Вывод текста элемента через jQuery
Метод .html() можно использовать не только для изменения текста элементов, но и для вывода его на экран. Давайте получим элемент и выведем его текст:
<p id="test">Абзац.</p>
alert($('#test').html());
Если вы попытаетесь получить текст не одного элемента, а многих, то увидите только содержимое первого элемента.
В примере ниже мы получаем все абзацы с классом www и выводим содержимое с помощью .html(), выведется только текст первого абзаца из полученных:
<p class="www">Текст абзаца 1.</p>
<p class="www">Текст абзаца 2.</p>
<p class="www">Текст абзаца 3.</p>
alert($('.www').html()); //выведет 'Текст абзаца 1.'