Най-новата версия на Jquery. Свързване на библиотека jQuery с Blogger

Малък намек

Този сайт съдържа описание на почти всички функции на библиотеката jQuery, така че ако не разбирате някоя от функциите в примерите, можете бързо да разгледате нейното описание. И за да не губите време да го търсите, използвайте търсенето по клавиши: започнете да въвеждате името на функцията, която ви интересува, в полето "по клавиши".

Да започваме

След като прекарате известно време, опитвайки се да внесете динамична функционалност на страниците на вашия сайт, ще откриете, че постоянно следвате същия модел: първо намерете един или повече елементи на страницата и след това извършете някои действия върху тях, като скриване, преоразмеряване, позициониране, прозрачност , и т.н.

Използвайки обикновен javascript, всяка от тези задачи ще отнеме десетки редове програмен код(и много главоболия за това правилна работа v различни браузъри). Авторът на jQuery е проектирал своята библиотека по такъв начин, че най общи задачистават тривиални. Например, като този, използвайки функцията $ () от библиотеката, можете да намерите елементи на страницата по различни параметри:

И това е само малка част от всички възможности за намиране на елементи ( пълен списъкправила вижте раздела за селектори). След като изберете елементите, можете веднага да започнете да ги манипулирате, jQuery предоставя широка гама от методи за това (вижте разделите за манипулиране и ефекти). Ето някои от най-популярните:

По този начин само с един ред код можем да открием или променим css стойностите, атрибутите, html и текстовото съдържание на всички елементи на страницата. Наличието само на тези функции вече би направило jQuery незаменимо нещо. Тази библиотека обаче ви позволява да правите много повече, много повече.

$ () Функция

Функцията с лаконичното име $ () е може би най-важната в цялата библиотека. С негова помощ можете да намерите елементи на страницата (както вече видяхте), да добавите "в движение" нов html:

// създаваме div елемент и го добавяме в края на елемента със съдържание на id $("

Стартиране на скрипта

Преди да стартирате js-скрипта, трябва да сте сигурни, че частта от страницата, от която ще работи този скрипт, вече е заредена. Повечето програмисти използват събитието onload за това, което се случва, когато цялата страница приключи зареждането:

window.onload = функция () ()

Въпреки това, зареждането се случва, след като страницата е била напълно изобразена, включително зареждането на всички изображения, флаш банери и видеоклипове. Докато структурата на DOM дървото (елементи на страницата), с която обикновено работи скриптът, е готова много по-рано. В резултат на това скриптът работи много по-късно, отколкото би могъл. За този случай jQuery има готов метод, който се извиква, когато дървото на DOM е готово:

