jQuery — популярнаJavaScript-бібліотека звідкритим кодом. Вона була представлена у січні 2006 року у BarCamp NYC Джоном Ресіґом (John Resig). Згідно з дослідженнями організації W3Techs, JQuery використовується понад половиною від мільйона найвідвідуванішихсайтів.[4] jQuery є найпопулярнішою бібліотекою JavaScript, яка посилено використовується на сьогоднішній день[коли?].[5]
jQuery євільним програмним забезпеченням підліцензією MIT (до вересня 2012 булоподвійне ліцензування підMIT таGNU General Public License другої версії)[3].
Синтаксис jQuery розроблений, щоб зробити орієнтування у навігації зручнішим завдяки вибору елементівDOM, створенню анімації, обробки подій, і розробкиAJAX-застосунків. jQuery також надає можливості для розробників, для створенняплагінів у верхній частині бібліотеки JavaScript. Використовуючи ці об'єкти, розробники можуть створювати абстракції для низькорівневої взаємодії та створювати анімацію для ефектів високого рівня. Це сприяє створенню потужних і динамічнихвебсторінок.
Основне завдання jQuery — це надавати розробнику легкий та гнучкий інструментарій кросбраузерної адресаціїDOM об'єктів за допомогоюCSS таXPath селекторів. Також дана бібліотека надає інтерфейси дляAjax-застосунків, обробників подій і простої анімації.
Принцип роботи jQuery полягає в використанні класу (функції), який при звертанні до нього повертає сам себе. Таким чином, це дозволяє будувати послідовний ланцюг методів.
$('#test')//знаходимо елемент з id="test".text('Клікни по мені')//встановлюємо текст елемента рівним "Клікни по мені".addClass('myAlert')//додаємо клас "myAlert".css('color','red')//встановлюємо колір тексту червоним.attr('alert','Привіт, світе!')// додаємо атрибут "alert" із значенням "Привіт, світе!".bind(// додаємо в обробник події click функцію, яка відкриє модальне'click',// вікно із текстом, що вказаний в атрибуті "alert" ("Привіт, світе!")function(){alert($(this).attr('alert'))});
Бібліотека jQuery є JavaScript файлом, яка включає всю його DOM, події(events), ефекти(effects), і Ajax функції. Вона може бути додана до web-сторінки посиланням на локальну копію, або на одну з копій доступних на публічному сервері (наприкладGoogle[Архівовано 1 липня 2010 уWayback Machine.] абоMicrosoft CDN[Архівовано 17 грудня 2020 уWayback Machine.]).
<scripttype="text/javascript"src="jquery.js"></script>
// Виберемо всі парні елементи "tr", і застосуємо для них css клас "odd"$("tr:nth-child(odd)").addClass("odd");// Відправлення асинхронного POST запиту на адресу '/ajaxtest.php'$.post('/ajaxtest.php',{type:"test-request",param1:"param1",param2:2},onAjaxSuccess);functiononAjaxSuccess(data){// Тут ми отримуємо відповідь, і опрацьовуємо результатalert(data);}
Ось представлена функція, яка забезпечує зміну кольору тексту у всіх контейнерах div на синій при клацанні мишкою у будь-якому місці сторінки
$(document.body).click(function(){$("div").each(function(i){if(this.style.color!="blue"){this.style.color="blue";}else{this.style.color="";}});});