###
  • Програми
  • Безпека
  • Новини
  • Цікаве
  • Поради
  • Новини
  • Огляди

    • Скрипти jquery просування. Приклад jQuery. Найпростіші приклади скриптів на jQuery. Створення нових елементів

    22.07.2020 Цікаве

    На світанку WEB 2.0 отримали розвиток і javascript фреймворки, що дозволяють вебмайстру робити динамічні елементи сайту набагато швидше і простіше. Одним з таких фреймворків є jQuery, який здобув величезну популярність за свою простоту і неймовірно мала вага. Отже, представляю до вашої уваги 10 найбільш корисних скриптів jQuery для покращення інтерфейсу вашого сайту.

    Thickbox
    Опис: Потрібний для звернення уваги користувача на будь-який текст, зображення або веб-форму через модальне вікно.
    Коли і де використовується: Коли потрібно відобразити користувачеві більше інформації, показати збільшене зображення, поставити кілька запитань веб-формою, або відобразити форму входу, але не хочете, щоб користувач залишав сторінку.
    Скрипт, приклад, документація
    Плагін до WordPress

    Tabulations
    Опис: Дозволяє відображати вміст сторінки в табах.
    Коли та де використовується: Коли ви хочете звільнити місце на екрані, надавши швидкий доступдо прихованої інформації. Часто використовується у віджетах до різних преміум тем WordPress.
    Скрипт, приклад, документація
    Плагін до WordPress

    Coda slider
    Опис: Створює слайдер, як на скріншоті з сайту Coda.
    Коли і де використовується: Як і у випадку з Coda`ою, цей скрипт відмінно підходить для представлення продуктів чи сервісів, що згруповані за розділами. Користувачі отримують можливість швидкого огляду, і навіть інтуїтивно зрозумілу навігацію.
    Скрипт, приклад, документація
    Тема до WordPress

    Galleria
    Опис: Galleria – javascript галерея написана в jQuery. Завантажує зображення одне за одним та відображає до них ескізи.
    Коли та де використовується: Щоб показати фотографії будь-якої події або продукту, наприклад.
    Скрипт, приклад, документація

    jTip
    Опис: Підказки, реалізовані в jQuery.
    Коли та де використовується: Коли потрібно дати більше інформації про об'єкт у контексті статті або реалізувати підказки користувачеві у різних веб-формах.
    Скрипт, приклад, документація
    Плагін до WordPress

    Stylesheet switcher
    Опис: Дозволяє відвідувачам на вашому сайті самостійно змінювати стилі оформлення «в один клік».
    Коли та де використовується: Коли ви хочете дозволити користувачеві вибирати шрифти різного розміру, відображати інформацію, оформлену для мобільного телефонаабо для виведення на друк, дозволити йому налаштовувати кольори. Stylesheet switcher може реально допомогти підвищити зручність вашого сайту.
    Скрипт, приклад, документація
    Плагін до WordPress

    jQuery Accordion menu
    Опис: Дозволяє створювати динамічні меню.
    Скрипт, приклад, документація
    Плагін до WordPress

    Slider Gallery
    Опис: Представляє продукти/зображення у вигляді галереї, що прокручується.
    Коли і де використовується: Коли ви хочете вмістити всі елементи у сайдбарі, але не вистачає місця під усі опції.
    Скрипт, приклад, документація

    Form Validation
    Опис: Перевіряйте веб-форми за допомогою Form Validation, щоб уникнути неправильно заповнених полів.
    Коли та де використовується: У більшості форм. Це допомагає користувачам зрозуміти, де саме вони неправильно заповнили поля, підсвічуючи їхні помилки.
    Скрипт, приклад, документація

    jGrowl
    Опис: Виводить повідомлення в браузері також, як Growl у MacOSX
    Коли і де використовується: Якщо ви повідомляєте користувача про дію, але не хочете, щоб він залишав поточну сторінку/оновлював її. Це відмінний спосіб підтвердити дії, виконані користувачем, наприклад реєстрація. Також можна використовувати jGrowl у різних магазинах тощо. для підтвердження додавання товару до корзини або підтвердження транзакції.
    Скрипт, приклад, документація

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

    Наскільки їм це вдалося судити вам, але через 10 років свого існування, jQuery залишається однією з найпопулярніших бібліотек JavaScript.

    Сам JavaScript зараз абсолютно зрілий продукт, добре документований та підтримуваний усіма сучасними браузерами. Сучасна браузерна спільнота теж більш консолідована і, в більшості випадків, можна бути впевненою, що якщо, скажімо, сторінка коректно відображається в Crome, то вона виглядатиме і в Firefox. QuerySelectors теж підтримуються практично всіма сучасними браузерами.

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

    Я думаю, цей вибір повинен робити сам розробник у кожній конкретній ситуації орієнтуючись не на моду та тенденції, а на здоровий глузд і перспективи розвитку свого творіння.

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

    multiscroll.jsЦікаве рішення привернути увагу відвідувача - скролінг сторінки виконано у вигляді двох панелей, одна з яких ковзає вгору, а друга вниз, відкриваючи наступний блок. Також чудово працює на всіх, навіть дуже застарілих браузерах.

    jquery.email-autocomplete.jsЕлектронні адреси доводиться вводити дуже часто і, незважаючи на те, що це лише півтора десятка символів, часто виникає бажання прискорити цей процес. jquery.email-autocomplete.js має власний список доменів популярних поштових сервісівна підставі якого він пропонує автодоповнення адреси. Користувач може прийняти цю підказку, натиснувши клавішу Tab або стрілку вправо, або продовжити вводити далі вручну. Плагін добре працює і в мобільних версіяхсайту. Однак доведеться трохи допиляти плагін, щоб він почав працювати з вітчизняними поштовими сервісами.


    tinyDatePickerУ 5 кБ цього плагіна втиснуті чималі можливості. Календарі, планувальники, бронювання товарів та послуг - далеко не повний перелік, де можна використовувати tinyDatePicker. Швидкий, легкий, масштабований - його можна легко інтегрувати в Bootstrap або будь-який інший фреймворк.


    ReadRemaining.jsБагато з нас завжди катастрофічно не вистачає часу. Я завжди заздрив людям, які вміють правильно їм розпоряджатися. Напевно, до таких належить авторка плагіна ReadRemaining.js. Кому ж ще могла спасти на думку вивести поруч із текстом інформацію про те, скільки часу вам знадобиться, щоб прочитати його. І в міру прокручування тексту перераховувати цей час, ґрунтуючись на швидкості читання конкретного користувача.

    Дуже оригінальний плагін, який, я думаю, сподобається відвідувачам, якщо у вас багато довгого текстового матеріалу.

    TooltipsterКласична підказка (tooltip) з великим набором функцій і опцій. Сам елемент може розташовуватися будь-де по відношенню до батьківського елементу і містити будь-які елементи. Головне, не переборщити з його застосуванням, використовуйте його тільки там, де це дійсно необхідно.

    AddelНезважаючи на співзвучну назву, цей плагін не має жодного відношення до співачки Адель. Його назва походить від англійських слів ADd-DELete (додати та видалити) і відображає його призначення - динамічно додавати або приховувати HTML-елементи, в першу чергу елементи форм. Управління гнучке та інтуїтивно зрозуміле.

    Chart.jsПлагін, що активно розвивається, що дозволяє виводити різні типидіаграм (загалом 8 типів, у тому числі змішані). Відмінно працює на всіх сучасних браузерахі має плавну та симпатичну анімацію при зміні даних.


    jQuery Flip-QuoteДуже цікавий плагін, який робить дві речі. По-перше, обертає блоки цитат, присутні на сторінці, в той момент, коли блок стає видимим (відмінно привертає увагу). По-друге, при натисканні на цей блок відбувається підсвічування цитати в тексті, що дозволяє швидко знайти її в загальному потоці матеріалу. Виявляється, цитати також можна зробити цікавими!

    Algolia PlacesШвидкий пошук з автодоповненням поштових адрес, міст, маршрутів та всього, що пов'язано з локаціями по всьому світу завдяки інтеграції з базою даних OpenStreetMap. Дуже корисний плагін для інтернет-магазинів.

    HideSeekПростий, але функціональний плагін «живого» пошуку. Вміє проводити пошук, ґрунтуючись на різних критеріях, виконувати певні дії після знаходження шуканих даних та багато іншого.

    TimedropperІснує безліч зручних рішень для введення певного моментучасу. Однак Timedropper виділяється серед них простотою та легким управлінням. Зміна годин та хвилин за допомогою цього кумедного язичка дійсно зручно. Він має декілька параметрів налаштування, таких як: формат часу (12 або 24-годинний), колір циферблата, тесту, фону, а також можливість змінювати показання годин і хвилин за допомогою коліщатка миші. До речі, є аналогічна плагін для завдання дати.

    LoryСлайдер, написаний на чистому JavaScript. Мінімалістичний, але підтримуючий керування жестами, завдання фіксованого елемента, відображення керуючих елементів-кнопок і одночасне відображення декількох зображень, у тому числі різної ширини.

    CurrencyFormatter.jsДуже простенький і маленький скрипт, що виконує відображення числових значень у грошовому форматі. Додає крапки, пробіли для поділу розрядів та символ валюти. Підтримує 155 валют світу.

    Shave.jsJavascript , який акуратно обріже текст , що не міститься в контейнері заданої висоти. Займає лише 1,5 кБ і не вимагає сторонніх бібліотек.

    jQuery LinechartБібліотека для побудови діаграм різних видів і досить великою кількістювихідних даних. Написаний на HTML/CSS/JS, проте є версія і на базі Angular.js

    FreewallНеймовірно красивий jQuery плагіндля створення плиткового інтерфейсу в різних стилях: Windows Metro, Pinterest, звичайному плоскому або ієрархічному, з елементами, що перетягуються і динамічно додаються. Відмінно працює як на мобільних браузерах, і на десктопних, включаючи IE8. Справді універсальний інструмент!

    rowGrid.js Крихітний плагін, який має зображення або інші елементи рівними рядами однакової висоти, підбираючи розмір і зазори між ними так, що кожен ряд ідеально вписується в ширину вікна. Щоправда, всі об'єкти мають бути однакової висоти.

    SlidebarsSlidebars додає на сторінку сайту меню або бічну панель, які ковзним рухом з'являються або ховаються після натискання курсором на кнопку керування. Версія 2 цього плагіна була повністю переписана і тепер може містити необмежену кількість самих різних елементів. Має повноцінний API, можливість підключення власних callback-функцій та підписку на події.


    pagePiling.jsДуже нагадує розглянутий у даному оглядіплагін multiscroll.js, але сторінка не розбивається на дві панелі, а зміщується повністю. Можна змінювати напрямок зміщення та швидкість. Гарний вибірдля односторінкового сайту, який однаково добре виглядатиме і на мобільних пристроях і на великих екранах.

    AnimsitionОсновною метою Animsition є втілення в одному плагіні великого та різноманітного набору різних транзитивних ефектів. Серед них згасання та прояв, обертання, відображення, зумування тощо. (Всього 58 штук).

    ZooMoveМені не подобається динамічне зумування зображень при наведенні курсору - я знаходжу цей ефект занадто дратівливим. Але якщо ви хочете його неодмінно використовувати, то краще взяти для цієї мети ZooMove. Такого гладкого та плавного масштабування та скролінгу не дасть жоден інший плагін.

    RippleriaЛегковаговий плагін, що створює хвильовий ефект (схожий на бриж на поверхні води) на будь-якому DOM-елементі: кнопці, елементі DIV, картинці. Дуже легко налаштовується та керується.

    FlickityШвидкий, адаптивний і керований жестами слайдер. Зовнішньо - досить звичайний, але з неймовірно ретельно написаною та структурованою документацією. Повноцінний і продуманий API.


    UnsliderДуже маленький і простий слайдер, що має кілька параметрів, що дозволяють урізноманітнити його поведінку: різні напрямки руху (горизонтальний та вертикальний), циклічна (нескінченна) прокручування, автозапуск.

    Lightcase.js Видатний lightbox з CSS3 анімацією. Працює з DIV, зображеннями, текстом, flash-об'єктами, відео та iframe. Поки що не підтримує jQuery 3, але розробники обіцяють виправити це у найближчих релізах.


    PhotoSwipeЧудова галерея зображень з керуванням як клавіатурою на дестопних браузерах, так і жестами на мобільних. Можна встановити затримку завантаження фотографій, доки повністю не завантажиться сама сторінка. І все це задоволення має розмір лише 14 кБ.


    StripStrip - це lightbox, який займає деяку область сторінки, залишаючи саму сторінку не лише частково видимою, а й доступною для взаємодії з нею. Крім того, може одночасно працювати і як слайдер. До того ж, поряд із зображеннями, підтримує і відеоконтент із Youtube та Vimeo.

    Turntable.jsНеймовірно ефектний підхід до демонстрації продукту, особливо якщо це фізичний об'єкт. Фактично, плагін дуже простий і лише демонструє набір зображень. Однак завдяки можливості керувати процесом за допомогою колеса миші або жестів на екрані за умови, що набір є зображенням одного об'єкта, знятого з різних кутів зору у глядача виникає повна ілюзія його обертання.

    Vide.js Мабуть, найпростіший спосіб додати фонове відео на сторінку сайту – це скористатися плагіном Vide.js. Він працює на всіх сучасних браузерах, починаючи з IE9+. На iOS та Android, які не завжди відтворюють фонове відео, буде показано стоп-кадр.


    TrianglifyЯкщо ви не хочете навантажувати сторінку фоновим відео, а статичне зображенняздається банальним, спробуйте тріангулярність! Це унікальні геометричні трикутні візерунки, які додадуть певної індивідуальності вашому дизайну. Плагін дозволяє змінювати колір, розмір осередків та дисперсію. Ви навіть зможете написати власну реалізацію алгоритму та використовувати його у Trianglify.

    LazeeMenuЯкщо у вас на сайті велике ієрархічне меню, яке ви хочете зберегти простим і зрозумілим, то LazeeMenu безсумнівно знадобиться вам. Він перетворює вкладені ненумеровані списки в зручне меню.

    Web-tickerРядок , що біжить , схожий на ті, які часто можна побачити на екрані телевізора у випусках новин - останні події, біржові котирування, погода ... Та мало, що там можна розмістити! Так, якщо вам подобається такий спосіб подачі інформації - візьміть Web-ticker на замітку.

    InputmaskUser experience у дії. Ви пам'ятаєте ті часи, коли доводилося заново вводити дані у форму через помилку. Причому помилка виявлялася лише після відповіді сервера. Забудьте про це! Inputmask не просто контролює і відображає візуально правильність даних, що вводяться, він ще й перешкоджає введенню неправильних. Спробуйте, наприклад, ввести 13-й місяць у поле дати. Маски можуть бути різні - дати, телефони, e-mail і навіть регулярні висловлювання.

    Це одна з найпопулярніших бібліотек JavaScript. І це не дивно для тих, хто її використовує. Вона дозволяє спростити, прискорити і, що найдивовижніше, покращити розробку скриптів на JavaScript.

    Переваги:

    • Дуже зручна роботаз елементами, заснована на селекторах CSS.
    • Відмінна кросбраузерність. Багато програмістів не замислюються над кросбраузерністю, однак це необхідно, адже один і той же код різні браузериможуть обробляти по-різному. всі ці нюанси враховує, і Вам не треба про це замислюватися.
    • Відмінні можливості з анімації. Анімація прикрашає сторінку та робить її приємнішою для використання. Простіше зробити анімацію, ніж це реалізовано в , просто неможливо: величезні можливості при простоті використання.
    • Велика кількість готових плагінів. Щоб зробити той же слайдер зображень на JavaScript, може знадобитися кілька днів. А встановити та налаштувати готовий плагін можна за кілька хвилин.

    Виходячи з цього, повинен знати кожен, хто займається розробкою сценаріїв JavaScript. І ціль даної категорії навчити Вас використовувати, а також показати приклади використання, наприклад, з моєї ж практики.

    Прочитавши статті з jQuery, Ви дізнаєтесь:

    1) Як встановити.

    2) Що таке функція $() у .

    3) Як зробити вибірку елементів у .

    4) Як працювати з вибіркою на .

    5) Як додавати та видаляти елементи в .

    6) Як обробити події на .

    7) Як робиться анімація на .

    8) Як зробити зумування зображень на .

    9) Як зробити плавну кнопку "наверх" на .

    10) Як зробити динамічне завантаження файлів на сервер.

    11) Як робиться адаптивна версткана .

    12) Як надсилати асинхронні запити на

    13) Як надсилати Ajax запити за допомогою методів $.post() та $.get()

    14) Як зробити радіо кнопки як слайдера на .

    15) Як встановити слайдер slick.

    16) Як зробити архів за допомогою плагіна для .

    17) Як зробити екскурсію сайтом на .

    18) Як зробити гарні таби на JQuery.

    19) Як створити титри на сайті за допомогою плагіна для .

    20) Як створити гарний прогресбар за допомогою плагіна для .

    21) Як зробити замок за шаблоном на .

    22) Як додати динаміки на сайт із бібліотекою dynamo.js.

    23) Як зробити відео на задньому фоні за допомогою .

    24) Як зробити підтвердження надсилання пошти на .

    25) Як зробити красивий та ефектний слайдер на JQuery.

    26) Як зробити красивий список, що випадає на .

    27) Як зробити гарне спливаюче віконце на JQuery, використовуючи WebUI-Popover.

    28) Як зробити красиві повідомлення на JQuery, використовуючи плагін Noty.

    29) Як зробити гарне меню, що випадає, з цікавим ефектом на CSS і .

    30) Як зробити задній фоняк частинок на .

    31) Як зробити інтерактивне порівняння двох фотографій на JQuery.

    32) Як зробити круговий повзунок на JQuery.

    33) Як зробити хмари на JQuery.

    34) Як вивести час, що минув з опублікування записи , на .

    35) Як вивести спеціальні символина JQuery.

    36) Як зробити лічильник зворотного відліку на JQuery.

    37) Як зробити кастомне меню на JQuery.

    38) Як зробити анімацію під час завантаження сторінки на .

    40) Як зробити меню, що виїжджає на JQuery .

    41) JQuery LightGallery – плагін для створення галерей.

    42) Як обернути елемент у макет браузера або пристрою на .

    43) Як зробити гарну галереюз сортуванням на JQuery.

    44) Як зробити інтерактивний 3D об'єкт на JQuery.

    45) Як зробити спливаюче вікно на JQuery .

    46) Як зробити скролінг паралакс ефект.

    47) Як зробити гамбургер меню на CSS та JS. Частина 1.

    48) Як зробити гамбургер меню на CSS та JS. Частина 2.

    49) Як зробити пошук по кліку .

    50) Як зробити валідацію форми на jQuery.

    51) Як зробити маску введення телефону на jQuery.

    52) Як працювати з бібліотекою jQuery.

    53) Як працювати з бібліотекою jQuery UI.

    54) Як використовувати jQuery UI Slider.

    55) Як застосувати віджет jQuery UI Datapicker.

    56) Про плагін для табів EasyTabs.

    57) Як настроїти слайдер BxSlider.

    58) Як поставити таймер зворотного відліку на сайт.

    59) Як зробити AJAX-форму без перезавантаження сторінки.

    60) Як створити ефект тексту, що друкується на сайті.

    61) На прикладі для анімацію SVG вектора .

    62) Фільтри в jQuery.

    63) Як отримати селектор у jQuery.

    64) Як маніпулювати атрибутами в jQuery.

    65) Як працюють jQuery події миші.

    66) Як працюють jQuery ефекти.

    67) Як зробити (частина 1).

    68) Як зробити спливаюче вікно popup jQuery (частина 2).

    69) Як зробити фільтрацію за першими літерами на jQuery.

    70) Як зробити анімацію кнопки меню гамбургер.

    71) Як створити адаптивне меню гамбургер.

    72) Як робити Mobile first верстку.

    73) Як робити плавний якір на jQuery.

    74) Як зробити прокручування сторінки вгору.

    75) Як зробити віджет акордеон бібліотеки.

    Humane.js

    Хороший скрипт Jquery, який дозволяє виводити оповіщення на сторінці у вигляді спливаючих вікон. Підтримує мобільні пристрої, важить мало, добре документований і найголовніше – сповіщає ненав'язливо, не заважаючи перегляду.

    Impress.js

    Скрипт дозволяє створювати чудові презентації на сайті. Широкі можливостіналаштування, підтримка керування з клавіатури. Рекомендую подивитися демо, щоб було зрозуміліше, про що йдеться.

    PDF.js

    Дуже цікавий скрипт. Дозволяє, використовуючи HTML5, згенерувати PDF документіз вмісту сторінки. Тепер для завантаження статті у PDF більше не потрібно використовувати сторонні сервіси, все можна зробити, як кажуть, «не відходячи від каси»

    JQuery Transit

    Дуже накручений скрипт JQuery, який вміє робити з об'єктами практично все. Стискає, рухає, розтягує, крутить по всякому - безліч варіантів для використання. Використовує механізм трансформації CSS3, важить дуже мало - всього 2 кілобайти у стислому вигляді.

    ResponsiveSlides.js

    Хороші новини для тих, хто оптимізує свій сайт для мобільних пристроїв за допомогою @media. Цей маленький за обсягом слайдер працює з усіма браузерами, починаючи з IE6, мобільними пристроямина всіх сучасних ОС і дозволяє масштабувати картинки під роздільну здатність екрана пристрою. Всім мобільним розробникам – мастхев

    Response.js

    Скрипт-інструмент для створення mobile-friendly сайтів. Підтримує HTML5, має купу налаштувань для комфортної роботирозробника.

    Slabtext

    Незвичайний скрипт, що дозволяє створювати модні зараз великі заголовки. Принцип роботи наступний — скрипт бере рядок, вважає символи, ділить на довжину рядка, хитро розраховує, скільки знаків потрібно на кожному рядку, з урахуванням поділу на слова. Потім додає трохи магії і краще подивитися демо, тому що у мене не вистачить слів пояснити принцип роботи

    Scrollrama.js

    Цікавий скрипт дозволяє реалізувати на сторінці різні ефекти при скролі. До речі, ці ефекти скролла набирають популярності, зауважую їх на багатьох сайтах.

    Textualizer.js

    Дозволяє застосовувати різні анімації буквально до кожної літери на сторінці. Широкі можливості налаштування, хороша кросбраузерність, досить легкий і приємний плагін для додавання на вашу сторінку невеликого «творчого» безладдя

    Sticky

    Хороший скрипт, що дозволяє зробити будь-який елемент на сторінці завжди видимим, наприклад при скролі вниз, Верхнє менюзавжди залишатиметься на місці. Аналогічно можна вчинити із сайдбаром або будь-яким іншим елементом.

    Для тих, хто сумнівається, чи використовувати ні скрипти JQuery, чи сильно вони гальмують завантаження - не переживайте. Головне, не переборщити з красою та функціональністю і тоді точно все буде чудово!

    Напевно, Ви чули про чудову бібліотеку 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 секунд буде показана цитата. Дуже легко, чи не так?

    Далі буде....

    Дякую за увагу! Всього найкращого!