Курс по jQuery. Урок 9. Методы работы с набором выбранных элементов. Часть 1


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

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

Бесплатный видеокурс по jQuery представляет собой подборку из 24 видеоуроков общей продолжительностью 3 часа 11 минут.

Курс дается в обмен на ваши контакты на http://jquery.info-dvd.ru/

Глава 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-эффекты

Пройдя данный курс Вы научитесь основам работы с jQuery!

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

Навигация

Комментарии

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

Курс по jQuery (Хомич Д., 2010)

Бесплатный видеокурс по jQuery представляет собой подборку из 24 видеоуроков общей продолжительностью 3 часа 11 минут.

Что такое jQuery?

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

Данный видеокурс изначально планировался как платный инфопродукт на DVD. В силу ряда обстоятельств выпуск продукта был отменен.

Вы узнаете:
— Как выбирать необходимые вам узлы из DOM-дерева;
— Как при необходимости изменять полученные наборы элементов;
— Используя полученные наборы элементов, вы сможете «на лету» изменять структуру страницы и содержимое страницы, а также оформление всех ее элементов;
— Вы научитесь создавать простейшие анимационные эффекты, основанные на 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-эффекты

Производитель: Издательство Info-DVD, Денис Хомич
Год выпуска: 2010
Язык: русский
Продолжительность: 03:11:00

Скачать: Курс по jQuery (Хомич Д., 2010)

JQuery

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

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

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

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

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

20 полезных методов jQuery, которые следует использовать в работе

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

1. after() / before()

Иногда нужно вставить что-нибудь в DOM, но у Вас нет никакой подходящей ссылки, чтобы сделать вставку с помощью append() или prepend(), и Вы не хотите добавлять лишние элементы или id. Функции after() / before() могут помочь в этом случае. Они вставляют элементы в DOM сразу после и непосредственно перед другим элементом, причем новый элемент будет иметь того же родителя, что и используемый.

Вы можете сделать тоже самое если используете в своей работе элементы, но нужно использовать функции insertAfter() или insertBefore().

2. change()

Метод change() является обработчиком событий, так же как и click() или hover(). Событие change генерируется объектами текстовых полей, полей ввода текста, полями выбора, и происходит оно при изменении значения целевого элемента в отличие от обработчиков событий focusOut() или blur(), которые вызываются, когда элемент теряет фокус ввода вне зависимости от того, изменилось значение или нет.

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

3. Контекст

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

Топ-пост этого месяца:  Как зарабатывать на студентах из США в Edu-Profit.com

Как же это может быть полезным? Например в функции обработчике события. Если Вы хотите получить элемент, в котором произошло событие, то Вам следует передать this в качестве контекста:

4. data() / removeData()

Хотелось ли Вам когда-нибудь сохранить некоторую информацию об элементе? Вы можете легко сделать это с помощью метода data(). Чтобы установить значение Вам нужно передать два параметра(ключ и значение) или один(объект).

Чтобы получить данные, нужно вызвать метод с соответствующим ключом.

Чтобы получить все данные соответствующие элементу, нужно вызвать data без параметров. Вы получите объект со всеми ключами и значениями, которые Вы задавали для элемента.

Если Вы хотите удалить пару ключ/значение после того, как Вы добавили ее к элементу, нужно вызвать метод removeData(), передав ему правильный ключ.

5. queue() / dequeue()

Функции queue() и dequeue() работают с элементом. Очередь — это список анимаций, которые должны быть выполнены для элемента. По умолчанию очередь элемента имеет имя ‘fx’. Давайте посмотрим на пример:

JavaScript

Итак, что здесь происходит? Функция animateBox мы устанавливаем очередь анимаций. Отметим, что последний пункт снова вызывает функцию animateBox, таким образом мы постоянно повторяем очередь. Когда происходит нажатие мыши на li#start, функция вызывается и начинается выполнение очереди анимаций. Когда мы нажимаем на li#reset, текущая анимация завершается, а затем div останавливает анимацию. С помощью jQuery мы устанавливаем очередь под именем ‘fx’ (помните, очередь по умолчанию) на пустой массив; в действительности мы очищаем очередь. А что происходит, когда мы нажимает li#add? Сначала мы вызываем функцию queue элемента div. Данное действие добавляет функцию в конец очереди, а так как мы не задали имя очереди как первый параметр, то использцется ‘fx’. В данной функции мы анимируем div, а затем вызываем функцию dequeue() для элемента div, которая удалаяет данную функцию из очереди. Очередь продолжает выполняться, но функция в ней не присутствует.

6. delay()

