Основно ръководство за JQuery за програмисти с JavaScript

реклама

JQuery е една от най-популярните JavaScript библиотеки на планетата (какво е JavaScript Какво е JavaScript и може ли интернет да съществува без него?JavaScript е едно от онези неща, които мнозина приемат за даденост. Всички го използват. Прочетете още ). Към момента на неговото създаване, JavaScript (ще бъде посочен като JS от тук нататък) беше на съвсем различно място. 14 януари 2006 г. беше денят, в който jQuery беше обявен в BarCampNYC. JS все още липсваше донякъде - браузърите поддържаха всички части от него, но трябваше да се приложат много хакове и обходни решения за съответствие.

JQuery дойде и промени всичко. JQuery улесни писането на код, съвместим с браузъра. Можете да анимирате уеб страници, без да имате специалност компютърни науки - Ура! След десет години jQuery все още ли е крал и ако никога досега не сте го използвали, какво можете да направите с него?

Освен четките на вашите JavaScript умения, може да искате да прочетете някои Ръководства за HTML и CSS Научете HTML и CSS с тези стъпка по стъпка уроци

Любопитни ли сте за HTML, CSS и JavaScript? Ако смятате, че имате умение да научите как да създавате уеб сайтове от нулата - ето няколко страхотни ръководства стъпка по стъпка, които си струва да опитате. Прочетете още първо, ако и вие не сте запознати с тях.

Ние имаме въведе jQuery Направете уеб интерактивна: Въведение в jQueryjQuery е скриптова библиотека от страна на клиента, която почти всеки съвременен уебсайт използва - прави уебсайтовете интерактивни. Това не е единствената Javascript библиотека, но тя е най-развитата, най-поддържаната и най-широко използваната ... Прочетете още преди това, така че това ръководство за JQuery ще се фокусира върху действителното кодиране.

Приготвяме се да започнем

Може да сте запознати с начина на JS за избор на идентификационни номера от модела на документния обект (DOM):

document.getElementById ( "Фу ');

Е, JQuery прави тази стъпка по-напред. Не е нужно да извиквате различни методи, за да изберете класове, идентификатори или множество елементи. Ето как избирате идентификатор:

$ ( "# Бар ');

Лесно нали? Точно същият синтаксис е да изберете почти всеки DOM елемент. Ето как избирате класове:

$ ( "Баз. ');

Можете също така да проявите творчество за някаква истинска сила. Това избира всички TD елементи вътре в a маса с изключение на първата.

$ ('table td'). not (': първи');

Забележете как имената на селектора съвпадат почти точно с техните CSS колеги. Можете да зададете обекти на редовен JS променливи:

var xyzzy = $ ('# parent .child');

Или можете да използвате променливи jQuery:

var $ xyzzy = $ ('# parent .child');

Знакът на долара се използва единствено за означаване, че тази променлива е обект jQuery, нещо, което е много полезно за сложни проекти.

Можете да изберете родителя на елемент:

$ ( "Дете") родител (.);

Или братя и сестри:

братя и сестри $ ( "дете") (.);

Трябва да изпълните кода си, след като браузърът е готов. Ето как правите това:

$ (document) .ready (function () {console.log ('готов!'); });

Още сила

Сега, когато знаете основите, да преминем към някои по-сложни неща. Дадена HTML таблица:

Марка
Модел
цвят


брод
ескорт
черно


мини
бъчвар
червен


брод
Кортина
бял

Кажете, че искате да направите всеки друг ред различен цвят (известен като Зебра ивици). Сега можете да използвате CSS за това:

#cars tr: nth-child (even) {фон-цвят: червен; }

Ето как това може да се постигне с jQuery:

$ ('tr: even'). addClass ('even');

Това ще постигне същото, при условие че дори е клас, дефиниран в CSS. Забележете как не е необходимо пълното спиране преди името на класа. Това са обикновено изисква се само за главния селектор. В идеалния случай бихте използвали CSS за това за начало, въпреки че не е голяма работа.

JQuery може също да скрие или премахне редове:

. $ ( "# FordCortina") скрий ();. $ ( "# FordCortina") премахване ();

Не е нужно да криете елемент, преди да го премахнете.

Функции

Функциите на JQuery са точно като JS. Те използват къдрави скоби и могат да приемат аргументи. Там, където става наистина интересно, е чрез обратни повиквания. Обратните повиквания могат да бъдат приложени към почти всяка jQuery функция. Те определят парче код, който да се стартира, след като завърши основното действие. Това осигурява огромна функционалност. Ако те не съществуват и сте написали кода си, очаквайки, че той ще се изпълнява по линеен начин, JS ще продължи да изпълнява следващия ред код, докато чака предишния. Обратните повиквания гарантират, че кодът работи само след като първоначалната задача е завършена. Ето пример:

$ ('table'). скрий (функция () {сигнал ('MUO правила!'); });

Бъдете предупредени - този код изпълнява сигнал за всеки елемент. Ако вашият селектор е нещо на страницата повече от веднъж, ще получите множество сигнали.

Можете да използвате обратни обаждания с други аргументи:

$ ('tr: even'). addClass ('even', function () {console.log ('Hello'); });

Забележете как има запетая след затварящите скоби. Това обикновено не е необходимо за JS функция, но този код все още се счита за един ред (тъй като обратният разговор е вътре в скоби).

Анимация

JQuery улеснява анимирането на уеб страници. Можете да избледнявате елементи във или извън:

$ ( ". Fade1") fadeIn ( "бавно. '); $ ('# fade2'). fadeOut (500);

Можете да зададете три скорости (бавна, средна, бърза) или число, представящо скоростта в милисекунди (1000ms = 1 секунда). Можете да анимирате почти всеки CSS елемент. Това анимира ширината на селектора от неговата текуща ширина до 250px.

$ ('foo'). анимация ({width: '250px'});

Не е възможно да анимирате цветовете. Можете да използвате и обратни повиквания с анимация:

$ ('bar'). animate ({височина: '250px'}, функция () {$ ('bar'). анимация ({width: '50px'} });

Loops

Loops наистина блести в jQuery. Всяка () се използва за итерация над всеки елемент от даден тип:

$ ('li'). всеки (функция () {console.log ($ (това)); });

Можете също да използвате индекс:

$ ('li'). всеки (функция (i) {console.log (i + '-' + $ (това)); });

Това ще отпечата 0, тогава 1 и така нататък.

Можете също да използвате всеки () да повтаряте масиви, точно както в JS:

var cars = ['Ford', 'Jaguar', 'Lotus']; $ .each (автомобили, функция (i, стойност) {console.log (стойност); });

Обърнете внимание на допълнителния извикан аргумент стойност - това е стойността на елемента на масива.

Заслужава да се отбележи това всеки () мога понякога бъдете по-бавни от контурите JS на ванилия. Това се дължи на допълнителните разходи за обработка, които jQuery изпълнява. През по-голямата част от времето това не е проблем. Ако сте загрижени за производителността или работите с големи набори от данни, помислете за сравняване на кода си jsPerf на първо място.

AJAX

Асинхронен JavaScript и XML или AJAX наистина е много лесно с jQuery. AJAX захранва огромно количество интернет и това е нещо, което обхващаме част 5 Урок за jQuery (част 5): AJAX Them All!Когато наближаваме края на нашата миниурок поредица за jQuery, е време да разгледаме по-задълбочено една от най-използваните функции на jQuery. AJAX позволява на уебсайт да комуникира с ... Прочетете още от нашето урок за jQuery Урок за jQuery - Първи стъпки: Основи и селекториМиналата седмица говорих за това колко е важно jQuery за всеки модерен уеб разработчик и защо е страхотно. Тази седмица мисля, че е време да си изцапаме ръцете с някакъв код и да научим как ... Прочетете още . Той предоставя начин за частично зареждане на уеб страница - няма причина да презаредите цялата страница, когато искате само да актуализирате футболния резултат, например. jQuery има няколко AJAX метода, най-лесният натоварване ():

$ ( "# Баз") натоварване ( "някои / URL / page.html. ');

Това осъществява повикване AJAX към посочената страница (някои / URL / page.html) и прехвърля данните в селектора. Simple!

Можете да изпълнявате HTTP GET искания:

$ .get ('някои / url', функция (резултат) {console.log (резултат); });

Можете също да изпращате данни, като използвате POST:

$ .post ('some / other / url', {'make': 'Ford', 'model': 'Cortina'});

Предоставяне на данни от формуляра е много лесно:

$ .post ('url', $ ('form'). serialize (), function (result) {console.log (result); }

Най- сериализирате () функция получава всички данни от формата и ги подготвя за предаване.

обещания

Обещанията се използват за отложено изпълнение. Те могат да бъдат трудни за научаване, но jQuery го прави малко по-неприятно. ECMAScript 6 въвежда местни обещания на JS, обаче, поддръжката на браузъра е в най-добрия случай. Засега jQuery обещанията са много по-добри при кръстосаната поддръжка на браузъра.

Обещание е почти точно както звучи. Кодът обещава да се върне на по-късен етап, когато приключи. Вашият JavaScript двигател ще премине към изпълнение на някакъв друг код. Веднъж обещанието отзвучава (връща се), може да се изпълни някакъв друг код. Обещанията могат да се мислят като обратни повиквания. Най- jQuery документация обяснява по-подробно.

Ето пример:

// dfd == отложено. var dfd = $ .Deferred (); функция doThing () {$ .get ('some / slow / url', function () {dfd.resolve (); }); върнете dfd.promise (); } $ .when (doThing ()). тогава (функция () {console.log ('ДАЙ, приключи'); });

Забележете как е направено обещанието (dfd.promise ()) и се разрешава само когато AJAX повикването приключи. Бихте могли да използвате променлива, за да следите множество AJAX разговори и да извършите още една задача, след като всички са направени.

Съвети за изпълнение

Ключът за изтласкване на производителността на вашия браузър е ограничаването на достъпа до DOM. Много от тези съвети могат да се прилагат и за JS и може да искате да профилирате кода си, за да видите дали е неприемливо бавен. В настоящата епоха на високоефективни JavaScript двигатели, незначителните недостатъци в кода често могат да останат незабелязани. Въпреки това, все още си струва да опитате да напишете най-бързо изпълняващия се код.

Вместо да търсите DOM за всяко действие:

$ ('foo'). css ('фон-цвят', 'червен'); $ ('foo'). css ('цвят', 'зелен'); $ ('foo'). css ('ширина', '100px');

Съхранявайте обекта в променлива:

$ bar = $ ('foo'); $ bar.css ('фон-цвят', 'червен'); $ bar.css ('цвят', 'зелен'); $ bar.css ('ширина', '100px');

Оптимизирайте контурите си. Дадена ванилия за контур:

var cars = ['Mini', 'Ford', 'Jaguar']; за (int i = 0; i 

Макар и да не е присъщо лошо, този цикъл може да се направи по-бързо. За всяка итерация цикълът трябва да изчисли стойността на масива от автомобили (cars.length). Ако съхранявате това в друга променлива, ефективността може да бъде спечелена, особено ако работите с големи набори от данни:

за (int i = 0, j = автомобили. дължина; i 

Сега дължината на масива от автомобили се съхранява в к. Това вече не трябва да се изчислява при всяка итерация. Ако използвате всеки (), не е необходимо да правите това, въпреки че правилно оптимизираната ванилия JS може да надмине jQuery. Там, където jQuery наистина свети, е чрез скоростта на развитие и отстраняване на грешки. Ако не работите с големи данни, jQuery обикновено е повече от бърз.

Вече трябва да знаете достатъчно основи, за да сте jQuery нинджа!

Използвате ли редовно jQuery? Спряхте ли да го използвате по някакви причини? Кажете ни вашите мисли в коментарите по-долу!