JQUERY для начинающих

Поделитесь новостью в соц-сетях!

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

Приходилось ли Вам видеть живые сайты? Эти сайты настолько удобны, быстры и легки, что Вам приятно на них находиться. Обычно многие элементы таких сайтов работают без перезагрузки и здорово экономят время посетителей. Возможно, Вы даже задавались вопросом «Как же делаются подобные вещи? Какие технологии позволяют добавлять все эти эффекты на сайты?». На самом деле эта мощная технология называется Javascriрt, которая в последние 2 года получила мощный импульс в своем развитии за счет появления так называемых фреймворков, самый популярный из которых называется jQuery. Но самое важное для Вас заключается в том, что сегодня эти технологии стали доступными и Вам!


Скачать дополнительные материалы



Автор: Евгений Попов
Сайтhttps://evgeniypopov.com/


Список уроков

    Создание выборки из элементов страницы

  1. 1. Введение в Jquery
  2. 2. Основы выборки элементов с помощью JQUERY
  3. 3. Вложение и дочерние селекторы. Следующий тег
  4. Домашнее задание
    1. Найдите в html-коде страницы index.html картинку с id="img_4" и поместите её внутрь абзаца.

    2. Используя таблицу стилей mystyle.css, проделайте следующие манипуляции:
    2а. Создайте css-селектор и пропишите css-правило, которое будет задавать рамку в 1px сплошную и красного цвета всем изображениям, которые находятся внутри блока div с id="div_for_img". Проверьте в браузере.
    2б. Измените селектор таким образом, чтобы рамка появлялась только у дочерних по отношению к блоку div с id="div_for_img" изображений. Проверьте в браузере.
    2в. Измените селектор таким образом, чтобы рамка появлялась у абзаца, который следует за блоком div с id="div_for_img". Проверьте в браузере.

    3. Удалите все внесенные в таблицу стилей изменения.
  5. 3_1. Решение домашнего задания
  6. 4. Выборка по наличию и значению атрибутов
  7. Домашнее задание
    1. Отобрать в набор все ссылки, которые находятся внутри блока с id="my_links" и при этом значение атрибута href у них начинается со слова "documents".

    2. Отобрать в набор только те картинки, которые находятся внутри блока с id="forfooter" и в качестве значения атрибута title имеют значение "Производители".
  8. 4_1. Решение домашнего задания
  9. 5. Фильтрация выборок
  10. 6. Ожидание формирования DOM дерева
  11. Действия над отобранными элементами

  12. 7. Функции text(), hide(), show()
  13. Домашнее задание
    В предыдущем уроке мы с вами отбирали из всего дерева картинку из шапки сайта logo.jpg и сделали мы это таким способом:

    $('img[src*=logo.jpg]').hide();

    Ваша же задача: сделать выборку этого же элемента двумя другими способами на Ваше усмотрение.
  14. 7_1. Решение домашнего задания
  15. 8. Понятие цепных функций
  16. Домашнее задание
    Сохранить в переменную myLink jquery выборку ссылки, которая ведет на pdf файл, мгновенно спрятать эту ссылку, поменять у этой ссылки текст (по вашему усмотрению), и вернуть ее за 2 секунды.

    Обязательно использовать цепные функции.
  17. 8_1. Решение домашнего задания
  18. 9. Понятие автоматический циклов
  19. Домашнее задание
    Отобрать в jquery набор все картинки кроме первой и скрыть их с помощью функции hide() за 5 секунд.

    Подсказка: для формирования набора используйте фильтр not.
  20. 9_1. Решение домашнего задания
  21. 10. Изменение высоты и ширины элементов
  22. Домашнее задание
    Нужно написать функцию, которая будет вычислять размеры элемента. Идентификатор элемента, размеры которого надо вычислить, передаются в функцию в качестве параметра.

    Результаты функция выводит в специальный блок div с id="forresults", который находится после таблицы по продаже б/у мотоциклов нашего сайта.
  23. 10_1. Решение домашнего задания
  24. 11. Изменение кода внутри элемента Функция html()
  25. 12. Функции fadeIn() и fadeOut()
  26. Домашнее задание
    Написать функцию, которая получает 2 параметра - id элемента, который должен исчезнуть со страницы и время его исчезнования.

    При вызове функции указанный элемент должен плавно исчезать (fadeOut) за указанное время.

    При этом, второй параметр вам надо проверить на удовлетворение 2-м условиям.
    1. Параметр должен быть числом.
    2. Число должно быть в диапазоне от 500 до 10000.
    Если число за диапазоном, то вы должны прервать выполнение функции и вернуть false.
  27. 12_1. Решение домашнего задания
  28. 13. Функция fadeTo()
  29. 14. Функции slideDown() и slideUp()
  30. 15. Функции attr() и removeAttr()
  31. Домашнее задание
    Напишите функцию, которая получает 3 параметра.
    1. id элемента, с которым надо работать.
    2. Название атрибута, который нужно изменить.
    3. Новое значение указанного атрибута.

    Функция в результате своей работы должна изменить указанный атрибут указанного элемента.
  32. 15_1. Решение домашнего задания
  33. 16. Функции addClass() и removeClass()
  34. 17. Функция css()
  35. Домашнее задание
    На нашей странице есть элемент span с классом "pq", который находится внутри заголовка h3 с id="my_h3".

    Ваша задача: удалить у этого элемента класс "pq" и добавить ему 3 css свойства за раз:

    border: 1px solid #cc0000
    padding: 5px
    background-color: #f6f6f6
  36. 17_1. Решение домашнего задания
  37. 18. Функция animate()
  38. Домашнее задание
    Сделайте выборку для картинки второго мотоцикла moto2.jpg.

    1. С помощью метода css, добавьте ей рамку 1px solid #333333.
    2. Примените анимацию, во время которой увеличьте рамку до значения в 5px за 5 секунд.После выполнения анимации плавно скройте шапку с помощью функции fadeOut() за 5 секунд.Используйте цепные функции.

    Подсказка: свойство для увеличения размера рамки в обычном css записывается как border-width.
  39. 18_1. Решение домашнего задания
  40. 19. Функции append(), prepend(), after(), before()
  41. Домашнее задание
    Ваша задача добавить в самый конец тэга новый абзац с любым текстом и дать этому абзацу id="newparagraph".После этого изменить цвет фона этого параграфа на черный, а цвет текста на белый. Используйте цепные функции.
  42. 19_1. Решение домашнего задания
  43. 20. Функция each() и понятие this
  44. Домашнее задание
    Ваша задача перебрать все картинки нашей страницы и добавить красную 1px рамку тем из них, у которых в атрибуте title встречается буква "т", а высота больше 50, но меньше 100.
  45. 20_1. Решение домашнего задания
  46. 21. Функция size() и доступ к элементу выборки
  47. 22. Функции clone() и remove()
  48. 23. Два полезных совета
  49. 24. Заключение

  50. Бонусы

    3D Карусель

  51. 3D Карусель. Урок 1
  52. 3D Карусель. Урок 2
  53. 3D Карусель. Урок 3
  54. ZOOM эффект

  55. ZOOM эффект Урок 1
  56. ZOOM эффект. Урок 2
  57. ZOOM эффект. Урок 3
  58. Мега меню

  59. Мега меню. Урок 1
  60. Мега меню. Урок 2
  61. Мега меню. Урок 3
  62. Мега меню. Урок 4

Комментарии