Jquery. 1 - Знакомство

Данная статья ненаучит вас кодить или стать супер web мастером, но все же.

Многие в наше время сидят вконтакте и видят как там все динамично и красиво,
но понять как это работает по исходному коду нереально, я сам еще изучаю данную технологию и пытаюсь её ильспользовать в нужным местах и для конкретных целей.

Это первая статья из цикла статей которые я хочу написать, в этой статье я не буду вам расказывать что такое Jquery, но вот думаю вы чему нибудь да научитесь.

1: для начала работы jquery нужно сказать его с сайта http://jquery.com

2: нужно подключить его на страницу где jquery будет использоваться

echo '<script type="text/javascript" src="'jquery.js"></script>';//подключаем библиотеку

3: С чего же начать изучение? по моему мнению изучать начать лучше с небольшого примера:

echo '<script>
$(document).ready(function(){   
	$("#click").click(function(){   
		var $speech = $("#click");
		var currentSize = $speech.css("fontSize");
		var num = parseFloat(currentSize, 10);
		num = "none";
		$speech.css("display", num);
	});
});</script>';

echo '<span id="click">Текст скроется если на него нажать</span>';

и так теперь разберем каждую строку отдельно
1) $(document).ready(function(){ //Данная строка обезательна, без неё работать корректно не будет, она дает понять скрипту что jquery будет выполнятся только тогда когда страница полностью загруженна
2) $("#click").click(function(){ тут главное это #click и .click первое сообщает что действие будет происходить с объектом у которого id="click" в нашем случае это тег <span>
3) создаем переменную $speech которая = #click

4,5,6 насчет этими строками пока не заморачивайтесь, главное пока понять как работает
7) мы изменяем css свойства у #click, почему click, потому что смотрим разъеснение строки 3.
Теперь поподробней размерем вот это ("display", num), для тех кто знает css тот наверно уже догодался что "display" это css свойство ,а num это его значение, в 6 строке мы задали ему значение none

Те что у нас происходит после того как документ готов к работе, у нас есть событие, если мы его произведем, те кликнем на "Текст скроется если на него нажать", это событие сработает, у нас в строке 7 ему предастся такое свойство css что этот блок будет спрятан

PS это первая статья, сильно не пинать боюсь счикотки, у кого ЧСВ большое идите лесом,
PSS данная статья не для того что бы выучить, а для того что бы понять
PSSS в следующей статье напишу о селекторах и выжмем максимум из события click

на ошибки не смотреть я дураг

А с оперы мини нельзя юзать?

Пожже дойду до jquery mobile

В классах Jquery лишнего хватает, лучше иногда самому написать, чем юзать библиотеки по размеру как пол двига, эт так, мое ИМХО из личного опыта)
А так продолжай, многие должны понять и появится много куль кодеров гг

Atmas (22.06.2011/18:30)
В классах Jquery лишнего хватает, лучше иногда самому написать, чем юзать библиотеки по размеру как пол двига, эт так, мое ИМХО из личного опыта)
А так продолжай, многие должны понять и появится мног

php то полюбому основы должны быть, тк без ajax jquery прикольно, но ниче толкового не сделаешь

Dimario (22.06.2011/16:20)
Данная статья ненаучит вас кодить или стать супер web мастером, но все же.

Многие в наше время сидят вконтакте и видят как там все динамично и красиво,
но понять как это работает по исходному коду

Ты сам то с jQuery хорошо знаком? Зачем так усложнять?

<div class="hide">Текст скроется если на него нажать</div>
<script type="text/javascript">
$('div.hide').fadeOut('slow');
</script>

Теперь все элементы, заключенные в <div class="hide"></div> при клике на них будут скрыватся.
Можно пойти дальше:

<div class="hidenext">Скрыть/открыть</div>
<div>Текст</div>
<div class="hidenext">Скрыть/открыть 2</div>
<div>Текст 2</div>
<script type="text/javascript>"$('div.hidenext').click(function (){$(this).next().slideToggle('normal')});</script>

С данным кодом при клике на любой элемент в div классе hidenext следующий элемент будет скрыватся, при повторном клике раскрыватся.
На скрине видно о чем я(При кликена блоке "Контактные данные" появятся контактные данные, при клике на надписи "Стена", стена скроется). =)

Z3RO (17.07.2011/13:47)
Ты сам то с jQuery хорошо знаком? Зачем так усложнять?
[php]
<div class="hide">Текст скроется если на него нажать</div>
<script type="text/javascript">
$('div.hide').fadeOut('slow');
</script>
[

Сам хорошо знаком. Что то не нравится пиши сам

В этой статье главное не код

Мне бы по JS учебник хороший
А потома уже и jQuery долбить

Z3RO, а как это в ждон запилить?

Kip-OK (17.07.2011/14:31)
Z3RO, а как это в ждон запилить?

echo '<script>LOL</script>';