Эффектные примеры на jquery. Впечатляющие анимационные эффекты

09.08.2024

jQuery — это библиотека JavaScript, которая позволяет веб-разработчикам добавлять дополнительные функции на свои веб-сайты. Она доступна с и предоставляется бесплатно по лицензии MIT. В последние годы jQuery стала самой востребованной библиотекой JavaScript, используемой в веб-разработке.

Пример jQuery

Чтобы реализовать jQuery, веб-разработчику нужно сослаться на JavaScript-файл в HTML-коде веб-страницы. На некоторых веб-сайтах размещается собственная локальная копия, в то время как другие просто ссылаются на библиотеку, размещенную Google или сервером. Например, веб-страница может загружать библиотеку jQuery, используя следующую строку в разделе HTML (пример jQuery и cookie):

Примеры jQuery и Ajax

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

Преимущества библиотеки

Помимо бесплатной лицензии, другой основной причиной, по которой jQuery завоевала такую популярность, является ее кросс-браузерная совместимость. Поскольку каждый браузер отображает и JavaScript по-разному, веб-разработчику может быть сложно сделать веб-сайт одинаковым во всех браузерах. Вместо того, чтобы писать пользовательские функции для каждого браузера, веб-разработчик может использовать одну функцию jQuery, которая будет работать в Chrome, Safari, Firefox и Internet Explorer. Поддержка нескольких браузеров заставила многих разработчиков перейти от стандартного JavaScript к jQuery, поскольку это значительно упрощает процесс кодирования.

Описание

Синтаксис jQuery используется для упрощения навигации по документу, выбора элементов DOM, создания анимаций, обработки событий и разработки приложений Ajax. jQuery также предоставляет разработчикам возможность создавать плагины поверх библиотеки JavaScript. Это позволяет программистам создавать абстрактные конструкции для взаимодействия и анимации на низком уровне, расширенные эффекты и высокоуровневые, тематические виджеты. Модульный подход к библиотеке jQuery позволяет создавать мощные динамические веб-страницы и веб-приложения.

Набор основных функций:

выбор элементов DOM;
обход и манипуляция с помощью механизма выбора;
новый стиль программирования;
алгоритмы слияния и структуры данных DOM.

Стиль повлиял на архитектуру других фреймворков JavaScript, таких как YUI v3 и Dojo, а также стимулировал создание стандартного API Selectors.

Microsoft и Nokia поставляют jQuery на своих платформах. Microsoft включает его с Visual Studio для использования в рамках ASP.NET AJAX и ASP.NET MVC, а Nokia интегрировала его в платформу разработки виджета веб-времени.

Обзор

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

Разработка

Библиотека использует такие востребованные функции JavaScript, как fade ins и fade outs при скрытии элементов, анимации и работе с элементами jQuery CSS. jQuery также предоставляет парадигму для обработки событий, которая выходит за рамки выбора и манипуляции элементами DOM. Назначение события и определение функции обратного вызова выполняются одним шагом в одном месте в коде.

Принципы разработки с помощью jQuery (примеры):

Разделение JavaScript и HTML — библиотека предоставляет простой синтаксис для добавления обработчиков событий в DOM с использованием JavaScript, вместо добавления атрибутов событий HTML для вызова функций JS. Таким образом, он поощряет разработчиков полностью отделять код JavaScript от разметки HTML.
Краткость и ясность — способствует краткости и ясности с такими инструментами, как цепочки и сокращенные имена функций.
Устранение кросс-браузерных несовместимостей — JavaScript-движки разных браузеров немного отличаются, поэтому код JS, который работает для одного браузера, может не работать для другого. Подобно другим инструментариям JavaScript, jQuery обрабатывает все эти кросс-браузерные несоответствия и обеспечивает согласованный интерфейс, который работает в разных браузерах.
Расширяемость — новые события, элементы и методы могут быть легко добавлены, а затем повторно использованы как плагин.

История

jQuery был первоначально выпущен в январе 2006 года в BarCamp NYC Джоном Ресигом и находился под влиянием ранней библиотеки cssQuery Дина Эдвардса. В настоящее время он поддерживается командой разработчиков под руководством Тимми Уиллисона (с движком селектора jQuery — Sizzle, которым руководит Ричард Гибсон).

Особенности

Библиотека включает в себя следующие функции:

выбор элементов DOM с использованием многосерверного механизма селектора с открытым исходным кодом Sizzle;
выделение проекта DOM-манипуляции на основе селекторов CSS, которая использует имена и атрибуты элементов, такие как id и class, как критерии для выбора узлов в DOM;
мероприятия;
эффекты и анимации;
ajax;
объекты отложенных и обещающих для контроля асинхронной обработки;
разбор JSON;
расширяемость через плагины;
утилиты, такие как обнаружение функций;
способы совместимости, которые изначально доступны в современных браузерах, но нуждаются в более ранних версиях, таких как inArray () и each (), мульти-браузер (не путать с кросс-браузером).

Использование

Библиотека jQuery представляет собой один файл JavaScript, содержащий все его общие функции DOM, события, эффекты и Ajax. Он может быть включен в веб-страницу путем ссылки на локальную копию или на одну из многочисленных копий, доступных на общедоступных серверах. Библиотека имеет сеть доставки контента (CDN), размещенную MaxCDN.

Пример jQuery в PHP:

Стили

jQuery имеет два стиля использования:

Через функцию $, которая является фабричным методом для объекта jQuery. Эти функции, часто называемые командами, являются целыми, поскольку все они возвращают объекты jQuery.

Через $ — префиксные функции. Это служебные функции, которые напрямую не действуют на объект.

Доступ к JQuery и управлеие несколькими узлами DOM обычно начинается с вызова функции $ с помощью строки Это возвращает объект jQuery, ссылающийся на все соответствующие элементы на странице HTML.

Бесконфликтный режим

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

Расширенный функционал

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

