Это архивная статья. Блог закрыт.

← на главную

JQuery для начинающих

Статья написана очень давно — 30.07.2010

JQuery — это JavaScript-фреймворк (как бы, обёртка над Яваскриптом), который упрощает нам жизнь в несколько раз. В этой статье изложены основы JQuery, очень простые для понимания

Для начала, JQuery нужно скачать (с официального сайта, последняя версия). Он представляет собой обыкновенный js-файл, который нужно будет подключить:


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

или так:


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--в этом случае, его не нужно скачивать, при работе он автоматом подгрузится с официального сайта-->

Доступ к элементам с помощью JQuery

JQuery работает с объектной моделью документа (DOM).

Это основные способы доступа к элементам в JQuery. Их, также, можно комбинировать, тогда получается интересный результат

В JQuery есть возможность выбора определенных элементов из DOM (объектной модели документа). Например, если вам нужен только первый элемент с классом portret или только чётные пункты списка <li>, то JQuery придёт вам на помощь:

А ещё JQuery хорошо работает с атрибутами тегов:
$('input[type=button]') — получит все теги <input type="button" />

Это далеко не полный список селекторов, доступных в JQuery, которые вы можете применить. В конце этой статьи приведена так называемая JQuery cheat sheet (таблица с подсказками по JQuery)

Обработка событий в JQuery

Получать доступ к элементам в JQuery мы научились. Но что же делать с ними дальше? Теперь мы можем повесить на элемент какой-либо обработчик события. В обычном JavaScript мы это делали так: document.getElementById('id').click = function1;. В JQuery же это можно сделать несколько проще:

$('#id').click(function(){
	//тут код обработки щелчка по id
});

Анонимные функции — хорошая вещь — то, чего лично мне не хватает в PHP.

Теперь, когда речь зашла о событиях, можно смело показать какой-нибудь живой пример. Дело в том, что весь JQuery-код пишется, как обработка события ready документа, т.е., простым языком, когда «документ готов», то мы можем делать что-либо (что вполне логично). Итак, первый самый простой пример:

<img src="/i/myphoto.jpg" id="myfoto" />
<script type="text/javascript">
$(document).ready(function(){
	$('#myfoto').click(function(){
		alert('This is my photo!');
	});
});
</script>

Основные события в JQuery:

Попробуем изменить предыдущий пример так, чтобы теперь сообщение всплывало не при щелчке на картинке, а при наведении курсора на неё:

<img src="/i/myphoto.jpg" id="myfoto" />
<script type="text/javascript">
$(document).ready(function(){
	$('#myfoto').mouseover(function(){
		alert('This is my photo!');
	});
});
</script>

Эффекты на JQuery

Нынче на сайтах очень популярны всякие «живые» штучки. Например, выезжающее меню, или схлопывающиеся элементы. Реализовывать такое в JQuery — одно удовольствие

Итак, для начала приведу список JQuery-методов, с помощью которых можно «оживить» сайт:

Первым параметром (необязательным) к каждому из этих методов идёт скорость в милисекундах. А к методу fadeTo вторым параметром идёт прозрачность, до которой необходимо затухнуть

Все эффекты Вы можете опробовать здесь:
Скорость: мс
show
hide
toggle
slideDown
slideUp
slideToggle
fadeIn
fadeOut
fadeTo

Jquery is beautiful. Use the JQuery! Framework JQuery это оболочка над JavaScript.
А еще, с помощью Джейквери можно делать такую разную анимацию. Причём не только для текста, а для любых элементов. JQuery умеет всё! А мы, тем временем, продолжим изучать JQuery.

Управление атрибутами с помощью JQuery

Ещё одна полезная возможность JQuery — управление атрибутами. Например, вы можете какому-либо элементу задать, удалить, получить класс, или вообще любой атрибут. Ширину и высоту, значение элемента (в случае с полями, например), html код — всё это можно получить с помощью JQuery. И сейчас я покажу как.

$(document).ready(function(){
	$('#getter').click(function(){
		var value1 = $('input#field').val();
		alert(value1);
	});

	$('a#swap').click(function(){
		value1 = $('input#field').val();
		$('input#f2').val(value1);
		$('input#field').attr('disabled', 'disabled');
	});
});

JQuery AJAX

Кроме всего вышеописаного, с помощью JQuery можно очень легко и удобно использовать такую технологию как ajax. Для этой цели служит метод $.ajax(settings), где settings — это настройки (пары "ключ: значение")

Лучше всего рассмотреть на примере (пример из этого блога — отправка комментария с помощью ajax [в упрощенном виде])

<form id="comment">
<input type="hidden" id="contentid" value="номер статьи (вставляется с помощью PHP)" />
<input type="text" name="nick"><br />
<textarea name="comment"></textarea><br />
<button id="sendcomment">Отправить</button>
</form>

<script type="text/javascript">
$(document).ready(function(){
	$('#sendcomment').click(function(){
		$.ajax({
		url: '/some-url/content_id='+$('#contentid').val(), //Указываем, какой УРЛ запрашивать
		type: 'POST', //Указываем метод: GET или POST
		data: 'nick='+$('input[name=nick]').val()+'&comment='+$('textarea[name=comment]').val(), //Указываем данные, отправляемые POSTом
		success: function(data){ //Функция, которая будет выполняться при успехе
			alert('Ваш комментарий отправлен!');
		},
		error: function(){ //функция, которая будет выполняться при неудаче
			alert('Ошибка! Попробуйте ещё раз!');
		}
		}); 	
	});
});
</script>

Ну, это очень упрощенный вариант :)
На самом деле, этих параметров хватит для большинства простых задач, а в следующей статье будут рассмотрены остальные параметры...

JQuery cheat sheet

Представляю вашему вниманию таблицу с подсказками по JQuery, позволяющую легко ориентироваться во множестве методов и свойств JQuery

Вот мы и познакомились с JQuery, хотя здесь рассмотрены далеко не всё, а только основные его свойства и методы. Кроме того, мы рассмотрели примеры работы с JQuery — а это залог успеха в изучении. Однако, мы не рассмотрели работу с данными и кое-что ещё. Это сделано умышленно, дабы не нагружать уважаемого читателя сразу кучей информации. Более подробно о JQuery с примерами, а также с нерассмотренными в этой статье темами, написано в следующай статье

Комментарии удалены

© koz1024 2010, 2019