• Страница 1 из 1
  • 1
Форум » II.jQuery » Начало работы с jQuery » Практикум по событиям (Тренируемся назначать и использовать события)
Практикум по событиям
1 Подготовительный этап

В шапку страницы подключаем библиотеку jQuery (я подключил с помощью CDN )

Код
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>


и сразу после неё вторую пару тегов script с функцией $(document).ready(), которой в качестве аргумента передана анонимная функция:

Код
<script>
$(document).ready(function() {
/* здесь будет программный код */
});
</script>


На этом подготовительный этап завершён. Переходим к выполнению заданий.

Задача 1 : при двойном клике в любом месте страницы, должно появиться оповещающее окно с текстом 'Ой!'

Выбираем в качестве элемента всю страницу, присваиваем событие двойного щелчка мыши:

Код
<script>
$(document).ready(function() {
  $('html').dblclick();
});
</script>


передаём событию анонимную функцию в качестве аргумента:

Код
<script>
$(document).ready(function() {
  $('html').dblclick(function() {

  }); /* конец dblclick */
}); /* конец ready */
</script>


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

Код
<script>
$(document).ready(function() {
  $('html').dblclick(function() {
    alert('Ой!');
  }); /* конец dblclick */
}); /* конец ready */
</script>


Тестируем полученный результат.

Изменить / Удалить

2 Задача 2 : при наведении курсора мыши на ссылку на странице сайта появляется сообщение "Вы навели указатель мыши на ссылку".

Берём заготовку из предыдущего поста:

Код
<script>
$(document).ready(function() {
/* здесь будет программный код */
});
</script>


В теле страницы нам нужен блок с идентификатором, чтобы каждый раз в конце этого элемента выводить сообщения "Вы навели указатель мыши на ссылку".

Код
<div id = "container">Если вы наводите курсор мыши на ссылку, в конце этого блока будет выводиться сообщение.</div>


создаём новую переменную message, в которой сохраняем строку с сообщением, а затем, с помощью функции append() присоединяем сообщение к выбранному элементу с идентификатором #container

Код
<script>
$(document).ready(function() {
$('a').mouseover(function() {
var message = "<p>Вы навели указатель мыши на ссылку</p>";
$('#container').append(message);
});
});
</script>


Тестируем полученный результат.

Изменить / Удалить

3 Задача 3 : на странице сайта есть кнопка, по клику на которой должен поменяться текст кнопки.

Опять же, берём заготовку из первого поста темы:

Код
<script>
$(document).ready(function() {
/* здесь будет программный код */
});
</script>


в теле страницы разместим кнопку:

Код
<input name="button" type="button" id="button" value="Нажми меня">


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

Код
<script>
$(document).ready(function() {
  $('#button').click();
});
</script>


функции click() в качестве аргумента передаём анонимную функцию:

Код
<script>
$(document).ready(function() {
  $('#button').click(function() {

}); /* конец click */
}); /* конец ready */
</script>


а теперь прописываем действие, смену текста выбранной кнопки:

Код
<script>
$(document).ready(function() {
  $('#button').click(function() {
  $(this).val("Спасибо!");
}); /* конец click */
}); /* конец ready */
</script>


В данном случае $(this) относится к элементу, которому вы присваиваете событие

Смотрим что получилось.

Изменить / Удалить

4 Задача 4 : при клике на поле формы (либо переходе на него клавишей Tab) должен измениться цвет фона поля на красный.

разместим в теле страницы форму:

Код
<form action="#" method="get">
<fieldset><legend>Форма</legend>
<p><input name="textfield" id="textfield" type="text"></p>
<p><input name="button" type="button" id="button" value="Нажми меня"></p>
</fieldset>
</form>


как всегда, берём заготовку из первого поста:

Код
<script>
$(document).ready(function() {
/* здесь будет программный код */
});
</script>


выбираем текстовое поле и присваиваем ему событие focus():

Код
<script>
$(document).ready(function() {
  $('#textfield').focus();
}); /* Конец ready */
</script>


функции focus() передаём анонимную функцию в качестве аргумента:

Код
<script>
$(document).ready(function() {
  $('#textfield').focus(function() {

}); /* Конец focus */
}); /* Конец ready */
</script>


прописываем действие для события:

Код
<script>
$(document).ready(function() {
  $('#textfield').focus(function() {
  $(this).css('background-color','#FF0000');
}); /* Конец focus */
}); /* Конец ready */
</script>


В данном случае $(this) относится к элементу, которому вы присваиваете событие, как и в предыдущем примере.

ну и, наверное, чтобы вернуть первоначальный цвет фона полю формы, когда оно вне фокуса, пропишем и это, используя событие blur() и принцип связывания функций:

Код
<script>
$(document).ready(function() {
  $('#textfield').focus(function() {
  $(this).css('background-color','#FF0000');
}).blur(function() {
  $(this).css('background-color','#FFFFFF');
});
}); /* Конец ready */
</script>


Можете протестировать как все работает.

Изменить / Удалить

Форум » II.jQuery » Начало работы с jQuery » Практикум по событиям (Тренируемся назначать и использовать события)
  • Страница 1 из 1
  • 1
Поиск: