Введение в jQuery

Введение в jQuery

Вступление Многие программисты-графоманыблоггеры любят описывать возможности jQuery в своих постах. Теперь я и поделюсь с тобой своими знаниями этой библиотеки. Начну я не с описания процесса создания супермегакрутого эффекта, а с общих принципов работы jQuery. Но для начала…

А нужна ли она тебе? Не, ну правда, глянь на ее код в разжатом виде. А теперь прикинь, что вся эта махина грузится у тебя на каждой странице. Впечатлился? Вот то-то. Поэтому подумай еще до подключения jQuery, что и как будет происходить у тебя на сайте. Если тебе надо сделать выборку элементов и скажем, повесить на них обработчик, тебе хватит и возможностей YASS’a. А вот если у тебя есть красиво всплывающее окошко, подтягивающееся ajax’ом, внутри которого форма с автоматическими расчетами, то jQuery поможет сохранить тебе время и нервы. А вообще, вряд ли ты когда-то будешь использовать хотя бы половину ее функционала…

Подключение jQuery. Подключается эта библиотека просто: так же, как и любой другой скрипт (используй <script>, Люк!). После подключения можешь пользоваться двумя функциями: jQuery() и $(), причем последнюю придумали чисто для краткости. Если что-то мешает использовать $(): mootools или еще какая вредная библиотечка, то ее можно “повесить” на другую букву или слово. Для этого смело пиши:

var j = jQuery.noConflict(); // ну или не j, не важно

Все, теперь вместо $() будешь писать j(). Круто, да?
Второй способ – сделать это через замыкания:
(function($){/* код через $ */})(jQuery);

Общие принципы. Ок, jQuery подключена, теперь повеселимся. Ее фишка, состоит в том, что библиотека “оборачивается” вокруг элементов и позволяет вытворять с ними что душе угодно в удобной форме (не всегда так, но потом объясню). Чтобы засунуть в jQuery элементы, используй либо строку в стиле css3, либо DOM-элемент, либо объект jQuery (либо функцию). Примеры:

