Запознавање со jQuery

Со популарната JavaScript библиотека jQuery можете да ги проширите дизајнерските способности на вашата страна повеќе отколку што може само со CSS. Доколку имате познавање од CSS, учењето на jQuery ќе ви биде доста полесно.

jquery

Што е jQuery?

Според jQuery.com, jQuery е брза и мала JavaScript библиотека со која многу лесно се креираат веб ефекти со само неколку линии код. jQuery е дизајниран да го смени начинот на пишување на JavaScript код, така што, 10 линии JavaScript код ќе се претворат во само 2 линии.

Зошто да користам jQuery?

  • затоа што е едноставен
  • затоа што е компатибилен во повеќето прелистувачи
  • користи CSS селектори

Прземање на библиотеката

Првиот чекор што треба да го направите е да ја преземате библиотеката. Посетете ја jQuery.com и кликнете на “Download jQuery”.

Поврзување на jQuery со вашиот проект

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//Вашиот код е тука
</script>
</head>

<body>
HTML кодот е тука
</body>
</html>

Активирање на кодот кога страната ќе биде вчитана

Првото нешто што програмерите на JavaScript го прават е додавање на код сличен на овој:

window.onload = function() { alert("Hello world!"); }

jQuery има полесен начин со кој ја проверува страната и чека да биде спремна за користење:

$(document).ready(function(){
alert("Здраво!");
});

//Или, пократок начин:

$(function(){
alert("Здраво!");
});

//Истото доколку кликнете на линк:

$(function(){
$("a").click(function(){
alert("Кликнавте на линк!");
});
});

jQuery Структура

$(selector).function(параметар);

Тука selector е DOM елемент, а function е jQuery функција.

Селектори:

  • Селекција по DOM елементи: $(‘h1’), $(‘div’), $(‘li’)…
  • Селекција по ID: $(‘#id’)
  • Селекција по класа: $(‘.class’)

Додавање на CSS класа

Друго што најчесто веб програметире користат е додавање и отстранување на CSS класа.
Најпрво додадете CSS стил на вашиот проект како овој:

<style type="text/css">
.test { font-weight: bold; }
</style>

Потоа со користење на addClass ќе направите сите линкови да станат здебелени:

$(function(){
$("a").click(function(){
$("a").addClass("test");
});

//или пак параграфи:
$("a").click(function(){
$("p").addClass("test");
});
});

За да ја отстранете класата користете removeClass:

$("a").removeClass("test");

Ефекти

Во јQuery има доста интересни ефекти кои ќе направат вашата страна по жива. За да видете еден од ефектите направете го следното:

$(function(){
$("a").click(function(){
$(this).fadeOut("slow");
});
});

Со ова, доколку кликнете на некој линк тој полека ќе исчезне.

jQuery упатство за користење:

jquery

Ова беше само кратко запознавање со jQuery. Во следните денови продолжуваме со доста интересни тренинзи.

gravatar
Автор: Даниел Брзанов
За авторот: Здраво! Јас сум Даниел a.k.a. Delicon, се занимавам со веб дизајн и програмирање повеќе од 10 години и сакам да го споделам своето знаење со сите што се заинтересирани за тоа.

1 коментар

  1. На еден проект на кој работам од неодамна ќе употребиме jQuery и ќе го кустомизираме од аспект на дизајн (тема, шема на бои). Интересно е што овие виџети ќе ги комбинираме со некои од Dojo (http://www.dojotoolkit.org/) и некои наши. А демо екраните ги правевме со YUI, ха, ха, ха…

    Корисничкиов интерфејс за веб е многу изменет во последнава деценија (на подобро, ама и на посложено). Се зголеми конкуренцијата, сега покрај добар engine под хауба, мораш да имаш и eye-candy интерфејс. 🙂