jQuery: вторая часть

Боже мой! Вы думали, что я забыл о вас jQuery. Что я отбрасываю тебя наполовину законченным, наполовину исследованным. Что ж, ты был неправ! Я здесь, чтобы закончить дело, которое я начал; хешировать остальную часть jQuery.

Из моего предыдущего сообщения в блоге довольно ясно, что jQuery значительно упрощает написание и использование JavaScript на веб-сайте, поэтому есть еще несколько частей jQuery, которые я хочу изучить.

jQuery имеет эффекты! Эффекты более или менее, всю визуальную анимацию вы можете сделать с помощью JavaScript, но с помощью ярлыков jQuery.

С помощью эффектов jQuery вы можете скрыть или показать объект, сдвинуть, исчезнуть, анимировать > или выполнить функцию обратного вызова и даже сцепить эффекты вместе.

Методы Hide и Show позволяют назначать скорость эффекта и записываются со следующим синтаксисом:

$(selector).hide(speed, callback);

Скорости могут быть «медленными» или «быстрыми» или миллисекундами времени.

Ниже приведен оператор jQuery, представляющий собой «кнопку», которая при нажатии скрывает «p» в течение 3 секунд.

$("button").click(function(){
    $("p").hide(3000);
});

Эти сокращенные методы также позволяют использовать функции обратного вызова, которые вызываются после завершения события. Ниже находится та же кнопка, что и выше, за исключением того, что на этот раз она будет предупреждать пользователя, как только это будет сделано с помощью обратного вызова.

$("button").click(function(){
    $("p").hide(3000, function(){
        alert("Alert! This paragraph took 3 seconds to disappear.");
    });
});

Этот синтаксис jQuery применим к множеству различных эффектов, которые легко написать! (аааа….. красота jQuery внезапно становится такой очевидной.)

Вот несколько методов эффектов, которые может предложить jQuery, и их синтаксис.

$(selector).fadeIn(speed, callback);
$(selector).fadeOut(speed, callback);
$(selector).fadeToggle(speed, callback);
$(selector).fadeTo(speed, callback);
$(selector).slideUp(speed, callback);
$(selector).slideDown(speed, callback);
$(selector).slideToggle(speed, callback);
$(selector).animate({params}, speed, callback);

Все это позволяет вам исчезать, скользить или анимировать свою собственную анимацию.

При использовании метода animate() у вас по-прежнему есть скорость его выполнения и любой обратный вызов, который вы хотите вызвать после завершения эффекта, как и другие методы эффекта jQuery. Но с animate у вас есть аргумент params, помещенный перед теми двумя, которые подключаются к файлу CSS, который будет выполнять и выполнять анимацию. (Конечно, вам нужно знать, как анимировать в CSS, чтобы использовать метод анимации, но если вы знаете, как это сделать, это упростит подключение к DOM.)

Кроме того, эффекты jQuery позволяют объединять ваши эффекты в цепочку, так что вам нужно написать только один эффект, чтобы вызвать все эффекты, которые вы хотите, для одного действия пользователя.

$("button").click(function(){
        $("#myBudget").css("color", "green")
            .slideUp(3000)
            .slideDown(3000)
            .fadeOut(5000);
});

Выше находится ‹кнопка›, которая выбирает элемент с идентификатором «myBudget», и при нажатии этой кнопки выбранный элемент становится зеленым, затем скользит вверх в течение 3 секунд, затем скользит вниз в течение 3 секунд, затем медленно исчезает в течение 5 секунд. Все эти эффекты встроены в одну функцию jQuery благодаря цепочке, которая позволяет нам настраивать эффекты от одного действия пользователя.

jQuery обход — это специализированный выбор. Это использование jQuery иерархии DOM и выбор элементов, которые являются дочерними, родительскими или одноуровневыми по отношению к другим элементам.

Ниже приведены многие методы обхода jQuery, которые будут выбирать различные элементы DOM, связанные с выбранным элементом:

parent()
parents()
parentsUntil()
children()
find()
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

Существуют также методы фильтрации jQuery, которые помогают сортировать найденные элементы. Ниже приведены некоторые из основных:

first()
last()
eq()
filter()
not()

Эти функции jQuery написаны с тем же синтаксисом, что и другие:

$(document).ready(function(){
    $("div").parents();
});
$(document).ready(function(){
    $("div").children();
});

AJAX отлично подходит не только для мытья ванн. По сути, это способ взаимодействия jQuery с API, подобный классическому JavaScript fetch().

AJAX расшифровывается как Асинхронный JavaScript и XML, и так же, как выборка, это удар jQuery по загрузке и отображению любых данных на веб-странице без необходимости обновления/перезагрузки всей страницы. Gmail и Google Maps используют AJAX для загрузки, а также YouTube, Facebook и многие другие. Он позволяет вам запрашивать любые данные на вашей веб-странице, HTML, XML или JSON.

AJAX jQuery также имеет множество методов, которые значительно упрощают кодирование в JavaScript. Существуют методы для запросов GET и POST, а также метод load(), который еще больше упрощает работу.

Запросы GET собирают веб-страницу или некоторые ее данные и отображают их для пользователя, тогда как запросы POST берут некоторые данные от пользователя и изменяют веб-страницу, чтобы включить эти новые пользовательские данные.

Это их синтаксис:

$.get(URL, callback);
$.post(URL, data, callback);

Эти функции AJAX могут включать дополнительные функции обратного вызова, которые возвращают статус запроса GET или POST.

$("homepage_button").click(function(){
    $.get("user_homepage", function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});
$("post_button").click(function(){
    $.post("users_new_post",
    {
        content: "VEGAS BABY!!",
        location: "Las Vegas, NV"
    },
    function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

В jQuery и AJAX есть еще более простой способ получения данных с помощью метода load(). Он простой, но мощный, поскольку может загружать данные с сервера и отображать их в выбранном элементе.

$(selector).load(URL, data, callback);

Они также могут включать необязательные функции обратного вызова, которые возвращают статус запроса GET или POST.

$("#newPostDiv").load("new_post.txt");
$("#newPostDiv").load("new_post.txt #special-id");
$("button").click(function(){
    $("#newPostDiv").load("new_post.txt", function(responseTxt, statusTxt, xhr){
        if(statusTxt == "success")
            alert("Post successfully uploaded!");
        if(statusTxt == "error")
            alert("Error: Post not uploaded. " + xhr.status + ": " + xhr.statusText);
    });
});

В общем, jQuery — отличный инструмент, который поможет вам писать на JavaScript намного лучше и быстрее. Тем не менее, как человек, который начал изучать React, я не знаю, сколько я могу сделать в jQuery, чего я не могу сделать так же хорошо или лучше в React, особенно с использованием fetch() вместо аякса. Я также знаю, что вам обычно больше всего нравится первый способ изучения. Возвращаясь к написанию на ванильном JavaScript, использование jQuery кажется привлекательным. JS требует, чтобы вы были чрезвычайно точны в своих шагах, когда вы пишете свой код, поэтому с этой точки зрения мира программирования использование jQuery кажется довольно приятным, избавляя от повторяющихся вещей и позволяя вам повторно использовать больше вашего кода.