$ (документ) .ready (функция () ( // повикване желаните функциискрипт } ) ;

Методи вериги

Важна характеристика на повечето методи на jQuery е възможността да се свързват по веригата. Методите, които манипулират елементите на документа, обикновено връщат тези обекти за по-нататъшна употреба, което ви позволява да напишете нещо като следното:

$ ("# bigIt") .empty () .attr ("клас", "noContent"); // в резултат на това цялото съдържание ще бъде премахнато от елемента с идентификатора bigIt, // след което класът noContent ще бъде настроен към него.

тези вериги могат да се състоят от много Повече ▼методи. За четливост низовете често се изписват "колона":

$ ("div") // намиране на всички divs.родител () // намираме техните родителски елементи.css ("височина", "10px") // задаване на последната височина на 10 пиксела.fadeTo (0, 0,5) // задайте ги (родителски divs) на 50% непрозрачност.addClass ("divOwner"); // добавяне на класа divOwner към него

По този начин можете лесно да опишете всички действия, които се случват с избраните елементи, като избягвате използването на голям брой временни променливи.

Работа с набор от елементи

В допълнение към манипулирането на избраните елементи, jQuery ви позволява да работите със самия набор: да го модифицирате, както и да работите с елементите поотделно. Нека демонстрираме някои от възможностите:

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

Нека да отбележим разликите между методите get (i) и eq (i). Първият директно връща DOM обекта на елемента с номер i в набора (между другото номерацията започва от 0). Не можете да приложите jQuery методи към такъв елемент, но можете да приложите стандартен javascriptметоди. Методът eq (i), от друга страна, се връща i-ти елементпо такъв начин, че методите на jQuery да могат да бъдат приложени към него. Като цяло, за да могат елементите да прилагат методите на библиотеката jQuery, те трябва да са в така наречения обект jQuery, което връща функцията $ ().

Ключовият метод, на който се основават всички останали, е методът animate (), с който можете да зададете плавни промени в различни CSS свойства:

Анимиране (свойства,,,) Имоти- списък на CSS свойствата, включени в анимацията и техните крайни стойности. Посочено от обект във формат (ключ: стойност), например: (непрозрачност: 50, ширина: 100, височина: 200).
продължителност- продължителността на анимацията. Може да бъде посочено в милисекунди или стойността на низа "бързо" или "бавно" (200 и 600 милисекунди). облекчаване- промяна на скоростта на анимацията (дали ще се забави до края на изпълнението или, напротив, ще се ускори). Задава се от стойност на низ: "linear" и "swing" (за равномерна и ускорена анимация). Други опции можете да намерите в плъгините. обратно повикване- функция, която ще бъде извикана след края на анимацията.

Пример.Нека имаме елемент divс някакъв текст. Искаме плавно да скрием този елемент, да заменим текста и плавно да направим елемента видим:

$ ("# mydiv") .animate ((височина: "скрий"), 300) .text ("Нов текст") .animate ((височина: "покажи"), 300);

стойностите "скрий", "покажи" означават изчезването и появата на елемента, поради параметъра, към който се прилагат.

Има отделни методи за скриване и показване на елементи, както и промяна на тяхната прозрачност. Всички тези методи могат да бъдат намерени в секцията Ефекти. Трябва също да се отбележи, че когато няколко ефекта се извикват едновременно, по отношение на един елемент, тяхното изпълнение няма да се случи едновременно, а един по един. Например, когато изпълните следните команди:

$ ("# my-div") .animate ((височина: "скриване"), 1000); $ ("# my-div") .animate ((височина: "покажи"), 1000);

елемент с id my-div, ще избледнее от екрана в началото и след това ще избледнее отново. Анимациите обаче започнаха различни елементи, ще се изпълнява едновременно:

$ ("# my-div-1") .animate ((височина: "скриване"), 1000); $ ("# my-div-2") .animate ((височина: "покажи"), 1000);

Аякс

JQuery реализира възможността за отправяне на заявки към сървъра без презареждане на страницата, така наречената ajax технология. Основни функцииза да работи са post () и get () (има още по-ниско ниво, ajax (), но няма да го разглеждаме):

$ .post (url,,,) $ .get (url,,,) url- url-адрес, на който ще бъде изпратена заявката. данни- данни за изпращане на сървъра. Те трябва да бъдат представени в обект във формат: (fName1: value1, fName2: value2, ...). обратно повикване () - персонализирана функциякойто ще бъде извикан, след като сървърът отговори. тип данни- очаквания тип данни, които сървърът ще изпрати в отговор на заявката (подробности).

Помислете за примери с метод получаване, използването на втория метод е подобно. Нека направим най-простата ajax заявка: изпрати празна заявкакъм сървъра и ние няма да обработим отговора. Това може да се използва например за преброяване на броя на задържанията на мишката върху банер (сигнал ще бъде изпратен до сървъра при всяко задържане на мишката).

$ .get ("/plusOne.php");

Сега нека изпратим данните на сървъра и да ги обработим. Javascript ще изглежда така:

// Заявка за страницата http: //hostname/ajaxtest.php ще бъде изпратена до сървъра и са посочени два параметъра. // След получаване на отговор от сървъра, функцията onAjaxSuccess ще бъде извикана, която ще покаже // на екрана съобщение с данни, изпратени от сървъра.$ .get ("/ajaxtest.php", (param1: "param1", param2: 2), onAjaxSuccess); функция на AjaxSuccess (данни) ( // Това е мястото, където получаваме данните, изпратени от сървъра, и ги показваме на екрана.сигнал (данни); )

На сървъра, обработка Искане на Ajaxне се различава от обработката редовно искане(като при обаждане начална страницасайт):

В резултат на тази заявка на страницата ще се появи табела с текст "Получавам param1 = param1 и param2 = 2"

Използвайки тези методи, можете да поискате XML, който след това може да бъде обработен с обичайните jQuery методи без никакви проблеми. Да кажем, че на сървъра, който имаме Следваща страницагенериране на XML:

"Тип на съдържанието: текст / xml; набор от символи = utf-8") ; ?> Точка 1 Точка 2

Като заявите тази страница чрез метода get или post, получените данни могат лесно да бъдат обработени:

Зареждане () .offset () и .position ()

Свързване на jQuery към вашия сайт

За да може функционалността на библиотеката jQuery да стане достъпна на страниците на вашия сайт, трябва да изтеглите файла с библиотеката на официалния уебсайт на jquery (връзка с текст "Изтеглете компресирания производствен jQuery", за да изтеглите библиотека, щракнете върху връзката десен ключмишката и изберете "Запазване на връзката като .."). Полученият файл ще трябва да бъде качен на сървъра, където се намира вашия сайт, и този js-файл ще трябва да бъде свързан със страниците на сайта:

~ lt ~ тип скрипт = "текст / javascript" src = "js / jquery.min.js" ~ gt ~~ lt ~ / скрипт ~ gt ~

Тънкостите jQuery връзкина сайта, който можете да съберете.

Заглавия

Част от текста в тази статия е заимстван от статията "Запитване - следващо поколение Javascript" на списание RSDN. Това е една от първите статии за jQuery, благодарение на която вероятно се разбра за библиотеката най-голямо числоРускоезични програмисти. Въпреки това, на този момент, част от информацията в него вече не е от значение.

Преди да започнете да изследвате библиотеката jQuery, трябва свържете се с нашия документ... За да направите това, нека създадем най-много проста страница, без излишни излишъци - index.html, и върху него ще свържем нашия jq (съкратено от jQuery, свикнете с него).

Как да включа библиотеката jQuery? И къде мога да взема кода?

Има 2 начина за свързване на библиотеката към сайта... Преди да започна да описвам и двата метода, не повтаряйте веднага след мен. Първо прочетете за тези методи и след това изберете метода, който ви подхожда и свържете всичко. Не се безпокой - jQuery е свързан с един ред кодследователно, ако нямате памет като риба, тогава всичко ще бъде наред.

Първият начин - изтегляне от jquery.com

Има един такъв прекрасен сайт - това е официалният сайт на библиотеката. Както всяка библиотека, jq се разработи прости програмисти... Те разбраха, че можете да свиете езика JavaScript програмиране, започна да работи дълго и упорито - и в крайна сметка получихме най-разпространената библиотека, обичана от уеб програмистите.

Важно!Всички снимки могат да се щракнат.

Свързване на библиотека jQuery от официалния сайт

1. Отиваме на официалния уебсайт;
2. Кликнете върху връзката „Изтегляне“;
3. Ако имате нужда от олекотена (кондензирана) версия, кликнете върху връзката в блок "3";
4. Ако имате нужда от версия за уеб разработчици, кликнете върху връзката в блок "4";
5. Изтегляне на библиотеката:
6. Попълнете папката, където се намира файлът index.html.

Каква е разликата между компресираната версия и версията за уеб разработчици?

На снимките по-долу съм показал малки парчета код от две версии.

По принцип това са 2 абсолютно идентични версии. Единствената разлика между тези файлове е, че в компресираната версия на jQuery целият код е написан на един ред. В jQuery, който е предназначен за разработчици - целият код идва с табулатори, интервали и съответно може лесно да се чете.

Тъй като браузърът (а именно браузърът обработва този код) не вижда разликата между тези два файла, по-добре е да използвате компресираната версия на вашите „живи“ проекти, защото е много по-лесно (поради липсата на интервали ). И както знаете, толкова по-малко тежат изходни файловесайтове - толкова по-бързо се зарежда, което се отразява положително на поведенческия фактор.

Блок "1"- размер на файла на компресираната версия - 96 Kb.

Блок "2"- размер на файла с версията за разработчици - 280 Kb.

Пълната версия е почти три пъти по-тежка!

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

Аз лично никога не съм се качвал там, от три години нямаше такава нужда. И не обичам особено да чета 10 хиляди реда.

Тези 2 версии могат да бъдат разграничени по името. В компресираната версия .js винаги се предхожда от .min (на фигурата това е показано в блока под номер "3"). Ако се занимавате с уеб разработка от дълго време, то вероятно сте забелязали този „трик“ в други библиотеки.

Как да включа jQuery?

Да, връзката е същата като css, само с помощта на различен маркер.

Внимание!Целият код, който ще напишете с помощта на jq, трябва да бъде написан под връзката на тази библиотека. V в противен случай- ще получите грешка и нищо няма да работи.

Вторият начин - използваме Google

Защо ви помолих да не бързате да изтегляте тази библиотека? Да, всичко е просто - може да се свърже директно с Google.

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

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

Защото google - много голяма компания, техните сървъри никога няма да се сринат, така че можете да сте напълно уверени, че jQuery винаги ще работи на вашия сайт.

Но има един недостатък- ако свържете библиотеката от Google, тогава при разработването на сайт трябва да имате достъп до Интернет по всяко време.

Е, сега, след като описах и двата метода, можете да изберете този, който е по-подходящ за вас и да го свържете с вашия html документ.

Тестване

След като сте включили библиотеката, препоръчително е да я тествате. По-долу съм дал част от jq-кода - не навлизайте в подробности (ще има допълнителни уроци за това), какво пише там, просто напишете същото и вижте резултата.

Някакъв текст

След стартиране на страницата трябва да се появят думите "Някои текст тук". И след като кликнете върху този текст - той трябва да изчезне. Ако всичко се е получило точно по този начин за вас, значи сте направили всичко както трябва.

P.S.

Първият въпрос, който възниква, когато започнете да работите с библиотеката jQuery, е как да я свържете? Странно е, че не писах за това по-рано и сега реших да запълня тази празнина.

В тази статия ще ви кажа как правилно да добавите jQuery на обикновен html сайт и на популярни двигатели.

Включително jQuery от страницата на вашия сайт

Най-често срещаният начин за включване на библиотека. Първо трябва да изтеглите най-новата версия от уебсайта на разработчика. Страницата за изтегляне съдържа няколко версии на библиотеката, например сега се предлага изтегляне на "Компресиран, производствен jQuery 3.1.1" и "Некомпресиран, разработка на jQuery 3.1.1". Първата опция е компресирана версия на библиотеката, всички коментари се премахват оттам, в този случай библиотеката заема много по-малко място, следователно страницата, към която ще бъде свързана, ще се зарежда по-бързо. Вторият вариант е, грубо казано, източникбиблиотеки, той е структуриран в лесна за четене, анотирана форма и е предназначен предимно за разработчици. Затова препоръчвам да използвате компресираната версия на библиотеката.

След като библиотеката се зареди, трябва да я поставите на сървъра, където се намират файловете на сайта. Обикновено създавам папка "js" в корена на сайта, в който копирам необходими библиотекии там поставям файла с моите функции.

Сега можете да отидете директно към връзката jQuery. Структурата на уеб страницата, към която свързвате jQuery, може да бъде различна. Но задължително съдържа HTML тагове, ГЛАВА и ТЯЛО. Така че, за да свържете jQuery, трябва да добавите маркера SCRIPT с връзка към библиотеката вътре Етикет HEAD.

В някои случаи библиотеката се включва преди затварящия етикет body, който е свързан с реда на обработка html страницабраузър. Тъй като браузърът чете редовете последователно, когато включите jQuery в края на файла, браузърът първо ще изобрази сайта и след това ще свърже динамиката. При бавна връзка този подход осигурява увеличаване на скоростта на зареждане на сайта и едва след това работата на плъзгачите и останалите. Кодът за такава връзка изглежда така:

Внимание!Препоръчително е да не променяте името на файла с библиотеката jQuery (често променяйте на jquery.js), тъй като по-късно запазвате официално имефайл ще ви помогне да видите коя версия на библиотеката използвате (в моя пример се използва версия 3.1.1).

Свързване на jQuery към страниците на вашия сайт от външни източници

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

Този метод на свързване се нарича "Свързване с CDN". Content Delivery Network или както по-често се нарича CDN (Content Delivery Network) е мрежа от сървъри по целия свят. Те помагат за подобряване на производителността на вашия уеб сървър и намаляване на натоварването на вашия трафик.

Най-популярните CDN за свързване на jQuery са:

Обикновено използвам връзката с Google Developers. Няколко фрагмента вече са подготвени за нас на страницата на проекта, просто копирайте реда, от който се нуждаем, и го свържете с файла. С този метод на свързване кодът ще изглежда така:

Предимството този метод, е, че много сайтове включват jQuery чрез API на Google, което означава, че с голяма степен на вероятност тази библиотека вече присъства в кеша на браузъра на потребителя и изобщо няма да бъде заредена втори път.

Свързване на jQuery с WordPress

Връзката с jQuery в WordPress се извършва автоматично, така че няма нужда да свързвате ръчно библиотеките на други версии. Това се случва в шаблона с използвайки phpкод:

В резултат на това низът за връзка jQuery ще се появи вътре в маркера HEAD.

Към момента на писане, jQuery v1.12.4 се доставя с WordPress, но, както можете да видите, версията на библиотеката е много различна от тази, която беше свързана в примерите по-горе. Възможно е да свържете най-новата версия на библиотеката, но има вероятност от конфликт.

За да избегнете конфликт, но в същото време да използвате версията на библиотеката, от която се нуждаете, трябва да използвате правилният начин jQuery връзки във файла functions.php: