jquery - основи, ефекти, селектиране
12-11-2009
Jquery е една от най-големите библиотеки която се разпространява от близо 3 години. Тя служи за улеснение на програмистите. Мощен инструмент с доста възможности. Без да знаете javascript благодарение на библиотеката на jquery с няколко реда код може да замените един тон javascript код. Повечето хора се плашат от думата библиотека. Това е просто един файл който се сваля от сайта на jquery и се добавя в index файла. В този урок ще видим повече ефекти и малко ajax.

Можете да изтеглите демо файловете от тук или да гледате видео урока.

Старал съм се да има максимално подробно описание и на много места наистина досадно. Повтарял съм неща, които трябва да се запомнят.

Урока е разделен на 3 части. Заглавията им и описанието може да ви се вижда много "елементарно" както и трябва да бъде.


Част първа използване на hide() и show() и работа с onclick.

Създайте един файл с име index.html или index.php както желаете. Изтеглете библиотеката (файлчето). За да добавим библиотеката в сайта ни трябва да сложим този ред между <head> и </head>

<script type="text/javascript" src="jquery.js">

За по-голямо удобство е най-добре да създадете нов файл с разширение .js за да може да се пише целия jquery код само в 1 файл а не в index файла.

Аз създадох файл и го нарекох learn.js
Добавете го в индекса с същия код като горния но променете името.

<script type="text/javascript" src="learn.js">

Отваряме го и добавяме тези редове

$(function(){ // $(function() { НЯКАКВО УСЛОВИЕ }); заменя $(document).ready(function() { НЯКАКВО УСЛОВИЕ }) . Не ви говори нищо? Този код служи за изпълнение на някакви действие след като страницата е заредена.
$("#show").hide(); // Тук добавям условието, че искам да се скрие елемента с id SHOW. Забележете как се задава. $("#show") избира елемента с id show и след това изпълнява действието hide() който служи за скриване на дадени елементи. Може да се зададе и с css - display: none;
});


function pokaji(){ //Създаваме функция pokaji когато тя бъде извикана ще бъде извършено някакво действие
$("#show").show(); //Подобно на горния код избираме елемента с id show но този път го показваме с show();
}

function skrij(){ //Създаваме функция skrij когато тя бъде извикана ще бъде извършено някакво действие
$("#show").hide(); // Тук добавям условието, че искам да се скрие елемента с id SHOW. Забележете как се задава. $("#show") избира елемента с id show и след това изпълнява действието hide() който служи за скриване на дадени елементи. Може да се зададе и с css - display: none;
}


Надявам се описанията да са достатъчни.

Отиваме в index файла, който създадохме преди малко и добавяме между <body> и </body> тези редове

<!-- Показване/скриване на елементи с Jquery и използване на click--><a href="#" onClick="pokaji()">Покажи</a>
<!-- Създаваме един линк който не води на никъде с id pokaji. Когато се натисне върху него нашата цел е да покаже DIV-а с id SHOW който се намира малко по-надолу -->|<a href="#" onClick="skrij()">Скрий</a>
<!-- Създаваме един линк който не води на никъде с id skrij. Когато се натисне върху него нашата цел е да скрие вече показания DIV с id SHOW -->
<div class="show" id="show">
<!-- Създаваме div с id SHOW. По него ще се ориентира jquery кода кога да го показва и скрива -->В първата част от урока вече се запознахме с jquery а сега и с създаването на функции и...
<br>
<a href="http://docs.jquery.com/Show" target="_blank">Jquery show()</a>
<br>
<a href="http://docs.jquery.com/Hide" target="_blank">Jquery hide()</a>
</div>


Вече може да запазим файловете и да отворим index файла. Трябва да имаме 2 линка. При натискането на единия, който пише "Покажи" ще се появи един "скрит" div със съдържанието което сме му задали. В случея то е линк към документацията на jquery, с която може да си помагате изключително много.


Част втора въведение в ajax използване на load

В тази част ще продължим с файловете от по-горния пример с вече добавената библиотека и файла learn.js. Тук ще ви покажа как може да добавяте различни файлове само с промяна на линка. При натискането на линка страницата НЕ СЕ ПРЕЗАРЕЖДА а добавя този файл.

Добавяме в index файла това:

<a href="#" onClick="ajaxtest('1')">Файл 1.html</a>
<!-- Целта на този линк е да му се зададе една функция която да бъде извиквана при натискане на линка. При натискането трябва да бъде зареден файла 1.html -->|<a href="#" onMouseOver="ajaxtest('2')">Файл 2.html</a>
<!-- В първата част и в началото на втората както виждате използваме onclick то служи когато се натисне бутона да изпълнява/зарежда някакво действие. Тук обаче аз използвам onmouseover. Служи когато се мине с мишката през линка/елемента да изпълнява някакво действие. -->
<div class="show" id="show1">
</div>


А в learn.js това:

function ajaxtest(val){ //Създаваме функция ajaxtest с параметър val. При извикването на функцията ще извърши някакво действие.
$("#show1").load("" + val + ".html"); // Забележете как се задава. $("#show") избира елемента с id show1 и след това изпълнява действието load("името на файла.html") който добавя файла в това id което сме избрали. Освен html файлове може да се добавят и други php, txt и т.н.
}


Нека създадем и 2 пробни файла с различни съдържание.

Кръстете ги1.html и 2.html добавете ги в директорията в която е и index файла.

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

Част трета ефекти

Подобно на предишните части ще използваме jquery и learn.js файла от тях.

В index файла добавяме:
<a href="#" onClick="slide()">SlideToggle демо</a>
<!-- Извикваме функцията slide при натискане на линка. -->|<a href="#" onClick="slidedown()">SlideDown демо</a>
<!-- Извикваме функцията slidedown при натискане на линка. -->|<a href="#" onClick="slideup()">SlideUp демо</a>
<!-- Извикваме функцията slideup при натискане на линка. -->
<br>
----
<br>
<!-- FadeIn FadeOut FadeTo --><a href="#" onClick="fadeOut()">fadeOut демо</a>
|<a href="#" onClick="fadeIn()">fadeIn демо</a>
|<a href="#" onClick="fadeTo()">fadeTo демо</a>
|
<div class="show" id="fade">
В третата част от урока се запознахме с:
<br>
<a href="http://docs.jquery.com/Effects/slideToggle" target="_blank">Jquery slideToggle</a>
<br>
<a href="http://docs.jquery.com/Effects/slideDown" target="_blank">Jquery slideDown</a>
<br>
<a href="http://docs.jquery.com/Effects/slideUp" target="_blank">Jquery slideUp</a>
<br>
<br>
<a href="http://docs.jquery.com/Effects/fadeIn" target="_blank">Jquery fadeIn</a>
<br>
<a href="http://docs.jquery.com/Effects/fadeOut" target="_blank">Jquery fadeOut</a>
<br>
<a href="http://docs.jquery.com/Effects/fadeTo" target="_blank">Jquery fadeTo</a>
<br>
</div>


А в learn.js файла:
function slide(){ //Създаваме функция slide когато тя бъде извикана ще бъде извършено някакво действие
$("#show").slideToggle("slow"); //SlideToggle се използва за слайдер. Много удобно и лесно се правят хубави менюта. Параметъра който има е показва колко бързо се изпълнява действието. "slow" може да бъде заменен с "normal" или "fast" както и милисекунди. Те не трябва да се слагат в кавички.
}

function slidedown(){ //Създаваме функция slidedown когато тя бъде извикана ще бъде извършено някакво действие
$("#show").slideDown("slow"); //slideDown е само слайдер надолу. При повторно натискане на бутона няма да има никакъв ефект.
}

function slideup(){ //Създаваме функция slideup когато тя бъде извикана ще бъде извършено някакво действие
$("#show").slideUp("slow"); //slideDown е само слайдер надолу. При повторно натискане на бутона няма да има никакъв ефект.
}

function fadeOut(){ //Създаваме функция slideup когато тя бъде извикана ще бъде извършено някакво действие
$("#fade").fadeOut("slow"); //fadeOut прави така, че скрива елемента който му зададем "ефектно". В случея този с id fade. Както по-горе съм написал за SlideToggle може да му се зададе каква да бъде скоростта на показване.
}

function fadeIn(){
$("#fade").fadeIn("slow"); //fadeIn прави така, че показва елемента "ефектно" който му зададем в случея този с id fade. Както по-горе съм написал за SlideToggle може да му се зададе каква да бъде скоростта на показване.
}

function fadeTo(){
$("#fade").fadeTo("slow", 0.50); //fadeTo служи за слагане на opacity (прозрачност) на даден елемент. Първото условие е да му се зададе бързината подобни на предишните 2 а вторият колко прозрачен да стане елемента. Както е зададено в момента на 0.50 това значи, че елемента ще стане прозрачен на 50%
}


В тази част може да се види как се слага opacity как се прави слайдер плавно показване/скриване на дадени елементи.

Моля четете коментарите в HTML-а и javascript-а.

За въпроси тук или във форума.





/ Трябва да сте регистриран за да напишете коментар /
От: stoqnski
13:01 13-11-2009
За начинаещите е мн.добре направен .

Btw: Музиката от видеото sucks :D
От: lam3r4370
9:36 14-11-2009
[[code]]
function ajaxtest(val){ //Създаваме функция skrij когато тя бъде извикана ще бъде извършено някакво действие
$("#show1").load("" + val + ".html"); // Тук добавям условието, че искам да се скрие елемента с id SHOW. Забележете как се задава. $("#show") избира елемента с id show и след това изпълнява действието hide() който служи за скриване на дадени елементи. Може да се зададе и с css - display: none;
}[[code]]
Тук си сгрешил при описанието,иначе урока е супер,помогна ми да разбера някои неща
От: admin
13:31 14-11-2009
Урока е редактиран.
От: ventsi_konov
9:08 03-02-2010
Много полезен урок, браво!
От: ventsi_konov
22:45 03-02-2010
Имам въпрос относно задаването на charset в файловете, които зареждаме с ajaxtest(). Направих всичко възможно за да направя charset="windows-1251", но винаги всички букви на кирилица излизат като въпросителни знаци на черни ромбове(мисля, че се сещате за какво говоря). Някой да има идея?
От: ventsi_konov
23:18 03-02-2010
Оправих се, трябваше да се запишат файловете в UTF-8
1