Jquery самоучитель: Учебник jQuery для начинающих

Содержание

Самоучитель по jQuery

Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!

Добро пожаловать в мир jQuery!

jQuery — это JavaScript-библиотека, обеспечивающая кроссбраузерную поддержку приложений. Автор библиотеки Джон Резиг (John Resig) впервые представил свое творение в январе 2006 года на компьютерной конференции в Нью-Йорке, а в августе того же года была выпущена первая стабильная версия библиотеки. За прошедшие годы библиотека претерпела множество изменений и на текущий день содержит функционал, полезный для максимально широкого круга задач. Она имеет небольшой размер и не засоряет глобальное пространство имен тривиальными идентификаторами.

Основы jQuery

Подключение библиотеки jQuery
Определение готовности документа
Обработка конфликтных ситуаций
Форматы функции $()

Селекторы

Часто используемые селекторы
Группирование селекторов
Привязка к элементам документа

Привязка к параметрам тегов
Псевдоклассы

Перебор элементов

Доступ к элементу по индексу
Метод each()

Изменение коллекции элементов

Добавление и фильтрация элементов
Привязка поиска к другим элементам
Метод map()

Манипуляции с элементами

Изменение содержимого элементов
Добавление содержимого перед элементом или после него
Вложение элементов
Перемещение и клонирование элементов
Очистка содержимого и удаление элемента
Замена элемента
Изменение атрибутов CSS
Управление классами стилей
Доступ к параметрам тегов
Вычисление положения элементов

Обработка событий

События документа
События мыши
События клавиатуры
События формы
Универсальные обработчики событий
Методы live() и die()
Всплывание событий
Действия по умолчанию и их отмена

Эффекты и анимация

Управление отображением элемента
Изменение прозрачности элемента
Создание анимации
Прерывание анимации
Управление очередью анимаций

Обработка данных формы

Текстовое поле и поле ввода пароля
Поле для ввода многострочного текста
Список с возможными значениями
Флажок и переключатели
Обработка щелчка на кнопке
Получение всех значений формы

Вспомогательные функции и свойства

Функция $. each() — перебор элементов
Функция $.grep() — поиск в массиве
Функция $.map() — преобразование массива
Функция $.inArray() — поиск элемента в массиве
Функция $.merge() — объединение массивов
Функция $.makeArray() — создание массива элементов
Функция $.unique() — удаление повторяющих элементов
Функция $.trim() — удаление пробельных символов
Функции $.data() и $.removeData() — работа с данными
Свойство $.browser — определение типа и версии браузера

Свойство $.boxModel — определение блочной модели
Создание собственных модулей

Основы технологии AJAX

Обмен данными с помощью тега <iframe>
Объект XMLHttpRequest
Обмен данными в текстовом формате
Обмен данными в формате XML
Обмен данными в формате JSON

Поддержка AJAX в jQuery

Метод load()
Функция $.getJSON()
Функция $.getScript()
Функция $.get()
Функция $.post()
Функция $.ajax()
Глобальные обработчики событий AJAX

Большой популярности jQuery способствовали также дополнительные модули, реализующие готовые компоненты или добавляющие новую функциональность. Мы рассмотрим библиотеку визуальных компонентов пользовательского интерфейса jQuery UI. Эта библиотека предоставляет готовые решения, которые может использовать практически любой разработчик, даже не владея основами jQuery и JavaScript. Без особого труда можно создать компонент «Аккордеон», панель с вкладками, различные пользовательские диалоговые окна, вставить в веб-страницу календарь. Библиотека

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

Библиотека jQuery UI

Модуль UI Draggable: перемещение элементов
Модуль UI Droppable: «сбрасывание» элементов
Модуль UI Sortable: сортировка элементов
Модуль UI Selectable: выделение элементов
Модуль UI Resizable: изменение размеров
Модуль UI Accordion: компонент «Аккордеон»
Модуль UI Tabs: панель с вкладками
Модуль UI Dialog: диалоговые окна
Модуль UI Datepicker: календарь
Модуль UI Progressbar: индикатор хода процесса
Модуль UI Slider: шкала с бегунком

