jQuery — это быстрая, небольшая и многофункциональная библиотека JavaScript.
Такие вещи, как обход HTML-документов и манипулирование ими, обработка событий, анимация и Ajax, намного проще благодаря простому в использовании API, который работает в нескольких браузерах.
Преимущества использования jQuery:
- jQuery делает ваш код JavaScript меньше, быстрее и поддерживает кроссбраузерность.
- Используя jQuery, вы можете обрабатывать такие события, как щелчок, наведение курсора, изменение, нажатие клавиши и т. д., и выполнять с ним какие-либо действия.
- jQuery позволяет вам добавить анимацию на вашу страницу, например, постепенное появление, исчезновение, включение и выключение, или вы можете создать собственную анимацию.
- С помощью jQuery вы также можете сделать запрос Ajax без обновления всей страницы.
И многое другое…..
Также читайте,
- 12 самых полезных методов и функций jQuery
- 8 самых полезных селекторов Jquery — вам нужно знать
- Как установить-снять все галочки с помощью jQuery
В этом примере мы переходим к некоторому базовому событию 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.