Document ready что это
Реализация и альтернатива основных JQuery функций на чистом JavaScript
Когда я начинал учить веб-программирование, встретил лучший из всех, по моему мнению, фреймворков — JQuery. В то далёкое время нельзя было представить нормальное программирование без него, так как он мог делать одной строкой то, что делал JavaScript за 95.
В сегодняшнее время, JavaScript очень изменился. В него добавили большой функционал, который сокращает количество кода в разы и делает программирование более удобным. Но даже с этими обновлениями он не может воспроизвести некоторые, даже самые простые, функции из JQuery, и когда мы решаем отказаться от этого фремворка, то чувствует некую трудность из за этого.
Так вот, в этой статье я хочу рассказать о реализациях некоторых функций из JQuery на чистом JavaScript.
$(document).ready( Function ); или $( Function );
Для тех кто не знает, это функция готовности DOM дерева. Т.е. эта функция запускается, когда DOM страницы был полностью загружен.
Если же мы посмотрим в исходники JQuery, то выйдет следующая функция:
Запуск функции происходить таким образом:
$.ajax( Object );
Для тех кто не знает, эта функция выполняет асинхронный HTTP (Ajax) запрос.
Как бы это ни было банально, но альтернативой для Jquery.ajax() является XMLHttpRequest
Немного об использовании:
Для начала, нам бы следовало создать кроссбраузерную функцию для отправки, т.к. в разных браузерах функция отправки может быть разной. Она создаётся таким образом:
А вот сам пример стандартного POST запроса с обработкой ошибок:
По такой же технологией сделана функция JQuery AJAX.
Глобальная функция $(. );
Если кто не знает, этой функцией создаётся глобальный JQuery объект.
Тут я не буду расписывать полный функционал этой функции, так как это займёт у меня минимум неделю, а просто напишу, как создаётся подобная вещь по примеру JQuery.
Для начала создадим обычную функцию, к примеру, Library с аргументами (селектор и контекст).
Далее пишем общую функцию. В JQuery значения, которые попадают в функцию перебираются с помощью условий и выводится результат
Теперь мы можем добавить запуск этой функции через основную
jQuery для начинающих
jQuery — это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение — лучше всего начинать с наглядных примеров, и они далее…
Как же все-таки работает jQuery?
Ну для начала Вам понадобиться сам фреймворк, его вы сможете скачать с домашней страницы проекта, затем проинициализировать:
А основные моменты Вам поможет понять следующая диаграмма:
Как получить элемент с помощью jQuery?
Выдвижная панель
Начнем с простенького примера — слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример)
Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между «active» и «btn-slide»), а панелька с будет выдвигаться/прятаться. (класс «active» изменяет позицию фонового изображения, см. CSS файл во вложении).
Магические исчезновения
Этот пример покажет как можно красиво и легко убирать растворять элементы (см. пример):
, и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide:
Связанная анимация
— уменьшаем его прозрачность до 0.1, наращиваем позицию left еще на 400px, со скоростью 1200 (milliseconds)
Line 3: затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20; скорость анимации указывается вторым параметром: «slow», «normal», «fast» или в миллисекундах
Line 4: затем opacity=1, left=0, height=100, width=100, скорость — «slow»
Line 5: затем opacity=1, left=0, height=100, width=100, скорость — «slow»
Line 6: затем top=0, скорость — «fast»
Line 7: затем slideUp (с дефолтной скоростью анимации — «normal»)
Line 8: затем slideDown, скорость — «slow»
Line 9: возвращаем false для того чтобы браузер не перешел по ссылке
Гармошка #1
внутри
, для следующего в нём элемента
будет применен эффект slideToggle, затем для всех остальных элементов
будет применен эффект slideUp. Следующие действие изменяет класс заголовка на «active», затем ищем все остальные заголовки
и убираем у них класс «active»
Гармошка #2
Этот пример схож с предыдущим, лишь отличается тем, что мы указываем открытую по умолчанию панельку. (см. пример)
В CSS у нас указано для всех элементов
Анимация для события hover #1
Данный пример поможет создать Вам очень красивую анимацию для события hover (надеюсь, Вы знаете что это?), (см. пример):
Когда Вы наводите мышкой на элемент меню (mouseover), происходит поиск следующего элемента , и анимируется его прозрачность и расположение:
Анимация для события hover #2
Кликабельные блоки
Складывающиеся панельки
— вызывает метод slideToggle для следующего элемента
Имитация Backend’a WordPress’a
(цвет изменяется на красный), и изменяет параметр «opacity» на «hide»
Галерея изображений
По клику на изображения в
Стилизируем ссылки
Так же Вы можете посмотреть все примеры или скачать jQuery tutorial for beginners.
Так же много полезных ссылок по jQuery найдете на следующей странице: http://blog.termit.name/jquery/
Может кому пригодиться еще библиотека jQuery-PHP
Азы jQuery
Библиотека jQuery позволяет легко манипулировать кодом HTML после его отображения в браузере. Она также предоставляет инструменты, которые помогут пользователю взаимодействовать с вашей страницей; инструменты, которые помогут вам создавать анимацию; и инструменты, которые позволяют вам общаться с сервером без перезагрузки страницы. Мы вскоре до всего этого доберёмся. Для начала рассмотрим некоторые основы jQuery, а также применим jQuery для его основной работы: получить какие-то элементы и что-то с ними сделать.
Это руководство предполагает, что вы знакомы с HTML и селекторами CSS. Если вы не знаете, как применять селекторы к определённым элементам, то должны потратить некоторое время и быстро войти в курс дела, прежде чем приступать к работе с этим руководством.
Конечно, если вы уже видели любой jQuery-код, то, вероятно, больше привыкли к чему-то вроде этого:
$(document).ready()
Получаем некоторые элементы
Другие способы создания объекта jQuery
Моя выборка содержит что-нибудь?
Внимание! Ошибочный код
Мы можем сократить проверку ещё больше, если вспомним, что 0 это ложное значение:
Получение отдельных элементов из выборки
Заметьте, что вы не можете вызвать методы jQuery для исходных элементов DOM. Поэтому следующий пример работать не будет:
Создание новых элементов
Вы также можете создать элемент, передавая объект с информацией о его создании:
Обратите внимание, что мы должны указать свойство class в кавычках, поскольку class это зарезервированное слово в JavaScript и написание без кавычек вызовет ошибки в некоторых браузерах. Смотрите документацию jQuery для получения подробной информации о разных свойствах, которые можно включать в объект.
Мы рассмотрим как добавлять созданные элементы на страницу в следующем разделе, в котором рассказывается о передвижении по документу и манипуляции c ним.
Работа с выборкой
После создания объекта jQuery содержащего вашу выборку, вы, вероятно, хотите что-то с ней сделать. Но до этого рассмотрим несколько принципов, которые являются ключевыми для понимания того, что делает jQuery.
Проверка выборки
Получение, установка и неявный перебор
Неявный перебор означает, что jQuery автоматически перебирает все элементы в выборке, когда вы вызываете для выборки устанавливающий метод. Это означает, что если вы хотите сделать что-то для всех элементов в выборке, то не должны вызывать метод для каждого элемента в вашей выборке — просто вызываете метод для самой выборки и jQuery обработает элементы для вас.
Вы также можете передать функцию в метод установки jQuery. Возвращаемое значение этой функции используется в качестве нового значения и оно получает два аргумента: индекс элемента в выборке и старое значение, которое вы пытаетесь изменить. Это полезно, когда вам необходима информация о текущем состоянии элемента, чтобы правильно установить новое состояние.
Явный перебор
Цепочки
Одной из самых выгодных частей jQuery является способность «сцеплять» методы вместе. Это означает, что мы можем вызвать набор методов для выборки без её повторения или сохранения выборки в переменной. Мы даже можем сделать новые выборки на основе предыдущих и всё без разрыва цепочки.
Цепочки возможны, потому что каждый устанавливающий метод в jQuery возвращает выборку, с которой он был вызван. Это чрезвычайно мощная особенность и многие библиотеки взяли её на вооружение. Тем не менее, она должна применяться с осторожностью. Большие цепочки могут сделать код чрезвычайно трудным для чтения, изменения и отладки. Нет жёстких правил, насколько длинной должна быть цепочка, но даже для простой цепочки выше, вероятно, следует провести рефакторинг для удобства чтения.
Резюме
У нас получился отличный обзор как тикает jQuery. В следующем разделе мы рассмотрим как на деле начать выполнять с ним разные штуки!
Страница: DOMContentLoaded, load, beforeunload, unload
У жизненного цикла HTML-страницы есть три важных события:
Каждое из этих событий может быть полезно:
Давайте рассмотрим эти события подробнее.
DOMContentLoaded
Но он не дожидается, пока загрузится изображение. Поэтому alert покажет нулевой размер.
На первый взгляд событие DOMContentLoaded очень простое. DOM-дерево готово – получаем событие. Хотя тут есть несколько особенностей.
DOMContentLoaded и скрипты
Когда браузер обрабатывает HTML-документ и встречает тег
В примере выше мы сначала увидим «Библиотека загружена…», а затем «DOM готов!» (все скрипты выполнены).
Есть два исключения из этого правила:
DOMContentLoaded и стили
Внешние таблицы стилей не затрагивают DOM, поэтому DOMContentLoaded их не ждёт.
Но здесь есть подводный камень. Если после стилей у нас есть скрипт, то этот скрипт должен дождаться, пока загрузятся стили:
Причина в том, что скрипту может понадобиться получить координаты или другие свойства элементов, зависящих от стилей, как в примере выше. Естественно, он должен дождаться, пока стили загрузятся.
Так как DOMContentLoaded дожидается скриптов, то теперь он так же дожидается и стилей перед ними.
Встроенное в браузер автозаполнение
Например, если на странице есть форма логина и пароля и браузер запомнил значения, то при наступлении DOMContentLoaded он попытается заполнить их (если получил разрешение от пользователя).
window.onload
Событие load на объекте window наступает, когда загрузилась вся страница, включая стили, картинки и другие ресурсы.
В примере ниже правильно показаны размеры картинки, потому что window.onload дожидается всех изображений:
window.onunload
Обычно здесь отсылают статистику.
Предположим, мы собрали данные о том, как используется страница: клики, прокрутка, просмотры областей страницы и так далее.
Естественно, событие unload – это тот момент, когда пользователь нас покидает и мы хотим сохранить эти данные.
Его можно использовать вот так:
К тому моменту, как sendBeacon завершится, браузер наверняка уже покинет страницу, так что возможности обработать ответ сервера не будет (для статистики он обычно пустой).
Для таких запросов с закрывающейся страницей есть специальный флаг keepalive в методе fetch для общих сетевых запросов. Вы можете найти больше информации в главе Fetch API.
window.onbeforeunload
Если посетитель собирается уйти со страницы или закрыть окно, обработчик beforeunload попросит дополнительное подтверждение.
Если мы отменим это событие, то браузер спросит посетителя, уверен ли он.
Вы можете попробовать это, запустив следующий код и затем перезагрузив страницу:
По историческим причинам возврат непустой строки так же считается отменой события. Когда-то браузеры использовали её в качестве сообщения, но, как указывает современная спецификация, они не должны этого делать.
Поведение было изменено, потому что некоторые веб-разработчики злоупотребляли этим обработчиком события, показывая вводящие в заблуждение и надоедливые сообщения. Так что, прямо сейчас старые браузеры всё ещё могут показывать строку как сообщение, но в остальных – нет возможности настроить показ сообщения пользователям.
readyState
Что произойдёт, если мы установим обработчик DOMContentLoaded после того, как документ загрузился?
Естественно, он никогда не запустится.
Есть случаи, когда мы не уверены, готов документ или нет. Мы бы хотели, чтобы наша функция исполнилась, когда DOM загрузился, будь то сейчас или позже.
Свойство document.readyState показывает нам текущее состояние загрузки.
Есть три возможных значения:
Так что мы можем проверить document.readyState и, либо установить обработчик, либо, если документ готов, выполнить код сразу же.
Событие readystatechange – альтернативный вариант отслеживания состояния загрузки документа, который появился очень давно. На сегодняшний день он используется редко.
Для полноты картины давайте посмотрим на весь поток событий:
Рабочий пример есть в песочнице.
Цифры в квадратных скобках обозначают примерное время события. События, отмеченные одинаковой цифрой, произойдут примерно в одно и то же время (± несколько миллисекунд).
События и их обработка в jQuery
В этой статье мы рассмотрим методы jQuery, которые предназначены для обработки различных событий, возникающих на странице.
Событие – это «сигнал», возникающий в браузере, который сообщает вам, что что-то произошло для того, чтобы вы могли с ним взаимодействовать.
Обработка событий с помощью методов jQuery
Функция one отличается от on только тем, что она выполняет обработчик при наступлении указанного события только один раз.
Например, добавим с помощью функции on событие click для всех элементов с классом btn :
Вышеприведённый код, записанный с использованием короткой записи функции on :
Дополнительная информация о событии
При обработке события вы можете узнать некоторую дополнительную информацию о нём. Передача этой информации, а именно объекта Event в обработчик события осуществляется всегда посредством первого аргумента.
Пространство имён
В jQuery после указания имени события вы можете ещё дополнительно указать пространство имён.
Также с его помощью очень просто удалять определённые события:
Описание и примеры использования функций trigger и off рассматриваются в статье немного ниже.
Передача дополнительных данных в обработчик
Осуществляется это так (пример):
Пример использования одного обработчика для нескольких (2 или более) событий:
Для каждого события своя функция:
Пример использования в jQuery несколько обработчиков (функций) на одно событие:
Например, узнать в какой очерёдности будут выполняться события можно так:
Программный вызов события
Для вызова события из кода в jQuery есть 2 метода:
Процесс добавления к некоторому элементу обработчика события обычно осуществляется после загрузки страницы, т.е. когда DOM дерево документа уже построено. Иначе при написании обработчиков, вы можете обратиться к элементам, которых ещё нет на странице.
Самая короткая запись события загрузки страницы в jQuery выглядит так:
Но, можно использовать и более длинную запись:
Например, выполнить функцию, когда страница будет полностью загружена (включая картинки):
Например, выведем сообщение в консоль, когда указанное изображение будет загружено:
В jQuery для отслеживания действий мыши наиболее часто используют следующие события:
Например, повесим событие onclick на все элементы с классом btn :
Краткая запись события по клику:
Например, разберем, как можно скрыть блок через некоторое время после события click :
Событие при поднесении курсора является сложным и состоит из 2 событий:
События mouseenter и mouseleave в jQuery отличаются от mouseover и mouseout только тем, что они не возникают когда курсор соответственно входит и покидает внутренние элементы прослушиваемого элемента. Другими словами события mouseover и mouseout всплывают, а mouseenter и mouseleave – нет.
Например, изменим цвет элемента списка при поднесении к нему курсора:
Те же самые действия, но использованиям mouseover и mouseout :
Данные методы необязательно использовать вместе, их можно также применять по отдельности.
Например, подсчитаем количество посещений элемента при наступлении события «Навести мышью»:
Например, перепишем вышеприведённый пример, используя hover :
Если указать событию hover один обработчик, то он будет выполняться как для обработки наведения мыши, так и для её покидания.
Событие mousemove посылается элементу, когда указатель мыши перемещается внутри него. Любой HTML элемент может получать это событие.
Прослушивание события прокрутки колёсика (wheel) мышки можно осуществить так:
jQuery – События клавиатуры
При нажатии клавиши клавиатуры браузер генерирует события в следующем порядке:
Например, напишем обработчик для прослушивания всех событий, которые происходят при нажатии клавиши:
Пример, в котором показано, как можно прослушать событие keypress и узнать, нажато ли указанное сочетание клавиш:
Пример, как можно прослушать сочетание клавиш Ctrl+Enter :
Пример, с использованием событий keydown и keyup :
jQuery – События элементов формы
В jQuery можно выделить следующие события для элементов формы и не только:
Например, при получении элементом div события фокуса установим ему фон оранжевого цвета:
Точно такое же выполнить с помощью событий focus и blur не получится, т.к. они не всплывают:
Пример, в котором рассмотрим, как получить значение элемента select при его изменении:
Пример, в котором рассмотрим, как получить все выбранные элементы select при его изменении:
Пример программного вызова события change для элемента select :
Пример использования события изменения change для получения значения элемента input :
Но кроме события change есть ещё событие input для текстовых элементов. Данное событие в отличие от change генерируется сразу, а не после того как данный элемент потеряет фокус.
Пример, использования события ввода для получения значения элемента input :
Пример, в котором представлен один из способов получения значения элемента textarea :
Событие выбора select генерируется браузером, когда пользователь внутри элементов input с type=»text» или textarea выделяет текст.
jQuery – Событие отправки формы (submit)
Пример, использования события submit :
Программный вызов отправки формы:
Для прослушивания события изменения окна браузера используется resize :
Например, создадим обработчик, который будет при изменении окна браузера выводить в конец страницы её ширину и высоту:
Например, отменим стандартное поведение всех ссылок на странице, имеющих класс service :
Что такое всплытие и как его остановить
Кроме отмены стандартного действия, в механизме событий есть ещё такое понятие как всплытие. Оно заключается в том, что когда браузер генерирует событие, то он это делает не только для текущего элемента (цели), но и для всех его потомков включая родителя:
Добавление событий к динамически созданным объектам
Например, добавим событие к элементу, которого ещё нет на странице:
Делегирование может применяться не только для обработки событий динамически созданных объектов, но и для того чтобы не привязывать к каждому элементу (если их на странице может быть очень много) обработчик.
Например, запретим в комментариях переходить по внешним ссылкам (такие действия будем перенаправлять на страницу away):
Вызов метода off без аргументов снимет у указанных элементов все добавленные к ним обработчики событий.
Например, отключим все обработчики у элементов с классом link:
Например, удалим событие click у всех элементов с классом link :
Специальный селектор ( ** ) позволяет удалить только делегированные события с сохранением не делегированных:
Удалить только указанные делегированные события (с помощью селектора):
Удалить все обработчики openModal делегированного события click в пространстве имён modal для элементов с классом show :
Создание пользовательского события
Принцип создания специального события jQuery рассмотрим посредством следующего примера: