The ultimate jQuery guide

This is the ultimate jQuery guide in which I try to cover almost all concepts of jQuery in very quick and easy
to use manner, so that you can use this guide when you want to Quickly revise jQuery. (If you want to see
complete video tutorial then from here you can see that 😍)
🧠 Table of Content:
📌 What is jQuery?
💻 How to Install jQuery in our project?
👉 Syntax of jQuery
Selectors in jQuery

Hide and Show

🌠 Fade Effects
📨 Slide effect
🤟Modify HTML using jQuery
🤝 Modify CSS using jQuery
💌 AJAX in jQuery

📌 What is jQuery?
jQuery is the lightweight and most popular JavaScript library for simplified some JavaScript
Code.

For example, We want to add Click event to one button or we want to hide some elements on our
HTML page or we want to remove/add CSS class from some elements, all this type of thing we can
also do it in Vanilla JavaScript but using jQuery we can do that more easily.

Here is the example of Code for Adding click event for button in JavaScript: (This is just for example)

// Code for add Click event for Button in JavaScript

const element = document.getElementById("btn");

element.addEventListener("click", function() {
document.getElementById("output").innerHTML = "Good Morning!";
});

Now let’s see how we can do this same this in jQuery code:

// Code for add Click event for Button in jQuery

$("#btn").click(function() {
$("#output").html("Good Morning!");
});

The ultimate jQuery guide 1

 You can see, how jQuery make this code shorter? (Don’t worry about this syntax this is very easy 😉)
So, jQuery is like this - “Write less, do more“

Remember one thing, jQuery is not about replacing JavaScript completely. jQuery is for making
our code less for some features. We will see all that features in this guide.

💻 How to Install jQuery in our project?

There are 2 ways to add/install jQuery in our project:

1. Download jQuery.js file offline

2. using CDN link (I prefer this way)

So Open this link 🔗 and Copy CDN link of Latest jQuery and paste it before your main JavaScript file, so
you can use it in your JavaScript file.

..
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="js/script.js"></script> <!-- This is your main JavaScript file in which you will write code -->

👉 Syntax of jQuery
Syntax of jQuery is pretty simple for most jQuery code. Note that, this syntax is not for all jQuery code
but it will cover most of them.

// basic syntax of jQuery

$(selector).action();

So jQuery syntax divided into 3 parts.

The ultimate jQuery guide 2

 Selectors in jQuery
Selector is basically which element or elements we want to target.

jQuery Selectors works with HTML DOM elements like name, id, classes, types, attributes, values of
attributes, and many more.

But there are 3 ways we use most for jQuery:

Selector Type Example Description

$("p") Element Selector $("p").hide(); Hides all HTML <p> tags.

Hides all elements

$(".article") Class Selector $(".article").hide();
with class="article" .

Hides the element

$("#menu") ID Selector $("#menu").hide();
with id="menu" .

If you want to learn more selector than you can refer this table.

Syntax Description
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"

$("p:first") Selects the first <p> element

$("ul li:first") Selects the first <li> element of the first <ul>

$("ul li:first-child") Selects the first <li> element of every <ul>

$("[href]") Selects all elements with an href attribute

$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"

The ultimate jQuery guide 3

 Syntax Description

$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"

$(":button") Selects all <button> elements and <input> elements of type="button"

$("tr:even") Selects all even <tr> elements

$("tr:odd") Selects all odd <tr> elements

🤯 Events in jQuery
Events are the very important part of any webpage. It is basically a response for the user actions.

There is main 4 types of events:

1. Mouse events

2. Keyboard events

3. Form events

4. document & window events

Mouse Events Keyboard Events Form Events Document/Window Events

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave blur unload

Here are some examples of events:

// click event
$("#btn").click(function() {
$("p").hide();
});

// Keydown event
$("#nameInput").keydown(function() {
console.log("Keydown event called!")
});

This function will run when this event is called. All events are pretty simple, you can try them all by
yourself.

Hide and Show

Hide and show effects are very useful for web developers because now a days many websites have
this feature like sidebar, for which we have to add hide and show effect.

So here is an example of hide and show effect.

// Hide method
$("#hide").click(function(){

The ultimate jQuery guide 4

 $("p").hide();
});

// Show method
$("#show").click(function(){
$("p").show();
});

We can also pass here speed in miliseconds like 1000, 2000, 5000 or “slow” or “fast” and callback
function in hide and show methods:

// Hide method will take 1000ms(1s) to hide all paragraph elements

$("#hide").click(function(){
$("p").hide(1000);
});

// Show method with slow animation and callback run after show effect will end
$("#show").click(function(){
$("p").show("slow", function() {
console.log("This callback function will run after show method complete");
});
});

Bonus effect which is Toggle

This toggle() effect will toggle between hide and show effects. Shown elements are hidden and
hidden elements are shown:

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

🌠 Fade Effects
With jQuery you can fade an element in and out of visibility.

There are 4 fade effects available in jQuery:

1. fadeIn() - used to fade in element

2. fadeOut() - used to fade out element

3. fadeToggle() - used to toggle fade effect for element

4. fadeTo() - used to fading to a given opacity (value between 0 and 1)

Here is an example of fadeIn() effect. Note that you have to hide that element first.

// fadeIn effect
$("#btn_show").click(function(){
$("#p1").fadeIn();
$("#p2").fadeIn("slow");
$("#p3").fadeIn(3000);
});

// fadeTo effect
$("#btn_show").click(function() {

The ultimate jQuery guide 5

 $("#p1").fadeTo("slow", 0.5);
});

📨 Slide effect
With jQuery you can create a sliding effect on elements.

1. slideDown() - used to slide down an element

2. slideUp() - used to slide up an element

3. slideToggle() - used to toggle slide between up and down an element

Here is an example of slide effects:

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

$("#btn_flip").click(function(){
$("#panel").slideToggle("slow");
});

🤟Modify HTML using jQuery

There are some methods in jQuery, by using them we can modify the HTML markup on our webpage.

1. text() - used to set or get the text content of selected elements

2. html() - used to set or get the content with HTML markup of selected elements

3. val() - used to set or get the value of form fields

Let’s see the example of these methods

// HTML Code
<p id="sample">This is sample <b>paragraph</b> for jQuery</p>
<button id="manage" value="BTN">Manage Account</button>

//jQuery Code
$("#sample").text(); // Output: This is sample paragraph for jQuery

$("#sample").html(); // Output: This is sample <b>paragraph</b> for jQuery

$("#manage").val(); // Output: BTN

So, text() method will return only the text of jQuery, but html() method will return text with other
HTML markup.

🤝 Modify CSS using jQuery

The ultimate jQuery guide 6
 In jQuery, we can easily add, remove and toggle classes on any HTML elements with single line of
code.

These methods we can use for creating little animations on our website.

1. addClass() - used to add Class to selected element

2. removeClass() - used to remove Class from selected element

3. toggleClass() - used to toggle Class to selected element (This technique I use for sidebar
animations)

Let’s see the example of this methods

$("btn_add").click(function(){
$("h1, h2, p").addClass("blue");
$("div").removeClass("important");
});

// Also add or remove or toggle multiple classes like this

$("btn_add").click(function(){
$("div").toggleClass("blue important");
});

Bonus method which is CSS()

css() method is used to set or get style properties for selected element.

let’s see an example

$("p.second").css("background-color"); // return background-color of paragraph with second class

$("p.second").css("background-color", "blue"); // set the background-color to blue

$("p.second").css({"background-color": "black", "color": "tomato"}); // set multiple property by using object

💌 AJAX in jQuery
AJAX stands for Asynchronous JavaScript and XML.

AJAX is important for loading data from API/server without reloading the full page.

Many popular applications like Gmail, Instagram, Facebook, Youtube and many more using AJAX for
loading data in the background.

jQuery provides several methods for AJAX funcationality.

1. load() - used to load data from server in HTML element

2. get() - used to load data from the server using HTTP GET request

3. post() - used to send and load data from the server using HTTP POST request

Let’s say the example of this load() method

$(".box").load("sample.txt", function (response, status, xhr) {

if (status === "success") alert("Success!");
if (status === "error") alert("Error: " + xhr.statusText);
});

The ultimate jQuery guide 7

 Let’s say the example of this get() method

$.get("https://jsonplaceholder.typicode.com/users",
function (data, status) {
console.log(data);
console.log(status);
}
);

Let’s say the example of this post() method

$.post("https://jsonplaceholder.typicode.com/posts",
{ title: "This is title", body: "This is body" },
function (data, status) {
console.log(data, status);
}
);

So, I try to cover almost all-important topics of jQuery JavaScript library which will make our Code
easy and short. Practice some jQuery on your project and I am sure you will like jQuery a lot.

If you want to see the Full Tutorial of jQuery step by step, then Open this link 🔗 and watch complete
jQuery tutorial.

Also check my other Tutorials on my YouTube channel - Code Bless You ❤

The ultimate jQuery guide 8