Азы jQuery


Содержание

Примеры jQuery для начинающих

Главная → JavaScript → Примеры jQuery для начинающих

jQuery — javascript библиотека, состоящая из кроссбраузерных функций — оплеток для манипулирования элементами DOM (Document Object Model — Объектная модель документа). Главный ее принцип это автоматическое применение нужного механизма, в зависимости от браузера. К примеру, получение элемента html документа по ID, в разных браузерах происходит по разному. До появления jquery, я использовал такую функцию:

Чтобы это же действие совершить в jquery, достаточно сделать так:

Обращение к функции $() равносильно jQuery(), так как первая является алиасом для второй. Если Вы не используете других библиотек, подобных jquery, то можете смело обращаться к пространству имен через $(). В противном случае лучше использовать непосредственное имя объекта — jQuery. Далее, считаем что нет других библиотек.

Начало работы с jQuery

Итак, начинаем работу. Первым делом необходимо получить новейшую версию библиотеки jquery с официального сайта проекта http://jquery.com/ или скачать jquery здесь. В архиве и на официальном сайте лежат две версии: сжатая и девелоперская. На сайте лучше использовать сжатую, а если захочется поэкспериментировать воспользуйтесь второй. Первым делом подключаем библиотеку jquery в тело страницы:

После этого пространство имен javascript, определено таким образом, что обращение к функции $() занято jquery и получить любой элемент документа html в виде объекта, можно выражением $(‘#objID’). Где objID — ID объекта.

jQuery и CSS

В качестве первого примера рассмотрим работу jquery и CSS. Существует два основных способа манипулирования CSS с помощью jquery: изменение одного атрибута или сразу нескольких. Выполняются они через функцию css(). Выглядит в теории это примерно так:

Пример изменения одного атрибута CSS

Пример изменения одного атрибута удался!

Пример изменения нескольких атрибутов CSS

Пример изменения нескольких атрибутов!

Изменение текста и html

Для изменения текста или html кода существуют функции text() и html().

Причем, если попытаетесь с помощью функции text() вставить html код, то получите его в исходном виде. Функция text() все экранирует.

Пример использования text()

Пример использования html()

Управление атрибутами с помощью jQuery

Функция attr() манипулирует любыми атрибутами элемента. С ее помощью можно добавить или изменить title, href, value, src и так далее.

jQuery Tutorial

JQuery является библиотекой JavaScript.

jQuery значительно упрощает программирование на JavaScript.

jQuery легко учиться.

«Попробуйте сами» примеры в каждой главе

С помощью нашего онлайн-редактора вы можете отредактировать код и нажать на кнопку для просмотра результата.

Пример

Нажмите на кнопку «Проверить демо», чтобы увидеть, как она работает.

jQuery Справочник

В html5css вы найдете полную справочник на все объекты и методы jQuery.

Введение в jQuery

Введение

JQuery HTML — это библиотека, предназначенная чтобы « писать меньше, а делать больше «. Это не язык программирования, а инструмент, используемый для того, чтобы упростить реализацию общих задач JavaScript .

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

Сравнив написание простой программы « Hello, World! » с помощью JavaScript и jQuery , можно увидеть разницу между ними.

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

Данное руководство не предполагает наличие базовых познаний в jQuery , оно охватывает следующие темы:

  • Как установить jQuery в веб-проекте;
  • Определение важных концепций веб-разработки, таких как API , DOM и CDN ;
  • Общие селекторы, события и эффекты jQuery ;
  • Примеры для проверки концепций, изученных в рамках этой статьи.

Настройка jQuery

JQuery — это файл JavaScript , на который вы будете ссылаться в документе. Как подключить JQuery в HTML :

  • Скачать локальную копию;
  • Добавить ссылку на файл через сеть доставки контента ( CDN ).

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

В наших примерах мы будем использовать ссылку на jQuery через CDN . Последнюю версию jQuery можно найти в Google . Если вместо этого вы хотите скачать библиотеку, можно получить копию jQuery на официальном сайте .

Создадим небольшой веб-проект. Он будет состоять из файла style.css , scripts.js и основного файла index.html .

Задайте основную HTML-разметку и сохраните ее в index.html .

Ссылка на jQuery в HTML CDN размещается непосредственно перед тегом

Азы jQuery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

Основы jQuery

HTML, CSS и JavaScript – три основных языка в Интернете. Сайты структурируются в HTML, в CSS разрабатываются стили, а JavaScript позволяет добавить интерактивные функции. Большая часть анимации и любые действия, которые происходят в результате кликов или прокрутки, также созданы в JavaScript.

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

Сравните код простого приложения «Hello, World» в JavaScript и jQuery:

#JavaScript
document.getElementBy ;
#jQuery
$(«#demo»).html(«Hello, World!»);

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

Данное руководство охватывает основы работы с jQuery, а именно такие темы:

  • Установка jQuery в веб-проект;
  • Определения важных понятий веб-разработки (API, DOM и CDN).
  • Общие селекторы, события и эффекты jQuery.
  • Примеры использования jQuery.

Требования

  • Базовые навыки работы с HTML и CSS. Вы должны уметь настроить простой веб-сайт и понимать работу базовых селекторов CSS.
  • Базовые навыки программирования. В целом вы можете работать с jQuery, не зная основ JavaScript, но понимание переменных и типов данных, навыки в математике и логике очень облегчат вам жизнь.
Илон Маск рекомендует:  Теги для таблиц

Установка и настройка jQuery

jQuery – это файл JavaScript, на который можно сослаться в HTML-файле. Добавить jQuery в проект можно двумя способами:

  • загрузить локальную копию;
  • сослаться на файл через сеть доставки контента.

Примечание: Сеть доставки контента (Content Delivery Network, CDN) – это система серверов, которая обслуживает веб-контент на основе географического положения пользователя. Файл jQuery по CDN будет обслуживаться быстрее и эффективнее, чем файл, размещённый на сервере вместе с остальными компонентами приложения.

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

Введение в jQuery

Материал из JQuery

jQuery — javascript библиотека, использование которой делает разработку javascript кода намного быстрее, проще и приятнее.

Содержание

Небольшая подсказка

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

Начнем

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

Используя обычный javascript для решения каждой из этих задач потребуется десятки строк программного кода (и много головной боли по поводу его правильной работы в разных браузерах). Автор jQuery разработал свою библиотеку таким образом, что наиболее общие задачи становятся тривиальными. Например, вот так, с помощью функции $() из библиотеки, можно находить элементы на странице по различным параметрам:

$(«div») вернет все div-элементы на странице.
$(«.someBlock») вернет все элементы с классом someBlock.
$(«#content») вернет элемент с идентификатором content.
$(«#content2 div.someBlock») вернет div-элементы с классом someBlock, которые находятся внутри элемента с идентификатором content2.
$(«div:odd») вернет div-элементы, находящиеся на странице под нечетными номерами.
$(«[value = 5]») вернет все элементы с атрибутом value, равным 5.

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

$(«#bigIt»).css(«height») возвратит значение высоты у элемента с идентификатором bigIt.
$(«div»).css(«width», «20px») установит новое значение ширины всем div-элемента на странице.
$(«#bigIt»).attr(«class») возвратит значение класса элемента с >
$(«#bigIt»).attr(«class», «box») установит новое значение атрибута >
$(«#bigIt»).html(

)

изменит все html-содержимое элемента с >
$(«#bigIt»).text() возвратит текст, находящийся внутри элемента с >
$(«.someBox»).empty() очистить от содержимого элементы с классом someBox.

Таким образом, всего одной строкой кода, мы можем узнать или изменить css-значения, атрибуты, html и текстовое содержимое любых элементов на странице. Наличие только этих возможностей уже сделало бы jQuery незаменимой вещью. Однако эта библиотека позволяет делать гораздо больше, гораздо.

Функция $()

Функция с лаконичным именем $() является, пожалуй самой главной во всей библиотеке. С ее помощью можно находить элементы на странице (в чем вы уже убедились), добавлять «на лету» новый html:

Кроме этого, $() позволяет привязать всю функциональность jQuery к уже существующим объектам DOM-элементов:

Более подробно о функции можно посмотреть в специальной статье.

Начало работы скрипта

Прежде чем запускать js-скрипт, необходимо быть уверенным, что часть страницы, с которой этот скрипт будет работать уже загружена. Большинство программистов используют для этого событие onload, которое происходит по окончанию загрузки всей страницы:

Однако onload происходит после того, как страница сформирована полностью, включая загрузку всех изображений, флеш-баннеров и видеороликов. В то время как структура дерева DOM (элементов страницы), с которой обычно и работает скрипт, оказывается готова гораздо раньше. В результате скрипт запускается значительно позднее чем мог бы. На этот случай в jQuery есть метод ready, вызов которого осуществляется в момент готовности дерева DOM:

Цепочки методов

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

эти цепочки могут состоять из гораздо большего числа методов. Для удобочитаемости, цепочки часто пишут «в столбик»:

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

Работа с набором элементов

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

$(«div»).parent() вернет родительские элементы всех div-ов.
$(«div»).children() вернет дочерние элементы всех div-ов.
$(«#someId»).next() вернет элемент, лежащий сразу после someId.
$(«div»).prev() вернет элементы, лежащие перед div’ами.
$(«div»).eq(i) вернет div-элемент, с индексом i в наборе.
$(«div»).get(i) вернет DOM-объект div’а, с индексом i.
$(«div»).get() вернет массив DOM-объеков всех div-ов.
$(«div»).size() вернет размер набора (количествово div-ов).

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

Отметим различия методов get(i) и eq(i). Первый возвращает непосредственно DOM-объект элемента, идущего под номером i в наборе (кстати, нумерация начинается с 0). К такому элементу вы не сможете применить методы jQuery, зато сможете применить стандартные javascript методы. Метод eq(i) наоборот, возвращает i-й элемент в таком виде, что к нему можно применять методы jQuery. Вообще, для того, чтобы к элементам можно было применять методы библиотеки jQuery, они должны находиться в так называемом объекте jQuery, именно его возвращает функция $().

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

Анимационные эффекты

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

Ключевым методом, на которой базируются все остальные, является метод animate(), с помощью которого можно задавать плавное изменение различных CSS-свойств:

properties — список CSS-свойств, участвующих в анимации и их конечных значений. Задаются объектом, в формате , например:.
duration — продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд). easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). Задается строковым значением: "linear" и "swing" (для равномерной анимации и анимации с ускорением). Другие варианты можно найти в плагинах. callback — функция, которая будет вызвана после завершения анимации.

Пример. Пусть у нас есть элемент div с каким-нибудь текстом. Мы хотим плавно скрыть этот элемент, заменить текст, и плавно сделать элемент видимым:

значения "hide", "show" означают исчезновение и появление элемента, за счет параметра, к которому они применены.

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

элемент с идентификатором my-div, в начале будет плавно исчезать с экрана, а затем начнет плавно появляться вновь. Однако, анимации, заданные на разных элементах, будут выполняться одновременно:

В jQuery реализована возможность выполнения запросов к серверу без перезагрузки страницы, так называемая технология ajax. Базовыми функциями для ее работы являются post() и get() (есть еще более низкоуровневая, ajax(), но мы ее не будем рассматривать):

url — url-адрес, по которому будет отправлен запрос. data — данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: . callback() — пользовательская функция, которая будет вызвана после ответа сервера. dataType — ожидаемый тип данных, которые пришлет сервер в ответ на запрос (подробности тут).

Рассмотрим примеры с методом get, использование второго метода аналогично. Сделаем простейший ajax-запрос: отправим пустой запрос к серверу и не будем обрабатывать ответ. Это может быть использовано, например для подсчета количества наведений курсора на баннер (при каждом наведении серверу будет отправляться сигнал).

Теперь, отправим данные на сервер и обработаем их. Javascript будет выглядеть следующим образом:

На сервере, обработка Ajax запроса ничем не отличается от обработки обычного запроса (как когда вызывается главная страница сайта):

В результате этого запроса, на странице появится табличка с текстом "I get param1 = param1 and param2 = 2"

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

Запросив эту страницу методом get или post, полученные данные можно будет легко обработать:

Помимо рассмотренных методов, существует и методы с более узкой направленностью: load() запрашивает html-текст и автоматически вставляет его в выбранные элементы, $.getScript() делает запрос javascript-файла и автоматически его выполняет. Эти и другие функции можно найти в разде Ajax.

Разные плюшки

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

$.browser поможет узнать тип браузера. $.support поможет узнать конкретные особенности браузера. .offset() и .position() позволят узнать или изменить позицию выбранного элемента. .width() и .height() позволят узнать или изменить размеры выбранного элемента. .scrollTop() и .scrollLeft() позволят работать с прокруткой. Функции из раздела события позволят обрабатывать различные события, происходящие на странице.

В разделе «Рецепты» вы сможете найти удачные решения многих задач средствами jQuery.

Подключение jQuery к вашему сайту


Для того, чтобы функциональность библиотеки jQuery стала доступной на страницах вашего сайта, необходимо скачать файл с библиотекой на официальном сайте jquery (ссылка с текстом "Download the compressed, production jQuery", чтобы скачать библиотеку, необходимо кликнуть по ссылке правой клавишей мыши и выбрать "Сохранить ссылку как.."). Полученный файл нужно будет загрузить на сервер, где лежит ваш сайт, и подключить этот js-файл на страницы сайта:

Тонкости подключения jQuery к сайту можно почерпнуть здесь.

Титры

Часть текста в данной статье позаимствована из статьи "Query – Javascript нового поколения" журнала RSDN. Это одна из первых статей по jQuery, благодаря которой о библиотеке узнало, наверное, наибольшее число русскоязычных программистов. Однако, на данный момент, часть информации в ней уже не актуальна.

Основы jquery

В этой статье я постараюсь привести основы jQuery. Статья, надеюсь, будет расширяться

Значения функции $()

1. $() данная функция вернет специальный объект Javascript, содержащий массив элементов, отобранных по переданному селектору. Иначе говоря, вернет "обертку".

1.1 Ограничиваем отбор элементов (например, p ) одним блоком (например, с id kukaracha ).

Не путать с конструкцией $('span,h1') отберет и span и заголовок.

2 Этим мы создали элемент.

3 $ (псевдоним jQuery) может выступать префиксом для ВСПОМОГАТЕЛЬНЫХ функций. Данныя функции не работают с элементами объектной модели документа (DOM) - этим занимаются методы.
Чтобы исключить появление ошибок при взаимодействии с другими библиотеками (например, если $ уже занят другой библиотекой) необходимо заключить вспомогательную функцию в следующую конструкцию:

Готовность дерева DOM

Создаем плагин

расширяем обертку $ методом doit . Или, иначе говоря, расширяем объект $.fn . В плагине ключевой слово this - это тот самый jQuery объект, из которого был вызван плагин. Другими словами, контекст ( this ) ссылается на обернутый набор, то есть this уже идентичен $(this) .

Подключили внешнюю библиотеку jQuery

Селектор выбора прямого потомка

отберет только прямых потомков (потомков вложенных куда-то еще не отберет)

Контест в jQuery

В javascript this (контекст функции) - это объект, свойства которого содержат ссылку для вызова функции. ( this это ссылка на текущий экземпляр объекта).Например:

В качестве контекста (в конструкторе) будет выступать экземпляр объекта tuk . Или: вместо this подставляется название той сущности, которая вызвала данную функцию. В атрибуте (например, onclick ) this - это ссылка на тот HTML-элемент, который запустил событие onclick .

Основные фильтры jQuery

4.1 Например, необходимо отыскать 7-ю по счету ячеку таблицы.

4.2 Например, необходимо отыскать все абзацы, которые следуют после 7-го по счету абзаца.

4.3 Например, отбираем все абзацы перед 7-м абзацем.

4.4 Например, отбираем все абзацы кроме 7-го.

4.5 Например, отбираем абзацы, который в данный момент анимируется .

Внешняя таблица стилей и код jquery

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

Простые примеры jQuery

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

Для каждого примера я привожу его исходный код и демо для просмотра в действии. Итак, начнём по-порядку с самого простого.

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

Саму библиотеку можно скачать на официальном сайте jQuery.com

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

Открывающийся блок

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

Содержимое блока, который
открывается после клика.

Содержимое блока, который
открывается после клика.

Содержимое блока, который
открывается после клика.

Открывающийся блок (вариант 1)

Рядом со ссылкой, после клика по которой открывается блок информации, можно вставить изображения "плюс" и "минус". Я не стал вставлять картинки, вы сможете сделать это самостоятельно, я лишь покажу вам пример реализации.

Содержимое блока, который
открывается после клика.

Содержимое блока, который
открывается после клика.

Содержимое блока, который
открывается после клика.

Открывающийся блок (вариант 2)

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

Содержимое блока, который
открывается при отмеченном чебоксе.

Содержимое блока, который
открывается при отмеченном чебоксе.

Открывающийся блок (вариант 3)

Эти примеры вы можете применить на своём сайте, это немного оживит его. Что ж, смотрим следующие примеры.

Отмечаем все chekbox одним кликом

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

Отмечаем все chekbox одним кликом (вариант 1)

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

Отмечаем все chekbox одним кликом (вариант 2)

С помощью таких нехитрых скриптов можно значительно усовершенствовать свой сайт.

Заполни поле

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

Заполни поле

Счётчик символов

С помощью jQuery мы можем подсчитывать сколько символов пользователь ввёл в текстовое поле.

Счётчик символов

Проверка полей с помощью jQuery

Обычно проверка введённых данных начинается в момент нажатия на кнопку "Отправить", "Зарегистрироваться" и т.п. Проверка производится средствами php и в принципе это наиболее правильный вариант, но, в случае возникновения ошибок пользователю придётся повторять нажатие на кнопку, поэтому в целях экономии времени и ресурсов можно производить дополнительную проверку с помощью jQuery, естественно, без перезагрузки страницы.

Проверка полей с помощью jQuery (проверка имени)

Чтобы проверить введённый емаил требуется немного иной подход.

Проверка полей с помощью jQuery (проверка емаил)

Выпадающее меню

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

Выпадающее меню (вариант 1)

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

Выпадающее меню (вариант 2)

Выпадающее меню (вариант 3)


Пункты в этом меню раскрываются по клику

Выпадающее меню (вариант 4)

Выпадающее меню (вариант 5)

Таймер на jQuery

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

Ссылка для скачивания файла появится через сек.

В исходном коде приведен вариант без кнопки запуска таймера, т.е. он начнёт отсчёт после загрузки страницы. HTML + CSS + JQUERY

Таймер на jQuery

Плавающий или фиксированный блок на jQuery

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

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

Контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент

Плавающий блок DIV (вариант 1)

Во втором случае блок плавает в пределах блока с чёрной рамкой.

Контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент

Плавающий блок DIV (вариант 2)

Выезжающее меню на jQuery

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

Азы jQuery

Чем может быть полезна библиотека?

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

Что же такое Jquery? Это сторонняя библиотека для JS, помогающая уменьшить количество необходимого кода, параллельно увеличив функционал языка. Библиотека кроссбраузерная, поэтому код будет корректно отображаться в любом современном браузере.

Чтобы увидеть, насколько Jquery сокращает количество необходимого кода, посмотрите на такой простой пример:

Разница получается существенная. В этой статье мы расскажем вам, как поставить Jquery в проект, а также покажем примеры использования библиотеки. Кроме того, вы узнаете о селекторах, событиях, эффектах. Мы научим вас работать с API, DOM, CDN.

Что вам потребуется для воплощения наших советов в жизнь? Во-первых, нужно иметь базовые знания HTML, CSS, понимать принцип работы селекторов. Во-вторых, пригодятся базовые навыки программирования. С Jquery можно работать, даже не зная хорошо Javascript. Однако, нужно понимать, что такое переменные, типы данных. Да и логическое мышление будет не лишним вместе со знаниями основ математики.

Как установить и настроить JQuery?

По своему принципу библиотека является JS файлом. Его нужно подключить с помощью тега
ввашей HTML-странички. Это можно сделать двумя способами:

  • Скачать скрипт с официального сайта и добавить в папку проекта;
  • Использовать ссылку на файл из CDN. Такое подключение скрипта будет работать быстрее локального.

Для начала нам нужно создать папку для проекта. Внутри мы размещаем файл HTML-разметки index.html. Также нам понадобится каталог css для стилевого файла style.css, а также js – для script.js. Структура папки проекта будет такой:

HTML-страничку нужно разметить. Самый простой каркас для сайта выглядит вот так:

jQuery - Функция jQuery() или $()

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

Функция jQuery() или $()

Функция jQuery() в зависимости от значения аргумента(ов) может выполнять различные действия:

ищет на основе селектора (строки, не начинающейся с ) элементы в DOM-дереве, а затем возвращает их в виде объекта jQuery.

оборачивает DOM-элементы, указанные в качестве аргумента, в объект jQuery.

создаёт DOM-элементы в памяти (на "лету") посредством HTML-строки, переданной в качестве аргумента данной функции.

выполняет указанную функцию, после того как DOM-дерево будет окончательно загружено браузером.

оборачивает простой JavaScript объект, содержащий ноль или более пар "ключ-значение", в объект jQuery.

клонирует объект jQuery (создаёт копию), если его передать в качестве аргумента данной функции.

если аргументы не указывать, то функция jQuery() возвращает пустой jQuery объект.

jQuery(селектор[,контекст])

Функция jQuery(селектор[,контекст]) предназначена для выполнения поиска элементов в DOM-дереве на основании селектора, указанного в качестве 1 аргумента. По умолчанию поиск элементов функция jQuery начинает с корня DOM-дерева (если 2 аргумент не указан). Если же Вам необходимо выполнить поиск элементов внутри определённого контекста, то его необходимо указать во 2 аргументе. В качестве результата данная функция возвращает объект jQuery, содержащий найденные DOM-элементы.

Этот вариант функции jQuery() имеет 2 аргумента:

  • селектор (обязательный, тип: Selector) - строка содержащая выражение для выбора элементов из DOM-дерева;
  • контекст (необязательный, тип: Element или jQuery) - DOM-элемент, документ или объект jQuery, который выступает в качестве контекста.

Например, выберем элементы div с в документе:

Найти все элементы input с type="radio" , расположенные внутри первой формы документа:

jQuery(элемент)

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

Этот вариант функции jQuery() имеет 1 аргумент:

  • элемент (обязательный, тип: Element) - DOM-элемент, который необходимо обернуть в объект jQuery.

jQuery(массив_элементов)

Функция jQuery(мaccив_элементов) предназначена для того, чтобы обернуть массив, содержащий набор DOM-элементов, в объект jQuery. Это используют для того, чтобы к набору DOM-элементов можно было применять различные методы jQuery.

Этот вариант функции jQuery() имеет 1 аргумент:

  • массив_элементов (обязательный, тип: Array) - массив, содержащий набор DOM-элементов, которые необходимо обернуть в объект jQuery.

Например, изменить цвет текста у всех элементов p в документе на красный:

jQuery(объект)

Функция jQuery(oбъeкт) предназначена для того, чтобы обернуть простой объект JavaScript (PlainObject), содержащий ноль или более пар "ключ-значение", в объект jQuery.

Этот вариант функции jQuery() имеет 1 аргумент:

  • объект (обязательный, тип: PlainObject) - простой объект JavaScript, содержащий ноль или более пар "ключ-значение" .

В jQuery для простых объектов JavaScript (PlainObject) можно использовать следующие операции: .data() , .prop() , .on() , .off() , .trigger() и .triggerHandler() . При использовании метода jQuery .data() (или любого другого метода, использующего .data() ) на простой объект (PlainObject) Вы получите результат в виде нового свойства объекта, которое будет иметь вид jQuery

jQuery(html[,ownerDocument])

Функция jQuery(html[,ownerDocument]) создаёт DOM-узлы в памяти (на "лету") на основе HTML-строки, переданной ей в качестве аргумента. В качестве результата функция jQuery() или её псевдоним $() возвращает объект jQuery, содержащий эти созданные DOM-узлы.

Этот вариант функции jQuery() имеет 2 аргумента:

  • html (обязательный, тип: htmlString) - строка, содержащая HTML-код.
  • ownerDocument (необязательный, тип: document) - документ, в котором новые элементы должны быть созданы.

Работа функции jQuery всегда начинается с анализа значения аргумента. Если он выглядит как код HTML (т.е. она начинается с " "), то функция jQuery попытается его разобрать с помощью метода $.parseHTML() . После разбора HTML строки начинается процесс создания DOM-узлов. В большинстве случаев для этого используется браузерный механизм .innerHTML . В конечном итоге функция jQuery(html[,ownerDocument]) вернёт объект jQuery, который будет содержать созданные DOM-узлы.

jQuery(html,attributes)

Функция jQuery(html,attributes) предназначена для создания DOM-элемента с атрибутами. Элемент, который необходимо создать, указывается в первом аргументе посредством HTML-строки (например: "

Этот вариант функции jQuery() имеет 2 аргумента:

  • html (обязательный, тип: htmlString) - строка, содержащая DOM-элемент.
  • attributes (необязательный, тип: PlainObject) - объект, содержащий атрибуты, события и методы, которые необходимо добавить к создаваемому элементу.

Например, создадим элемент

jQuery(callback)

Функция jQuery(callback) выполняет функцию (анонимную или именованную), указанную в качестве аргумента после того, как загрузка DOM-дерева будет завершена браузером.

Этот вариант функции jQuery() имеет 1 аргумент:

  • callback (тип: Function()) - функция, которая выполнится, когда загрузка DOM-дерева будет завершена браузером.

Например, выполнить функцию после того, как DOM-дерево станет доступно для использования:

Например, для безопасного выполнения jQuery кода Вы можете использовать следующую конструкцию:

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

Илон Маск рекомендует:  Матрица преобразований
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL