Add A Some Topics In jQuery As A Revision

Author: GziXnine

1 - Syntax/README.md

@@ -0,0 +1,113 @@
+# jQuery vs JavaScript Syntax Guide 🚀
+
+## Introduction
+This guide explains the syntax differences between `window.onload` in JavaScript and `$(document).ready()` in jQuery. We'll dive into the key concepts, practical use cases, and provide real-life examples for both approaches. 📝
+
+---
+
+## 1. `window.onload` in JavaScript
+
+The `window.onload` event triggers when the entire page, including all assets (images, iframes, stylesheets), has fully loaded.
+
+```javascript
+window.onload = function () {
+  console.log("The page and all assets have loaded completely.");
+  document.querySelector("p").style.color = "blue"; // Change the color of paragraph text
+};
+```
+### When to Use
+
+- **`window.onload`**:  
+  Use `window.onload` when your script depends on all resources being fully loaded (e.g., large images, external scripts, or iframes). This ensures everything on the page, including assets, is available before your code executes.
+---
+
+## 2. `$(document).ready()` in jQuery
+In jQuery, the $(document).ready() event runs as soon as the HTML document’s DOM is ready, without waiting for all external resources to load.
+
+```javascript
+$(document).ready(function () {
+  console.log("DOM is ready!");
+  $("p").css("color", "red"); // Change paragraph color once DOM is ready
+});
+```
+
+### Shorter Version:
+```javascript
+$(function () {
+  console.log("DOM is ready with the short jQuery syntax!");
+  $("p").hide(); // Hide paragraphs as soon as the DOM is ready
+});
+```
+
+### When to Use:
+Use `$(document).ready()` when you want to manipulate DOM elements as soon as they are loaded, without waiting for images or iframes.
+
+---
+
+## 3. Using ES6 Arrow Functions with jQuery
+
+ES6 introduced arrow functions for more concise code. You can use them with jQuery for cleaner syntax.
+
+```javascript
+$(document).ready(() => {
+  console.log("DOM ready with ES6 arrow function!");
+  $("p").css("color", "green"); // Change paragraph text to green
+});
+```
+
+### Shorter Version with ES6:
+```javascript
+$(() => {
+  console.log("Short ES6 syntax with jQuery!");
+  $("p").hide(); // Hide paragraphs
+});
+```
+## Key Points to Remember 📌
+
+| Feature              | `window.onload`                                        | `$(document).ready()`                               |
+|----------------------|--------------------------------------------------------|-----------------------------------------------------|
+| **Waits for all resources**  | Yes (including images, scripts, etc.)                   | No (only waits for the HTML document to load)       |
+| **When to use**       | Use when you need to ensure everything is fully loaded (e.g., images) | Use when you want to manipulate the DOM as soon as it’s available |
+
+# 4. Practical Examples
+## Example 1: Changing background color of `<div>` after DOM is ready
+```javascript
+$(document).ready(function () {
+  $("div").css("background-color", "#FF9800"); // Changes background to orange
+});
+```
+## Example 2: Hiding an image after DOM is ready
+```javascript
+$(document).ready(function () {
+  $("img").hide(); // This hides all images on the page immediately
+});
+```
+## Example 3: Display an alert once the entire page is fully loaded
+```javascript
+window.onload = function () {
+  alert("Page is fully loaded with all images!");
+};
+```
+## Example 4: Animating a div with jQuery
+```javascript
+$(function () {
+  $("div").fadeOut(2000); // This will fade out the div over 2 seconds once the DOM is ready
+});
+```
+## Example 5: Working with classes in jQuery
+```javascript
+$(document).ready(() => {
+  $("button").click(() => {
+    $("p").addClass("highlighted");
+  });
+});
+```
+---
+
+## Conclusion 🎯
+
+- **`window.onload`** is great when your code depends on all page assets being fully loaded.
+- **`$(document).ready()`** is much faster for DOM manipulation as it fires as soon as the HTML is parsed.
+- **ES6 arrow functions** give you cleaner, more concise syntax in your code.
+
+Feel free to play around with the examples to see how these events work in practice!