@@ -0,0 +1,49 @@
|
||||
- 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)
|
||||
Reference in New Issue
Block a user