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 Manipulation" ... и така чак до неделя сутринта когато просто имах нужда да сънувам малко код и няколко скрипта, които ще ви покажа в някои от следващите статии.
Държа да отбележа, че аз не съм JavaScript или jQuery експерт. Бих се квалифицирал, като средностатистически потребител на jQuery, който обича предизвикателствата що се отнасят до HTML и CSS. Следващите редова са взаимствани от различни уроци, препоръки и коментари които съм чел някъде из интернет и старателно съм си изваждал в .txt файл.
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();
