Работа с jQuery:

Подключение jQuery версии 3.2.1

Добавьте в самый конец HTML файла, перед закрывающимся тегом "</body>" следующий код:

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

Изменение текста "ААА" внутри следующего элемента "span":

<span class="checkbox-container">ААА</span>

Текст "ААА" будет заменен на "ВВВ" при выполнении следующего кода:

$('.checkbox-container').html('BBB');

Работа с классами:

$('.checkbox-container-title').removeClass('rounded');

$('.checkbox-container-title').toggleClass('rounded-top');

Работа с DOM деревом:

Срезы:

clientPhone = clientPhone.substr(3);

Из строки "+380961234567" получаем "0961234567"

События:

При нажатии мышкой на объект

$('.basket-container').on('click', function (e) {

        // Отключение функции обновленя старницы при нажатии кнопки "Купить"
        e.preventDefault();

        console.log('LOGFILE: разворот корзины Щелчком')

        });

При наведении указателя мышки на объект

$('.active_block').hover(function () {

    console.log("Событие при наведении мышки на объект");

});

При наведении указателя мышки на объект

$('.basket-container').mouseover(function () {

    console.log('LOGFILE: разворот корзины Наведением')

});

При отводе указателя мышки с объекта

$('.basket-container').mouseout(function () {

    console.log('LOGFILE: сворот корзины Уведением')

});

AJAX (Get) - Передача данных из views в jquery:

Файл - views.py

from django.http import JsonResponse


def ajax (request):

    color = {
        "Cat": "White",
        "Dog": "Black"
        }

    return JsonResponse(color)

Файл - urls.py

urlpatterns = [
    ...
    path('ajax/', views.ajax, name='ajax'),
]

Файл - scripts.js

url  = "/ajax/"
data = ""
$.ajax({
    url: url,
    typte: 'GET',
    data: data,
    cache: true,
    success: function (data) {

        console.log("AJAX - OK");

        $('.color-cat').html(data['Cat']);
        $('.color-dog').html(data['Dog']);
    },
    error: function () {

        console.log("AJAX - ERROR");

    }
});

Файл - test.html

<body>

<p>
    Cat = <span class="color-cat"></span><br>
    Dog = <span class="color-dog"></span>
</p>

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

AJAX (Get) - Передача данных из jquery в views:

Файл - views.py

from django.http import JsonResponse


def ajax (request):

    dog_number = request.GET.get("Dog-number")
    print(dog_number)

    color = {                 # Скорее всего не нужно
        "Cat": "White",       # Скорее всего не нужно
        "Dog": "Black"        # Скорее всего не нужно
        }                     # Скорее всего не нужно

    return JsonResponse(color)

Файл - urls.py

urlpatterns = [
    ...
    path('ajax/', views.ajax, name='ajax'),
]

Файл - scripts.js

$('.btn').on('click', function () {

    var dogNumber = $('.dog-number').val();
    var data = {"Dog-number": dogNumber};

    url  = "/ajax/"
    $.ajax({
        url: url,
        typte: 'POST',
        data: data,
        cache: true,
        success: function (data) {

            console.log("AJAX - OK");

        },
        error: function () {

            console.log("AJAX - ERROR");

        }
    });
});

Файл - test.html

<body>

<input type="number" class="dog-number">
<button class="btn btn-danger">Save</button>

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

Обучающие материалы по jQuery:

Заглавная страница
Работа с набором элементов - Список функций