Напевно, Ви чули про чудову бібліотеку Javascript під назвою jQuery. Що таке насправді jQuery?
Як полегшити життя веб-розробника? З чого почати? jQuery робить написання Javascript цікавим та простішим. За допомогою цієї бібліотеки багато досить складних аспектів Javascript можна легко впровадити в будь-які програми.
Сьогоднішній наш урок розповість про те, як розпочати роботу з jQuery та як написати свій перший скрипт.
Що таке jQuery?
jQuery дуже легка бібліотека Javascript (деякі називають її фреймворком), яка позбавляє головного болю при написанні Javascript коду. У неї багато дуже потужних можливостей, як наприклад: відстеження DOM, додавання красивих ефектів та анімацій до елементів, супер прості Ajax техніки та методи. На головній сторінці сайту jQuery найточніший, на мій погляд, опис:
jQuery швидка та лаконічна бібліотека, яка спрощує обробку подій, анімацію та взаємодію з Ajax для більш швидкої веброзробки. jQuery розроблено для того, щоб змінити методи написання JavaScript коду.
Які переваги jQuery?
Давайте коротко пройдемося за деякими перевагами та властивостями даного фреймворку:
Істотно зменшується кількість коду (необхідного для роботи скрипту) в порівнянні з JavaScript, що в свою чергу означає менше тимчасових витрат і більше читабельний код. Далі у статті будуть розглянуті деякі приклади.
Набагато простіше зрозуміти код (на відміну JavaScript). У нашому світі чим швидше Ви закінчите процес програмування, тим більше часу зможете приділити іншим цілям.
Дуже зручна документація та активне ком'юніті, готове завжди надати допомогу за необхідності.
Використання Ajax стає набагато простіше. Вам знадобиться всього 5 рядків коду (іноді менше) для створення простого Ajax запиту.
Величезна кількість плагінів, за допомогою яких можна зробити практично все, що завгодно.
З jQuery весело:)
Як почати?
Насамперед Вам необхідно відвідати головну сторінкуофіційного сайту jQuery і завантажити найсвіжішу версію цього фреймворку. Після завантаження необхідно завантажити цей файл себе на хостинг, і в шапці документа прописати посилання на цей файл.
В якості альтернативи можна скористатися допомогою великого Гугла і поставити посилання на їх сервер, де знаходяться завжди свіжі версіїбудь-яких фреймворків. Необхідне посилання можна знайти.
Чи готовий документ?
Для виконання нашого першого jQuery скрипта, нам необхідно помістити весь наш скрипт у функцію. Ця функція буде виконана за повної готовності DOM (коли "документ буде готовий" - дослівний переклад з англ.). Зауважте, що це дуже схоже на популярну подію onload, але не є тим самим. Давайте поглянемо на приклад:
$(document).ready(function()( //Code here));
Вище ми говоримо jQuery виконати будь-який код всередині функції при повній готовності DOM.У цьому є свої переваги, незважаючи на те, що може бути багатьом не зрозуміло. Насамперед, використовуючи цю техніку, ми повністю розділяємо Javascript від HTML. По-друге, нам не потрібно чекати повного завантаження сторінки, достатньо завантаження DOM.
Для лінивих кодерів, або для тих, у кого кожен символ на рахунку, можна скоротити код вище:
$(function()( //Code here));
Ваш перший скрипт jQuery
Ми вже знаємо, як посилатися на бібліотеку. Також нам трохи зрозуміла функція document.ready. Тепер настав час написати найпростіший скрипт.
Давайте зробимо його максимально простим. Для цього прикладу, давайте зробимо сторінку з текстом і цитатою в кінці. Ми хочемо показувати цитату тільки якщо користувач натисне на кнопку. Погляньте нижче на необхідний код:
$(document).ready(function()(
var myQuote = $("#my_quote");
myQuote.hide();
$(".button").click(function()(
myQuote.show(500);
});
});
Давайте детально розглянемо весь код.
Як говорилося вище, ми вміщуємо весь код до виконання всередині функції $document.ready().
Ми надаємо id нашої цитати (my_quote) змінну myQuote. Тепер ми маємо доступ до цитати з id my_quote.
От і все. При натисканні на кнопку протягом 0.5 секунд буде показана цитата. Дуже легко, чи не так?
Далі буде....
Дякую за увагу! Всього найкращого!
Ну для початку Вам знадобиться сам фреймворк, його ви зможете завантажити з домашньої сторінки проекту, потім проініціалізувати:
А основні моменти допоможе зрозуміти наступна діаграма:
Як отримати елемент за допомогою jQuery?
Щоб розуміти як працює селектор Вам все-таки необхідні базові знання CSS, т.к. саме від принципів CSS відштовхує селектор jQuery:- $("#header") - отримання елемента з id=«header»
- $(«h3») - отримати все
елементи
- $(«div#content .photo») - отримати всі елементи з класом =«photo» які знаходяться в елементі div з id=«content»
- $(«ul li») - отримати все
- елементи зі списку
- $(«ul li:first») - отримати лише перший елемент
- з списку
Висувна панель
Почнемо з простенького прикладу - слайд-панель, вона буде рухатися вгору/вниз по кліку на засланні (див. приклад)
Реалізуємо це наступним чином, на кліку на посилання, у нас буде перемикатися її клас (між «active» і «btn-slide»), а панелька з id=«panel» буде висуватися/ховатися. (Клас «active» змінює позицію фонового зображення, див. CSS файл у вкладенні).$(document).ready(function()( $(".btn-slide").click(function()( $("#panel").slideToggle("slow"); $(this).toggleClass(" active"); )); ));
Магічні зникнення
Цей приклад покаже як можна красиво і легко видаляти розчиняти елементи (див. приклад):
Коли ми клацаємо по картинці
, буде знайдено батьківський елемент
, і його прозорість повільно змінюватиметься від opacity= 1.0 до opacity=hide:$(document).ready(function()( $(".pane .delete").click(function()( $(this).parents(".pane")).animate(( opacity: "hide" ), "slow"); )); ));
Пов'язана анімація
Тепер приклад складніший, але він допоможе Вам краще зрозуміти jQuery. Усього кілька рядків коду змусять квадрат рухатися, змінювати розмір та прозорість. (Див. приклад):
Line 0: коли провантажилася сторінка (DOM готовий до маніпуляцій)
Line 1: прив'язуємось до події click для елемента
Line 2: маніпулюємо елементом- зменшуємо його прозорість до 0.1, нарощуємо позицію left ще на 400px, зі швидкістю 1200 (milliseconds)
Line 3: потім повільно змінюємо наступні параметри: opacity = 0.4, top = 160px, height = 20, width = 20; швидкість анімації вказується другим параметром: "slow", "normal", "fast" або в мілісекундах
Line 4: потім opacity = 1, left = 0, height = 100, width = 100, швидкість - "slow"
Line 5: потім opacity = 1, left = 0, height = 100, width = 100, швидкість - "slow"
Line 6: потім top = 0, швидкість - "fast"
Line 7: потім slideUp (з дефолтною швидкістю анімації – «normal»)
Line 8: потім slideDown, швидкість - "slow"
Line 9: повертаємо false для того, щоб браузер не перейшов за посиланням$(document).ready(function()( $(".run").click(function()( $("#box").animate((opacity: "0.1", left: "+=400))) , 1200) .animate((opacity: "0.4", top: "+=160", height: "20", width: "20"), "slow") .animate((opacity: "1", left: "0", height: "100", width: "100"), "slow") .animate((top: "0"), "fast") .slideUp() .slideDown("slow") return false; ));));
Гармошка #1
Приклад реалізації «гармошки». (Див. приклад)
Тепер приступимо до розбору польотів:
Першим рядком ми додаємо клас «active» першому елементувсередині
(Клас «active» відповідає за позиціонування фонового малюнка - іконки зі стрілочкою). У другому рядку ми ховаємо все не першіЕлементи всередині
.
Коли відбувається клік по заголовку, для наступного в ньому елемента
Буде застосований ефект slideToggle, потім для всіх інших елементів
Застосовується ефект slideUp. Наступна дія змінює клас заголовка на «active», потім шукаємо всі інші заголовки
та прибираємо у них клас «active»
$(document).ready(function()( $(".accordion h3:first").addClass("active"); $(".accordion p:not(:first)").hide(); $( ".accordion h3").click(function()( $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $( this).toggleClass("active");$(this).siblings("h3").removeClass("active"); )); ));
Гармошка #2
Цей приклад схожий на попередній, лише відрізняється тим, що ми вказуємо відкриту за замовчуванням панельку. (Див. приклад)У CSS у нас вказано для всіх елементів
Display:none. Тепер нам потрібно відкрити третю панель. Для цього ми можемо написати наступне $(".accordion2 p").eq(2).show(), де eq означає рівність. Пам'ятайте, що індексування починається з нуля:
$(document).ready(function()( $(".accordion2 h3").eq(2).addClass("active"); $(".accordion2 p").eq(2).show(); $(".accordion2 h3").click(function()( $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); )); ));
Анімація, розваги hover #1
Даний приклад допоможе створити Вам дуже гарну анімацію для події hover (сподіваюся, Ви знаєте що це?) (див. приклад):
Коли Ви наводите мишкою на елемент меню (mouseover), відбувається пошук наступного елемента , і анімується його прозорість та розташування:
$(document).ready(function()( $(".menu a").hover(function() ( $(this).next("em"))).animate((opacity: "show", top: " -75"), "slow"); ), function() ( $(this).next("em").animate((opacity: "hide", top: "-85"), "fast"); ));));
Анімація, розваги hover #2
Даний приклад трохи складніший за попередній приклад: для формування підказки використовується атрибут linktitle (див. приклад)
Насамперед додамо тег у кожен елемент . Коли відбудеться подія mouseover, ми візьмемо текст з атрибуту «thetitle» і збережемо його в змінній «hoverText», потім цей текст буде вставлено в тег :$(document).ready(function()( $(".menu2 a").append(" "); $(".menu2 a").hover(function() ( $(this).find("em").animate((opacity: "show", top: "-75"), "slow" ), var hoverText = $(this).attr("title"); $(this).find("em").text(hoverText); ), function() ( $(this).find("em") ).animate((opacity: "hide", top: "-85"), "fast"); )); ));
Клікабельні блоки
Цей приклад демонструє як зробити клікабельним блок із текстом, а не лише посилання (див. приклад):
Створимо список- з класом class=«pane-list» і ми хочемо зробити елементи
- клікабельними. Спочатку прив'яжемося до події click для елемента ".pane-list li"; коли користувач буде кликати по елементу списку, наша функція здійснить пошук тега і зробить редирект на сторінку вказану в атрибуті href.
$(document).ready(function()( $(".pane-list li").click(function()( window.location=$(this).find("a").attr("href")) ;return false;));));
Складаються панельки
Ну а тепер трохи скомбінуємо попередні приклади і створимо ряд панелек, що складаються (на кшталт як в Gmail організований inbox). (Див. приклад)
- приховуємо всі елементи після першого.
- приховуємо всі елементи
- після п'ятого
- клік по
- клік по - Викликає метод slideUp для всіх
- клік по , так само викликається метод slideDown для всіх
- післяп'ятого
- клік по - приховує елемент і відображає , так само викликається метод slideUp для всіх
- після п'ятого
$(document).ready(function()( //hide message_body after the first one $(".message_list .message_body:gt(0)").hide(); //hide message li after the 5th $("). message_list li:gt(4)").hide(); //toggle message_body $(".message_head").click(function()( $(this).next(".message_body").slideToggle(500) return false; )); //collapse all messages $(".collpase_all_message").click(function()( $(".message_body").slideUp(500) return false; )); .show_all_message").click(function()( $(this).hide() $(".show_recent_only").show() $(".message_list li:gt(4)").slideDown() return false; ));//show recent messages only $(".show_recent_only").click(function()( $(this).hide() $(".show_all_message")). (4)").slideUp() return false; )); ));
Імітація Backend"a Wordpress"a
Я думаю багато хто з читачів стикалися з адмінською частиною wordpress"a, точніше з редагування коментарів. Спробуємо зробити щось подібне. Для анімації фонового кольору нам знадобиться відповідний плагін для jQuery. (див. приклад)
- додамо клас «alt» до кожного парного елементу (даний класзмінює колір фону елемента)
- клік по ініціює появу повідомлення (alert), так само відбувається анімація фонового кольору та прозорості (backgroundColor та opacity) для
- клік по - викликає анімацію фону у
(колір змінюється на жовтий та назад) і додає клас «spam»- клік по - викликає анімацію фону у
(колір змінюється на зелений і назад) та видаляє клас «spam»- клік по - викликає анімацію фону у
(колір змінюється на червоний) і змінює параметр «opacity» на «hide»//don"t forget включати Color Animations plugin $(document).ready(function()( $(".pane:even").addClass("alt"); $(".pane .btn-delete") ).click(function()( alert("This comment will be deleted!"); $(this).parents(".pane").animate(( backgroundColor: "#fbc7c7" ), "fast") .animate (( opacity: "hide" ), "slow") return false; )); $(".pane .btn-unapprove"). animate(( backgroundcolor: "#fff568" ), "fast") .animate(( backgroundcolor: "#ffffff" ), "slow") .addClass("spam") return false; )); $(".pane . btn-approve").click(function()( $(this).parents(".pane").animate(( backgroundColor: "#dafda5" ), "fast") .animate(( backgroundColor: "#ffffff") ), "slow") .removeClass("spam") return false; ));$(".pane .btn-spam"). animate(( backgroundColor: "#fbc7c7" ), "fast") .animate(( opacity: "hide" ), "slow") return false; )); ));
Галерея зображень
Найпростіший приклад реалізації галереї без перезавантаження сторінки. (Див. приклад)
Для початку додамо тэг у заголовки
Натисніть на зображення вВиконуємо такі дії:
- зберігаємо значення атрибуту «href» у змінній «largePath»
- зберігаємо значення атрибуту «title» у змінній «largeAlt»
- замінюємо в елементі
- так само присвоюємо елементу "h2 em" значення з "largeAlt"
$(document).ready(function()( $("h2").append(" ") $(".thumbs a").click(function()( var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $(" #largeImg").attr(( src: largePath, alt: largeAlt )); $("h2 em").html(" (" + largeAlt + ")"); return false; )); ));
Стилізуємо посилання
Більшість нормальних браузерів легко розуміють коли ми хочемо домогтися від них стилізації посилань для різного типу файлів, для цієї мети можна використовувати наступне правило CSS: a (… ). Але як завжди IE6 відрізняється розумом і кмітливістю, тому будемо ставити йому милиці використовуючи jQuery. (Див. приклад)
Для початку додамо клас для кожного посилання відповідно до типу файлу.
Потім оберемо всі елементи які не містять посилання на "http://www.webdesignerwall.com" і не починаються на "#" в "href", потім додамо їм клас "external" та встановлюємо target="_blank".$(document).ready(function()( $("a[@href$=pdf]").addClass("pdf"); $("a[@href$=zip]").addClass("zip "); $("a[@href$=psd]").addClass("psd"); $("a:not([@href*=http://www.webdesignerwall.com])"). not("") .addClass("external") .attr(( target: "_blank" )); ));
Також Ви можете подивитися всі приклади або завантажити jQuery tutorial for beginners.
Також багато корисних посилань по jQuery знайдете на наступній сторінці: http://blog.termit.name/jquery/
Може кому нагоді ще бібліотека jQuery-PHP
Теги: Додати теги
AJAX - група технологій, яка використовується у веб-розробці для створення інтерактивних додатків. AJAX дозволяє передавати дані із сервера без перезавантаження сторінки. Таким чином, можна отримувати дуже вражаючі результати. А бібліотека jQuery значно полегшує реалізацію AJAX за допомогою вбудованих методів.
Для реалізації технології використовується метод $.ajaxабо jQuery.ajax:
$.ajax(властивості)або $.ajax(url [, властивості])
Другий параметр був доданий до версії 1.5 jQuery.
url- адреса запитуваної сторінки;
properties- властивості запиту.
Повний список параметрів наведено у документації jQuery.
В уроці ми використовуємо декілька параметрів, що найчастіше використовуються.
success (функція)- Ця функція викликається після успішного завершення запиту. Функція отримує від 1 до 3 параметрів (залежно від версії бібліотеки). Але перший параметр завжди містить дані, що повертаються з сервера.
data (об'єкт/рядок)- дані користувача, які передаються на запитувану сторінку.
dataType (рядок)- можливі значення: xml, json, script чи html. Опис типу даних, які очікуються у відповіді сервера.
type (рядок)- Тип запиту. Можливі значення: GET чи POST. Типово: GET.
url (рядок)- URL-адреса для запиту.
Приклад 1
Проста передача тексту.
$.ajax(( url: "response.php?action=sample1", success: function(data) ( $(".results").html(data); ) ));
Для відповіді є елемент div.
Чекаємо відповідіСервер просто повертає рядок:
Echo "Приклад 1 – передача завершилася успішно";
Приклад 2
Передаємо користувацькі дані PHPскрипт.
$.ajax(( type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", success: function(data)( $(".results").html() data);))));
Сервер повертає рядок із вставленими до нього переданими даними:
Echo "Приклад 2 - передача завершилася успішно. Параметри: name=". $_POST["name"] . ", nickname=". $_POST["nickname"];
Приклад 3
Передача та виконання коду JavaScript
$.ajax(( dataType: "script", url: "response.php?action=sample3", ))
Сервер виконує код:
Echo "$(".results").html("Приклад 3 - Виконання JavaScript");";
Приклад 4
Використовуємо XML. Приклад можна використовувати для роботи із зовнішніми XML, наприклад, RSS-фідом.
$.ajax(( dataType: "xml", url: "response.php?action=sample4", success: function(xmldata)( $(".results").html(")); $(xmldata).find ("item").each(function()( $(" ").html($(this).text()).appendTo(".results"); )); )));
Сервер повинен повертати XML-код:
Header ("Content-Type: application/xml; charset=UTF-8"); echo<<
- Пункт 1
- Пункт 2
- Пункт 3
- Пункт 4
- Пункт 5
Приклад 5
Використовуємо дані JSON. Вхідні параметри можна використовувати як атрибути одержуваного об'єкта.
$.ajax(( dataType: "json", url: "response.php?action=sample5", success: function(jsondata)( $(".results").html("Name = " + jsondata.name + " , Nickname = "+jsondata.nickname);))));
Сервер повинен повертати дані у форматі JSON:
$aRes = array("name" => "Andrew", "nickname" => "Aramis"); require_once("Services_JSON.php"); $oJson = new Services_JSON(); echo $oJson->encode($aRes);
У цій статті приклади коду, які я використовую для надсилання 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 На стороні сервера програма формує масив і перетворює його на json-рядок, наприклад, так:
$arr = array(); $arr = array("id" => 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
Завдання надсилання файлу або зображення на сервер без перезавантаження сторінки часто виникає. У цьому прикладі розберу відразу дві фішки: вибір файлу за натисканням на кнопку, яка може бути оформлена як завгодно, та відображення прогресу під час передачі файлуна сервер 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; : 0; filter: alpha(opacity:0); ) #load_file:hover ( cursor: pointer; )
Суть ідеї в тому, що поверх кнопки виводиться стандартний input для вибору файлу, але він повністю прозорий і має такі ж розміри, як кнопка. Таким чином користувач бачить кнопку button, але коли наводить на неї курсор, фактично наводить на input. Відповідно, коли він натискає кнопку, насправді натискається ввхід вибору файлу. Для того, щоб не блимав курсор після вибору файлу, розмір шрифту заданий 0px.
Тепер javascript код відправки файлу на сервер з відображенням прогресу:
$(function() ( $("#load_file").on("change", loadfile); )); function loadfile() ( $("#addfile span").html("Завантажено 0 %"); files = $("#load_file").files; var form = new FormData(); , files);$.ajax(( url: "
", тип: "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 - це бібліотека 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 та багатьма іншими.
- клік по ініціює появу повідомлення (alert), так само відбувається анімація фонового кольору та прозорості (backgroundColor та opacity) для
- приховуємо всі елементи
- клікабельними. Спочатку прив'яжемося до події click для елемента ".pane-list li"; коли користувач буде кликати по елементу списку, наша функція здійснить пошук тега і зробить редирект на сторінку вказану в атрибуті href.