Когда выполняется очередь анимаций, Вы можете использовать метод delay(), чтобы остановить на некоторое время анимацию. Время передается в миллисекундах.

7. bind(), unbind(), live(), и die()

Знаете ли Вы, что когда добавляется событие по нажатию мыши к элементу, например, так:

Вы в действительности используете оболочку для метода bind()? Чтобы использовать метод bind(), Вам нужно передать тип события в качестве первого параметра и функцию в качестве второго параметра.

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

Вы также можете назначать одну и туже функцию нескольким событиям в одно и тоже время, разделяя их пробелами. Так, чтобы получить эффект всплытия, Вы можете начать следующим образом:

Вы можете передать данные функции, добавляя третий параметр (на второй позиции):

Рано или поздно Вы столкнетесь с ситуацией, когда при вставке элемента в DOM с помощью обработчика событий, обработчик событий, который сделан с помощью bind (или его оболочки), не работает для вставленного элемента. В этом случае Вам нужно использовать метод live() (делегировать). Таким образом добавляется обработчик события добавляется соответствующему вставленному элементу.

Для удаления обработчика событий, созданных методом bind(), используйте метод unbind(). Если ему не передаются никакие параметры, то он удаляет все обработчики. Вы можете передать ему тип события, и он удалить обработчики событий только указанного типа. Чтобы удалить события из нужного пространства имен, добавьте это пространство имен. Если Вы хотите удалить определенную функцию, передайте ее имя как второй параметр.

Вы можете использовать методы bind/unbind анонимно. В этом случае методы будут работать только с именем функции.

Если Вам надо отвязать событие из функции, которая вызвана самим событием, просто передайте методу unbind() объект event.

Вы не можете использовать unbind() для события live. Используйте метод die(). Без параметров он удалит все события live из коллекции элемента. Вы можете также передавать ему тип события или тип и функцию.

Если Вам нужен конкретный элемент в наборе, то можно передать индекс элемента методу eq() и получить один элемент jQuery. Передача отрицательного индекса производит отсчет в обратном порядке от конца к началу набора.

Вы также может использовать :eq() в вашем селекторе. Так предыдущий пример может быть выполнен так:

9. get()

При получении коллекции элементов, jQuery возвращает ее как объект jQuery. Таким образом у Вас есть доступ ко всем методам. Если Вы хотите получить просто элементы DOM, следует использовать метод get().

Вы можете задать индекс, чтобы получить только один элемент.

10. grep()

Если Вы не знакомы с Unix/Linix, может быть Вы никогда не слышали grep. В терминале это утилита для поиска текста. Но в jQuery мы используем ее для фильтрации массива элементов. Это не метод коллекции jQuery. Вы передаете массив в качестве первого параметра и функцию фильтрации в качестве второго параметра. Функция фильтрации также получает два параметра: элемент из таблицы и его индекс. Затем функция фильтрации выполняет обработку и должна вернуть значение true или false. По умолчанию, все элементы, для которых возвращается true, сохраняются. Вы можете добавить третий параметр типа boolean, чтобы инвертировать результат и сохранять элементы, для которых возвращается значение false.

11. Псевдо-селекторы

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

Их, конечно же больше, но эти — уникальны.

12. isArray() / isEmptyObject() / isFunction() / isPlainObject()

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

Метод isPlainObject() возвращает true, если переданный параметр был создан как символьный объект или с помощью new Object().

13. makeArray()

Когда Вы создаете коллекцию элементов DOM с jQuery, Вы возвращаете объект jQuery. В некоторых случаях может быть полезным возвращение массива обычных элементов DOM. Функция makeArray() выполняет такую операцию.

14. map()

Метод map() отдаленно напоминает grep(). Он получает один параметр — функцию. Данная функция может иметь два параметра: индекс текущего элемента и сам элемент. Вот что происходит: функция выполняется один раз для каждого элемента коллекции. Вне зависимости от того, какое значение возвращается функцией при выполнении операций над элементом, она обработает всю коллекцию.

15. parseJSON()

Если Вы используете $.post и $.get—and в различных ситуациях, то Вы работаете со строками JSON. В этом случае функция parseJSON будет полезной для Вас. Данная функция использует встроенный в браузер парсер JSON, есл ион есть(что значительно ускоряет обработку).

16. proxy()

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

Сама по себе, person.meet() выполняет alert правильно. Но когда она вызывается обработчиком события, то выводит «“Привет! Меня зовут undefined». Происходит так потому, что функция вызывается из другого контекста. Чтобы исправить ситуацию, мы можем использовать функцию proxy():

