jQuery

jQuery

Тип	JavaScript фреймворк
Розробник	Джон Ресіґ
Стабільний випуск	3.7.1 (28 серпня 2023; 14 місяців тому (2023-08-28)[1])
Операційна система	кросплатформова програма
Мова програмування	JavaScript[2]
Доступні мови	JavaScript
Ліцензія	MIT License[3]
Репозиторій	github.com/jquery/jquery
Вебсайт	jquery.com
Медіафайли у Вікісховищі

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.]).

<script type="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
);

function onAjaxSuccess(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 = "";  
      }  
    });  
  });

Цей розділ містить неперекладені фрагменти англійською мовою. Ви можете допомогти проєкту, переклавши їх українською.

• jQuery UI

• Офіційний сайт [Архівовано 29 лютого 2012 у WebCite]
• Корисні відеоуроки jQuery для початківців [Архівовано 4 листопада 2010 у Wayback Machine.] (англ.)
• Поштова розсилка jQuery [Архівовано 18 лютого 2009 у Wayback Machine.] (англ.)
• jQuery підручник [Архівовано 10 жовтня 2011 у Wayback Machine.] — з прикладами і вправами. (рос.)
• jQuery Quick API Reference [Архівовано 22 лютого 2012 у Wayback Machine.] (англ.)