$("img").on("click",function(){

//обрабатываем событие click на любом элементе img на странице

Некоторые функции возвращают определенные значения (например, $("#input-user-email").Val()). В этих случаях цепочка не работает, поскольку значение не ссылается на объект jQuery.

Создание новых элементов

Помимо доступа к узлам DOM через иерархию объектов, также возможно создавать новые элементы, если строка, переданная как аргумент в $ (), выглядит как HTML. Например, строка находит элемент выбора HTML с идентификационными картами и добавляет элемент опции со значением VAG и текст Volkswagen:

$("# выберите carmakes")

Append($("")

Attr({значение:VAG})

Append (Volkswagen)).

Утилиты

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

$.each(,function(){

console.log(это+1);

Данный пример post jQuery записывает 2, 3, 4 на консоль.

Ajax

Можно выполнять Ajax с использованием $ .ajax () jQuery, примером которого могут служить связанные методы для загрузки и обработки удаленных данных:

url: "/process/submit.php",

имя: Джон,

местоположение: "Бостон",

}).done(function(msg){

alert("Data Saved:"+msg);

}).fail(function(xmlHttpRequest, statusText, errorThrown){

оповещение(

"Не удалось отправить ваше сообщение.\N\n"

+"XML Http Request:"+JSON.stringify(xmlHttpRequest)

+ ",\nStatus Текст:"+statusText

+ ",\nError Thrown:"+errorThrown);

В этом примере на сервере указано имя данных=John и location=Boston для /process/submit.php. Когда этот запрос завершается, функция вызывается, чтобы предупредить пользователя. Если запрос не удался, он предупредит пользователя об ошибке, состоянии запроса и конкретной ошибке.

Плагины

Архитектура jQuery позволяет разработчикам создавать подключаемый код для расширения различных функций. В интернете доступны тысячи подключаемых модулей, которые охватывают целый ряд функций, таких как помощники Ajax, веб-службы, динамические списки, инструменты XML и XSLT, перетаскивание, события, обработка файлов cookie и модальные окна.

Существуют альтернативные плагины для поисковых систем, такие как jquer.in, которые используют более специализированные подходы, такие как перечисление только плагинов, соответствующих определенным критериям (например, те, у которых есть общедоступный репозиторий кода). Разработчик предоставляет «Центр обучения» — ресурс jQuery для начинающих, который может помочь пользователям понять JavaScript и приступить к разработке плагинов.

jQuery UI

jQuery UI представляет собой набор виджетов GUI, анимированных визуальных эффектов и тем, реализованных с помощью jQuery CSS (библиотеки JavaScript), каскадных таблиц стилей и HTML. Согласно службе аналитики JavaScript, Libscore, пользовательский интерфейс jQuery используется на более чем 197000 лучших веб-сайтах, что делает его второй по популярности библиотекой JS. Самые известные из них: Pinterest, PayPal, IMDb, The Huffington Post и Netflix.

jQuery UI являются бесплатным и открытым исходным кодом, распространяемым Foundation под лицензией MIT. Был впервые опубликован в сентябре 2007 года.

jQuery Mobile

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

JQuery это великолепная библиотека. Она помогала отлично обойти все подводные камни IE6. В прошлые времена кроссбраузерность была большим вопросом, который стоял перед разработчиками. Jquery отлично справлялся со всеми расхождениями отображения верстки в различных браузерах.

На сегодня, браузеры имеют отличные унифицированные решения. Мы можем комфортно использовать все привилегии ES5, также в нашем распоряжении HTML5 API с которым гораздо легче обрабатывать DOM элементы. Разработчики стоят на грани забвения и ухода в сторону от jQuery для некоторых проектов. Особенно, в случае с микросервисами и не сложными программами.

Не поймите не правильно — Jquery все еще остается чудесной библиотекой, и конечно же, в 70% случаев вам придется использовать ее. Хотя для маленьких страничек с ограниченным JS, вы можете использовать VanillaJS или другой фреймворк. Таковы подойдут для мобильных приложений.

Что же, вот вам 10 примеров рабочего кода, с которым можно обойтись без jquery.

Отслеживание события завершения загрузки страницы

Первая вещь, которой пользуются используя jQuery - это обвертка кода в $(document).ready() метод, чтобы знать когда DOM готов для манипуляций. Без Jquery, мы можем использовать DOMContentLoaded событие. Вот пример кода:

// Слушаем событие DOMContentLoaded для всего документа, анонимной функцией // Вы можете обвернуть свой код, в дужки этой функции // и она выполнится, когда страница будет загруженной. document.addEventListener("DOMContentLoaded", function () { // наш гавайский привет, будет показан в консоле console.log("Aloha"); });

Селекторы элементов без Jquery

Однажды, нам придется выбирать элементы с помощью id, class или тэгов, и jQuery один из лучших. Селекторы которого полностью идентичны синтаксису CSS. На сегодня, браузеры презентовали два важнейших API - querySelector и querySelectorAll.

// Можно использовать document.querySelector чтобы получить первый элемент соответствующий критерию // принимает всего один аргумент - CSS селекторы. var lochNess = document.querySelector(".monsters"); console.log("It"s from Scotland - " + lochNess.textContent); // также можем получить коллекцию используя document.querySelectorAll. // возвращает список dom элементов, соответствующий критерию var scary = document.querySelectorAll(".monsters"); console.log("Hide and seek champions: "); for (var i = 0; i < scary.length; i++) { console.log(scary[i].innerHTML); }

Nessy
Big foot
La chupacabra

Создание и удаление обработчиков (методов) событий

Слушание событий, это фундаментальная часть построения веб приложений. Исторически произошло два больших лагеря — IE и остальные. Но сегодня, мы просто используем addEventListener

Var btn = document.querySelectorAll("button"), list = document.querySelector("ul"); // Вызываем addEventListener на желаемое событие. // запускает слежение за событием клика по элементу. btn.addEventListener("click", function () { // При нажатии кнопки, мы хотим инициировать событие масштаба нашего списка. // Для этого нам необходимо добавить событие в наш список, // чтобы при наведении мыши на элемент функция сработала. list.addEventListener("mouseover", enlarge); }); // Для отмены события масштабирования используем removeEventListener. btn.addEventListener("click", function () { // Удаление событий не будет работать с безымянными функциями, используйте только именованные list.removeEventListener("mouseover", enlarge); }); // Давайте создадим функцию, которая будет масштабировать. var enlarge = function () { // Добавляем класс для элементов list.classList.add("zoomed"); // когда курсор уйдет из списка, уберем класс, чтобы вернуться к обычному масштабу list.addEventListener("mouseout", function () { list.classList.remove("zoomed") }); }; // Теперь мы хотим подсветить имена при нажатии на них. // Когда клик сработает на элементе, он должен стать зеленым // Благодаря делегированию событий, мы можем просто добавить обработчик на родительский элемент // В этом способе, мы не будем создавать слушатели событий для каждого

. list.addEventListener("click", function (e) { // подсвечиваем целевой элемент зеленым e.target.classList.add("green"); });

Enable zoom Disable zoom

Нажмите на имя, чтобы выделить его

Chewbacca
Han Solo
Luke
Boba fett

Green { color: green; } .zoomed { cursor: pointer; font-size: 23px; }

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

Добавление, удаление классов без jQuery на чистом JS

Управление классами элементов без jQuery было огромной проблемой в былые времена. Но больше нет. Благодаря свойству classList. А если необходимо изменять аттрибуты, можно использовать setAttribute.

Var btn = document.querySelectorAll("button"), div = document.querySelector("#myDiv"); btn.addEventListener("click", function () { // легкий способ получать аттрибуты элемента console.log(div.id); }); // Element.classList хранит все классы элемента из DOMTokenList. var classes = div.classList; btn.addEventListener("click", function () { console.log(classes); }); btn.addEventListener("click", function () { // Добавление и удаление классов classes.add("red"); }); btn.addEventListener("click", function () { // Переключение класса classes.toggle("hidden"); });

Display id Display classes Color red Toggle visibility

Square { width: 100px; height: 100px; margin-bottom: 20px; border: 1px solid grey; border-radius: 5px; } .hidden { visibility: hidden; } .red { background-color: red; }

Получение и изменение HTML контента элемента

jQuery имеет удобные методы text() и html(). Вместо них, вы можете использовать textContent и innerHTML свойства, которые существовали еще задолго до появления jQuery.

Var myText = document.querySelector("#myParagraph"), btn = document.querySelectorAll("button"); // Так с легкостью можно узнать весь текст древа элементов var myContent = myText.textContent; console.log("textContent: " + myContent); // Используйте textContent для замены текста элемента // удаляет старый, замещая новым текстом btn.addEventListener("click", function () { myText.textContent = " Koalas are the best animals "; }); // Если нам нужен HTML элемента, используем innerHTML. var myHtml = myText.innerHTML; console.log("innerHTML: " + myHtml); // Для замены html, просто предоставьте новый btn.addEventListener("click", function () { myText.innerHTML = " Penguins are the best animals "; });

Which are the best animals?

Koalas
Penguins

Вставка новых и удаление существующих элементов

Не смотря на то, что Jquery значительно упрощает работу с добавлением и удалением элементов, никто не говорил, что этого не реально сделать на чистом JavaScript коде. Вот пример, как добавить, удалить или заменить элемент на странице.

Var lunch = document.querySelector("#lunch"); // Допустим у нас есть меню, нашего ланча // Давайте добавим в него что нибудь var addFries = function () { // Прежде создаем элемента, и наполняем контентом var fries = document.createElement("div"); fries.innerHTML = "

Fries

"; // Когда это сделано, далее используем appendChild для вставки в страницу. // Наш элемент появится на странице в меню lunch.appendChild(fries); }; // Добавим сыр в наш бургер). var addCheese = function () { var beef = document.querySelector("#Beef"), topSlice = document.createElement("li"), bottomSlice = document.createElement("li"); bottomSlice.innerHTML = topSlice.innerHTML = "Cheese"; // Вставляем верхний срез: // Берем родительский элемент beef и используем insertBefore. // Первый аргумент в методе insertBefore это наш добавляемый элемент // Второй аргумент - элемент перед которым мы добавим создаваемый beef.parentNode.insertBefore(topSlice, beef); //Нижний срез: // Надо будет сделать маленький фокус! // Предоставьте следующий ближащий элемент как второй параметр в insertBefore, // таким способом мы вставляем содержимое "после" желаемого элемента. beef.parentNode.insertBefore(bottomSlice, beef.nextSibling); }; var removePickles = function () { // убираем элемент var pickles = document.querySelector("#pickles"); if (pickles) { pickles.parentNode.removeChild(pickles); } }; // Вкуснятина! var btn = document.querySelectorAll("button"); btn.addEventListener("click", addFries); btn.addEventListener("click", addCheese); btn.addEventListener("click", removePickles);

Add fries to lunch Add cheese to sandwich Remove pickles My Lunch

My sandwich
Bread
Pickles
Beef
Mayo
Bread

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

Запрос html-данных с помощью функции Load

Это самый простой ajax-запрос через jQuery с получением html-данных и их вставкой в dom-элемент с id="result" (содержимое элемента заменяется):

$("#result").load("");

Более продвинутый вариант использования load:

$("#result").load("", {par1:val1, par2:val2, ...}, function(response, status, xhr) { if (status == "success") { alert("Готово"); } else { alert("Ошибка: " + xhr.status + " " + xhr.statusText); } });

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

Ajax-запросы функциями GET и POST

Эти функции осуществляют отправку ajax запроса http-методами get и post. Приведу пару примеров их использования.

$.get("", // адрес отправки запроса {par1:val1, par2:val2, ...}, // передача с запросом каких-нибудь данных function(data) { // какие-то действия с полученными от сервера данными data });

Передача данных не обязательна, как и выполнение каких-либо действий после получения ответа от сервера, т.е. в этом случае, строчки 3 и 4-6 можно удалить при необходимости и таким образом еще сократить код.

Тип получаемых от сервера данных можно указать, добавив dataType (см.ниже) - по-умолчанию определяется автоматически.

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

$.post("", {par1:val1, par2:val2, ...}, onSuccess); function onSuccess(data) { // какие-то действия с полученными от сервера данными data }

На самом деле, функции get и post являются сокращенными вариантами функции ajax, которую рассмотрю ниже.

Получение json-данных с помощью getJSON

getJSON - укороченный вариант ajax-запроса методом GET и получением данных в виде json. Способ удобен, например, для получения какого-то массива с данными и последующей работы с ним.

$.getJSON("", {par1:val1, par2:val2, ...}).success(function(data) { // что-то делаем с данными, например, обходим их в цикле и выводим: for (var i=0; i 10, "text" => "тестовая строка 1"); $arr = array("id" => 20, "text" => "тестовая строка 2"); $arr = array("id" => 30, "text" => "тестовая строка 3"); echo json_encode($arr);

Точно так же можно передать с сервера и объекты stdClass, преобразовав их в json-строку.

Простой ajax-запрос через jQuery с помощью функции AJAX

Теперь приведу пример простого get запроса функцией ajax и получением html-данных.

$.ajax({ url: "", dataType: "html", success: function(data) { // какие-то действия с полученными данными data } });

Запрос к серверу происходит get-методом, т.к. параметр, отвечающий за тип запроса, type по-умолчанию равен GET.

Более сложный пример ajax-запроса через jQuery

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

$.ajax({ url: "", type: "post", data: "", // можно строкой, а можно, например, так: $("input, input:checked, input:checked, select, textarea") dataType: "json", beforeSend: function() { $("#sendajax").button("loading"); }, complete: function() { $("#sendajax").button("reset"); }, success: function(json) { // какие-то действия с полученными данными }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } });

Кнопка отправки данных:

Отправить

В приведенном примере при нажатии на кнопку button, сначала меняется состояние кнопки (текст на ней меняется на "Отправка..." и она становится не активной), что делается при помощи параметра beforeSend. Затем происходит отправка запроса с передачей нужных данных. После того, как получен ответ от сервера состояние кнопки возвращается в прежнее (текст меняется на "Отправить", становится активной). Ответ получается в виде json-данных.

Коротко опишу параметры отправки ajax-запроса, которые чаще всего могут пригодиться:

url	Адрес отправки ajax-запроса
type	Способ отправки запроса GET или POST
data	Отправляемые серверу данные. Может быть строка с параметрами и их значениями в формате par1=val1&par2=val2&..., объект jQuery, например, $("input") или другие данные.
dataType	Тип получаемых от сервера данных. Может быть html, json, text, script и xml.
cache	Кэширование браузером запроса (false - не кэшировать).
async	Асинхронное выполнение запроса, т.е. программа продолжает выполняться не дожидаясь ответа сервера. Если указать false, то запрос будет выполнен синхронно, при этом страница не будет ни на что реагировать, пока не будет получен ответ от сервера.
processData	Преобразование отправляемых данных в url-формат. Если нужно чтобы данные не преобразовывались, установить в false. Например, при отправке изображения на сервер или xml-данных.
contentType	Тип передаваемых данных, по умолчанию "application/x-www-form-urlencoded; charset=UTF-8". Если указать false, то в заголовке не будет передаваться тип, что может быть необходимо, например, при отправке изображения на сервер.
beforeSend	Функция, выполняемая перед отправкой ajax-запроса.
complete	Функция, выполняемая после получения ответа от сервера (любого, успешного или нет).
success	Функция, выполняемая при удачном выполнении запроса.
error	Функция, выполняемая в случае ошибки.

Ниже приведу еще несколько примеров использования ajax-запросов.

Отправка формы со всеми данными ajax-запросом через jQuery

Примерный код html-формы:

Ваше имя:

JavaScript код:

$("#myform").submit(function(e) { e.preventDefault(); $.ajax({ type: $(this).attr("method"), url: "", data: $(this).serialize(), async: false, dataType: "html", success: function(result){ alert("Форма отправлена"); } }); });

Для того чтобы страница не перезагружалась при нажатии на кнопку "submit", сначала отменяем стандартые действия браузера использовав e.preventDefaults() .

В параметре data мы передаем все поля формы использовав $(this).serialize() - эта функция преобразует все input-ы и select-ы в строку, пригодную для отправки на сервер.

Так же, здесь использован параметр async: false , чтобы пока форма не отправится на сервер больше ничего нельзя было нажать или сделать.

Отправка изображения или файла ajax-запросом через jQuery

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

html-код будет такой:

Загрузить изображение

#addfile { position: relative; overflow: hidden; width: 180px; height: 34px; } #load_file { position: absolute; top: 0; left: 0; width: 180px; height: 34px; font-size: 0px; opacity: 0; filter: alpha(opacity:0); } #load_file:hover { cursor: pointer; }

Суть идеи в том, что поверх кнопки выводится стандартный input для выбора файла, но он полностью прозрачен и имеет такие же размеры как кнопка. Таким образом, пользователь видит кнопку button, но когда наводит на нее курсор, фактически наводит на input. Соответственно, когда он нажимает на кнопку, на самом деле нажимается input выбора файла. Для того, чтобы не мигал курсор после выбора файла, размер шрифта задан 0px.

Теперь javascript код отправки файла на сервер с отображением прогресса:

$(function() { $("#load_file").on("change", loadfile); }); function loadfile() { $("#addfile span").html("Загружено 0 %"); files = $("#load_file").files; var form = new FormData(); form.append("upload", files); $.ajax({ url: "", type: "POST", data: form, cache: false, processData: false, contentType: false, xhr: function() { var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) { myXhr.upload.addEventListener("progress",ShowProgress, false); } return myXhr; }, complete: function(data){ $("#addfile span").html("Загрузить изображение"); $("#load_file").val(""); }, success: function(message){ alert(message); }, error: function(jqXHR, textStatus, errorThrown) { alert(textStatus+" "+errorThrown); } }); } function ShowProgress(e) { if(e.lengthComputable){ $("#addfile span").html("Загружено "+Math.round(100*e.loaded/e.total)+" %"); } }

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

Пример серверной части на php (по просьбе Евгения):

$message = ""; if (empty($_FILES["upload"]["name"]) || $_FILES["upload"] == "none") { $message = "Вы не выбрали файл"; } else if ($_FILES["upload"]["size"] == 0 || $_FILES["upload"]["size"] > 9437184) { $message = "Размер файла не соответствует нормам (максимум 9 Мб)"; } else if (($_FILES["upload"]["type"] != "image/jpeg") && ($_FILES["upload"]["type"] != "image/pjpeg") && ($_FILES["upload"]["type"] != "image/gif") && ($_FILES["upload"]["type"] != "image/png")) { $message = "Допускается загрузка только картинок JPG, GIF и PNG."; } else if (!is_uploaded_file($_FILES["upload"]["tmp_name"])) { $message = "Что-то пошло не так. Попытайтесь загрузить файл ещё раз."; } else { $ftype = $_FILES["upload"]["type"]; $fname = "newname_image.".($ftype == "image/gif" ? "gif" : ($ftype == "image/png" ? "png" : "jpg")); if (move_uploaded_file($_FILES["upload"]["tmp_name"], $_SERVER["DOCUMENT_ROOT"]."/files/".$fname)) { $message = "Изображение успешно загружено."; } else { $message = "Что-то пошло не так. Попытайтесь загрузить файл ещё раз."; } } exit($message);

Информация о загруженном изображении будет содержаться в $_FILES["upload"] , т.к. скриптом файл добавлялся так: form.append("upload", files); Соответственно, всё что требуется от php-программы - это проверить что файл соответствует ожидаемым параметрам, перенести файл в нужную папку (в примере в папку files) под нужным именем (в примере newname_image) и вернуть в браузер ответ, который в моем примере просто выводится пользователю командой alert(message);

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

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

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

Function getObj(objID){ if (document.getElementById) {return document.getElementById(objID);} else if (document.all) {return document.all;} else if (document.layers) {return document.layers;} }

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

$("#objID") или jQuery("#objID")

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

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

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

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

jQuery и CSS

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

$("#objID").css("display","block") $("#objID").css({ display:"block, margin:"10px", color:"#ffffff" })

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

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

Исходный код:

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

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

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

Исходный код:

function demo_css(){ $("#span2").css({ color:"#ffffff", padding:"5px", background:"#980000" }); } Пример изменения нескольких атрибутов!

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

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

$("#objID").text("Тру ля ля") $("#objID").html("

Тру ля ля

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

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

Исходный код:

function set_text(){ $("#span3").text("Спасибо!"); }

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

Исходный код:

function set_html(){ $("#span4").html("Спасибо! Так гораздо лучше."); }

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

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

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

Исходный код:

function plus_ten(){ var cur_value = $("#text").attr("value"); cur_value = parseInt(cur_value) + 10; $("#text").attr("value",cur_value); }

Обработчики событий в jQuery

Полный список доступен по адресу http://api.jquery.com/category/events/. Приведу лишь несколько примеров. Самый распространенный обработчик события onclick. В jQuery можно перехватить через функцию click() .

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

Исходный код:

$("#butt").click(function(){ alert("Решили проверить?"); });

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

Введите что-нибудь:

Вы ввели:

Исходный код:

Введите что-нибудь:
Вы ввели: $("#text2").keyup(function(){ if ($("#text2").val()){ $("#text2_target").css({background:"#980000"}); } else { $("#text2_target").css({background:"#ffffff"}); } $("#text2_target").text($("#text2").val()); });

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

Кликни по мне!

Исходный код:

div#log{ background:#1C93A5; width:300px; height:100px; padding:10px; color:#fff; } Кликни по мне!
$(document).ready(function() { $("#log").bind("click", function(e) { $("#coord").html("Координата X: "+ e.pageX + " Координата Y: " + e.pageY + ""); }); });

В этой статье познакомимся с сокращёнными AJAX методами jQuery: load, get, getJSON, getScript и post. Эти методы позволяют очень просто осуществлять необходимые AJAX запросы и в отличие от функции ajax, для их написания требуется меньшее количество строчек кода.

jQuery - метод load

Метод load предназначен для получения данных с сервера по указанному адресу URL и помещения их в один или несколько выбранных элементов.

Метод load имеет следующий синтаксис:

Load(url [,data] [,complete]) // параметры в квадратных скобках являются необязательными //url - строка, содержащая URL адрес, на который необходимо отправить запрос //data (необязательный параметр) - данные, которые необходимо послать на сервер (в формате строки или объекта) //complete – дополнительные действия, которые необходимо выполнить после завершения запроса (указываются посредством функции Function(responseText, textStatus, xhr) ) // responseText - ответ сервера // textStatus - статус ответа // xhr - XMLHTTPRequest объект

В большинстве случаев для отправки запроса метод load использует GET. Но он также может использовать и метод POST. Это происходит только тогда, когда данные для отправки на сервер указываются не в формате строки, а посредством объекта.

Примеры использования метода load

1. Вставить содержимое файла asidenav.tpl в блок c id="asidenav" после загрузки DOM страницы:

... // после загрузки DOM страницы $(function() { // вставить в элемент (#asidenav) контент файла asidenav.tpl // если файл не находится в той же директории что и HTML документ, то необходимо дополнительно указать путь к нему $("#asidenav").load("asidenav.tpl"); });

2. Загрузить часть файла demo.html в элемент при клике по кнопке, расположенной в нём:

Получить контент файла demo.html ... $("#ajaxclick").click(function(){ // загрузить в элемент id="content1" часть файла demo.html (#content1) $(this).parent().load("demo.html #content1"); });

Контент файла demo.html:

Файл demo.html ... ...

3. Загрузить в элемент, имеющий id="result" ответ content.php . Данный ответ будет зависеть от значения атрибута data-content , которое имеет кнопка, пославшая AJAX-запрос на сервер.

Загрузить содержимое 1 Загрузить содержимое 2 Загрузить содержимое 3 ... // при нажатии на кнопку, имеющую класс load-ajax-click $(".load-ajax-content").click(function(){ // определим значение атрибута data-content var dataContent = $(this).attr("data-content"); // запросим данные из файла, с использованием значения атрибута data-content, и выведем их в элемент id="result" if (dataContent) { $("#result").load("content.php","content="+dataContent); } });