Первый параметр функции proxy — метод для выполнения. Второй параметр — контекст, в котором следует ее выполнять. Альтернативно мы можем передать сначала передать контекст, а затем строку с именем метода. Теперь функция выполняется правильно.

17. replaceAll() / replaceWith()

Если Вам нужно заменить один элемент DOM другим, то надо использовать данные функции. Мы можем вызвать replaceAll() для элементов, которые выделены или созданы, передавая селектор для элементов, которые нужно заменить. В данном примере все элементы с классом error будут заменены только что созданным span.

Метод replaceWith() выполняет туже операцию, но селекторы для него имеют обратный порядок — первый селектор будет заменен вторым:

Топ-пост этого месяца:  Альткоин (altcoin) — что это такое, топ самых популярных криптовалют и в какие альткоины сейчас

Вы также можете передавать эти два метода в функции, которые возвращают элементы или HTML строки.

18. serialize() / serializeArray()

Метод serialize() используется для преобразования значений в форме в строку.

JavaScript

Вы можете использовать serializeArray() для преобразования значений формы в массив объектов вместо строки:

19. siblings()

Метод siblings() возвращает коллекцию элементов, которые имеют один уровень с указанным в иерархии в исходной коллекци:

20. wrap() / wrapAll() / wrapInner()

Три данные функции облегчают процесс оборачивания элементов в другие элементы. Все три метода принимают один параметр: либо элемент (который может быть HTML строкой, селектором CSS, объектом jQuery, или элементом DOM), или функцией, которая возвращает элемент.

Метод wrap() оборачивает каждый элемент коллекции назначенным элементом:

Метод wrapAll() оборачивает один элемент вокруг всех элементов в коллекции. Это означает, элементы в коллекции будут перемещены в новую секцию DOM. Они будут подняты вверх к месту, где встречается первый элемент коллекции и затем будут обернуты:

HTML перед использование метода wrapAll()

JavaScript

HTML после использования метода wrapAll()

Метод wrapInner оборачивает все внутри каждого элемента коллекции в заданный элемент:

HTML до использования метода wrapInner

JavaScript

HTML после использования метода wrapInner

Надеюсь, что урок был полезен для Вас!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.net.tutsplus.com
Перевел: Сергей Фастунов
Урок создан: 21 Июня 2010
Просмотров: 89524
Правила перепечатки

5 последних уроков рубрики «jQuery»

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

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

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

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

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

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

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

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

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

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

Try jQuery — новый интерактивный самоучитель по jQuery

Раньше я как-то не стремился глубоко изучать jQuery, поскольку работаю в основном с back-end. Однако самоучитель TRYjQuery, ссылка на который пришла в недавнем письме от CodeSchool, вызвал интерес с первых кадров.

В последнее время видна тенденция по созданию интерактивных «обучалок». Сходу вспоминается KhanAcademy, различные онлайн-учебники по тому же jQuery. Разработчики TRYjQuery пошли тем же путём, но при этом сделали свой самоучитель максимально качественным в плане подачи, упаковки материала.

Опять-таки, я не знаток jQuery и не могу судить о качестве самих материалов внутри и о том, насколько много даёт этот курс (я его не прошёл, только начал). Хотя некачественные материалы вряд ли бы расположили на поддомене jquery.com, да и разработчик — CodeSchool — весьма известен. Но зато могу дать оценку с точки зрения новичка: всё сделано так, что возникает желание учиться и продолжать обучение.

В самом начале нас встречает видеоролик. Разработчики курса даже не поскупились на хорошую заставку, такое ощущение, что начинаешь смотреть сериал:

Затем нас знакомят с самим курсом, некоторыми основами jQuery, и дают инструкцию по работе с обучающей средой.

Качество роликов высокое. Всё, что говорит ведущий, визуализируется. Сам ведущий очень «живой», т.е. это не скучная лекция. Впоследствии можно скачать слайды по уроку.

После видеоролика приступаем к выполнению заданий:

В целом структура курса следующая: есть несколько разделов, в каждом разделе мы смотрим видео — выполняем несколько заданий, опять видео — ещё несколько заданий.

В каждом задании есть некоторый HTML-код и задача, которую нужно выполнить с помощью jQuery. На первых заданиях в нижней части экрана есть консоль, куда и вводим код. В процессе ввода выбираемые элементы подсвечиваются.
Впоследствии вместо консоли нам могут предложить редактировать HTML или javascript-код.
Выполняя задания, зарабатываем очки:

К каждому заданию можно получить подсказки и, если они не помогли, то узнать ответ. Что интересно, за подсказки очки не снимаются. Но вот если посмотреть ответ, то за это снимается 75 очков. Также в процессе обучения зарабатываются значки.

