jQuery

jQuery - бібліотека JavaScript, фокусується на взаємодії JavaScript і HTML. Бібліотека jQuery допомагає легко отримувати доступ до будь-якого елементу DOM, звертатися до атрибутів і вмісту елементів DOM, маніпулювати ними. Також бібліотека jQuery надає зручний API по роботі з AJAX.


1. Історія створення

HTML була однією з перших речей, яку Джон Резіг освоїв, коли він тільки почав займатися програмуванням. Резіг програмував на QBasic, коли один його знайомий показав йому, як створити веб-сторінку (використовуючи Angelfire), а також основи HTML. Батько подарував йому на Різдво дві книги по HTML. Саме тоді, коли він тільки почав програмувати на Visual Basic, HTML і веб-дизайн дуже зацікавили його.

Але пристрасть до JavaScript прийшла значно пізніше, приблизно в 2004 році. Тоді Резіг отримував ступінь у галузі комп'ютерних наук і працював на півставки в місцевій фірмі Brand Logic. Він займався дизайном сайту, в якому створювався користувальницький скролінг. Джон був розчарований і засмучений, особливо тому, що використовував код інших розробників, після чого вирішив серйозно вивчити JavaScript. Вивчивши, прийшов до висновків, що JavaScript - це простий, але витончений мова, яка є неймовірно потужним для вирішення багатьох завдань. Протягом найближчої пари років Джон створив безліч різних JavaScript-додатків, перш ніж закінчити створення jQuery. Основною метою створення jQuery Резіг бачив можливість закодувати багаторазові шматки коду, які дозволять спростити JavaScript і використовувати їх так, щоб не турбуватися про крос-браузерних питаннях. Бібліотека була представлена ​​громадськості на комп'ютерній конференції " BarCamp "в Нью-Йорку в 2006.


2. Можливості

  • Движок кросбраузерність CSS-селекторів Sizzle [2], що виділився в окремий проект;
  • Перехід по дереву DOM, включаючи підтримку XPath як плагіна;
  • Події;
  • Візуальні ефекти;
  • AJAX -додатків;
  • JavaScript- плагіни.

3. Філософія

Точно так само, як CSS відокремлює візуалізацію від структури HTML, JQuery відділяє поведінку від структури HTML. Наприклад, замість прямої вказівки на обробник події натиснення кнопки управління передається JQuery ідентифікуючої кнопки і потім перетворює його в обробник події кліка. Такий поділ поведінки і структури також називається принципом ненав'язливого JavaScript.

Бібліотека jQuery містить функціональність, корисну для максимально широкого кола завдань. Тим не менш, розробниками бібліотеки не ставилося завдання суміщення в jQuery функцій, які підійшли б усюди, оскільки це призвело б до великої кодом, більша частина якого не затребувана. Тому була реалізована архітектура компактного універсального ядра бібліотеки та плагінів [3]. Це дозволяє зібрати для ресурсу саме ту JavaScript-функціональність, яка на ньому була б затребувана.


4. Використання

jQuery, як правило, включається в веб-сторінку як один зовнішній JavaScript-файл:

 <  head  >  <  script  type  =  "Text / javascript"  src  =  "Шлях / до / jQuery.js"  > <  /  script  >  <  /  head  > 

