Добрый день. Я сейчас прохожу курс повышения квалификации - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?
|
Лекция 6: Программный интерфейс для доступа и манипулирования содержимым веб-страниц DOM API
Изменение HTML элементов
HTML элементы могут быть изменены с посредством использования JavaScript, HTML DOM и событий.
В следующем примере показано, как можно динамически изменять текстовое содержимое тэга <p>:
<html> <body> <p id="p1">Hello World!</p> <script type="text/javascript"> document.getElementById("p1").innerHTML="New text!"; </script> </body> </html>
jQuery
jQuery - библиотека функций JavaScript, специализированных на взаимодействии JavaScript и HTML. jQuery помогает легко получать доступ к любым элемента документов, обращаться к атрибутам и содержимому элементов DOM и манипулировать ими. Кроме того, библиотека jQuery предоставляет удобный API для работы с Ajax.
Код jQuery может внедряться непосредственно в веб-страницу.
Библиотека функций jQuery имеет следующие возможности:
- выбор HTML элементов
- манипулирование HTML элементами
- манипулирование CSS
- обработка событий HTML
- эффекты JavaScript и анимация
- перемещение по дереву HTML DOM и модификация дерева
- AJAX
- другие утилиты
Сама библиотека находится в одном файле JavaScript, содержащем описание всех методов jQuery. Его подключение к веб-странице может быть реализовано следующим образом:
<head> <script type="text/javascript" src="jquery.js"></script> </head>
Библиотеку можно скачать с сайта jQuery.com:
(http://docs.jquery.com/Downloading_jQuery#Download_jQuery)
Можно обойтись без скачивания библиотеки, указав прямую ссылку на файл с внешнего веб-сайта, например:
<head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"> </script> </head>
Синтаксис jQuery специально разработан для выбора HTML элементов и выполнения операций над ними.
Базовый синтаксис выглядит следующим образом:
$(selector).action()
где
- знак доллара ($) указывает на jQuery
- (selector) указывает "запросить (или найти)" HTML элементы
- action() - действие, которое применяется к элементу(ам).
Следует также отметить, что jQuery использует синтаксис CSS селекторов.
В следующем ниже примере при нажатии кнопки скрываются все <div> элементы на веб-странице:
<html> <head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"> </script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $("div").hide(); }); }); </script> </head> <body> <h2>Это заголовок</h2> <div>Секция 1</div> <div>Секция 2</div> <button>Скрыть</button> </body> </html>
В данном примере
$("div").hide() - скрывает все элементы div.
Обратите также внимание на то, что все методы jQuery размещаются внутри функции $(document).ready() для предотвращения преждевременного исполнения кода jQuery до загрузки в браузер необходимых элементов.
В завершение приведем примеры селекторов jQuery для выбора элементов: