Приклад jQuery. Прості приклади скриптів на jQuery

jQuery — це бібліотека jаvascript, яка дозволяє веб-розробникам додавати додаткові функції на свої веб-сайти. Вона доступна з відкритим вихідним кодом і надається безкоштовно за ліцензією MIT. В останні роки jQuery стала найбільш затребуваною бібліотекою jаvascript, що використовується у веб-розробці.

Приклад jQuery

Щоб реалізувати jQuery, веб-розробнику потрібно послатися на jаvascript-файл в HTML-коді веб-сторінки. На деяких веб-сайтах розміщується власна локальна копія, в той час як інші просто посилаються на бібліотеку, розміщену Google або сервером. Наприклад, веб-сторінка може завантажувати бібліотеку jQuery, використовуючи наступну рядок у розділі HTML (приклад jQuery і cookie):

Приклади jQuery і Ajax

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

Переваги бібліотеки

Крім безкоштовної ліцензії, іншою основною причиною, по якій jQuery завоювала таку популярність, є її крос-браузерна сумісність. Оскільки кожен браузер відображає HTML, CSS і jаvascript по-різному, веб-розробнику може бути складно зробити веб-сайт однаковим у всіх браузерах. Замість того, щоб писати користувальницькі функції для кожного браузера, веб-розробник може використовувати одну функцію jQuery, яка буде працювати в Chrome, Safari, Firefox і Internet Explorer. Підтримка декількох браузеров змусила багатьох розробників перейти від стандартного jаvascript до jQuery, оскільки це значно спрощує процес кодування.

Опис

Синтаксис jQuery використовується для спрощення навігації по документу, вибору елементів DOM, створення анімації, обробки подій і розробки додатків Ajax. jQuery також надає розробникам можливість створювати плагіни поверх бібліотеки jаvascript. Це дозволяє програмістам створювати абстрактні конструкції для взаємодії і анімації на низькому рівні, розширені ефекти і високорівневі, тематичні віджети. Модульний підхід до бібліотеки jQuery дозволяє створювати потужні динамічні веб-сторінки та веб-додатки. Набір основних функцій: вибір елементів DOM; обхід і маніпуляція з допомогою механізму вибору; новий стиль програмування; алгоритми злиття і структури даних DOM. Стиль вплинув на архітектуру інших фреймворків jаvascript, таких як YUI v3 і Dojo, а також стимулював створення стандартного API Selectors.
Microsoft і Nokia постачають jQuery на своїх платформах. Microsoft включає його з Visual Studio для використання в рамках ASP.NET AJAX і ASP.NET MVC, а Nokia інтегрувала його в платформу розробки віджета веб-часу.

Огляд

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

Розробка

Бібліотека використовує такі затребувані функції jаvascript, як fade ins і fade outs при приховуванні елементів, анімації та роботі з елементами jQuery CSS. jQuery також надає парадигму для обробки подій, яка виходить за рамки вибору і маніпуляції елементами DOM. Призначення події і визначення функції зворотного виклику виконуються одним кроком в одному місці коді. Принципи розробки з допомогою jQuery (приклади): Поділ jаvascript і HTML — бібліотека надає простий синтаксис для додавання обробників подій в DOM з використанням jаvascript, замість додавання атрибутів подій HTML для виклику функцій JS. Таким чином, він заохочує розробників повністю відокремлювати код jаvascript від розмітки HTML. Стислість і ясність — сприяє стислості і ясності з такими інструментами, як ланцюжки та скорочені імена функцій. Усунення крос-браузерних несумісності — jаvascript-движки різних браузерів трохи відрізняються, тому JS код, який працює для одного браузера, може не працювати для іншого. Подібно іншим инструментариям jаvascript, jQuery обробляє всі ці крос-браузерні невідповідності і забезпечує узгоджений інтерфейс, який працює в різних браузерах. Розширюваність — нові події, елементи і методи можуть бути легко додані, а потім повторно використані як плагін.

Історія

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

Особливості

Бібліотека включає в себе наступні функції: вибір елементів DOM з використанням многосерверного механізму селектора з відкритим вихідним кодом Sizzle; виділення проекту DOM-маніпуляції на основі CSS селекторів, яка використовує імена й атрибути елементів, такі як id, class, як критерії для вибору вузлів DOM; заходи; ефекти анімації; ajax; об'єкти відкладених і обіцяють для контролю асинхронної обробки; розбір JSON; розширюваність через плагіни; утиліти, такі як виявлення функцій; способи сумісності, які спочатку доступні в сучасних браузерах, але потребують більш ранніх версіях, таких як inArray () і each (), мульти-браузер (не плутати з крос-браузером).

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

Бібліотека jQuery являє собою один файл jаvascript, що містить всі його загальні функції DOM, події, ефекти і Ajax. Він може бути включений у веб-сторінку шляхом посилання на локальну копію або на одну з численних копій, доступних на загальнодоступних серверах. Бібліотека має мережу доставки контенту (CDN), розміщену max-cdn. Приклад jQuery PHP:

Стилі

jQuery має два стилю використання: Через функцію $, яка є фабричним методом для об'єкта jQuery. Ці функції, часто звані командами, є цілими, оскільки всі вони повертають об'єкти jQuery. Через $ — префіксні функції. Це службові функції, які безпосередньо не діють на об'єкт. Доступ до JQuery і управлеие декількома вузлами DOM зазвичай починається з виклику функції $ з допомогою рядка селектора CSS. Це повертає об'єкт jQuery, який посилається на всі відповідні елементи на сторінці HTML.

Безконфліктний режим

jQuery включає режим .noConflict (), який звільняє управління функцією $. Це корисно, якщо jQuery використовується з іншими бібліотеками, які також використовують $ в якості ідентифікатора. У режимі без конфліктів розробники можуть використовувати бібліотеки в якості заміни $ без втрати функціональності.

Розширений функціонал

Функції зворотного виклику для обробки подій на елементах, які ще не завантажені, можуть бути зареєстровані всередині .ready () як анонімні функції. Ці обробники будуть викликатися тільки при спрацьовуванні події. Наприклад, наступний код додає обробник для клацання миші на елемент зображення img: $(function (){ $('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([1,2,3],function(){ console.log(це+1); }); Даний приклад post jQuery записує 234 на консоль.

Ajax

Можна виконувати крос-браузерні запити Ajax з використанням $ .ajax () jQuery, прикладом якого можуть служити пов'язані методи для завантаження і обробки видалених даних: $.ajax({ тип: POST, url: '/process/submit.php', дані: { ім'я: Джон, розташування: 'Бостон', }, }).done(function(msg){ alert('Data Saved:'+msg); }).fail(function(xmlHttpRequest, statusText, errorThrown){ оповіщення( 'Не вдалося відправити ваше повідомлення.Nn' +'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 для початківців, який може допомогти користувачам зрозуміти jаvascript і приступити до розробки плагінів.

jQuery UI

jQuery UI являє собою набір віджетів GUI, анімованих візуальних ефектів і тим, реалізованих за допомогою jQuery CSS (бібліотеки jаvascript), каскадних таблиць стилів і HTML. Згідно службі аналітики jаvascript, Libscore, інтерфейс jQuery використовується на більш ніж 197000 кращих веб-сайтах, що робить його другим за популярністю бібліотекою JS. Найвідоміші з них: Pinterest, PayPal, IMDb, The Huffington Post і Netflix. jQuery UI є безкоштовним і відкритим вихідним кодом, що розповсюджується Foundation під ліцензією MIT. Був вперше опублікований у вересні 2007 року.

jQuery Mobile

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