Работа с jQuery:
Подключение jQuery версии 3.2.1
Добавьте в самый конец HTML файла, перед закрывающимся тегом "</body>" следующий код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Обратите внимание! Данный скрипт должен стоять ОБЯЗАТЕЛЬНО перед скриптом подключения "bootstrap.min.js".
Изменение текста "ААА" внутри следующего элемента "span":
<span class="checkbox-container">ААА</span>
Текст "ААА" будет заменен на "ВВВ" при выполнении следующего кода:
$('.checkbox-container').html('BBB');
Работа с классами:
$('.checkbox-container-title').removeClass('rounded');
$('.checkbox-container-title').toggleClass('rounded-top');
Работа с DOM деревом:
THIS
find('.jquery-find-1')
find('.jquery-find-2')
Срезы:
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:
Заглавная страница
Работа с набором элементов - Список функций