Курс по jQuery. Урок 7. jQuery события. Часть 1


Содержание материала:

jQuery для начинающих.ч.1. Начинаем с нуля

Как веб-дизайнеру, мне давно стал интересна такая вещь, как библиотека Javascript jQuery. Не владея ей, я не могу считать себя достаточно профессиональным. В этой серии уроков мы с вами разберёмся в азах jQuery. После этого цикла в блоге появятся более серьёзные и продвинутые статьи по этой библиотеке.

Что такое jQuery и почему он?

Почему jQuery? Потому что во-первых нам отныне не придётся прописывать кучу кода Javascript, и мы научимся выполнять то же самое, прописав всего лишь одну- две строки. И потому что jQuery, подобно WordPress, имеет кучу улучшений и дополнений.

Если брать из Википедии,
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.

Работа в jQuery. Первые команды

Для начала подключим jQuery:

Убедитесь, что используете Minifest — версию.

Второй, и более верный способ — подключать через Google’s Content Delivery Network (CDN). Это гарантирует самую последнюю версию.

Перед тем, как чтото туда писать, научимся выбирать нужные элементы. Это довольно просто — используется знак $.
Т.е. $(‘выбранные элементы’). Для того, чтобы выбрать все div’ы на этой странице, придеться прописать $(‘div’).

Комбинировать можно как угодно.

Создадим новый Div на нашей странице.

Пропишем ему стили:

получится что-то в этом духе:

Заставим его двигаться.

Финальной частью нашего первого урока будет движение этого блока на странице. Для начала выделим его:

Можно конечно использовать и $(‘div’), но лучше всё максимально конкретизировать.
Чтобы заставить объект двигаться, используем функцию animate():

Вообще есть у этой функции три опции, но одна необязательна.

Если более детально взглянуть на «что поменять», видим:

То есть в итоге мы задаём отступ сверху 300, слева 400, и скорость 1000. 1000=1сек. ‘возврат’ выполняется после совершения движения, но сейчас мы обойдёмся без него.

Курс по jQuery. Урок 7. jQuery события. Часть 1

Частная коллекция качественных материалов для тех, кто делает сайты

  • Фотошоп-мастер2000+ уроков по фотошопу
  • Фото-монстр300+ уроков для фотографов
  • Видео-смайл200+ уроков по видеообработке
  • Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни
  • Главная»
  • Уроки»
  • Уроки jQuery для начинающих

В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Stimed — стили в зависимости от времени суток

Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.

jQuery плагин для отображения превью загружаемого файла

Небольшой jQuery плагин, который позволит увидеть миниатюру изображения ещё до загрузки на сервер.

JQuery

Прослушав видео курс по JQuery(JQ) Вы научитесь пользоваться одним из популярнейших инструментов профессиональных веб-разработчиков — JavaScript-библиотекой JQuery. В данной серии видео уроков рассказано о преимуществах библиотеки JQuery, рассмотрены методы для быстрого и эффективного создания динамических пользовательских интерфейсов и веб-приложений. В видео курсе так же содержится большое количество примеров, а теоретическая часть поможет Вам легко осваивать материал. К каждому видеоуроку предусмотрено практическое задание, которое рекомендуется выполнить для закрепления полученных знаний.

Просмотрев 9 видео уроков по курсу JQuery Вы сможете:

— получать доступ к любым элементам на странице, благодаря селекторной выборке элементов;
— отфильтровывать полученные наборы элементов;
— манипулировать свойствами, атрибутами и стилями;
— эффективно работать с DOM-деревом;
— обрабатывать события;
— создавать анимации;
— пользоваться библиотекой JQuery UI для создания пользовательских интерфейсов;
— работать с вспомогательными функциями JQuery;
— создавать динамические приложения с использованием AJAX.

Этот курс входит в специальности:

Тренер-консультант, квалифицированный Web Frontend Developer

Курс Javascript/jQuery

Интерактивный мини-курс Javascript и jQuery с нуля

Цель мини-курса Javascript/jQuery дать начальное представление о работе с DOM, как с помощью Javascript ES5, так и с помощью jQuery. Курс Javascript(JS)/jQuery подходит для начинающих с нуля, однако необходимо знать основы HTML/CSS.

  • 21 заданий
  • 1 час видео
  • Сертификат об окончании

