49 lines
1.8 KiB
Markdown
49 lines
1.8 KiB
Markdown
- JS-библиотека, предназначенная для разработки [DHTML](../Фронтенд/DHTML.md) и [AJAX](AJAX.md)-приложений
|
|
- Упрощает доступ к элементам [DOM](../Фронтенд/DOM.md) с помощью кучи разных способов
|
|
- Упрощает и унифицирует реализацию AJAX
|
|
- Упрощает добавление визуальных эффектов
|
|
- Ключевым элементов API является функция(объект) `$`
|
|
## Пример AJAX-запроса
|
|
```JavaScript
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "some.php",
|
|
data: {name: "JOHN", location: "London"},
|
|
success: function(msg) {
|
|
// логика
|
|
}
|
|
});
|
|
```
|
|
## Взаимодействие с DOM
|
|
```JavaScript
|
|
$("div.test")
|
|
.add("p.quote")
|
|
.addClass("blue")
|
|
.slideDown("slow");
|
|
|
|
$("a"),click(function() {
|
|
alert("Hello");
|
|
});
|
|
|
|
$("div.demo-container").html("<p>New content</p>");
|
|
```
|
|
## Работа с событиями
|
|
```JavaScript
|
|
$("#foo").bind("mouseenter mouseleave", function() {
|
|
$(this).toggleClass("entered");
|
|
});
|
|
```
|
|
## Подключение
|
|
### Через CDN
|
|
```HTML
|
|
<!-- Подключение актуальной версии jQuery через CDN Google -->
|
|
<script src="https://googleapis.com"></script>
|
|
```
|
|
### Локально
|
|
```HTML
|
|
<!-- Подключение локального файла jQuery -->
|
|
<script src="js/jquery-3.7.1.min.js"></script>
|
|
```
|
|
## Почему устарел
|
|
- JS эволюционировал: добавили `document.querySelector` (написано в [заметке про DOM](../Фронтенд/DOM.md)), добавили [Fetch API](Fetch%20API.md)
|
|
- Смена парадигмы: императивный стиль -> декларативный (в современных React, Vue, Angular) |