Query - это библиотека JavaScript, разработанная для упрощения обхода и манипулирования деревом HTML DOM, а также обработки событий, анимации CSS и Ajax.
Введение
- jQuery - это библиотека JavaScript
- jQuery легко изучить
- jQuery упрощает JavaScript
- jQuery упрощает использование JavaScript на нашем веб-сайте
- jQuery - это клиентские сценарии
Библиотека jQuery содержит
- HTML / DOM манипуляции
- CSS манипуляции
- Методы событий HTML
- Эффекты и анимация
- AJAX
- Утилиты
Добавление jQuery на наш сайт
- Мы можем скачать библиотеку jQuery с https://jquery.com/
- Мы можем подключить jQuery из CDN
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
синтаксис jQuery
- jQuery позволяет нам выбирать (запрашивать) элементы HTML и выполнять с ними действия.
- Базовый синтаксис: $ (селектор) .action ()
- Знак $ используется для определения и доступа к jQuery.
- (Селектор) для запроса / поиска элементов HTML
- Действие jQuery () должно выполняться на элементе / элементах
- Пример:
- $ (‘Div’). Hide () - ›скрывает все элементы ‹div›
- $ (‘. Head’). Hide () - ›скрывает все элементы с именем класса« head »
- $ (‘# Head’). Hide () - ›скрывает элемент с идентификатором head.
- Мы всегда должны писать наш код jQuery внутри события готовности документа, которое предотвращает выполнение любого кода jQuery до загрузки документа.
- С jQuery мы можем связать несколько действий / методов вместе
$(selector).action1().action2()…..
jQuery HTML манипуляции с DOM
- text () - ›устанавливает / возвращает текстовое содержимое выбранного элемента
- html () - ›устанавливает / возвращает содержимое выбранного элемента
- val () - ›устанавливает / возвращает значение полей формы
- attr () - ›устанавливает / возвращает значение атрибутов
- append () - ›вставляет содержимое в конец выбранного элемента.
- prepend () - ›вставляет содержимое в начало выбранного элемента
- after () - ›вставляет содержимое после выбранного элемента
- before () - ›вставляет содержимое перед выбранным элементом
- remove () - ›удаляет выбранный элемент
- empty () - ›удаляет дочерние элементы выбранного элемента
- addClass () - ›добавляет один или несколько классов CSS к выбранному элементу.
- removeClass () - ›удаляет один или несколько классов CSS из выбранного элемента.
- toggleClass () - ›переключает между добавлением и удалением классов из выбранного элемента.
- css () - ›устанавливает или возвращает атрибут стиля выбранного элемента.
- Методы измерения: -
- ширина()
- высота()
- внутренняя ширина ()
- innerHeight ()
- externalWidth ()
- externalHeight ()
Обход jQuery HTML DOM
- parent () - ›возвращает прямого родителя выбранного элемента
- parent () - ›возвращает всех предков выбранного элемента
- parentUntil () - ›возвращает всех предков выбранного элемента до указанного аргумента
- children () - ›возвращает всех прямых потомков выбранного элемента
- find () - ›возвращает все дочерние элементы выбранного элемента
- siblings () - ›возвращает всех братьев и сестер выбранного элемента
- next () - ›возвращает следующего брата выбранного элемента
- nextAll () - ›возвращает всех следующих братьев и сестер выбранного элемента
- nextUntil () - ›возвращает всех следующих братьев и сестер выбранного элемента до тех пор, пока не будет предоставлен аргумент.
- prev () - ›возвращает предыдущего брата выбранного элемента
- prevAll () - ›возвращает всех предыдущих братьев и сестер выбранного элемента
- prevUntil () - ›возвращает всех предыдущих братьев и сестер выбранного элемента до тех пор, пока не будет предоставлен аргумент.
- first () - ›возвращает первый элемент выбранного элемента
- last () - ›возвращает последний элемент выбранного элемента
- eq () - ›возвращает элемент с определенным порядковым номером выбранного элемента
- filter () - ›возвращает отфильтрованный элемент выбранного элемента
- not () - ›возвращает все элементы, которые не соответствуют выбранному элементу
jQuery noConflict метод
Метод noConflict () снимает удержание идентификатора ярлыка $ и позволяет другим скриптам / фреймворкам использовать его.
Пример
let shortcutname = $.noConflict()
- Это создает новый идентификатор ярлыка для jQuery, и если переменная не указана по умолчанию, она устанавливается как jQuery.
- Если мы хотим использовать идентификатор $ shortcut в блоке готового метода, мы передадим $ в качестве параметра готовому методу.
let shortcutname = $.noConflict()
shortcutname(document).ready(function($){
// write your code here
});
Простой пример использования нескольких анимаций и AJAX с использованием jQuery на нашей веб-странице
файл script.js
$(document).ready(function(){
$("#intro-show").click(function(){
$('#intro').show('slow');
});
$('#intro-hide').click(function(){
$('#intro').hide('slow');
});
$('#intro-fade-in').click(function(){
$('#intro').fadeIn(2000);
});
$('#intro-fade-out').click(function(){
$('#intro').fadeOut(1000);
});
$('#intro-slide-down').click(function(){
$('#intro').slideDown(1000);
});
$('#intro-slide-up').click(function(){
$('#intro').slideUp(1000);
});
$('#intro-animate').click(function(){
let div = $('#intro');
div.show();
div.animate({
height: '50%',
opacity: '0.4'
},1000);
div.animate({
width: '50%',
opacity: '0.8'
},1000);
div.animate({
height: '100%',
opacity: '0.4'
},1000);
div.animate({
width: '100%',
opacity: '0.8'
},1000, function () {
div.hide();
});
});
$('#load-data').click(function () {
$('.data').load('style.css',function(responseTxt,statusTxt,xhr){
// resposeTxt -> contains the resulting data if call is successful
// statusTxt -> contains the status of the call
// xhr -> contains the XMLHttpRequest object
if(statusTxt == 'error'){
alert('Data not loaded since ' + xhr.status + xhr.statusTxt);
}
});
});
});
файл style.css
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 5px;
padding: 5px;
}
.intro-show{
margin: 5px;
cursor: pointer;
color: #8bc34a;
border: 1px solid black;
border-radius: 3px;
padding: 5px;
}
.intro-show:hover{
background-color: #8bc34a;
color: white;
border: 1px solid #8bc34a;
border-radius: 3px;
}
.intro-hide{
margin: 5px;
cursor: pointer;
color: #ff3b00;
border: 1px solid black;
border-radius: 3px;
padding: 5px;
}
.intro-hide:hover{
background-color: #ff3b00;
color: white;
border: 1px solid #ff3b00;
border-radius: 3px;
}
.intro{
display: none;
border: 1px solid black;
border-radius: 3px;
margin: 5px;
padding: 10px;
font-family: system-ui;
font-weight: 400;
font-style: oblique;
font-size: 20px;
}
файл index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="intro-show" id="intro-show"> Click me to show instructions </div> <div class="intro-hide" id="intro-hide"> Click me to hide instructions </div> <div class="intro-show" id="intro-fade-in"> Click me to Fade In instructions </div> <div class="intro-hide" id="intro-fade-out"> Click me to Fade Out instructions </div> <div class="intro-show" id="intro-slide-down"> Click me to Slide down instructions </div> <div class="intro-hide" id="intro-slide-up"> Click me to Slide up instructions </div> <div class="intro-show" id="intro-animate"> Click me to animate box </div> <div class="intro-show" id="load-data"> Click me to load data using jQuery and AJAX </div> </div> <div class="intro" id="intro"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque suscipit, natus dolore, dicta fugiat sequi maiores illo tenetur omnis facere nostrum at nobis eligendi esse. Eveniet ab iste dolores nobis ipsa accusantium, iusto voluptatum! Delectus facere temporibus, cumque nostrum vero recusandae quas quod perspiciatis optio molestiae odio voluptates consectetur sapiente quos ex quis ratione expedita voluptas suscipit assumenda consequatur dicta! Doloribus adipisci ratione, facilis iure cumque porro atque eligendi illum! Laudantium sapiente necessitatibus magni architecto, suscipit obcaecati rerum porro quod quaerat culpa error eveniet quae. Fugit impedit amet debitis quam, voluptatem nihil. Vitae explicabo, dolorum distinctio aspernatur deleniti cumque nulla cupiditate accusantium adipisci laboriosam asperiores necessitatibus provident ab quis illum earum fugiat non magni consectetur, quidem autem sit reiciendis. Consectetur labore culpa deserunt eaque corrupti maxime eveniet. Rerum optio accusantium placeat ea unde, nostrum inventore, sunt, magni iusto assumenda deserunt nulla. Reiciendis nisi quasi alias quam blanditiis, nostrum nobis at. </div> <div class="data"> </div> </body> <script src="jquery-3.6.0.js"></script> <script src="script.js"></script> </html>