О курсе

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

В уроках Javascript/jQuery вы узнаете:

  • Что такое язык Javascript и как его используют
  • Базовый синтаксис классического Javascript (ES5)
  • Как пользоваться переменными в Javascript
  • Какие бывают виды циклов в Javascript и для чего они нужны
  • Что такое массивы и как работать с массивами в Javascript
  • Что такое JSON
  • Функции для работы со строками и массивами в Javascript
  • Как создавать собственные функции
  • Как создавать и обрабатывать события при клике на кнопку
  • Как изменять CSS-стили при клике на кнопку
  • Что такое библиотека jQuery
  • Как встроить jQuery в html-страницу
Топ-пост этого месяца:  Что такое Vue фреймворк, и как его использовать для создания приложений JS примеры кода

Язык Javascript изучают не только Frontend (фронтенд) разработчики, но и Backend разработчики, для программирования серверной части веб-сайтов. После завершения мини-курса по основам Javascript и jQuery, мы рекомендуем пройти уроки современного Javascript (ES6, ES7, ES8)

План курса

План мини-курса Javascript/JQuery включает в себя уроки Javascript (видео), тесты Javascript, интерактивные задания Javascript в браузере

#3 — Селекторы.

На этом уроке мы снова будем говорить о селекторах в jQuery.

За время занятия вы научитесь извлекать, применяя методы jQuery, все элементы по селектору
без дополнительного передвижения по странице от элемента к элементу. Эти элементы могут быть
как простыми, так и сложными, т.е. вложенными.

В основном, в jQuery методы выбора элементов опираются на мощь синтаксиса CSS, но есть
у этой библиотеки и нестандартные механизмы, предназначенные для решения задач более
высокого уровня.

На уроке на множестве примеров рассмотрено большое количество методов выбора элементов
разных типов. Вы с легкостью будете находить при помощи механизмов jQuery селекторы по классам,
селекторы по идентификатору, базовые селекторы и т.д.

Приятного всем просмотра! Учитесь с удовольствием!