В целом очень приятные впечатления. Единственное что — сравнив скорость прохождения первых разделов и их общее количество (шесть), сложилось ощущение, что курс очень маленький. Возможно, это обманчивое впечатление из-за лёгкости первых «вводных» заданий. А может быть, они и не ставили целью сделать какой-то сверх-объёмный курс, недаром же он называется «try» — мол, попробуйте, а дальше уже сами.

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

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сек. ‘возврат’ выполняется после совершения движения, но сейчас мы обойдёмся без него.

[ITVDN] JQuery курс

Тема в разделе «Курсы по программированию», создана пользователем shurikpr, 9 май 2013 .

    li» data-history=»on» >
  • [ITVDN] JQuery курс
  • Отзывы (7)

Статус темы: Закрыта.

  • Благодарна за труд, довольна. Все отлично и организация и материал. Так держать!

    Материал отличный. Brigadir, большое спасибо за организацию складчины, мысленно жму вам руку.

    Благодарю организатора,все отлично! Материал стоящий!!

    Kак всегда, все на высшем уровне, спасибо огромное!

    Спасибо оргу за качественный материал, долго ждал этот курс. Brigadir один из лучших оргов! Респект:) По материалу бегло пробежался, CBS как всегда на высоте! Не считая лекций по XML. Вообщем я доволен как удав)))

    jQuery для профессионалов

    jQuery — очень популярная библиотека, написанная на языке JavaScript, которая способна ускорить веб-разработку в несколько раз.

    Очень часто у веб-разработчика стоит задача выбора элементов DOM для дальнейшей работы. jQuery может предложить разработчику очень богатые инструменты для работы с селекторами. Жаль, что не все разработчики их используют на 100%. О селекторах, их использовании и сравнении с чистым JavaScript мы и поговорим на первом уроке.

    Урок 1:
    * Что такое Селектор;
    * Работа с селекторами с помощью JavaScript;
    * Коллекции элементов jQuery;
    * Работа с селекторами в jQuery.

    Когда дело доходит до построения интерактивных приложений с помощью Ajax (Asynchronous Javascript and XML), сразу вспоминаешь о jQuery, предоставляющей богатые инструменты для работы с Ajax. Об этом мы и поговорим на втором занятии.

    Урок 2:
    * Что такое Ajax (кратко);
    * Работа с Ajax из JavaScript;
    * Ускоряем разработку с помощью jQuery;
    * Методы jQuery для работы с Ajax;
    * Подробный разбор конструкции jQuery.ajax;
    * jQuery и JSON;
    * jQuery и XML.

    Одна из самых сильных сторон – это работа с DOM (от англ. Document Object Model). Об этом мы поговорим на третьем и четвертом уроках.

    Урок 3:
    * Что такое DOM (кратко);
    * Работа с DOM с помощью JavaScript;
    * Как jQuery облегчает работу с DOM;
    * Работа с DOM с помощью jQuery.

    Урок 4:
    * Работа с параметрами (высота, ширина, отступы) и стилями;
    * Современные методы добавления элементов;
    * Современные методы удаления элементов;
    * Замена элементов;
    * Клонирование DOM-элементов.

    Опытный разработчик всегда старается понять все нюансы работы библиотеки, которые начинаются с ядра. О функциях ядра jQuery мы поговорим на пятом занятии.

    Урок 5:
    * Что представляет собой форма записи $();
    * Как отложить возникновение события ready();
    * Учимся разрешать конфликты, когда несколько библиотек конкурируют за переменную $();
    * Создаём копию глобального объекта jQuery, давая возможность изменять методы и параметры созданной копии, не затрагивая оригинал.

    #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 с нуля.» (Дмитрий Науменко)

Автор: Дмитрий Науменко

Видеокурс «JavaScript и jQuery с Нуля» предназначен для тех, кто хочет повысить интерактивность и удобство своего сайта для посетителей. Курс будет полезен тем, кто уже умеет создавать сайты, используя HTML, CSS и PHP. Изучив его, Вы сможете создавать более красивые и функциональные сайты. При этом, благодаря применению библиотеки jQuery, Вы сможете реализовать на сайте многие полезные функции, повышающие его удобство и привлекательность без глубоких знаний JavaScript. Такой подход позволяет делать больше и лучше с меньшими затратами времени.

Смотреть видео:

JavaScript и jQuery с нуля. Обзор меню. (Дмитрий Науменко)

Часть 1. Понятие и история JavaScript

Часть 2. Основы JavaScript

  • Вставка JavaScript на страницу
  • Первая программа на JavaScript
  • Комментирование кода и поиск ошибок
  • Понятие метода и типы данных в JavaScript

