jQuery - Basic jQuery Syntax

jQuery is a JavaScript library designed to simplify DOM manipulation, event handling, AJAX calls, and animations. Its syntax is short, simple, and powerful, allowing you to write fewer lines of code compared to pure JavaScript.

1. Basic jQuery Syntax

The basic jQuery syntax is:

$(selector).action();

Explanation:

$ → Accesses jQuery.
selector → Selects HTML elements (like CSS selectors).
action() → Performs an action on the selected element.

Example:

$("#btn").hide();   // Hides the element with id="btn"
$(".box").show();   // Shows elements with class="box"
$("p").css("color", "red"); // Changes all <p> text to red

2. jQuery Selectors

jQuery selectors are similar to CSS selectors.

Selector	Description	Example
`$("#id")`	Selects element by ID	`$("#title").hide();`
`$(".class")`	Selects elements by class	`$(".box").fadeIn();`
`$("tag")`	Selects all elements by tag	`$("p").css("color","blue");`
`$("div p")`	Selects `<p>` inside `<div>`	`$("div p").hide();`
`$("p:first")`	First `<p>` element	`$("p:first").css("color","red");`
`$("p:last")`	Last `<p>` element	`$("p:last").css("color","blue");`
`$("input:text")`	Text input fields	`$("input:text").val("Hello");`
`$("a[target='_blank']")`	Attribute selector	`$("a[target='_blank']").hide();`

3. jQuery Document Ready

To ensure your jQuery code runs after the page is loaded, use:

$(document).ready(function(){
    // jQuery code here
});

Shortcut:

$(function(){
    // jQuery code here
});

Example:

$(function(){
    $("#btn").click(function(){
        alert("Button clicked!");
    });
});

4. jQuery Events

jQuery makes handling events easier.

Event	Description	Example
`click()`	When element is clicked	`$("#btn").click(function(){ alert("Clicked"); });`
`dblclick()`	Double-click event	`$("#btn").dblclick(function(){ alert("Double Click"); });`
`mouseenter()`	Mouse enters an element	`$("#box").mouseenter(function(){ $(this).css("background","yellow"); });`
`mouseleave()`	Mouse leaves an element	`$("#box").mouseleave(function(){ $(this).css("background","white"); });`
`keydown()`	Key pressed	`$(document).keydown(function(e){ console.log(e.key); });`
`change()`	Input value changes	`$("#name").change(function(){ alert($(this).val()); });`

5. jQuery Effects

jQuery provides built-in effects for animations and transitions.

A. Show / Hide / Toggle

$("#showBtn").click(function(){
    $("#box").show();
});

$("#hideBtn").click(function(){
    $("#box").hide();
});

$("#toggleBtn").click(function(){
    $("#box").toggle();
});

B. Fade Effects

$("#fadeIn").click(function(){
    $("#box").fadeIn();
});

$("#fadeOut").click(function(){
    $("#box").fadeOut();
});

$("#fadeToggle").click(function(){
    $("#box").fadeToggle();
});

C. Slide Effects

$("#slideDown").click(function(){
    $("#box").slideDown();
});

$("#slideUp").click(function(){
    $("#box").slideUp();
});

$("#slideToggle").click(function(){
    $("#box").slideToggle();
});

6. jQuery CSS & HTML Manipulation

A. CSS Manipulation

$("#box").css("color", "blue");          // Change text color
$("#box").css({"color":"white","background":"black"}); // Multiple CSS

B. HTML & Text

$("#box").html("<b>New Content</b>");   // Change HTML
$("#box").text("Plain Text");          // Change text only

C. Attributes

$("#link").attr("href", "https://google.com"); // Change link URL

D. Form Values

$("#name").val("John Doe");  // Set value
alert($("#name").val());     // Get value

7. jQuery Chaining

You can chain multiple actions on the same element:

$("#box")
    .css("color", "white")
    .slideUp(2000)
    .slideDown(2000);

8. jQuery AJAX Syntax

jQuery makes AJAX calls simple:

$.ajax({
    url: "data.json",
    type: "GET",
    success: function(response){
        console.log(response);
    },
    error: function(){
        alert("Error loading data!");
    }
});

9. jQuery Traversing

Used to navigate the DOM.

$("#list").children().css("color", "red");     // All children
$("#list").find("li").css("color", "blue");    // Find elements
$("#item").parent().css("border", "1px solid"); // Parent element

10. Complete Example

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(function(){
        $("#btn").click(function(){
            $("#box").fadeToggle();
        });
    });
    </script>
</head>
<body>
    <button id="btn">Toggle Box</button>
    <div id="box" style="width:200px; height:100px; background:skyblue; margin-top:10px;">
        Hello jQuery!
    </div>
</body>
</html>