Модуль UI Effects: визуальные эффекты
Плавное изменение цвета
Управление классами стилей
Методы, позволяющие использовать эффекты
Эффекты

Благодаря своей универсальности библиотека jQuery будет полезна практически любому разработчику. Она подходит новичку, так как позволяет забыть о проблеме с кроссбраузерностью приложения (вышел новый веб-браузер — сменил версию библиотеки и все опять работает). Библиотека идеальна для профессионалов, так как позволяет сократить код минимум в три раза. А это в свою очередь позволит написать очень сложный код с минимальными усилиями и потерей времени.

Желаю приятного изучения и надеюсь, что статьи помогут Вам реализовать как самые простые, так и самые сложные приложения.

Для понимания материала Вам потребуются знания по основам HTML, JavaScript и PHP в объеме книги HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера.

Подробное описание книги «HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. 5-е изд.»

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

Часто основная проблема у начинающих программистов — отстутствие мотивации. Очень сложно собраться с силами, чтобы читать документацию или длинные туториалы на английском. Наверное именно поэтому всё популярнее становятся интерактивные самоучители, обучение в которых происходит в формате, который похож на игру. Выбрали для вас несколько таких самоучителей с просторов интернета.

jQuery

Очень приятный курс, проходить который можно, даже не зная, что такое jQuery вообще. Если что, jQuery — библиотека для JavaScript, с помощью которой можно находить и, например, изменять различные элементы HTML. Впрочем, это пояснение лишнее — курс начинается с весёлой песни, которая рассказывает про то, что такое jQuery.

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

Лекция ведущего сменяется практическими заданиями — с возможностью запросить подсказки. За просмотр подсказок условные баллы не снимаются, зато снимаются за просмотр ответов (такая возможность, естественно, тоже предусмотрена).

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

Github

Этот курс построен несколько иначе, чем предыдущий. Курс построен так, будто вам нужно запушить свой проект на Github — сначала даётся объяснение того, что на данном этапе нужно сделать, а чуть ниже — команда, которая это выполняет. Для перехода к следующему уроку эту команду необходимо перепечатать в терминал и выполнить. Результат работы команды вы можете увидеть в импровизированном диспетчере файлов. В общем-то, чаще всего к подобным самоучителям прибегают, именно когда появляется срочная необходимость выложить свой проект на Github. Лучшего способа, чем проделать все шаги самому под чутким руководством милого Октокота, наверное, нет. Ну, разве что наше руководство по быстрому старту с git.

Оформление заданий

Ruby

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

Переход к следующему уроку осуществляется, когда вы выполните это (или аналогичное действие) в консоли справа. Курс достаточно интересный, к тому же система довольно сносно шутит (например, сначала предлагает вам выполнить 40.reverse(), а потом сообщает, что перевернуть можно только строку, а число нельзя. Если вы, конечно, не поднесёте к монитору зеркало :D)

Первый урок на tryruby

А какие интерактивные самоучители знаете вы? Пишите в комментариях, лучшими из предложенных мы пополним статью.

Реклама на Tproger: найдем для вас разработчиков нужного стека и уровня.

Подробнее

Реклама на tproger.ru

Загрузка

jQuery Введение

❮ Предыдущий Далее ❯

Цель jQuery — упростить использование JavaScript на вашем веб-сайте.

Что вы уже должны знать

Прежде чем приступить к изучению jQuery, вы должны иметь базовые знания:

HTML
УСБ
JavaScript

Если вы хотите сначала изучить эти предметы, найдите учебные пособия на нашей домашней странице.

Что такое jQuery?

jQuery — это легкая JavaScript-библиотека типа «пиши меньше, делай больше».

