DEV Community

TutsCoder
TutsCoder

Posted on • Originally published at tutscoder.com

3 1

jQuery Step By Step Tutorial for Beginners

Howdy Coders,

In this post, we will learn some basic usage of jQuery in web development.

In modern development, jQuery has become an essential thing.

It makes our developing work faster and it is also easy to learn.

So Let’s Start.

Pre-Requisites:

-To Learn jQuery Required to have some basic knowledge of HTML and Javascript.

What Is jQuery? 

jQuery is a fast, small, and feature-rich JavaScript library.


It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multiple browsers.

Benefits of using jQuery:

  • jQuery makes your JavaScript code smaller, faster, and cross-browser support.
  • Using jQuery you can Handle events like Click, hover, change, keyup, etc… and perform some action on it.
  • jQuery allows you to make add animation to your page like fade in, fade out, slide in, slide out or you can make custom animation.
  • With jQuery you can also make Ajax request without refreshing your whole page.

And lot more…..

Also Read,

In This example, we are going to some basic of Javascript Click event by making A button Enable/Disable by using Link.So Let’s begin:

Step-1:

Create an HTML page with its basic structure as follow:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Step-by-step</title>
</head>
<body>
<!-- Content Area-->
</body>
</html>

Step-2:

Add the element to perform some action on it.we’re going to add two links for enabling and disabling and one button.Add the following code inside the Body tag:

<a href="#" id="next">Disable</a>
<button>Register</button>
<a href="#" id="prev">Enable</a>

Step-3:

Now we are going to add Jquery Libray.

You can add Jquery by Downloading From official site Jquery.com.

But in This example we are going to use Google’s copy of Jquery.

Add The Following Code Below the Body tag:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”&gt;&lt;/script>

Step-4:

Add jQuery Script Below it.

In following code we are using link id ‘next’ and ‘prev’ to perform task.

<script type="text/javascript">
$("#next").click(function(){
$(this).next().attr('disabled',true);
});

$("#prev").click(function(){
$(this).prev().removeAttr('disabled');
});
</script>

Complete Code: Here is the Complete code achieve from the above steps.

<html>
<head></head>
<body>
<a href="#" id="next">Disable</a>
<button>Register</button>
<a href="#" id="prev">Enable</a>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#next").click(function(){
$(this).next().attr('disabled',true);
});

$("#prev").click(function(){
$(this).prev().removeAttr('disabled');
});
</script>
</body>
</html>

Conclusion:

So, These are some basic uses of Jquery. Thanks for reading.

Do let me know If you face any difficulties please feel free to comment below we love to help you. if you have any feedback suggestions then please inform us by commenting.

Don’t forget to share this tutorial with your friends on Facebook, and Twitter

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay