jQuery — это быстрая, небольшая и многофункциональная библиотека JavaScript.

Такие вещи, как обход HTML-документов и манипулирование ими, обработка событий, анимация и Ajax, намного проще благодаря простому в использовании API, который работает в нескольких браузерах.

Преимущества использования jQuery:

  • jQuery делает ваш код JavaScript меньше, быстрее и поддерживает кроссбраузерность.
  • Используя jQuery, вы можете обрабатывать такие события, как щелчок, наведение курсора, изменение, нажатие клавиши и т. д., и выполнять с ним какие-либо действия.
  • jQuery позволяет вам добавить анимацию на вашу страницу, например, постепенное появление, исчезновение, включение и выключение, или вы можете создать собственную анимацию.
  • С помощью jQuery вы также можете сделать запрос Ajax без обновления всей страницы.

И многое другое…..

Также читайте,

В этом примере мы переходим к некоторому базовому событию Javascript Click, делая кнопку Enable/Disable с помощью Link. Итак, давайте начнем:

Шаг 1:

Создайте HTML-страницу со следующей базовой структурой:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Step-by-step</title>
</head>
<body>
<!-- Content Area-->
</body>
</html>

Шаг 2:

Добавьте элемент, чтобы выполнить какое-либо действие над ним. Мы добавим две ссылки для включения и отключения и одну кнопку. Добавьте следующий код в тег Body:

<a href="#" id="next">Disable</a>
<button>Register</button>
<a href="#" id="prev">Enable</a>

Шаг 3:

Теперь мы собираемся добавить Jquery Libray.

Вы можете добавить Jquery, скачав с официального сайта Jquery.com.

Но в этом примере мы будем использовать копию Jquery от Google.

Добавьте следующий код под тегом Body:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

Шаг 4:

Добавьте скрипт jQuery под ним.

В следующем коде мы используем идентификаторы ссылок «следующая» и «предыдущая» для выполнения задачи.

<script type="text/javascript">
$("#next").click(function(){
    $(this).next().attr('disabled',true);
});

$("#prev").click(function(){
    $(this).prev().removeAttr('disabled');
});
</script>

Полный код. Вот полный код, полученный в результате выполнения вышеуказанных шагов.

<html>
<head></head>
<body>
<a href="#" id="next">Disable</a>
<button>Register</button>
<a href="#" id="prev">Enable</a>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#next").click(function(){
    $(this).next().attr('disabled',true);
});

$("#prev").click(function(){
    $(this).prev().removeAttr('disabled');
});
</script>
</body>
</html>

Оригинальная статья: https://tutscoder.com/post/jquery-step-by-step-tutorial-for-beginner

Вывод:

Итак, вот некоторые основные способы использования Jquery. Спасибо за прочтение.

Дайте мне знать. Если у вас возникнут какие-либо трудности, пожалуйста, не стесняйтесь комментировать ниже, мы рады помочь вам. если у вас есть какие-либо предложения обратной связи, пожалуйста, сообщите нам, комментируя.

Не забудьте поделиться этим уроком с друзьями в Facebook и Twitter.