Цель jQuery — упростить использование JavaScript на вашем веб-сайте.

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

jQuery также упрощает многие сложные вещи из JavaScript, такие как вызовы AJAX и манипулирование DOM.

Библиотека jQuery содержит следующие функции:

Обработка HTML/DOM
CSS манипуляции
Методы событий HTML
Эффекты и анимация
АЯКС
Коммунальные услуги

Совет: Кроме того, у jQuery есть плагины практически для любой задачи.

Почему jQuery?

Существует множество других библиотек JavaScript, но jQuery вероятно, самый популярный, а также самый расширяемый.

Многие крупнейшие компании в Интернете используют jQuery, например:

Google
Майкрософт
IBM
Нетфликс

Будет ли jQuery работать во всех браузерах?

Команда jQuery знает все о кросс-браузерных проблемах, и у них есть записал эти знания в библиотеку jQuery. jQuery будет работать точно так же во всех основных браузерах.

❮ Предыдущий Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебник по JavaScript
How To Tutorial
Учебник по SQL
Учебник по Python

Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Top References

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Об этом сайте | Учебный центр jQuery

Изучение того, как и когда использовать jQuery, — это отдельный процесс для каждого веб-разработчика, в значительной степени зависящий от опыта работы с основными инструментами для разработки интерфейса (HTML, CSS и JavaScript) и знания общих принципов программирования. . За прошедшие годы разработчики всех мастей стали полагаться на нашу документацию по API, чтобы понять, как делать именно то, что им нужно.

Однако документация по API сама по себе не может служить руководством для решения проблем и обеспечения правильного понимания веб-разработки. За прошедшие годы экосистема сообщений в блогах, книг, форумов поддержки и каналов выросла, чтобы помочь охватить как и почему разработки с помощью jQuery, а также объяснить лучшие практики, методы и обходные пути для распространенных проблем. Этот тип документации был бесценным ресурсом для миллионов людей, но опыт навигации по этим водам может разочаровывать так же часто, как и приносить удовлетворение, поскольку разработчики изо всех сил пытаются определить заслуживающие доверия ресурсы, определить, действительно ли то, что они читают, актуально. , и выясните те волшебные поисковые ключевые слова, которые в самый раз !

Этот сайт представляет постоянные усилия jQuery Foundation по консолидации и курированию этой информации, чтобы предоставить эту важную «описательную документацию» нашему сообществу и служить следующим целям:

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

Для достижения этих целей весь контент этого сайта находится в открытом доступе на GitHub и распространяется под лицензией MIT. Чтобы узнать больше о том, как работает сайт, ознакомьтесь с нашим руководством.

Учебный сайт jQuery уходит своими корнями в два основных места.

Первая — это «Основы jQuery» Ребекки Мерфи, бесплатная книга с открытым исходным кодом по основам jQuery, которую она первоначально выпустила в 2010 году. контент в jQuery Foundation, чтобы сформировать основу того, что тогда было абстрактной идеей своего рода «учебного центра».

Второй — docs.jquery.com, этот бывший каштан все еще доживает свои последние дни, прежде чем он будет закрыт в начале 2013 года. Поскольку мы переместили документацию API для jQuery Core из этого домена, нам нужно было место, может удовлетворить аналогичную потребность — документация (которую может внести любой), которая попадает в «как сделать» и часто задаваемые вопросы — без неуклюжих барьеров для входа, таких как поиск подходящего человека, который создаст для вас специальную учетную запись вики и принуждение всех авторов к <текстовое поле> .

Этот проект был бы невозможен без всех наших замечательных участников. Если вы считаете, что что-то на сайте можно улучшить, вы можете внести свой вклад на GitHub. Не стесняйтесь проверить руководство для получения более подробной информации.

О бета-версии

Хотя этот ресурс никогда не будет по-настоящему «завершен», текущая версия этого сайта все же должна рассматриваться как предварительная версия.