Часть 3. Переменные

  • Понятие переменной, создание переменных
  • Арифметические операции, объединение чисел и строк

Часть 4. Операторы сравнения и конструкция if-else

  • Операторы сравнения и логические операторы
  • Конструкция if-else, методы prompt() и confirm()
  • Конструкция switch-case

Часть 5. Функции

  • Введение в функции
  • Возвращение значения функцией
  • Область видимости переменных
  • Понятие объекта. Свойства и методы

Часть 6. Массивы

  • Понятие массива и способы его объявления
  • Доступ к элементам массива
  • Добавление элементов в массив
  • Удаление элементов массива
  • Работа с методом splice()
  • Сложение массивов. Преобразование массива в строку
  • Дополнение по типу Boolean
  • Цикл while
  • Цикл for. Операторы break и continue

Часть 8. Работа со строками

  • Определение длины строки и изменение регистра
  • Методы indexOf() и lastIndexOf() для поиска в строке
  • Методы slice() и charAt()
  • Основы регулярных выражений. Метод search()
  • Основы регулярных выражений. Метод match(). Часть 1
  • Основы регулярных выражений. Метод match(). Часть 2
  • Основы регулярных выражений. Метод replace()

Часть 9. Объект Date

  • Получение года, месяца, дня недели и числа
  • Получение текущего времени
  • Работа с датами. Часть 1
  • Работа с датами. Часть 2

Часть 10. Работа с числами и объект Math

  • Преобразование строки в число. Методы Number(), parseInt() и parseFloat()
  • Работа с дробными числами. Метод toFixed()
  • Округление чисел. Методы round(), ceil() и floor()
  • Генерирование случайных чисел. Выбор случайного элемента массива
  • Перебор свойств объекта, объекты браузера

Часть 11. Создание собственного объекта

  • Создание объекта и доступ к его свойствам
  • Создание методов в объекте
  • Методы setTitmeout() и clearTimeout()

Часть 12. Работа с окнами

  • Изменение размера окна. Метод resizeTo()
  • Открытие нового окна. Метод open()

Часть 13. Объектная модель документа (DOM)

  • Понятие объектной модели документа
  • Выбор и модификация элемента по > Часть 14. Доступ к элементам страницы

    Выбор элементов по > Часть 15. Фильтры в jQuery

  • Выбор четных и нечетных элементов
  • Фильтры :not, :has и :contains
  • Нахождение скрытых и видимых элементов

Часть 16. Выборки в jQuery и цепные функции

  • Понимание выборок в jQuery и автоматические циклы
  • Цепные функции. Функции fadeOut() и fadeIn()

Часть 17. Работа с элементами выборки

  • Функции html() и text()
  • Позиционирование html-кода. Функции append(), prepend(), after() и before()
  • Удаление, замена и клонирование выборок. Функции remove(), replaceWith() и clone()
  • Работа с классами. Функции add > Часть 18. События

  • Понятие события
  • События мыши, документа (окна), формы и клавиатуры: общий обзор
  • Регистрация встроенных событий
  • Традиционная модель
  • jQuery-модель работы с событиями
  • События hover и toggle
  • Удаление события: функция unbind()
  • Понятие объекта события и работа с его свойствами
  • Отмена обычного поведения при событии

Часть 19. Эффекты jQuery

  • Функция fadeTo() и понятие функции обратного вызова
  • Скользящие элементы. Функции sl > Часть 20. Работа с формами

  • Выбор элементов формы и фильтры состояния
  • Получение и установка значений для элементов формы. Событие submit
  • Проверка отмеченности радиокнопки или чекбокса
  • Событие focus
  • Событие blur
  • Событие change
  • Событие click
  • Включение и выключение полей формы
  • Предотвращение повторной отправки формы

Часть 21. Практические примеры

  • Подсветка строк таблицы при наведении мыши
  • FAQ на одной странице
  • Создание сменяющих друг друга изображений
  • Создание фотогалереи
  • Продвинутая галерея на jQuery Lightbox. Часть 1
  • Продвинутая галерея на jQuery Lightbox. Часть 2
  • Верификация формы
  • Создание сортируемых таблиц
  • Анимированное слайдшоу с Cycle. Часть 1
  • Анимированное слайдшоу с Cycle. Часть 2
  • Открытие страниц в окне на текущей странице (Greybox)
  • Создание складывающихся панелей с помощью виджета Accordion
  • Создание вкладок. Часть 1
  • Создание вкладок. Часть 2
Топ-пост этого месяца:  Шаблон темы OpenCart использование макетов и модулей
Добавить комментарий