Пример за jQuery. Прости примери на jQuery скриптове

jQuery е javascript библиотека, която позволява на уеб разработчиците да добавят допълнителни функции към своите уебсайтове. Той е с отворен код и се предоставя безплатно под лиценза на MIT. През последните години jQuery се превърна в най-търсената JavaScript библиотека, използвана в уеб разработката.

Пример jQuery

За да приложите jQuery, уеб разработчикът трябва да се позове на javascript файла в HTML на уеб страницата. Някои уебсайтове имат собствено местно копие, докато други просто споменават библиотека, хоствана от Google или сървър. Например уеб страница може да зареди библиотека jQuery, като използва следния ред в секцията HTML (пример jQuery и cookie):


Примери за jQuery и Ajax

След изтегляне на библиотека, уеб страница може да извика всяка функция, поддържана от библиотеката. Често срещани примери са промените в текста, обработката на данни от формуляри, преместването на елементи на страницата и изпълнението на анимации. jQuery може да работи и с Ajax код и скриптови езици, като PHP и ASP, за достъп до данни от базата данни. Тъй като jQuery се изпълнява от страна на клиента (а не на уеб сървър), той може да актуализира информацията в уеб страницата в реално време, без да презарежда страницата. Често срещан пример е автоматичното довършване, при което формулярът за търсене автоматично показва общите данни при въвеждане на заявката.

Библиотечни ползи

В допълнение към свободния лиценз, друга основна причина, поради която jQuery придоби подобна популярност, еСъвместимост между браузърите. Тъй като всеки браузър показва HTML, CSS и javascript по различни начини, за уеб разработчиците може да е трудно да направи уебсайта същият във всички браузъри. Вместо да пишете дефинирани от потребителя функции за всеки браузър, уеб разработчикът може да използва една функция jQuery, която ще работи в Chrome, Safari, Firefox и Internet Explorer. Поддръжката на множество браузъри принуди много разработчици да преминат от стандартен javascript към jQuery, тъй като това значително опростява процеса на кодиране.


Описание

