Библиотека (framework) jQuery

Библиотека (framework) jQuery

библиотека JavaScriptframework – набор, конструкция

История

JavaScript постепенно выходит на передний план, поддержка языка отличается от браузера к браузеру, появление библиотек упростило процесс разработки приложений
Создана Джоном Ресигом
Библиотека jQuery – кроссбраузерная, предоставляет набор базовых функций, одинаково работающих во всех браузерах
Впервые опубликована в 2006 году
http://jquery.com
Для создания RIA-приложений(Rich Internet Application)

http://jquery.com

Варианты файлов

Полный вариант jquery.js (276К)

Варианты файлов

Сжатый вариант jquery.min.js (94К)

Подключение

API – Интерфейс программирования приложений(Application Programming ​Interface)

jQuery Core
Selectors
Attributes
Traversing
Manipulation

CSS
Events
Effects
Ajax
Utilities

Начальные требования

HTML
CSS
JavaScript

Назначение jQuery"write less, do more"

jQuery – небольшого размера библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML, позволяет легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM и манипулировать ими, предоставляет удобный API для работы с AJAX

Javascript Document.getElementByld ("divl").innerHTML = "Новый текст";
jQuery $("#divl").html("Новый текст");

jQuery содержит:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities

Дополнительно jQuery позволяет использовать plugins для решения многих других задач

jQuery CoreФункция jquery(…)

Сокращенный вариант вызова $(…)
Функция для доступа к возможностям библиотеки
Функция вызывается всеми методами jQuery
Функция возвращает список объектов, над которым определены все доступные jQuery-функции
Позволяет работать с любыми объектами (существующими на странице и созданными динамически) так, как будто это одни и те же элементы, уже существующие на странице.
$(html)
$(elements)
$(expression[, context])
$(callback)

Выбор элемента по значению id

Текст

$(html)

Позволяет создать html-элементы «на лету» из «чистого» HTML.
Например, можно создать элемент div, содержащий абзац с текстом «Append to» и добавить его к элементу с id="body”my_div = $("

$(elements)

Позволяет добавить функциональность jQuery к уже существующим элементам страницы (к элементам из объектной модели документа)

$(elements)

Подключение jQuery

$(expression[, context])

Первый параметр – выражение, которое позволит jQuery найти элемент на страницеВторой параметр определяет область поиска (по умолчанию поиск выполняется на всей странице)
$("script"); поиск всех элементов script
$("ul > li"); поиск li, входящих в ul
$("input:checkbox", document.myForm); поиск checkbox, входящих в первую форму
$("#myForm"); элементы с id=myForm
$("#myForm > p.red");
…

$(callback) или $(document).ready()

JavaScript часто использует событие window.onload
Событие вызывается после того, как документ полностью загрузился в окно браузера
Вызываемый в обработчике этого события код не сработает, пока не загрузятся все изображения и т.п. на странице
jQuery позволяет выполнить код в тот момент, когда доступна объектная модель документа (полностью загружен исходный код страницы, но, возможно, не загружено мультимедийное содержимое
Для этого используется метод .ready():

$(document).ready()

$(document).ready(  function() { /* ... */} );
Или $(fn)$(  function()
{/* ... */}
);
В качестве аргумента в .ready() передается функция, которая будет выполнять необходимые действия

$(document).ready()

$(document).ready( function()  {$("a").append("(добавляемый текст)"); });ко всем ссылкам на странице добавляется текст

$(document).ready()

Подключение jQuery




• НГТУ
• НГУ

$(document).ready()

$(document).ready()

Подключение jQuery





• НГТУ

  

• НГУ

  

$(document).ready()

Effects (основные)

show( )Отображает спрятанные элементы
show( speed, callback )Отображает спрятанные элементы с анимацией
hide( )Прячет элементы
hide( speed, callback )Прячет элементы с анимацией
toggle( )Переключает соответствующие элементы
toggle( switch)Переключает соответствующие элементы с указанием нового значения
toggle( speed, callback )Переключает соответствующие элементы с анимацией

Effects (скольжения)

slideDown( speed, callback )Раскрывает элемент с эффектом скольжения
slideUp( speed, callback )Закрывает элемент с эффектом скольжения.
slideToggle( speed, callback )Переключает видимость элементов с эффектом скольжения

Effects (растворения)

fadeIn( speed, callback )Изменяет прозрачность элемента
fadeOut( speed, callback )Изменяет прозрачность элемента до 0
fadeTo( speed, opacity, callback ) Изменяет прозрачность элемента до указанного значения

Effects (анимации)

Замена технологии Flash
animate( params, duration, easing, callback )Создает настраиваемую анимацию для визуальных эффектов
params – свойства, которые участвуют в анимации в виде пар {ключ: значение}Например: {height: “show”} или {opacity: 50, width: 100, height: 200}.
duration – продолжительность в миллисекундах.
easing – замедлениие анимации (замедляется к концу, “easein” или ускоряется, “easeout”)
callback – функция, которая будет вызвана после завершения анимации

Effects (анимации) animate.html

Подключение jQuery


Примеры ex1.html

После щелчка на ссылке панель с id=«panel» выдвигается/прячется

Примеры ex2.html

После щелчка на изображении , находится родительский элемент