SiteIS

jQuery - безграничные возможности в дизайне Вашего сайта!

- Один из самых популярных на сегодня среди веб разработчиков фреймворк

- Позволяет быстро и легко создать потрясающие веб-приложения

- Удивительно красивые анимационные эффекты

- Улучшение пользовательского интерфейса

События и методы в jQuery

Одной из наиболее часто используемых операций является динамическое изменение содержимого элементов. Давайте представим, что перед нами стоит задача изменить текст в абзаце, который обернут блоком с классом wrap. Смена текста должна происходить только, если пользователь кликнет по этому абзацу.

Создадим 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">
	<head>
		<title>Работа с jQuery</title>
		<script type='text/javascript' src='js/jquery-1.7.2.min.js'></script>
	</head>
	<body>
		<h1>Изменение текста в абзаце</h1>
		<div class="wrap">
			<p>Этот текст содержится в абзаце до того, как по нему кликнули.</p>
		</div>
	</body>
</html>

Не будем тратить много времени на украшательства через css - просто зададим для дива отступы слева и сверху, что бы текст не прижимался к границе окна браузера:

.wrap {margin:20px 0 0 30px;}

Пришла пора написать требуемый jQuery код и решить поставленную задачу. Прежде всего выберем требуемый элемент. Из прошлых статей мы уже знаем, как это сделать:

$(function () {
	$('.wrap p')
});

Поскольку нам нужны только те абзацы, которые находятся внутри блока wrap, то и обратимся сначала к этому блоку, а затем через пробел укажем нужный элемент внутри него - $('.wrap p').

В задаче сказано, что смена текста должна происходить только по клику на абзаце (т.е. на элементе p). jQuery позволяет перехватывать всевозможные события и клик на элементе страницы - не исключение. За это отвечает обработчик события click():

$(function () {
	$('.wrap p').click();
});

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

$(function () {
	$('.wrap p').click(function() {});
});

Тут все просто - объявляем анонимную функцию (без имени), в фигурных скобках которой пропишем команды, необходимые для выполнения поставленной задачи. Для смены текста в jQuery существует метод text(). Если ему не передавать никаких параметров (ничего не писать в круглых скобках), то он просто вернет текст, содержащийся в элементе, к которому применен. Если же в скобках что то указать, то текст элемента будет изменен на значение, указанное в параметрах метода.

Давайте поэкспериментируем. Снова обратимся к нашему абзацу и применим к нему метод text() без параметров. Что бы удостовериться, что нам действительно вернется строка, содержащаяся в теге p, сохраним результат в переменную и выведем его в модальном окне:

$(function () {
	$('.wrap p').click(function() {
            var text = $('.wrap p').text();
            alert(text);
        });
});

Запустите страницу в браузере и кликните по тексту. На экране появится модальное окно с точно таким же текстом, как и в абзаце. Снова вернемся к задаче. Для ее выполнения осталось совсем немного. Что бы поменять текст, нужно в методе text() передать параметр, строку, которой мы хотим заменить содержимое абзаца. Давайте сделаем это:

$(function () {
	$('.wrap p').click(function() {
            $('.wrap p').text('Текст, измененный с помощью метода jQuery');
        });
});

Мы достигли желаемого, по клику на абзаце текст меняется и, казалось бы, можно идти пить кофе с чувством выполненного долга. Но давайте присмотримся к коду... Нам пришлось дважды обращаться к абзацу и оба раза мы писали конструкцию $('.wrap p'). Ошибки тут нет, однако можно сделать запись более грамотной. Если нам требуется сослаться на один и тот же элемент, который инициализировал событие, то для этого мы вполне можем использовать ключевое слово this. Давайте перепишем код с учетом только что полученной информации:

$(function () {
	$('.wrap p').click(function() {
            $(this).text('Текст, измененный с помощью метода jQuery');
        });
});

Теперь нас не упрекнут в безграмотности даже бывалые программисты... или все же упрекнут? До сих пор мы работали со страницей, на которой присутствовал лишь один блок div с классом wrap и внутри него находился лишь один параграф с текстом. А что, произойдет, если страница изменится, например, так:

<h1>Изменение текста в абзаце</h1>
<div class="wrap">
	<p>Этот текст содержится в абзаце до того, как по нему кликнули.</p>
</div>
<ul class="wrap">
<li><p>Этот текст находится в списке и не должен измениться.</p></li>
</ul>
<h2 class="wrap"><p>Этот текст тоже не должен меняться.</p></h2>

Попробуйте добавить новые элементы с тем же классом на страницу и пощелкайте по ним. Вот же засада - при клике по любому абзацу, расположенному внутри элемента с классом wrap, текст в нем изменяется. Что же происходит?

В отличии от id один и тот же класс может использоваться на странице сколько угодно раз, в том числе и с разными элементами. Когда мы отбирали требуемый элемент, то указали, что нас интересует абзац, который находится внутри элемента с классом wrap. Но мы не учли, что на странице может быть несколько разных элементов с таким же классом. Что же, исправим и эту нашу оплошность.

Еще раз внесем изменения в код:

$(function () {
	$('div.wrap p').click(function() {
            $(this).text('Текст, измененный с помощью метода jQuery');
        });
});

В коде выше мы сказали jQuery, что нас интересует только тот абзац, который находится внутри блока div с классом wrap. Вот теперь можно пить спокойно кофе с уверенностью, что не будет стыдно в будущем за выполненную задачу. Все работает как требуется.

На всякий случай, если все же ничего не получилось (где то допущена ошибка и не получается ее найти), по ссылке ниже можно скачать готовый код и посмотреть, что сделано не так.

Скачать готовый код

Подробно ознакомиться с существующими в jQuery методами можно на "этой странице.". А в следующих статьях мы попробуем попрактиковаться на более полезных для реальной жизни примерах и заодно закрепим в памяти полученную информацию.

Автор: Super User

Комментарии  

 
0 # Денис 18.05.2013 19:00
Супер.до этого прочитал и опробовал статьи от базовых уроков..все получается.очен ь доступная информация про jQuery .

Единственное это с предыдущего урока если я в хейдере подключаю скрипт через файл myscript.js то ничего не происходит..ког да пишу в body то все ок работает.
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Admin 18.05.2013 23:40
Если ничего не происходит при подключении скрипта через внешний файл, то скорее всего либо на странице есть проблемы с подключением библиотеки, либо ошибка при подключении файла скрипта. Копайте в этом направлении (например, ошибка в названии файла, или неправильно приписан путь к файлу...).
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Mara 13.12.2013 15:28
Отлично. все получается.Толь ко бы подробнее объяснили бы, что такое функция.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # admin 13.12.2013 15:32
обязательно объясняю :-) - это дальше будет.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Вадим 13.03.2015 10:45
скажите пожалуйста что здесь неправильно?
пишет подключен и работает,но правило не выполняеться





$(function() {
$(".sell").fadeOut(3000);
});
Ответить | Ответить с цитатой | Цитировать