Fridaycode.net

На всички ни е ясно, че на неописуемо голямата интернет сцена нещата от край време се развиват светкавично бързо. Разбира се, това води и до постоянното развитие на хората, които стоят зад всичко това - дизайнери, девелъпъри, администратори и т.н. Но за да вървиш ръка за ръка със света около теб, трябва да се следят последните тенденции в технолгиите. В конкретния пример ние ще се фокусираме върху моментното състояние на една от най-популярните JavaScript библотеки - jQuery.

За нас тя е предпочитана, но все пак ето на вашето внимание най-популярните JavaScript Frameworks:

1. jQuery

2. Yahoo! User Interface Library (YUI)

3. Prototype

4. Dojo

5. Ext Javascript Library

6. MooTools

7. MochiKit

Както вече разбрахте, в тази статия ще се опитам да ви запозная с една от най-популярните JavaScript библиотеки, а именно jQuery. Но нека преди това да започнем малко по-отдалеч.

Защо да използваме JavaScript библиотека?

Ролята на един уеб девелъпър не е да дебъгва часове наред, а да създава код, който да изпълнява определени задачи свързани пряко или не с действията на потребителя. Точно за това тук мотото на jQuery "write less, do more" влиза в приложение.

Преодоляване на различията в браузърите

Няма по-мръсна работа от това да пишеш за няколко браузъра и Internet Explorer. Различната поддръжка на DOM елементите и тяхната манипулация в повечето случаи изисква маса код за създаване на един прост ефект с JavaScript. С помощта на JavaScript библиотека обаче много голям процент от проблемите са решени. Тя ви осигурява достъп до API (Application Programming Interface), който се занимава пряко със задачите, които действително искате да се изпълнят. Всичко това ви позволява да не се притеснявате дали дадено действие ще работи на даден браузър или не. Разбира се, това никога не е на 100% сигурно и както обичаме да казваме с колегите "Тестване му е майката!".

Изпълнение на сложните задачи с лекота

Eднa от най-важните черти на всяка JavaScript библиотека е способността и да манипулира елемент или съвкупност от елементи на дадена уеб страница само с един ред код. Представете си, че имате нужда последният елемент от група елементи да има точно определен class, например:

<ul>
	<li>Home</li>
	<li>About</li>
	<li>Service</li>
	<li class="last-element">Contacts</li>
</ul>

С jQuery това се постига лесно :

$("ul li:last").addClass("last-element");

Ако се чудите каква е разликата между това дали вие или JavaScript-a ще добави class="last-element" на последния елемент, ще ви дам тема за размисъл. Представете си, че всяко едно <li> се генерира през някакъв вид CMS система, чрез която лесно променяте положението и броя на бутоните в навигацията. Неприятно ще е ако всеки път, когато клиентът ползва тази система променя мястото или броя на бутоните, нали?

CSS концепция

Много важно изискване е силното познаване на CSS. Причината за това е, че в jQuery много често се използва CSS-базиран синтаксис за манипулиране на DOM елементи.
Преди да се впуснете в използването на jQuery ще е полезно да се запознаете с:

Type selectors

Това са селектори на HTML тагове или XHTML елементи.

Class selectors

Toва Class е име, предшествано от една точка (.).

ID selectors

