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

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

Пример за JQuery

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

Примери на 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 като избледняване и избледняване при скриване на елементи, оживяване и работа с 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 от John Recig и е повлиян от ранната cssQuery библиотека на Дийн Едуардс. В момента той се поддържа от екип за развитие, ръководен от Тими Уилисън (със селектор JQuery - Sizzle, ръководен от Ричард Гибсън).

Удобства

Библиотеката включва следните функции:

• избор на елементи от DOM, като се използва мулти-сървърния механизъм на селектора с отворен код Sizzle;
• подчертаване на проект за манипулиране на DOM, базиран на CSS селектори, който използва имената и атрибутите на елементите, като id и class, като критерии за избор на възли в DOM;
• събития;
• ефекти и анимации;
• Аякс;
• обекти, отложени и обещаващи да контролират асинхронната обработка;
• анализиране на JSON;
• разширяемост чрез приставки;
• Помощни програми, като функционално откриване;
• Съвместимост означава, че първоначално е наличен в съвременни браузъри, но се нуждаят от по-ранни версии, като inArray () и всеки (), мулти-браузър (да не се бърка с различни браузъри).

използването на

Библиотеката jQuery е единствен jаvascript файл, съдържащ всички негови общи DOM функции, събития, ефекти и Ajax. Тя може да бъде включена в уеб страница чрез препратка към локално копие или към едно от множеството копия на публични сървъри. Библиотеката разполага с мрежа за доставка на съдържание (CDN), хоствана от MaxCDN.

Пример за jQuery в PHP:

стилове

jQuery има два стила на използване:

1. Чрез функцията $, която е фабричен метод за обекта jQuery. Тези функции, често наричани команди, са непокътнати, тъй като те всички връщат jQuery обекти.
2. Чрез функции за $ - префикс. Това са сервизни функции, които не засягат пряко обекта.

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

Режим без конфликти

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

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

Функциите за обратно извикване за обработка на събития за елементи, които все още не са заредени, могат да бъдат регистрирани в .ready () като анонимни функции. Тези манипулатори ще бъдат извикани само когато събитието се задейства. Например, следният код добавя манипулатор за кликване върху елемент от IMG изображение:

$ (функция () {

$ (`img`) на (`кликнете`, функция () {

// обработва събитието за кликване върху всеки IMG елемент на страницата

});

}).

Някои функции връщат определени стойности (например $ (`# input-user-email`)) Val ()). В тези случаи веригата не работи, защото стойността не се отнася за обекта jQuery.

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

В допълнение към достъпа до възлите на DOM чрез йерархията на обектите, е възможно също така да се създадат нови елементи, ако низът преминава като аргумент към $ (), изглежда като HTML. Например, ред намира елемент за избор на HTML с лични карти и добавя елемент с опция с VAG стойност и текст на Фолксваген:

$ (`# select carmakes`)

.добавете ($ (`")

.attr ({value: VAG})

.добави (Volkswagen)).

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

Функциите на JQuery с $ prefix са полезни функции, които влияят на глобалните свойства и поведение. Следният пример използва функцията each (), която итерира чрез масиви:

$. всяко ([1,2,3], функция () {

console.log (това е + 1);

});

Този пример за публикуване jQuery пише 2, 3, 4 за конзолата.

Аякс

Можете да изпълнявате заявки за Ajax в браузъра, като използвате $ .ajax () jQuery, който може да бъде пример за свързани методи за зареждане и обработка на отдалечени данни:

$ .ajax ({

тип: POST,

url: `/process/submit.php`,

данни: {

име: Джон,

местоположение: "Бостън",

}

}) направено (функция (msg) {

сигнал ("Запазени данни:" + msg);

}) неуспешно (функция (xmlHttpRequest, statusText, errorThrown) {

нотификация (

"Вашето съобщение не може да бъде изпратено. N n `

+`XML Заявка за Http:` + JSON.stringify (xmlHttpRequest)

+ `, nStatus Text:` + statusText

+ `, nРазреждане на грешката:` + грешкаТроен);

});

В този пример сървърът посочва името на данните = John и location = Boston за /process/submit.php. Когато тази заявка бъде завършена, функцията се извиква, за да предупреди потребителя. Ако заявката не успее, тя предупреждава потребителя за грешката, състоянието на заявката и конкретната грешка.

плъгини

Архитектурата на jQuery позволява на разработчиците да създават кода за включване, за да разширят различните функции. На интернет, хиляди плъгини на разположение, които обхващат широка гама от функции, като например Ajax помощници, уеб услуги, динамични списъци, XML и XSLT инструменти, плъзнете и пуснете, събитие, управление на бисквитки и модални прозорци.

Има алтернативни плъгини за търсачки като jquer.in, които използват по-специализирани подходи като посочването само плъгини, които отговарят на определени критерии (например тези, които имат публичен код хранилище). Разработчикът предоставя "Център за обучение" - ресурс за jQuery за начинаещи, който може да помогне на потребителите да разберат jаvascript и да започнат да разработват приставки.

jQuery UI

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

jQuery UI са безплатни и с отворен код, разпространявани от Фондацията под лиценза MIT. За първи път е публикуван през септември 2007 г.

jQuery Mobile

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