kostastepetes/jquery-basic-cheatsheet

📃 A comprehensive and simple JQuery cheatsheet that contains the most useful & important aspects of the library.

jQuery Cheatsheet

This jQuery Cheatsheet provides examples and explanations of various jQuery functionalities.

Description

This JavaScript file (jquery-basic-cheatsheet.js) contains examples of how to use jQuery to perform common tasks such as selecting elements, manipulating CSS and content, handling events, making AJAX requests, applying effects, and handling form submissions.

Contents

• Selecting Elements: Demonstrates various methods to select elements using jQuery.
• Manipulating CSS: Shows how to manipulate CSS properties of selected elements.
• Manipulating Content: Provides examples of adding, replacing, removing, wrapping, and cloning content.
• Event Handling: Demonstrates event handling using jQuery, such as click, hover, focus, blur, and change events.
• AJAX: Shows how to make AJAX requests to load data asynchronously.
• Effects: Provides examples of applying effects like fading, sliding, and toggling.
• Form Submission: Demonstrates how to handle form submissions using both POST and GET methods.

Usage

1. Include jquery-cheatsheet.js in your HTML file after including jQuery.
2. Use the provided examples and modify them according to your needs.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery-basic-cheatsheet.js"></script>

Here's a side-by-side comparison of jQuery and equivalent JavaScript for various functionalities:

Example 1: Selecting Elements

jQuery:

var paragraphs = $("p");
var firstParagraph = $("#first-paragraph");
var paragraphsWithClass = $(".highlight");

JavaScript:

var paragraphs = document.querySelectorAll("p");
var firstParagraph = document.getElementById("first-paragraph");
var paragraphsWithClass = document.querySelectorAll(".highlight");

Example 2: Manipulating CSS

jQuery:

$("h1").css("color", "blue");
$("#second-heading").css({
    "font-size": "24px",
    "font-weight": "bold"
});

JavaScript:

var h1Elements = document.querySelectorAll("h1");
h1Elements.forEach(function(element) {
    element.style.color = "blue";
});
var secondHeading = document.getElementById("second-heading");
secondHeading.style.fontSize = "24px";
secondHeading.style.fontWeight = "bold";

Example 3: Manipulating Content

jQuery:

$("#add-content").click(function() {
    $("#content").append("<p>New paragraph added!</p>");
});
$("#replace-content").click(function() {
    $("#content").html("<p>Content replaced!</p>");
});

JavaScript:

document.getElementById("add-content").addEventListener("click", function() {
    var newParagraph = document.createElement("p");
    newParagraph.textContent = "New paragraph added!";
    document.getElementById("content").appendChild(newParagraph);
});
document.getElementById("replace-content").addEventListener("click", function() {
    document.getElementById("content").innerHTML = "<p>Content replaced!</p>";
});

Additional content manipulation methods follow a similar pattern.

Example 4: Event Handling

jQuery:

$("#btn-click").click(function() {
    alert("Button clicked!");
});
$("input[type='text']").keypress(function(event) {
    if (event.which === 13) {
        alert("Enter key pressed!");
    }
});

JavaScript:

document.getElementById("btn-click").addEventListener("click", function() {
    alert("Button clicked!");
});
document.querySelectorAll("input[type='text']").forEach(function(input) {
    input.addEventListener("keypress", function(event) {
        if (event.which === 13) {
            alert("Enter key pressed!");
        }
    });
});

Additional event handling methods follow a similar pattern.

Example 5: AJAX

jQuery:

$("#load-data").click(function() {
    $.ajax({
        url: "data.txt",
        success: function(data) {
            $("#data-container").text(data);
        },
        error: function() {
            $("#data-container").text("Error loading data!");
        }
    });
});

JavaScript:

document.getElementById("load-data").addEventListener("click", function() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "data.txt", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById("data-container").textContent = xhr.responseText;
        } else if (xhr.readyState === 4) {
            document.getElementById("data-container").textContent = "Error loading data!";
        }
    };
    xhr.send();
});

Example 6: Effects

jQuery:

$("#hide-text").click(function() {
    $("#text-to-hide").hide();
});
// Other effects methods follow a similar pattern.

JavaScript:

document.getElementById("hide-text").addEventListener("click", function() {
    document.getElementById("text-to-hide").style.display = "none";
});
// Other effects methods follow a similar pattern.

Example 7: Form Submission

jQuery:

$("#my-form-post").submit(function(event) {
    event.preventDefault();

    var formData = $(this).serialize();

    $.ajax({
        type: "POST",
        url: "submit.php",
        data: formData,
        success: function(response) {
            alert("Form submitted successfully (POST)!");
        },
        error: function() {
            alert("Error submitting form (POST)!");
        }
    });
});
// Form submission using GET follows a similar pattern.

JavaScript:

document.getElementById("my-form-post").addEventListener("submit", function(event) {
    event.preventDefault();

    var formData = new FormData(this);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "submit.php", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            alert("Form submitted successfully (POST)!");
        } else if (xhr.readyState === 4) {
            alert("Error submitting form (POST)!");
        }
    };
    xhr.send(formData);
});
// Form submission using GET follows a similar pattern.