jQuery

// JS which tends to be put at the very end of the body tag before any custom JS
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>

Set multiple CSS properties
$(selector).css({
    "property1": "value1",
    "property2": "value2",
    "property3": "value3"
})

// To dynamically add listeners to dynamically added elements.
    // You cannot get the element when the element isn't created in the DOM
$(Selector that is already created).on("event name", ".class", function(event){
    // Handle event
    // $(event.target) gets the element that gave the event in jquery.
})

$(selector).animation(duration, "easing", callback)

$.ajax({url: "URL"})
.then(function (response){
    console.log(response)
    // Automatically converts the jsons to an object
})

$.ajax({
  url: "https://api.example.com/data",
  method: "GET",
  data: { id: 123 },
  success: function(response) {},
  error: function(xhr, status, error) {
        // The xhr is the XMLHttpRequest
        // xhr.status is the HTTP status code
        // xhr.statusText is the status message
    }
});

$.get("https://api.example.com/data", { id: 123 }, function(response) {});

$.post("https://api.example.com/data", { name: "John", age: 25 }, function(response) {});

// CSS which goes in the head before any custom CSS links
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
// JS which tends to be put at the very end of the body tag before any custom JS and after the regular jQuery
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

$( "#draggable" ).draggable()
$( "#droppable" ).droppable({
  drop: function( event, ui ) {
    $( this ).addClass( "ui-state-highlight" )
    // Code when dropped
  }
});

var availableTags = [
  "C",
  "C++",
  "Java",
  "JavaScript",
  "Python",
];
$("#tags").autocomplete({
  source: availableTags
});