CodeWithHarry Watch on YouTube

jQuery Tutorial For Beginners In Hindi - हिंदी में

3 min read 1 day ago

Published on Feb 19, 2025 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial provides a comprehensive introduction to jQuery for beginners in Hindi. jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversal and manipulation, event handling, animation, and Ajax interactions. By the end of this tutorial, you'll have a solid foundation in jQuery and be ready to enhance your web development projects.

Step 1: Setting Up jQuery

To start using jQuery, you need to include it in your project.

Download jQuery: Visit the jQuery website and download the latest version.
Include jQuery in Your HTML:
- Add the following line in your HTML <head> section to include jQuery from a CDN:
```
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```
- Alternatively, you can link to the local jQuery file if you downloaded it.

Step 2: Understanding jQuery Syntax

Familiarize yourself with the basic syntax of jQuery, which is built on top of JavaScript.

Basic Structure:
```
$(selector).action();
```
- $(selector) is used to select HTML elements.
- action() refers to the jQuery method to be performed on the selected elements.

Step 3: Selecting Elements

Learn how to select elements using jQuery.

Selecting by ID:
```
$('#elementId');
```
Selecting by Class:
```
$('.className');
```
Selecting by Tag Name:
```
$('tagName');
```

Step 4: Manipulating HTML

Explore how to manipulate HTML content with jQuery.

Changing Text:
```
$('#elementId').text('New Text');
```

Changing HTML:

$('#elementId').html('<strong>New HTML Content</strong>');

Changing Attributes:

$('#elementId').attr('src', 'newImage.png');

Step 5: Event Handling

Learn to handle events using jQuery.

Click Event:

$('#buttonId').click(function() {
    alert('Button clicked!');
});

Hover Event:

$('#elementId').hover(
    function() { $(this).css('color', 'red'); },
    function() { $(this).css('color', 'black'); 
});

Step 6: Animations

Implement simple animations with jQuery.

Basic Show/Hide:

$('#elementId').hide(); // Hides the element
$('#elementId').show(); // Shows the element

Fading Effect:

$('#elementId').fadeIn(); // Fades in the element
$('#elementId').fadeOut(); // Fades out the element

Step 7: Ajax Requests

Understand how to make asynchronous requests with jQuery.

Basic Ajax GET Request:

$.ajax({
    url: 'https://api.example.com/data',
    type: 'GET',
    success: function(data) {
        console.log(data);
    }
});

Conclusion

In this tutorial, you learned the fundamentals of jQuery, including setup, syntax, element selection, HTML manipulation, event handling, animations, and Ajax requests. With these skills, you can start adding interactivity and dynamic features to your web applications. As a next step, explore more advanced jQuery methods and consider integrating jQuery with other frameworks like Bootstrap or React for enhanced web development capabilities.

Table of Contents

Recent