Компьютерная графика и web-программирование

Стр 1 из 2Следующая ⇒

28.04.2020

"Компьютерная графика и web-программирование"

этап совершенствования 5 год обучения

Тема: jQuery. Изменение стилей и атрибутов элементов.

Цель:ознакомить с методами jQuery для изменения стилей и атрибутов элементов.

Образовательные задачи:научить управлять элементами и содержимым страницы с помощью jQuery.

Развивающие задачи:развивать умение использовать современные инструменты web-программирования.

Воспитательные задачи:профессиональная ориентация и подготовка к трудовой деятельности, воспитание информационной культуры, самостоятельности, ответственности.

Ход занятия

Теоретическая часть

Проверка готовности страницы

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

$(document).ready(function(){

// код jQuery

});

Подобная конструкция гарантирует, что выполнение скрипта начнется только тогда, когда наша страница (document), будет полностью загружена браузером (ready).

Доступ к атрибутам элементов

На прошлом занятии мы рассмотрели, как получить доступ к элементам web-страницы. После получения доступа мы можем работать с их аттрибутами.

С помощью метода .addClass() можно привязывать к элементам классы. Например, если у нас в коде страницы есть:

<div>Блок с текстом</div>

в css есть стиль:

.div_style {

color: #ff0;

}

то jQuery код:

$('div').addClass('div_style')

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

<div class="div_style">Блок с текстом</div>

С помощью метода .removeClass() можно удалить класс у элемента страницы. Для этого в аргументах метода нужно указать название класса, который нужно удалить.

Метод .attr() позволяет получить доступ к атрибутам элемента (таким как src, href, alt), а также изменить их. Если мы вызываем метод с одним аргументом, который содержит название атрибута, то метод вернет значение этого атрибута. А если с двумя аргументами (название аргумента и через запятую значение), то метод изменит значение атрибута.

Рассмотрим на примере.

Если html-код страницы содержит:

то jQuery-код:

$(document).ready(function(){

alert($('img').attr('src'));

$('img').attr('src', '2.png');

});

сначала выведет сообщение:

а затем заменит изображение на 2.png

12 Следующая ⇒