Вся робота з jQuery ведеться за допомогою функції $. Якщо на сайті застосовуються інші JavaScript бібліотеки, де $ може використовуватися для своїх потреб, то можна використовувати її синонім - jQuery. Другий спосіб вважається більш правильним, а щоб код не виходив занадто громіздким, можна писати його наступним чином:

 jQuery  (  function  (  $  )  {  / / Тут код скрипта, де в $ знаходитиметься об'єкт, який надає доступ до функцій jQuery  }  ) 

Роботу з jQuery можна розділити на 2 типи:

  • Отримання jQuery-об'єкта за допомогою функції $(). Наприклад, передавши в неї CSS-селектор, можна отримати jQuery-об'єкт всіх елементів HTML, що потрапляють під критерій і далі працювати з ними за допомогою різних методів jQuery-об'єкта. У разі, якщо метод не повинен повертати жодного значення, він повертає посилання на jQuery об'єкт, що дозволяє вести ланцюжок викликів методів згідно концепції текучого інтерфейсу.
  • Виклик глобальних методів у об'єкта $, наприклад, зручних ітераторів по масиву.

Типовий приклад маніпуляції відразу декількома вузлами DOM полягає у виклику $ функції з рядком селектора CSS, що повертає об'єкт jQuery, містить деяку кількість елементів HTML-сторінки. Ці елементи потім обробляються методами jQuery. Наприклад,

 $  (  "Div.test"  )  .  add  (  "P.quote"  )  .  addClass  (  "Blue"  )  .  slideDown  (  "Slow"  )  ; 

знаходить всі елементи div з класом test, а також всі елементи p з класом quote, і потім додає їм всім клас blue і візуально плавно спускає вниз. Тут методи add, addClass і slideDown повертають посилання на вихідний об'єкт $ ("div.test"), тому можливо вести такий ланцюжок.

Методи, що починаються з $., зручно застосовувати для обробки глобальних об'єктів. Наприклад:

 $.  each  (  [  1  ,  2  ,  3  ]  ,  function  (  )  {  document.  write  (  this  +  1  )  ;  }  )  ; 

додасть на сторінку 234.

$.ajax і відповідні функції дозволяють використовувати методи AJAX. Наприклад:

 $.  ajax  (  {  type  :  "POST"  ,  url  :  "Some.php"  ,  data  :  {  name  :  'John'  ,  location  :  'Boston'  }  ,  success  :  function  (  msg  )  {  alert  (  "Data Saved:"  +  msg  )  ;  }  }  )  ; 

У цьому прикладі йде звернення до скрипта some.php з параметрами name=John&location=Boston, і отриманий результат видається в повідомленні допомогою alert().

Приклад додавання до елемента обробника події click за допомогою jQuery:

 $  (  "A"  )  .  click  (  function  (  )  {  alert  (  "Hello world!"  )  ;  }  )  ; 

В даному випадку при натисканні на елемент відбувається виклик alert("Hello world!").


5. Історія версій

Версія Посилання Дата релізу Істотні зміни
1.0 - 30 червня 2006 Перша альфа-версія
1.0 сж. 26 серпня 2006 Це перша стабільна версія бібліотеки вже мала надійну підтримку селекторів CSS, технології AJAX і механізму подій.
1.0.1 сж., несж. 31 серпня 2006 Перша версія з виправленнями помилок
1.0.2 сж., несж. 9 жовтня 2006 Зміна інтерфейсу прикладного програмування
1.0.3 сж., несж. 27 жовтня 2006 -
1.0.4 сж., несж. 12 грудня 2006 -
1.1a - 8 січня 2007 Альфа-версія
1.1b - 11 січня 2007 Бета-версія
1.1 сж., несж. 14 січня 2007 У цій версії була проведена істотна модернізація прикладного програмного інтерфейсу (API). Багато рідко використовувані методи були об'єднані, що призвело до зменшення числа методів, які необхідно вивчати й документувати.
1.1.1 сж., несж. 22 січня 2007 -
1.1.2 сж., несж. 27 лютого 2007 -
1.1.3a - 20 травня 2007 Альфа-версія
1.1.3 сж., несж. 1 липня 2007 У цій версії була істотно підвищена продуктивність механізму селекторів jQuery. Починаючи з цієї версії, продуктивність бібліотеки jQuery стала що з продуктивністю родинних бібліотек JavaScript, таких як Prototype, Mootools і Dojo. Більш ніж у 8 разів збільшено швидкодію при розмірі в 20 кб [4]
1.1.3.1 сж., несж. 5 липня 2007 -
1.1.4 сж., несж. 24 серпня 2007 -
1.2 хв., сж., несж. 10 вересня 2007 З цієї версії був прибраний синтаксис XPath вибору елементів, так як він став надлишковим при наявності синтаксису CSS. У цій версії стала більш гнучкою налаштування ефектів, а завдяки додаванню логіки управління подіями в просторах імен спростилася розробка розширень.
1.2.1 хв., сж., несж. 16 вересня 2007 -
1.2.2 хв., сж., несж. 15 січня 2008 -
1.2.3 хв., сж., несж. 8 лютого 2008 -
1.2.4 хв., сж., несж. 19 травня 2008 -
1.2.5 хв., сж., несж. 21 травня 2008 -
1.2.6 хв., сж., несж., в.док. 24 травня 2008 До складу основної бібліотеки були включені функціональні можливості популярного модуля розширення Dimensions, створеного Брендоном Аароном (Brandon Aaron).
1.3 хв., несж., в.док. 14 січня 2009 Значна модернізація механізму селекторів (Sizzle) забезпечила гігантський приріст продуктивності бібліотеки. Офіційно було оголошено про підтримку делегування подій. З'явився метод live ().
1.3.1 хв., несж., в.док. 21 січня 2009 -
1.3.2 хв., несж., в.док. 20 лютого 2009 -
1.4 хв., несж. 14 січня 2010 Оптимізація обробки подій: реалізація. Closest (Array) [5]. Швидкодія основних функцій збільшено більш ніж у 3 рази [6]
1.4.1 хв., несж. 25 січня 2010 Перейменовані події втрати і отримання фокусу,. Die () видаляє обробники подій, навішені за допомогою. Live () [7], jQuery.error () генерує виняток,. height () і. width () повертають висоту і ширину елемента, обчислену браузером, для першого елемента зі знайдених, jQuery.parseJSON () перетворює рядок у форматі JSON в об'єкт [8].
1.4.2 хв., несж. 19 лютого 2010 Додані нові методи. Delegate () і. Undelegate () [9], Покращення продуктивності виклику. bind () і. unbind (), продуктивність. empty (),. remove () і. html (), також поліпшена продуктивність додавання одиничного DOM вузла і виклику $ ("body") [10].
1.4.3 хв., несж. 16 жовтня 2010 Численні зміни [11].
1.4.4 хв., несж. 11 листопада 2010 Доданий. FadeToggle () [12].
1.5 хв., несж. 31 січня 2011 Переписаний модуль AJAX, додана можливість створення відкладених (deferred) об'єктів, метод. Sub () для клонування jQuery, велика швидкість виконання методів. Children (),. Prev () і. Next (). [13]
1.5.1 хв., несж. 24 лютого 2011 Виправлення помилок. Додана підтримка IE9 [14]
1.5.2 хв., несж. 24 лютого 2011 Виправлення помилок. [15]
1.6 хв., несж. 24 лютого 2011
  • Виправлення 4-х помилок;
  • Збільшена продуктивність методу data ();
  • Зміни, "ломающие" сумісність (змінені методи `data ()`, `attr ()`, `prop ()`) [16]
1.6.1 хв., несж. 12 травня 2011 Виправлення помилок. [17]
1.6.2 хв., несж. 30 червня 2011 - [18]
1.6.3 хв., несж. 31 серпня 2011 -
1.6.4 хв., несж. 12 вересня 2011 -
1.7 хв., несж. 3 листопада 2011 -
1.7.1 хв., несж. 21 листопада 2011 -
1.7.2 хв., несж. 21 березня 2012 -
1.8.0 хв., несж. 9 серпня 2012 -
1.8.1 хв., несж. 30 серпня 2012 -
1.8.2 хв., несж. 20 вересня 2012 -
1.8.3 хв., несж. 13 листопада 2012 Виправлення помилок. [19]
1.9.0 початок 2013 Видалення застарілих інтерфейсів і чистка коду. [20]
2.0.0 початок 2013 Припинення підтримки IE 6-8 для збільшення продуктивності та зменшення розміру файлів. [20]
Легенда
хв. - Мініфіціровано сж. - Стисло несж. - Не стисло в.док - документація Visual Studio

6. Інтеграція з іншими продуктами

28 вересня 2008 на офіційному блозі jQuery [21] повідомили про те, що компанії Microsoft і Nokia збираються співпрацювати з групою розробників. Компанія Microsoft збирається інтегрувати в свій продукт ASP.NET листинги коду та приклади jQuery, а компанія Nokia збирається інтегрувати jQuery для своїх мобільних віджетів.

7. Команда розробників

Робота над бібліотекою розділена на 5 груп:

Команди Опис Учасники
Розробка Несуть відповідальність за зміст бібліотеки (розробка, тестування, документування і т. д.).
Піар Відповідальні за зв'язок з громадськістю.
  • Rey Bango
  • Karl Swedberg
  • Cody Lindley
jQuery UI Розробка та підтримка jQuery UI. [22]
  • Paul Bakaus
  • Richard D. Worth
  • Scott Gonzlez
  • Todd Parker
  • Otros [23]
Plugins Люди, відповідальні за розробку плагінів
  • Yehuda Katz
  • Klaus Hartl
  • Mike Alsup
Web дизайнери Відповідальні за дизайн і підтримку сайту jQuery. [24]
  • Scott Jehl
  • Mike Hostetler

Примітки

  1. Resig, John Jquery 1.8.3 Released - blog.jquery.com/2012/11/13/jquery-1-8-3-released / (Англ.) (20 September 2012). Читальний - www.webcitation.org/6BVy2KDYG з першоджерела 19 жовтня 2012.
  2. Sizzle - движок кросбраузерність CSS-селекторів - sizzlejs.com /
  3. Бер Бібо, Ієгуда Кац. 1.3.5 Розширення jQuery / / jQuery. Докладне керівництво по просунутому JavaScript = jQuery in Action. - Спб.: Символ-Плюс, 2009. - 384 с. - 2000 прим. - ISBN 978-5-93286-135-6, 5-93286-135-5, 1-933988-35-5
  4. Запис у блозі jQuery про релізі 1.1.3 - jquery.com/blog/2007/07/01/jquery-113-800-faster-still-20kb /
  5. Resig, John . closest (Array) in jQuery 1.4 - ejohn.org/blog/closestarray-in-jquery-14 / (Англ.) (18 December 2009). Читальний - www.webcitation.org/65nrGtGvJ з першоджерела 29 лютого 2012.
  6. Про зміни в jQuery 1.4 в порівнянні з попередньою версією - w3pro.ru/article/ob-izmeneniyakh-v-jquery-14-po-sravneniyu-s-predydushchei-versiei. Читальний - www.webcitation.org/65nrHOAmB з першоджерела 29 лютого 2012.
  7. Вийшов jQuery 1.4.1 - habrahabr.ru/blogs/jquery/82008 / # habracut. habrahabr.ru (26 січня 2010). Читальний - www.webcitation.org/65nrIe3mm з першоджерела 29 лютого 2012.
  8. Version 1.4.1 - api.jquery.com/category/version/1.4.1 / (Англ.) . jquery.com (26 January 2010). Читальний - www.webcitation.org/65nrLCwSw з першоджерела 29 лютого 2012.
  9. Version 1.4.2 - api.jquery.com/category/version/1.4.2 /. jquery.com (19 лютого 2010). Читальний - www.webcitation.org/65nrMoJ8X з першоджерела 29 лютого 2012.
  10. jQuery 1.4.2 Released - blog.jquery.com/2010/02/19/jquery-142-released / (Англ.) . jquery.com (19 February 2010).
  11. Version 1.4.3 - api.jquery.com/category/version/1.4.3 /. jquery.com (16 жовтня 2010). Читальний - www.webcitation.org/65nrPBhBj з першоджерела 29 лютого 2012.
  12. Version 1.4.4 - api.jquery.com/category/version/1.4.4 /. jquery.com (11 листопада 2010). Читальний - www.webcitation.org/65nrRbVm1 з першоджерела 29 лютого 2012.
  13. jQuery 1.5 Released - blog.jquery.com/2011/01/31/jquery-15-released /. jquery.com (8 лютого 2011). Читальний - www.webcitation.org/68iFXY1jH з першоджерела 26 червня 2012.
  14. jQuery 1.5.1 Released - blog.jquery.com/2011/02/24/jquery-151-released /. jquery.com (8 лютого 2011). Читальний - www.webcitation.org/69ioblau8 з першоджерела 6 серпня 2012.
  15. jQuery 1.5.2 Released - blog.jquery.com/2011/03/31/jquery-152-released /. jquery.com (31 березня 2011). Читальний - www.webcitation.org/69iocLUvA з першоджерела 6 серпня 2012.
  16. jQuery 1.6 Released - blog.jquery.com/2011/05/03/jquery-16-released /. jquery.com (3 травня 2011). Читальний - www.webcitation.org/65nrS3vSd з першоджерела 29 лютого 2012.
  17. Resig, John JQuery 1.6.1 Released - blog.jquery.com/2011/05/12/jquery-1-6-1-released / (Англ.) (12 May 2010). Читальний - www.webcitation.org/69itD7azs з першоджерела 7 серпня 2012.
  18. Resig, John Jquery 1.6.2 Released - blog.jquery.com/2011/06/30/jquery-162-released / (Англ.) (30 June 2010). Читальний - www.webcitation.org/69itDeOsY з першоджерела 7 серпня 2012.
  19. jQuery 1.8.3 Released - blog.jquery.com/2012/11/13/jquery-1-8-3-released /. jquery.com (3 травня 2011). Читальний - www.webcitation.org/6CJF6EEPF з першоджерела 20 листопада 2012.
  20. 1 2 jQuery Core: Version 1.9 and beyond - blog.jquery.com/2012/06/28/jquery-core-version-1-9-and-beyond /. jquery.com (28 червня 2012). Читальний - www.webcitation.org/6CJF6l3LC з першоджерела 20 листопада 2012.
  21. Офіційний блог jQuery - blog.jquery.com/2008/09/28/jquery-microsoft-nokia /. Читальний - www.webcitation.org/69itE7IiR з першоджерела 7 серпня 2012.
  22. Офіційна сторінка jQuery UI - jqueryui.com /. Читальний - www.webcitation.org/65nrThEVJ з першоджерела 29 лютого 2012.
  23. Повний список контрибуторів jQuery UI - jqueryui.com / about /. Читальний - www.webcitation.org/65nrUByTb з першоджерела 29 лютого 2012.
  24. Офіційна сторінка jQuery - jquery.com /. Читальний - www.webcitation.org/65nw4uFvK з першоджерела 29 лютого 2012.