Toва ID е име, предшествано от хеш символ (#).

Descendant Selectors

Те се използват, за да изберете елементите, които са потомци на даден елемент в документа.

Child Selectors

Те се използват, за да изберете елементите, които са деца на даден елемент в документа.

Attribute Selectors

Те се използват, за да изберете елемент на база негов атрибут.

CSS Specificity

Тъй като CSS Specificity не може да бъде обяснена с две думи може да прочетете повече за нея тук.

The Cascade & Inheritance

Каскадването и наследяването също не могат да се обяснят лесно. За повече инфо прочетете тук.

Повечето от горепосочените понятия са много познати на всички съвременни front-end девелъпъри. В момента не всички от тях се поддържат при различните браузъри, но благодарение на jQuery нещата се уеднаквяват. jQuery не само включва основните селектори (type, class и ID), но също така използва Descendant и Child Selectors. Те не се поддържат от всички браузъри в момента, но благодарение на вградената браузър нормализация на jQuery, проблемът се решава. Това помага бързо и лесно да създавате мощни приложения.

Including jQuery - или как да заредим jQuery библиотеката в нашата страница

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

Първи начин - локално зареждане

Нека първо свалим jQuery библиотеката от http://jquery.com/ и след това направим най-обикновен HTML файл, който ще съдържа ето този код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Title</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		// тук е мястото за вашия javascript код
	</script>
</head>
<body>
	<!-- тук е мястото за вашия HTML код -->
</body>
</html>

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

Втори начин - зареждане от Google

Google е домакин на няколко JavaScript библиотеки. Има няколко предимства, които не са за подценяване - спестява трафик, библиотеката ще се зареди много бързо от CDN-а на Google и най-важното, тя ще е кеширана ако потребителят, който посещава сайта ви е посетил друг сайт, който вече е заредил библиотеката от Google Code. Ето и пример за зареждане на jQuery библиотеката от Google:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Title</title>
	<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>

Да напишем няколко реда код!

За да започнем писането на нашите първи редове JavaScript код е нужно те да са на правилното място в HTML страницата ни. Както се вижда от примерите горе, тяхното място е тук:

<script type="text/javascript">
	// тук е мястото за вашия javascript код
</script>

Преди да започнем манипулирането и взаимодействието с елементи, ще се научим как да изберем даден елементи. Ако сте запознати с CSS селекторите, то ще ви е много лесно да усвоите следващите редове. За да изберем един елемент с jQuery, ние използваме символа $, последван от скоби: $ ("селектор"). Например, за да изберете всички div елементи в страницата, е нужно да напишем просто $("div"). Лесно, а? Ето една таблица с по-използваните селектори.

Селектор	Пример	Описание
*	$('*');	Всички елементи в документа
#id	$('#id');	Всички елементи с id="#id"
.class	$('.class')	Всички елементи с class="class"
element	$('element')	Елементи от документа, като например table, ul, li, a и т.н.
a, b, c. … n	$('th, td, .class, #id')	Този метод се изплозва за изброяване на елементи от документа, които искаме да изберем
parent child	$('li a')	Този метод се използва за избиране на всички елементи "a", които се намират в елемент "li"
:first	$('ul li:first');	Избира само първия елемент "li", който се намира в елемент "ul"
:last	$('ul li:last');	Избира само последния елемент "li", който се намира в елемент "ul"
:not	$('input:not(:checked)');	Избира всички елементи, които НЕ са checked - в случая всички input елементи
:has	$('input:has(:checked)');	Избира всички елементи, които СА checked - в случая всички input елементи
:odd	$('ul li:odd');	Избира всички нечетни елементи
:even	$('ul li:even');	Избира всички четни елементи
:eq(n)	$('ul li:eq(3)');	Избира номериран елемент, определен от N. В примера се избира третият елемент (започва да брои от нула).
:gt(n)	$('ul li:gt(3)');	Избира всички елементи, които са по-големи от N. В примера се избират всички елементи по-големи от три (започва да брои от нула).
:lt(n)	$('ul li:lt(3)');	Избира всички елементи, които са по-малки от N. В примера се избират всички елементи по-малки от три (започва да брои от нула).
:nth-child(n)	$('ul li:nth-child(n)');	Returns the nth child in a result set (one based)
:header	$(':header');	Избира всички заглавни елементи, като например h1, h2, и т.н.
:animated	$('ul:animated');	Избира всички елементи, които в момента се анимират
:contains(text)	$(':contains(hello)');	Избира всички елементи, които съдържат в случая "hello"
:empty	$(':empty');	Избира всички елементи, които не съдържат други елементи
:hidden	$('ul:hidden');	Избира всички елементи, които са скрити с CSS или имат свойство "hidden"
:visible	$('ul:visible');	Избира всички видими елементи
[attribute]	$('[href]');	Избира всички елементи, които имат зададен атрибут. В случая всички, които имат "href".
[attribute=value]	$('[rel=external]');	Избира всички елементи, които имат зададен атрибут със стойност. В случая атрибут "rel" със стойност "external".
['attribute!=value']	$('[rel!=external]‘);	Избира всички елементи, които имат зададен атрибут със стойност различна от зададената. В случая атрибут "rel" със стойност различна от "external".
:input	$(':input');	Избира всички елементи като input, select, textarea и button
:text	$(':text');	Избира само инпут елементи от типа "text"
:radio	$(':radio');	Избира само инпут елементи от типа "radio"
:checkbox	$(':checkbox');	Избира само инпут елементи от типа "checkbox"

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

Пример

Нека разгледаме този пример. С него ще си обясним визуално всичко казано до сега.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jQuery за начинаещи</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('.btn1').click( function(){
				$('.demo1 .content:first').addClass('clicked');   //Добавяме клас 'clicked' на първия елемент с клас "content"
			});

			$('.btn2').click( function(){
				$('.demo1 .content:last').addClass('clicked');    //Добавяме клас 'clicked' на последния елемент с клас "content"
			});

			$('.btn3').click( function(){
				$('.demo1 .content:eq(2)').addClass('clicked');   //Добавяме клас 'clicked' на третия елемент с клас "content" (броим от елемент 0)
			});

			$('.btn4').click( function(){
				$('.demo1 .content').animate({height: '300px', width: '180px', padding: '20px'}, 1000);   //Добавяме клас 'clicked' на третия елемент с клас "content" (броим от елемент 0)
			});
		});
	</script>
</head>
<body id="page_bg">
	<div class="navigation">
		<a href="#" class="button btn1">:first</a>
		<a href="#" class="button btn2">:last</a>
		<a href="#" class="button btn3">:eq(2)</a>
		<a href="#" class="button btn4">animate</a>
		<a href="./" class="button btn5">Изчисти всички промени</a>
	</div>
	<div class="demo1">
		<div class="content c1">
			<h2>1. What is Lorem Ipsum?</h2>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		</div>
		<div class="content c2">
			<h2>2. Why do we use it?</h2>
			<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
		</div>
		<div class="content c3">
			<h2>3. Where does it come from?</h2>
			<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.</p>
		</div>
		<div class="content c4">
			<h2>4. Where can I get some?</h2>
			<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
		</div>
		<div class="content c5">
			<h2>5. Lorem ipsum dolor sit amet...</h2>
			<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
		</div>
		<div class="content c6">
			<h2>6. The standard chunk</h2>
			<p>Lorem ipsum dolor sit amet of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
		</div>
	</div>
</body>
</html>

Ето и демото в действие :

View DemoDownload

Тук е нужно да се обясни функцията .click() :

$('selector').click( function(){
	//javascript код който искаме да се изпълни при натискането на "element"
});

Това е само началото ...

Както се вижда от примера, да се борави с jQuery е доста лесно и приятно за човек, който няма големи познания по JavaScript.
Възможностите на jQuery са огромни и не може в една статия да се обхванат всички селектори, методи, функции и трикове. За това е добре да се запознаете с jQuery документацията или да прочетете jQuery - полезни съвети част 1 и част 2.