Примеры JQuery: методы и события

С этой статьи я начну обзор методов и событий библиотеки JS — JQuery. Данный обзор я разделю на три части (статьи). После выхода всех трех обзоров, вы сможете посмотреть их по метке «Примеры JQuery». Ну что, приступим к рассмотрению.

В этом обзоре мы рассмотрим методы и события: hide(), show(), click() и hover().

Начнем с базовых методов hide() и show(). Эффект этих методов заключается в появление и исчезновение объекта.

$(селектор).hide(speed);
$(селектор).show(speed);

Параметр speed определяет скорость скрывания/показывания и может принимать следующие значения: «slow», «fast» или число миллисекунд, является необязательным.

Методы hide() и show()

Рассмотрим пример использования методов hide() и show(). Не забудьте подключить JQuery к странице.

Нажмите на значок play в правом верхнем углу редактора и посмотрите результат кода, либо посмотрите результат в вашем редакторе через браузер.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>Заголовок</h2>
<p>Параграф</p>
<p>Это другой параграф.</p>
<button>Нажми на меня</button>
</body>
</html>

Использование метода show() пишется идентично, только к параграфу <p></p> надо подключить стили display: none; и вместо $(«p»).hide(); прописать $(«p»).show();.

Методы click() и hover()

jQuery метод .hover() связывает один или два обработчика событий для элемента, которые будут выполнены, когда указатель мыши направляется на элемент или от него.

jQuery метод .click() привязывает JavaScript обработчик событий «click», то есть клик левой кнопкой мыши. Есть еще похожий метод, называется dblclick(), только событие обрабатывается не одним нажатием мыши, а двумя нажатиями.

Пример использования метода hover():

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#par").hover(function(){
    alert("Вы навели курсор мыши на параграф");
    },
    function(){
    alert("Удачи в изучение языков программирования!");
  }); 
});
</script>
</head>
<body>

<p id="par">Это параграф.</p>

</body>
</html>

Пример использования метода click():

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#but").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<button id="but">Нажми на меня</button>

</body>
</html>

Посмотрите также нажав play или реализуйте данный код самостоятельно.

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

Спасибо за внимание!