Hi there! If you are into web development just like me ( well Ig everyone is into web development nowadays) and you haven't heard of jQuery yet or have little knowledge about it, then this blog is for you

PRE-REQUISITE: JavaScript Basics

I was following the standard path of web development till now, I learned HTML very quickly, and moved onto CSS and Bootstrap, Tailwind. Built some cool-looking static websites. In the past few months, I learned JavaScript and built many small projects with HTML, CSS, and JavaScript. I can say that my basics of JavaScript are clear.

I was liking JavaScript since I could understand all the lines of code lol but there was one small issue. Since I started with JavaScript, and building all these nice little projects I observed that I started getting tired easily now. My fingers never used to hurt like this with just HTML and CSS. The issue with JavaScript is that we continuously have to select elements and create functions. This is simple but a little tiresome to type again n again...

For Example-

document.querySelector("h1").style.color="red";

//or
for(i = 0; i < document.querySelectorAll("button").length; i++){
document.querySelectorAll("button")[i].addEventListener("click", function(){
document.querySelector("h1").style.color="green";
    })
}

This is to change the color of "h1" whenever the user clicks on any of the buttons. This much code to write seems like manual labor lol.

See, how jQuery makes it easy for you:

$("button").click(function(){
$("h1").css("color", "green");
})

The above code does the same work but look how much less we have to type. My fingers will say thanks to me :)

What is jQuery?

It is a new tool that you can add to your toolkit which will make your development life easier. It is a popular JavaScript library developed by John Resig in 2006.

Isn't jQuery outdated?

• Useful: I know, that it is not that much in use today, thanks to React and other latest Front-End Frameworks but for beginners who still use HTML, CSS, and JavaScript to build simple websites, E-commerce landing pages or small projects, It is a useful skill and can come quite handy.

• Still in Demand: knowledge of jQuery is still considered a valuable asset for Front-End developers as it can help with building and manipulating interactive user interfaces. It is still a widely-used library in 2023. There are still many websites and web applications that use jQuery, so there is a demand for developers who are familiar with it.

• Easy to Learn: Besides, what's the harm in learning about it, since it's easy to learn😄

These are not only my thoughts, I researched about it online and multiple authors, developers, and industry guides share the same thought.

Let's dive into it and learn how we can use it in our projects🚀

How to implement it in our projects?

Ever used Bootstrap? There we use a CDN link and add it to our HTML File. It is just the same with jQuery, lemme show you guys how:

1. Open Google and search for jQuery

2. Click on the First link that comes up, It's the official jQuery website

1. Click on "download" and scroll down, You will find "jQuery with cdn". That's what we are looking for.

2. There you will find the "google cdn".

   

3. In Google CDN, you have to copy the latest script that is at the top, 3x snippet here.

   

4. Copy and paste this inside your HTML File, down where you place the js file script, We need to paste jQuery just above it

   

This is because we will be using jQuery in our JS File and we want the compiler to know about jQuery before encountering it in our JS File.

Let's say you start using jQuery, i.e. "$" sign in your JS file. If the link for the JS script is above then according to the flow of the program, when the compiler encounters the "$" sign in the js file, it will show the error "undefined". Hence, we need to place the jQuery link above the JS File to make the compiler familiar with jQuery first.

Selecting Elements with jQuery

I know I am sorry for the above long explanation you had to go through💀 But from here on out, It's very Easy trust me.

Now, in JavaScript, if we want to select any Element, we have some ways like-

1. document.getElementByClass()

2. document.getElementById()

3. document.querySelector() and document.querySelectorAll()

But, with the help of jQuery it's just- $()

Dollar sign and inside the brackets you can mention any element. If there are multiple elements with the same name then also it will work.

$("h1")    
$("button") // if there is single button in HTML, it will get selected, 
//if there are multiple buttons then also it will select all buttons

Manipulating Style with jQuery

We can manipulate css on the fly too just like JavaScript but with ease :)

For Eg: If we want to change the color of any element dynamically:

$("h1").css("color", "purple")   //Changing the color of heading to purple

But, I like the idea of separation. Keeping HTML for Structuring, CSS for Styling and JavaScript just for Behaviour. For that, we can create different classes in CSS and add/remove those classes on any element Dynamically.

$("h1").addClass("color-purple")  //Adding a class color-purple to our heading
// we can add multiple classes
$("h1").addClass("color-purple big-title margin-40")  //Adding three classes
$("h1").removeClass("big-title")  //removing a class big-title

This is useful when we want to add or remove any CSS Class on a specific behavior such as click or keypress or mouseover.

Manipulating Text with jQuery

It's as simple as:

$("h1").text("Any text you want to replace with the original")

But, we can also write HTML just like innerHTML in JavaScript.

$("div").html("<em>hello</em>")

Playing with attributes dynamically,

$("a").attr("src", "https//:google.com")   //we are accessing the src
//of the 'a' element and changing it "https//:google.com"

Handling Events with jQuery

Now, the interesting part. If you are familiar with events in JavaScript, you know we can use "addEventListener()" to any element that will listen for the specific event and once it is listened to, a callback function runs.

Something like this,

document.querySelector("button").addEventListener("click", function(){
alert("I got clicked");
})

In the above code, the element which is a button here looks for an event to happen that is "click", i.e.- whenever the user clicks the button. The Function will execute which will show an alert("I got clicked").

But with jQuery, we can type it in short like,

$("button").on("click", function(){
alert("I got clicked in jquery ;)");
})

The "on()" method works just like "addEventListener()". It takes two parameters, First is any javaScript event which you can check out from here -

JavaScript Events

Second, is a callback function, which gets called whenever the event happens for that element.

We can also do this,

$("button").click(function(){
alert("click click...");
})   //jquery making things simple

Conclusion

There are lots more stuff that we can do with jQuery. But the main purpose of this blog was to get you guys familiarized with jQuery and to share how easy it makes our life!

That's it, guys. I hope you enjoyed reading this blog. Write down your thoughts on jQuery as a useful library and if you have any doubts comment that down too.

See you in the next Blog👋