Синтаксисът jQuery се използва за опростяване на навигацията на документи, избор на елементи на DOM, създаване на анимации, обработка на събития и разработване на Ajax приложения. jQuery също така дава възможност на разработчиците да създават плъгини в JavaScript библиотеката. Това позволява на програмистите да създават абстрактни проекти за ниско ниво на взаимодействие и анимация, напреднали ефекти и високо ниво, тематични джаджи. Модулен подход към библиотеката jQuery ви позволява да създавате мощни динамични уеб страници и уеб приложения. Набор от основни функции:
  • избор на DOM елементи;
  • Байпас и манипулация чрез механизъм за избор;
  • нов стил на програмиране;
  • Алгоритми на сливания и DOM данни.
  • Стил влияе върху архитектурата на други фреймворци на javascript, като YUI v3 и Dojo, и също така стимулира създаването на стандартен API селектор.
    Microsoft и Nokia предоставят jQuery на своите платформи. Microsoft го включва в Visual Studio за използване в ASP.NET AJAX и ASP.NET MVC, а Nokia я интегрира в платформата за уеб разработчици.

    Преглед

    jQuery е библиотека от елементи с документ на обектен модел (DOM). DOM е представяне на дървовидна структура на всички елементи на дадена уеб страница. jQuery опростява синтаксиса за търсене, избор и управление на тези DOMs. Библиотеката може да се използва за търсене на елемент в документ със специфично свойство (например всички елементи с таг h1), промяна на един или повече атрибути (цвят, видимост) или приемане на отговор на събитие (например, щракване с мишката).

    Развитие

    Библиотеката използва такива популярни javascript функции като избледняващи и избледняващи аута при скриване на елементи, анимации и работа с jQuery CSS елементи. jQuery предоставя и парадигма за обработка на събития, които излизат извън обхвата на избора и манипулирането на DOM елементи. Присвояването на събитие и дефинирането на функция за обратно извикване се извършва на едно място на едно място в кода. Принципи на разработката на jQuery (примери):
  • Библиотеката за разделяне на javascript и html предоставя прост синтаксис за добавяне на обработчици на събития към DOM, използвайки javascript, вместо да добавя атрибути на събития на HTML за извикване на JS функции. Ето защо, той насърчава разработчиците да разделят напълно JavaScript кода от HTML маркировката.
  • Краткост и яснота - благоприятства сбитостта и яснотата с инструменти като вериги и съкратени имена на функции.
  • Премахване на несъвместимост между браузърите - javascript-двигателите за различни браузъри са малко по-различни, така че JS кодът, който работи за един браузър, може да не работи за друг браузър. Подобно на други JavaScript инструменти, jQuery се справя с всичко тованесъответствия между браузърите и осигурява последователен интерфейс, който работи в различни браузъри.
  • Разширяемост - Нови събития, елементи и методи могат лесно да бъдат добавени и след това повторно използвани като приставка.
  • История

    jQuery първоначално беше издаден през януари 2006 г. в BarCamp NYC от John Reshig и беше повлиян от ранната cssQuery библиотека на Dean Edwards. В момента той се поддържа от екипа на разработчиците на Timmy Willison (с JQuery двигател за избор, Sizzle, управляван от Ричард Гибсън).

    Характеристики

    Библиотеката включва следните функции:
  • избор на DOM елементи чрез мулти-сървърния механизъм на селектора с отворен код Sizzle;
  • Избор на CSS селектор DOM манипулиращ проект, който използва имена и атрибути на елементи като id, class като критерии за избор на DOM възли;
  • мярка;
  • анимационни ефекти;
  • ajax;
  • обектите се забавят и обещават да контролират асинхронната обработка;
  • парсинг на JSON;
  • Разширяемост чрез плъгини;
  • комунални услуги, като например откриване на функции;
  • Методи за съвместимост, които първоначално са достъпни в съвременните браузъри, но изискват по-стари версии, като inArray () и всеки (), мулти-браузър (да не се бърка с кръст браузър).
  • Употреба

    jQuery библиотеката е единичен javascript файл, който съдържа всички негови общи функции, събития, ефекти и Ajax. Тя може да бъде включена в уеб страница чрез свързване към местно копие или към едно от многото копия, достъпни за общественосттасървъри. Библиотеката има мрежа за доставка на съдържание (CDN), хоствана от max-cdn. JQuery PHP Пример:

    Стилове

    jQuery има два стила на използване:
  • Поради функцията $, която е фабричен метод за обекта jQuery. Тези функции, често наричани команди, са цели числа, тъй като всички те връщат jQuery обекти.
  • ​​
  • Чрез префикс $ - функции. Това са сервизни функции, които не засягат пряко обекта.
  • Достъпът до JQuery и управлението на множество DOM възли обикновено започва с извикване на $ функцията чрез CSS селекторния ред. Това връща jQuery обект, който се отнася до всички съответни елементи на HTML страницата.

    Неконфликтният режим

    jQuery включва режима .noConflict (), който освобождава контрола на $ function. Това е полезно, ако jQuery се използва с други библиотеки, които също използват $ като идентификатор. В режим без конфликт, разработчиците могат да използват библиотеки като подмяна на $ 2 без да губят функционалност.

    Разширена функционалност

    Функциите за обратно извикване за обработване на събития на елементи, които още не са заредени, могат да бъдат регистрирани в .ready () като анонимни функции. Тези манипулатори ще бъдат извиквани само когато събитието се задейства. Например, следният код добавя манипулатор за кликване върху img: $ (function () {$ ('img'). На ('click', function () {//обработваме събитие за кликване на всеки img елемент на страницата });}). Някои функции връщат определени стойности (например $ ('# input-user-email'). Val ()). В тези случаи веригата не работи, тъй като стойността не се отнася за обекта jQuery.

    Създаване на новиЕлементи

    В допълнение към достъпа до DOM възли чрез йерархията на обектите, е възможно да се създават нови елементи, ако низът, подаден като аргумент $ () изглежда като HTML. Например, низът намира елемент от избора на HTML с идентификационни карти и добавя елемент с опция със стойността VAG и текста Volkswagen: $ ('# select carmakes') .append ($ ('') .attr ({value: VAG}) .append (Volkswagen )).

    Комунални услуги

    Функциите jQuery с префикса $ са функции на полезност, които засягат глобалните свойства и поведение. В следващия пример се използва функцията every (), която изпълнява итерация чрез масивите: $ .each ([1,2,3], function () {console.log (this + 1);}); Този пост jQuery пример пише 234 на конзолата.

    Ajax

    Можете да извършвате Ajax крос-браузър заявки, използвайки $ .ajax () jQuery, примери за които са асоциираните методи за изтегляне и обработка на изтрити данни: $ .ajax ({type: POST, url: ') /process/submit.php ', data: {name: John, местоположение:' Boston ',},}) свърши (функция (msg) {alert (' Data Saved: '+ msg);}) файл (функция (xmlHttpRequest, statusText, errorThrown) {alert ('Неуспешно изпращане на вашето съобщение. Nn' + 'XML Http Request:' + JSON.stringify (xmlHttpRequest) + ', nStatus Текст:' + statusText + ', nError Thrown: '+ errorThrown};}); В този пример сървърът има име на данни = John и location = Boston за /process/submit.php. Когато тази заявка е завършена, функцията се извиква, за да предупреди потребителя. Ако заявката не успее, тя ще предупреди потребителя за състоянието на грешката на заявката и за специфичната грешка.

    Plugins

    Архитектурата jQuery позволява на разработчиците да създават персонализиран код за разширяване на различни функции. В интернет има хиляди допълнителни модули, които покриват редица функции, като напримерAjax помощници, уеб услуги, динамични списъци, XML и XSLT инструменти, влачене и пускане, събития, обработка на бисквитки и модални прозорци. Има алтернативни плъгини за търсачки, като jquer.in, които използват по-специализирани подходи, като например изброяване само на приставки, които отговарят на определени критерии (например тези, които имат общо хранилище на кода). Разработчикът предоставя на Учебния център jQuery за начинаещи, което може да помогне на потребителите да разберат javascript и да започнат да разработват приставки.

    jQuery UI

    jQuery UI е колекция от GUI джаджи, анимирани визуални ефекти и теми, изпълнени с jQuery CSS (javascript библиотека), каскадни стилови листове и HTML. Според javascript, Libscore, jQuery интерфейсът се използва на повече от 197 000 най-популярни уебсайта, което го прави втората най-популярна JS библиотека. Най-известните са Pinterest, PayPal, IMDb, The Huffington Post и Netflix.
    JQuery UI е безплатна и отворен код, лицензирана от MIT. За първи път е публикуван през септември 2007 г.

    jQuery Mobile

    jQuery Mobile е уеб-базирана инфраструктура за сензорна оптимизация (известна още като мобилна инфраструктура). Основният фокус на разработката е създаването на инфраструктура, съвместима с широка гама от смартфони и таблетни компютри, необходими за разрастващия се пазар на gadget технология. Съвместим с други платформи за мобилни приложения, като PhoneGap, Worklight и много други.

    Свързани публикации