<br />
	var a = $(&#8216;div#newsBlock a.moar&#8217;); // выбирает все ссылки с классом moar из блоков с id = newsBlock<br />
	var a2 = $(&#8216;ul li:first-child&#8217;); // выбирает все первые элементы из каждого списка<br />
	var b = $(document.body); // выбирает body<br />
	var c = $(a); // тупо копирует a<br />
	$(function(){alert(&#8216;DOM loaded!&#8217;);}); // функция выполнится после загрузки DOM&#8217;а<br />

А из уже выбранных элементов можно выбрать какой-то конкретный. Допустим, есть у тебя штук 20 div’ов, а тебе кровь из носу нужен 6й. Тогда пиши:
<br />
	$(&#8216;div&#8217;).eq(5); // вернет обернутый 6й div<br />
	$(&#8216;div&#8217;).get(5); // вернет 6й div как DOM-элемент<br />
	$(&#8216;div&#8217;)[5]; // то же, что и в предыдущем варианте<br />

К слову, у jQuery есть второй параметр, указывающий, где искать элементы (записывается так же, как и первый).
var a = $(&#8216;a.moar&#8217;, &#8216;div#newsBlock&#8217;);

Это все круто, но…

Что с этим делать дальше? А дальше можно отменно поиздеваться:

<br />
	$(&#8216;ul li&#8217;).hide(); // скрываем все элементы списка<br />
	$(&#8216;ul li.current&#8217;).show(); // показываем тот, у кого класс current<br />
	$(&#8216;ul&#8217;).has(&#8216;li.current&#8217;).find(&#8216;li:not(.current)&#8217;).css({<br />
		&#8216;color&#8217;: &#8216;#ccc&#8217;,<br />
		&#8216;font-style&#8217;: &#8216;italic&#8217;<br />
	}).show(300); // ищем списки, внутри которых есть li с классом current<br />
	// внутри них находим li, у которых нет класса current<br />
	// делаем их серыми, наклонными и плавно отображаем за 300 миллисекунд<br />

Как можешь видеть (ведь можешь же, когда хочешь) из последнего примера, большинство функций, отработав, возвращают все тот же объект jQuery, что позволяет использовать его еще раз. И еще раз. И еще, и еще…
<br />
	$(&#8216;#elem&#8217;).hide().show().hide().show().hide().show().hide().show(); // ну и зачем?<br />
	$(&#8216;#elem&#8217;).hide(50).show(50).hide(50).show(50).hide(50).show(50).hide(50).show(50); // помигать<br />

Можно также на элементы навесить события. К примеру:
<br />
	$(&#8216;a&#8217;).click(function(){<br />
		alert(this.innerHTML);<br />
	}); // при клике по ссылкам будет alert&#8217;аться их innerHTML<br />
	// на входе функции .click() &#8211; функция-обработчик<br />
	// в принципе, на вход обработчика подается объект Event, но здесь он не нужен<br />
	// this указывает на кликнутую ссылку</p>
<p>	$(&#8216;input&#8217;).bind(&#8216;focusin focusout&#8217;, function(e){<br />
		if(e.type == &#8216;focusin&#8217;){<br />
			$(this).val(&#8216;empty string&#8217;);<br />
		}<br />
		else if(e.type == &#8216;focusout&#8217;){<br />
			alert($(this).val());<br />
		}<br />
		else{<br />
			// не, ну сюда попасть нереально<br />
		}<br />
	}); // на все инпуты вешаются обработчики получения и потери фокуса<br />
	// на входе функции .bind() &#8211; список событий через пробел и функция-обработчик<br />
	// на входе обработчика &#8211; Event<br />
	// this указывает на input, с которым произошло событие, мы this закатываем в jQuery<br />
	// $(this).val() получает значение инпута. если подать на вход строку, то будет задавать значение инпуту</p>
<p>	$(&#8216;a&#8217;).live(&#8216;click&#8217;, function(e){<br />
		alert($(this).html());<br />
		e.preventDefault();<br />
	});<br />
	$(document.body)<br />
		.append(&#8216;<a href="http://v3shin.ru">v3shin\&#8217;s blog</a>&#8216;);<br />
		.append(&#8216;<a href="http://ya.ru">Яндекс</a>&#8216;);<br />
	// первая строка вешает глобальный обработчик на ссылки,<br />
	// который будет работать даже если ссылка генерируется после навешивания обработчика<br />
	// $(this).html() возвращает innerHTML первого элемента из jQuery-выборки<br />
	// если на вход .html() подать строку, то функция поменяет innerHTML первого элемента<br />
	// e.preventDefault() отменяет обычное поведение ссылки<br />
	// вторая строка добавляет две ссылки в конец document.body<br />

А еще jQuery умеет проходить по DOM-дереву, позволяя писать такие конструкции:
<br />
	$(&#8216;ul.menu li&#8217;).click(function(){<br />
		var t = $(this);<br />
		t.parent().next().find(&#8216;li.toggler&#8217;).prev().toggle();<br />
		t.hide();<br />
	}); //сущий ад. короче,<br />
	// this закатывается в jQuery и сохраняется в переменную<br />
	// затем ищется родителький DOM-элемент<br />
	// от него ищется следующий DOM-элемент<br />
	// в нем ищется li с классом toggler<br />
	// от него отсчитывается предыдущий<br />
	// и вот он уже показывается/скрывается, в зависимости от своей текущей видимости<br />
	// &#8230;<br />
	// а кликнутый элемент прячется<br />

На пока что хватит. Дам только пару советов:
1) Caching. Если будешь использовать выборку несколько раз по коду – сохраняй ее в переменную, как в последнем примере.
2) Chaining. Пока можешь, пиши в строку. Каждый вызов функции $() тратит драгоценные миллисекунды, за которые сейчас ведется борьба в вебе.

Бонус: аккордион. Используя вышеприведенные функции уже можно создать простейший аккордион (а вот как он работает, разберешься без меня):

</p>
<style type="text/css">
	.accordion{border:1px #000 solid;width:300px}
	.accordion .header{background:#9af;color:#fff;cursor:pointer;margin:0}
	.accordion .content{padding:2px 5px;text-align:justify}
	</style>
<div class="accordion">
<h3 class="header">Заголовок1</h3>
<div class="content">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae fringilla diam. Mauris gravida consectetur varius. Nulla eu egestas nisl. Quisque consequat iaculis massa, vel tincidunt nunc malesuada a. Sed vel ultricies ipsum. Ut vel urna tortor, non ornare dolor. Cras et leo vel nisi hendrerit egestas tempor non erat. Donec venenatis orci ac turpis dictum sagittis. Mauris pretium dictum leo, quis tristique orci pretium non. Mauris porttitor aliquam mauris id bibendum. Ut accumsan suscipit turpis, a adipiscing massa sagittis scelerisque.
		</div>
<h3 class="header">Заголовок2</h3>
<div class="content">
			Sed id velit nibh, in blandit felis. Cras euismod, velit sit amet pulvinar aliquet, orci libero cursus nunc, in facilisis augue mi non urna. Fusce condimentum feugiat cursus. Vestibulum et magna augue, quis viverra tortor. Mauris molestie mattis tellus, malesuada dignissim massa fringilla id. Mauris leo nulla, interdum eu aliquam vel, consectetur id dolor. Vestibulum non luctus leo. Integer orci justo, porttitor id congue non, vehicula ut urna. Cras in gravida orci. Donec at erat lorem. Duis convallis neque a turpis mollis porttitor dictum tellus iaculis. Vivamus interdum molestie turpis ut pharetra. Curabitur cursus quam in est egestas commodo et ac justo.
		</div>
<h3 class="header">Заголовок3</h3>
<div class="content">
			Aenean tellus purus, faucibus nec tristique id, elementum sit amet quam. Nam mi libero, facilisis et mattis ut, eleifend sed nisl. Suspendisse vestibulum eleifend mi a aliquet. Maecenas eu dui sed lorem scelerisque vestibulum in et sapien. Proin et convallis felis. Proin a lacus nec urna pellentesque placerat quis sed sem. Proin eget ipsum libero. Duis vulputate mollis porta.
		</div>
</p></div>
<p>	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script><br />
	<script type="text/javascript">
	$(function(){
		$('.accordion .content').hide().eq(0).show();
		$('.accordion .header').click(function(){
			var t = $(this);
			t.parent().find('.content').hide();
			t.next().show();
		});
	});
	</script><br />

Далее – Введение в jQuery (продолжение).

  1. Комментов пока нет

  1. Трэкбэков пока нет.

T_T O_O =| =D =/ =) =( ;) :twisted: :idea: :cool: :blush: :?: :!:
*