Селекторы, освещаемые в данном видео уроке
  • $(‘tagName’) — все элементы с тэгом tagName;
  • $(‘#idName’) — единственный элемент с идентификатором idName;
  • $(‘.className’) — все элементы с классом className
  • $(‘selector1 selector2’) — все потомки-элементы selector2 элементов selector1;
  • $(‘selector1 > selector2’) — все непосредственные потомки-элементы selector2 элементов selector1;
  • $(‘selector1 , selector2’) — все элементы selector1 и элементы selector2;
  • $(‘selector1 + selector2’) — все элементы selector2, стоящие сразу за элементами selector1;
  • $(‘selector[attr]’) — все элементы selector, обладающие атрибутом attr;
  • $(‘selector[attr=»value»]’) — все элементы selector с атрибутом attr равным value;
  • $(‘selector[attr

=»value»]’) — все элементы selector с атрибутом attr, имеющем несколько значений, одно из которых value;

  • $(‘selector[attr|=»value»]’) — все элементы selector с атрибутом attr, имеющем несколько значений, первое из которых value;
  • События

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

    Устанавливает обработчик события на выбранные элементы страницы.

    Устанавливает обработчик потери фокуса, либо, запускает это событие.

    .change()

    Устанавливает обработчик изменения заданного элемента формы, либо, запускает это событие.

    .click()

    Устанавливает обработчик «клика» мышью по элементу, либо, запускает это событие.

    .contextmenu()

    Bind an event handler to the “contextmenu” JavaScript event, or trigger that event on an element.

    .dblclick()

    Устанавливает обработчик двойного «клика» мышью по элементу, либо, запускает это событие.

    .delegate()

    Устанавливает обработчик события на элементы, соответствующие заданному селектору.

    У выбранных элементов страницы, удаляет обработчики событий, установленные методом live().

    .error()

    Устанавливает обработчик ошибки при загрузке элементов (например отсутствие необходимой картинки на сервере).

    .focus()

    Устанавливает обработчик получения фокуса, либо, запускает это событие.

    .focusin()

    Устанавливает обработчик получения фокуса самим элементом или одним из его дочерних.

    .focusout()

    Устанавливает обработчик потери фокуса элементом или одним из его дочерних.

    .hover()

    Устанавливает обработчик(и) двух событий: mouseenter и mouseleave.

    .keydown()

    Устанавливает обработчик перехода клавиши клавиатуры в нажатое состояние, либо, запускает это событие.

    .keypress()

    Устанавливает обработчик ввода символа с клавиатуры, либо, запускает это событие.

    .keyup()

    Устанавливает обработчик возвращения клавиши клавиатуры в ненажатое состояние, либо, запускает это событие.

    Устанавливает обработчик событий на выбранные элементы страницы. Метод имеет одну важную особенность, отличающую его от bind(): если на страницу будут вставлены новые элементы, которые соответствуют текущему селектору, то они также будут реагировать на заданные события.

    Устанавливает обработчик полной загрузки выбранных элементов.

    .mousedown()

    Устанавливает обработчик нажатия кнопки мыши на элементе, либо, запускает это событие.

    .mouseenter()

    Устанавливает обработчик появления курсора над элементом, либо, запускает это событие.

    .mouseleave()

    Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие.


    .mousemove()

    Устанавливает обработчик движения курсора мыши внутри элемента, либо, запускает это событие.

    .mouseout()

    Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие.

    .mouseover()

    Bind an event handler to the “mouseover” JavaScript event, or trigger that event on an element.

    .mouseup()

    Устанавливает обработчик возвращения кнопки мыши в ненажатое состояние, либо, запускает это событие.

    Удаляет с выбранных элементов страницы обработчики событий, установленные с помощью метода .on().

    Устанавливает обработчики событий на выбранные элементы страницы.

    Устанавливает обработчик события выбранным элементам страницы. Особенностью метода является то, что обработчик будет вызван не более одного раза, на каждом из элементов.

    .ready()

    Устанавливает обработчик готовности дерева DOM.

    .resize()

    Устанавливает обработчик изменения размеров окна браузера, либо, запускает это событие.

    .scroll()

    Устанавливает обработчик «прокрутки» элементов документа, либо, запускает это событие.

    .select()

    Устанавливает обработчик выделения текста внутри элемента или , либо, запускает это событие.

    .submit()

    Устанавливает обработчик отправки формы на сервер, либо запускает это событие.

    .toggle()

    Поочередно выполняет одно из нескольких заданных действий.

    .trigger()

    Вызывает событие у выбранных элементов, что приводит к запуску обработчиков этого события.

    .triggerHandler()

    Вызывает выполнение обработчиков заданного события у выбранных элементов. Cамо событие, при этом, не происходит.

    .unbind()

    Метод необходим для удаления обработчиков событий, установленных на выбранных элементах методами bind(), one() или методами с узким назначением (click(), focus() и.т.д).

    .undelegate()

    У выбранных элементов страницы, удаляет обработчики событий, установленные методом delegate().

    .unload()

    Устанавливает обработчик выхода со страницы (при переходе по ссылке, закрытии браузера и.т.д.) для объекта window.

    event.currentTarget

    Содержит DOM-элемент, событие которого обрабатывается. Внутри обработчика, currentTarget всегда совпадает с переменной this. Однако, этот элемент может не являться источником события, поскольку оно могло быть передано от дочернего элемента, в результате «всплытия» события, вверх по иерархии DOM. Первоначальный источник события содержится в event.target.

    event.data

    Дополнительные данные, которые передаются обработчику при его установке.

    event.delegateTarget

    Содержит DOM-элемент, на который действительно установлен сработавший обработчик. Это свойство имеет смысл, если обработчик установлен делегированно. Если обработчик установлен непосредственно, то значение event.delegateTarget будет совпадать с event.currentTarget.

    event.isDefaultPrevented()

    Определяет, вызывался ли метод event.preventDefault() на данном объекте событий.

    event.isImmediatePropagationStopped()

    Определяет, вызывался ли метод event.stopImmediatePropagation() на данном объекте событий.

    event.isPropagationStopped()

    Определяет, вызывался ли метод event.stopPropagation() на данном объекте событий.

    event.metaKey

    Определяет была ли зажата клавиша META в момент действия события.

    event.namespace

    Содержит строковое значение пространства имен произошедшего события.

    event.pageX

    Координаты курсора мыши относительно левого верхнего угла документа.

    event.pageY

    Координаты курсора мыши относительно левого верхнего угла документа.

    event.preventDefault()

    Отменяет выполнение события. Например, при «клике» по ссылке, переход по ней не произойдет, если внутри обработчика будет вызван этот метод.

    event.relatedTarget

    Не текущий DOM-элемент, участвующий в событии. Для события mouseout будет содержать элемент, куда переместился курсор, а для mousein элемент, откуда курсор пришел.

    event.result

    Содержит значение, которое возвратил предыдущий обработчик этого события. Если предыдущего обработчика нет, возвратит undefined.

    event.stopImmediatePropagation()

    Предотвращает выполнение следующих обработчиков текущего события, а также, дальнейшую передачу события вверх по иерархии дерева DOM. Если требуется лишь остановить передачу события вверх по иерархии, а другие обработчики на текущем элементе останавливать не требуется, воспользуйтесь методом event.stopPropagation().

    event.stopPropagation()

    Предотвращает дальнейшую передачу текущего события, вверх по иерархии дерева DOM (некоторые события, такие как click, после выполнения на самом элементе, передают его родительским, что повторяется до самого основания дерева DOM).

    event.target

    DOM-элемент, являющийся источником события.

    event.timeStamp

    Содержит время, когда было произведено событие. Время представлено количеством секунд, прошедших с 1.01.1970.

    event.type

    event.which

    При возникновении события, связанного с нажатием клавиш клавиатуры или кнопок на странице, это поле будет содержать информацию о нажатых клавишах или кнопках. В отличии от стандартных event.keyCode и event.charCode, содержимое в event.which кроссбраузерное.

    jQuery.proxy()

    По заданной функции, создает другую такую же, внутри которой переменная this будет равна заданному значению.

    Современный учебник JavaScript

    Перед вами учебник по JavaScript, начиная с основ, включающий в себя много тонкостей и фишек JavaScript/DOM.

    Содержание

    Первые две части посвящены JavaScript и его использованию в браузере. Затем идут дополнительные циклы статей на разные темы.

    Язык программирования JavaScript

    Здесь вы можете изучить JavaScript, начиная с нуля и заканчивая продвинутыми концепциями вроде ООП.

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

    Видео уроки jQuery

    Научитесь использовать библиотеки Java Scrip и JQuery.

    Каким образом можно самостоятельно создать интерактивный сайт, на котором взаимодействие с пользователем происходит без перезагрузки страницы?

    Как можно использовать JavaScript и JQuery для собственного сайта и подключить их в самых необходимых местах абсолютно без всякого ущерба, а наоборот, с огромной пользой для дизайна сайта и функциональности? Узнайте каким образом можно заставить пользователя остаться на Вашем сайте, только за счет красивых эффектов, доступных с библиотеками JS.

    ОСНОВЫ
    1. Вводный урок.
    2. Что нам понадобится для работы.
    3. Наш лучший друг — волшебник JS.
    4. История о могущественном мэре.
    5. Метод write() объекта document.
    6. Отлов ошибок и коментарии.
    7. Суть и создание переменных.
    8. Использование переменных.
    9. Какие имена можно давать переменным.
    10. Операции над переменными.
    11. Именение значений переменных.

    12. Введение в массивы
    13. Свойство length + добавление/удаление элементов
    14. Метод splice().
    15. Другие методы для работы с массивами.
    16. Многомерные массивы.

    17. Основы.
    18. Множественные условия.
    19. Несколько условий одновременно.

    21. Цикл while.
    22. Проработка массива в цикле.
    23. Цикл for

    МЕТОДЫ ОБЪЕКТА WINDOW

    24. Методы alert(), promt() и confirm()

    25. Введение в функции.
    26. Область видимости переменных функции
    27. Возвращение результата функцией.

    СВОЙСТВА И МЕТОДЫ СТРОКОВЫХ ОБЪЕКТОВ

    28. Свойство length.
    29. Методы toLowerCase() и toUpperCase().
    30. Метод indexOf() и lastIndexOf().
    31. Метод slince().
    32. Методы charAt() и charCodeAt().
    33. Метод search() — введение в регулярные выражения.
    34. Метод search() продолжение.
    35. Метод match.
    36. Ищем сайты в строке.
    37. Метод replace().
    38. Готовые регулярные выражения и сервисы.

    ФУНКЦИИ И МЕТОДЫ ЧИСЛОВЫХ ОБЪЕКТОВ

    39. Функция isNaN().
    40. Функция parseInt(), parseFloat() и Number().
    41. Метод toFixed().
    42. Объект Match и его методы round(), ceil(), floor.
    43. Объект Math и его метод random().

    РАБОТА С ДАТАМИ В JAVASCRIPT

    44. Введение в объект Date.
    45. Практический пример по объекту Date.

    ЭТО МОЖЕТ ПРИГОДИТСЯ:

    46. Фуркция setTimeout(), setInterval(), clearInterval().
    47. Функция typof().
    48. Условный оператор case.
    49. Тернарный оператор.
    50. Создание собственного объекта.
    51. Создание методов для собственного объекта и их значений.
    52. Объекты navigator, screen, location и их свойства.

    54. Введение.
    55. DOM — объектная модель документа.
    56. Подготовка к дальнейшей работе.
    57. Выбор элементов методом getObjectByTagName()
    58. Выбор элемента методом geObjectById().
    59. Выбор родственных элементов.
    60. Свойства innerText и innerHTML.

    СОЗДАНИЕ ВЫБОРКИ ИЗ ЭЛЕМЕТОВ СТРАНИЦЫ

    61. Введение в JQutry.
    62. Основы выборки элементов с помощью JQuery.
    63. Вложенные и дочерние селекторы, слоедующий тэг.
    64. Выборка по наличию и значению атрибутов.
    65. Фильтрация выборок.
    66. Ожидание формирования DOM-дерева.

    ДЕЙСТВИЯ НАД ОТОБРАННЫМИ ЭЛЕМЕНТАМИ

    67. Функции text(), hide(), show().
    68. Понятие цепных функций.
    69. Понятие автоматических циклов.
    70. Изменение высоты и ширины элементов.
    71. Изменение кода внутри элемента: функция html().
    72. Функция fadeIn() и fadeOut().
    73. Функция fadeTo().
    74. Функция slideDown() и slideUp().
    75. Функции attr() и removeAttr().
    76. Функции assClass и removeClass().
    77. Функция css().
    78. Функция animate().
    79. Функция append(), prepend(), after() и before().
    80. Функция each() и понятие $(this).
    81. Функция size() и доступ к элементу выборки.
    82. Функция clone() и remove().
    83. Два полезных совета.
    84. Заключение.

    РЕКЦИЯ ЭЛЕМЕНТОВ WEB-СТРАНИЦЫ НА СОБЫТИЯ

    85. Введение.
    86. Список событий, которые отслеживает обозреватель.
    87. Традиционная модель событий и её недостатки.
    88. JQuery модель событий.
    89. JQuery события hover() и toggle().
    90. Понятие объекта события.
    91. Отмена обычного поведения элемента.
    92. Создаем слайдшоу для закрепления материала.

    МЕТОДЫ И ФИЛЬТРЫ ДЛЯ РАБОТЫ С ФОРМАМИ.

    93. Выбор и фильтрация элементов формы.
    94. Фильтры состояний элементов формы.
    95. Узнаем значения элементов форвы в выборке.
    96. Собития submit() и focus().
    97. События blur() и change().
    98. Включение и отключение, скрытие и показ полей.
    99. Заключение.

    1. Введение в библиотеку JQuery UI.
    2. Подключаем календарь. Часть 1. Дизайн.
    3. Подключаем календарь. Часть 2. Подключение.
    4. Подключаем календарь. Часть 3. Русификация.
    5. Подключаем слайдер-диапазон. Часть 1.
    6. Подключаем слайдер-диапазон. Часть 2.
    7. Высплывающее окно с эффектами.
    8. Кнопки.
    9. Умные вкладки.
    10. Аккордеон.
    11. Подключаем progress-bar. Часть 1.
    12. Подключаем progress-bar. Часть 2.
    13. Автозаполнение.

    14. Draggable() — перетаскивание элемента.
    15. Draggable() — элемент «корзина». Часть 1.
    16. Draggable() — создаем контейнеры. Часть 2.
    17. Draggable() — работаем над полкой. Часть 3.
    18. Draggable() — анимация в корзине. Часть 4.
    19. Draggable() — количество и цена. Часть 5.
    20. Sortable() — сортируемые элементы.
    21. Selectable() — выделение эелементов мыщью.
    22. Resizable() — изменение размеров элементеов.

    23. Эффекты для функций show() и hide().
    24. Функция effect().
    25. Новые возможности функции toggle()
    26. Новые возможности функции animate().
    27. Новое в функциях addClass() и removeClass().
    28. Новые возможности функции toggleClass().
    29. Функция switchClass().

    Все для Вебмаетера

    Навигация

    Комментарии

    Партнеры сайта

    Изучаем jQuery

    jQuery — это очень легкий, простой, очень удобный механизм сайта, которым должен владеть каждый Web-дизайнер.
    Эта библиотека позволит Вам создавать веб-приложения быстрее и качественнее, взяв на себя львиную долю работы по синтаксическому анализу и разбору DOM, обработке событий, созданию анимационных эффектов и взаимодействий на основе AJAX.

    Эта библиотека позволит Вам разрабатывать веб-приложения быстрее и качественнее, взяв на себя львиную долю работы по синтаксическому анализу и разбору DOM, обработке событий, созданию анимационных эффектов и взаимодействий на основе AJAX. Кроме того, эта библиотека кросс-браузерна, что позволит Вам максимально сосредоточиться на решении стоящих перед вами задач, а не тратить уйму времени на унификацию поведения Ваших сценариев в различных браузерах. Ну, а если уж совсем короче, то используется она для того, чтобы на практике реализовать принцип «Write less, do more» («Меньше кода, больше дела») Пройдя данный курс Вы научитесь основам работы с jQuery!

    Вы узнаете:
    —Как, при необходимости, изменять полученные наборы элементов
    —Используя полученные наборы элементов, Вы сможете «на лету» изменять структуру страницы и содержимое страницы, а также оформление всех ее элементов
    —Вы научитесь создавать простейшие анимационные эффекты, основанные на hiding, fading, sliding
    —Вы узнаете, как работать с событиями: научитесь связывать события с их обработчиками несколькими способами, «запускать» события самостоятельно и изучите объект события jQuery для более тонкой обработки событий.

    Глава 1: Выборка DOM-элементов (01:20:14)
    Часть 1: Селекторы и фильтры (46:41)
    Урок 1(11:44): селекторы базовые, иерархические
    Урок 2(07:57): фильтры базовые
    Урок 3(07:56): фильтры контента и видимости
    Урок 4(04:55): фильтры атрибутов
    Урок 5(06:16): «семейные» фильтры
    Урок 6(07:53): селекторы/фильтрыформ

    Часть 2: Функциональный разбор DOM (33:33)
    Урок 1(10:18): фильтрация отобранных элементов (часть 1)
    Урок 2(05:43): фильтрация отобранных элементов (часть 2)
    Урок 3(08:30): поиск в наборе элементов
    Урок 4(09:02): утилитарные методы

    Глава 2: Работа с DOM-узлами (52:48)

    Часть 1: работа с атрибутами (19:07)
    Урок 1(06:57): атрибуты
    Урок 2(06:11): классы
    Урок 3(05:59): значения(value)

    Часть 2: работа с содержимым (33:41)
    Урок 1(07:34): создание/добавление нового контента
    Урок 2(08:06): вставка контента/элементов
    Урок 3(05:37): «заварачивание» элементов
    Урок 4(12:24): копирование/замена/удаление элементов

    Глава 3: Работа с событиями (38:56)
    Урок 1(05:40): связывание/разрыв связи событий с обработчиками
    Урок 2(14:36): объекты события в jQuery
    Урок 3(08:16): хелперы
    Урок 4(10:24): утилитарные методы

    Глава 4: Работа с эффектами (19:02)
    Урок 1(07:05): hiding-эффекты
    Урок 2(06:38): fading-эффекты
    Урок 3(05:19): sliding-эффекты

    Видео: 1024×820 (5:4), 15 fps, AVC avc1

    141kbps avg, 0.011 bit/pixel
    Аудио: 44.1 kHz, AAC, 2ch,

    jQuery для начинающих // JavaScript

    jQuery – это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение – лучше всего начинать с наглядных примеров, и они далее…

    Материалы данной статьи включены в учебник «jQuery для начинающих». Учебник распространяется бесплатно, и сопровождается интерактивными примерами.

    Как же все-таки работает jQuery?

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

    А основные моменты Вам поможет понять следующая диаграмма:

    Как получить элемент с помощью jQuery?

    Для того чтобы понимать как работает селектор Вам все-же необходимы базовые знания CSS, т.к. именно от принципов CSS отталкивается селектор jQuery:

      $(“#header”) – получение элемента с >Начнем с простенького примера – слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример)

    Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между “active” и “btn-sl >

    Магические исчезновения

    Этот пример покажет как можно красиво и легко убирать растворять элементы (см. пример):

    Когда мы кликаем по картинке , будет найден родительский элемент

    Связанная анимация

    Теперь пример посложнее, но он поможет Вам лучше понять jQuery. Всего несколько строк кода заставят квадрат двигаться, изменять размер и прозрачность. (см. пример):

    Line 0: когда прогрузилась страница (DOM готов к манипуляциям)
    Line 1: привязываемся к событию click для элемента
    Line 2: манипулируем элементом

    Гармошка #1

    Пример реализации “гармошки”. (см. пример)

    Теперь приступим к разбору полетов:
    Первой строчкой мы добавляем класс “active” первому элементу

    внутри

    , для следующего в нём элемента

    будет применен эффект slideToggle, затем для всех остальных элементов

    будет применен эффект slideUp. Следующие действие изменяет класс заголовка на “active”, затем ищем все остальные заголовки

    и убираем у них класс “active”

    Гармошка #2

    Этот пример схож с предыдущим, лишь отличается тем, что мы указываем открытую по умолчанию панельку. (см. пример)

    В CSS у нас указано для всех элементов

    display:none. Теперь нам необходимо открыть третью панель. Для этого мы можем написать следующее $(“.accordion2 p”).eq(2).show(), где eq обозначает равенство. Помните, что индексирование начинается с нуля:

    Анимация для события hover #1

    Данный пример поможет создать Вам очень красивую анимацию для события hover (надеюсь, Вы знаете что это?), (см. пример):

    Когда Вы наводите мышкой на элемент меню (mouseover), происходит поиск следующего элемента , и анимируется его прозрачность и расположение:

    Анимация для события hover #2

    Данный пример чуть-чуть посложней предыдущего примера: для формирования подсказки используется атрибут linktitle (см. пример)

    Кликабельные блоки

    Этот пример демонстрирует как сделать кликабельным блок с текстом, а не только ссылку (см. пример):

    Создадим список

      с классом >

    Складывающиеся панельки

    Ну а теперь чуть-чуть скомбинируем предыдущие примеры и создадим ряд складывающихся панелек (наподобие как в Gmail организован inbox). (см. пример)

      скрываем все элементы

    Имитация Backend’a WordPress’a

    Я думаю многие из читателей сталкивались с админской частью wordpress’a, точнее с редактирование комментариев. Попробуем сделать что-то подобное. Для анимации фонового цвета нам понадобиться соответствующий плагин для jQuery. (см. пример)

      добавим класс “alt” к каждому чётному элементу

    Галерея изображений

    Простейший пример реализации галереи, без перезагрузки страницы. (см. пример)

    Для начала добавим тэг в заголовки

    По клику на изображения в

    выполняем следующие действия:

    • сохраняем значение атрибута “href” в переменной “largePath”
    • сохраняем значение атрибута “title” в переменной “largeAlt”
    • заменяем в элементе значение атрибута “scr” и “alt” значениями из переменных “largePath” и “largeAlt”
    • так же присваиваем элементу “h2 em” значение из “largeAlt”

    Стилизируем ссылки

    Большинство нормальных браузеров легко понимают когда мы хотим добиться от них стилизации ссылок для различного типа файлов, для это цели можно использовать следующее CSS правило: a[href $=’.pdf’] < … >. Но как обычно IE6 отличается умом и сообразительностью, по этой причине будем ставить ему костыли используя jQuery. (см. пример)

    Для начала добавим класс для каждой ссылки, в соответствии с типом файла.
    Затем выберем все элементы которые не содержат ссылки на “http://www.webdesignerwall.com” и не начинающиеся на “#” в “href”, затем добавим им класс “external” и устанавливаем target= “_blank”.

    Так же Вы можете посмотреть все примеры или скачать jQuery tutorial for beginners.

    Добавить комментарий