JQuery е лекa cross-browser JavaScript библиотека, която набляга на взаимодействието между JavaScript и HTML.
Именно това изречение ме накара да обърна по-специално внимание на jQuery. Тъй като съм front-end developer, който не разбираше нищо от програмиране, често ми се налагаше да решавам дребни проблеми изцяло с HTML и CSS, както и доста често орязвах функционалността на даден проект, тъй като всяка дребна манипулация на HTML-а беше свързана с висенето при някой колега Developer, който решаваше тези проблеми или с лекота (заради добре написан HTML и CSS от мен), или с големи мъки (не добре написан HTML било то от мен или от самия него в стремежа си да не ме занимава излишно). За първи път имах възможността да се сблъскам с jQuery преди около две години, когато кръстосвайки интернет на длъж и на шир, попаднах на интересни jQuery скриптове, които ми направиха добро впечатление. Въпреки, че ми хареса още от пръв поглед не му обърнах голямо внимание и остана някъде в моите bookmarks. Преди около половин година в една петъчна вечер докато висях пред компютъра реших, че е време за крачка към нещо различно от HTML и CSS. Сетих се за jQuery, зачетох се и толкова ми допадна, че цяла вечер се мъчих да пиша скриптове и се възхищавах на простотата и яснотата с която правиш елементарни DOM манипулации. И така чак до неделя сутринта когато просто имах нужда да сънувам малко код и няколко скрипта, които ще ви покажа в някои от следващите статии.
Държа да отбележа, че аз не съм JavaScript или jQuery експерт. Бих се квалифицирал, като средностатистически потребител на jQuery, който обича предизвикателствата що се отнасят до HTML и CSS. Следващите редовe са взаимствани от различни уроци, препоръки и коментари, които съм чел някъде из интернет и старателно съм си изваждал в текстов файл.
1. Зареждане на jQuery библиотека
Съществуват два основни начина да заредите jQuery библиотеката на вашия сайт.
Начин 1 - Локално
Зареждаме библиотеката локално, както е направено в следващите редове код:
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // тук е мястото за вашия javascript код </script> </head> <body> <!-- тук е мястото за вашия HTML код --> </body> </html>
Начин 2 - Зареждане от Google
Google е домакин на няколко JavaScript библиотеки. Има няколко предимства, които не са за подценяване - спестява трафик, библиотеката ще се зареди много бързо от CDN-а на Google и най-важното, тя ще е кеширана ако потребителят, който посещава сайта ви е посетил сайт, който вече е заредил библиотеката от Google Code. Ето и пример за зареждане на jQuery библиотеката от Google :
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Зареждане на jQuery
google.load("jquery", "1.4.0");
google.setOnLoadCallback(function() {
// тук е мястото за вашия javascript код
});
</script>
</head>
<body>
<!-- тук е мястото за вашия HTML код -->
</body>
</html>
Лично аз препоръчвам, когато проектът ви се намира локално да използвате първия начин, за да избегнете неприятния момент, в който, имайки проблем с интернета се чудите защо това, което пишете не работи, а след финализиране на проекта да използвате втория начин за зареждане на jQuery библиотеката.
Разбира се могат да се използват и хитринки, които да разпознават дали сайтът се отваря локално или не и в зависимост от това да зарежда библиотеката по първия или втория начин.
2. jQuery изпълнява верижно всички методи, от които се нуждаете
Едно от най-красивите неща в jQuery е способността да се използват всички нужни методи един след друг навързани, като верига.
Например, ако искате да замените класа на един елемент, може да го направите така :
$('myElement').removeClass('red').addClass('green');
Разбира се, че удобствата на jQuery изобщо не свършват до тук. Да вземем например ситуация, в която искаме да оцветим всички клетки с клас "firstColumn" в синьо и всички клетки с клас "secondColumn" в червено. Можем да го направим така :
$('#myTable').find('.firstColumn').css('background','blue');
$('#myTable').find('.secondColumn').css('background','red');
Но има и по-лесен и удобен начин:
$('#myTable')
.find('.firstColumn')
.css('background','blue')
.end()
.find('.secondColumn')
.css('background','red');
3. Използвайте ваши собствени селектори
jQuery има много вградени селектори за избор на елементи от ID, клас, таг, атрибут и много други. Но какво правим, когато ни се наложи да изберем елементи въз основа на нещо друго и JQuery не разполага с избора?
Единият начин е да добавяме класове на елементите в самото начало и след това да ги използваме, но това е доста трудно и досадно решение.
Примерът, който използвам е най-добрия начин да си представите какви възможности има jQuery и с какъв арсенал разполагате:
$.extend($.expr[':'], {
over100pixels: function(a) {
return $(a).height() > 100;
}
});
$('.box:over100pixels').click(function() {
alert('Елементът, който кликнахте е с 100px по-висок');
});
За по-интересни примери може да потърсите в Google за "custom jquery selector".
4. Използвайте "noconflict"!
Повечето JavaScript библиотеки използват символа "$" , което води до много конфликти. Има много лесен и удобен начин за преименуване на стандартния jQuery object.
var $j = jQuery.noConflict();
$j('#myDiv').show();
5. Зареждайте JavaScript файловете в края на документа
Разбира се това не е нищо ново, но е доста важно и трябва да се спазва. Не забравяйте, че основната цел е възможно най-бързо зареждане на страницата за потребителя. Обикновено решаваме проблема със скоростта, като намалим размера на картинките, използваме така наречените sprites и какво ли още не. Но когато използваме JavaScript файл, който е с големи размери, той натоварва браузърът, следователно той не може да продължи зареждането на страницата, докато целият JavaScript файл не се зареди и така обезсмисляме останалата оптимизация. Когато това се случи, потребителите на въпросната страница ще трябва да чакат по-дълго, преди да видят желаната от тях информация. Ако имате JavaScript файл, чието единствено предназначение е да добавя ефекти или функционалност например, след кликване върху линк или бутон, то този файл не ви е нужен в самото начало на документа, а дори напротив той може да се зареди накрая и по този начин потребителят може да прегледа информацията преди да реши да кликне и да продължи напред.
Мисля с това да завърша първата част, а съвсем скоро очаквайте и втора.
Loading ...