The Ultimate jQuery Tutorial for Web Developer: Learn Selectors, Events & DOM Manipulation

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers. It’s a popular choice for simplifying and streamlining the process of writing JavaScript code for web development.

Advantages of Jquery

1. **Cross-browser Compatibility:** jQuery abstracts away the differences between various browsers, providing a consistent and reliable interface for developers.

2. **Ease of Use:** jQuery simplifies common tasks, such as DOM manipulation, event handling, and animation, making it easier for developers to write concise and readable code.

3. **Ajax Support:** jQuery simplifies asynchronous requests and allows developers to easily implement AJAX functionality for dynamic web page updates.

4. **Rich Plugin Ecosystem:** jQuery has a vast ecosystem of plugins that extend its functionality. These plugins cover a wide range of features, from sliders and form validation to complex UI components.

5. **Animation and Effects:** jQuery simplifies the process of adding animations and effects to web pages, enhancing the user experience.

6. **Chaining:** jQuery allows method chaining, where multiple methods can be applied to a set of elements in a single line of code. This leads to more compact and expressive code.

7. **Community Support:** jQuery has a large and active community. This means there are abundant resources, tutorials, and forums where developers can seek help and share knowledge.

8. **Documentation:** jQuery has well-organized and comprehensive documentation, making it easy for developers to learn and reference.

9. **Performance:** While the performance advantages of jQuery have diminished with improvements in native browser APIs, it still provides a level of abstraction that can be beneficial, especially for less experienced developers.

10. **Integration:** jQuery can be easily integrated with other libraries and frameworks. It’s not an all-or-nothing choice, and developers can use jQuery alongside other tools.

Integrating Jquery through CDNs:

Integrating jQuery through Content Delivery Networks (CDNs) is a common and convenient way to include the library in your web project. Here’s a basic guide on how to do it:

1. **Choose a CDN:**
   Select a CDN provider that hosts jQuery. Popular choices include Google CDN, Microsoft CDN, and CDNJS. For example, Google’s CDN link for jQuery looks like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. **Include the CDN Link in Your HTML:**
Add the CDN link to the `<head>` section of your HTML file. It’s generally a good practice to include it before other scripts that might depend on jQuery.

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Your Web Page</title>
 <! - Include jQuery from CDN →
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </head>
 <body>
 <! - Your content goes here →
 </body>
 </html>

3. **Check the Version:**
Ensure that you use the correct version of jQuery in the CDN link. In the example above, it’s version 3.5.1. You can check the official jQuery website or the documentation of the CDN provider for the latest version.

4. **Fallback Mechanism:**
It’s a good practice to include a fallback mechanism in case the CDN is not accessible. You can download the jQuery library and host it locally, providing a fallback link in case the CDN fails.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>window.jQuery || document.write('<script src="/path/to/your/local/jquery.min.js"><\/script>')</script>

This ensures that your page will still function even if the CDN is unavailable.

Get Krishnakumar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

By following these steps, you can easily integrate jQuery into your web project using a CDN. This method has the advantage of faster loading times, as users may already have the jQuery library cached from visiting other websites that use the same CDN link.

Understanding Jquery Selectors :

jQuery selectors are a powerful feature that allows you to select and manipulate HTML elements using concise and expressive syntax. They are inspired by CSS selectors and make it easy to target specific elements on a web page. Here are some common jQuery selectors:

1. **Element Selector:**

$("p") // Selects all <p> elements

2. **ID Selector:**

$("#myId") // Selects the element with the ID "myId"

3. **Class Selector:**

$(".myClass") // Selects all elements with the class "myClass"

4. **Attribute Selector:**

$("[name='username']") // Selects elements with the attribute name='username'

5. **Multiple Selector:**

$("p, .myClass, #myId") // Selects paragraphs, elements with class "myClass," and element with ID "myId"

6. **Descendant Selector:**

$("div p") // Selects all <p> elements that are descendants of a <div>

7. **Child Selector:**

$("ul > li") // Selects all <li> elements that are direct children of a <ul>

8. **First and Last Selector:**

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

9. **Even and Odd Selector:**

$("tr:even") // Selects even rows in a table
$("tr:odd") // Selects odd rows in a table

10. **Filter Selector:**

$("p").filter(".myClass") // Selects <p> elements with class "myClass"

11. **Not Selector:**

$("p").not(".exclude") // Selects <p> elements that do not have class "exclude"

These are just a few examples, and jQuery provides a rich set of selectors that allow you to target elements based on various criteria. Selectors play a crucial role in simplifying DOM manipulation tasks, making it easier for developers to interact with and modify elements on a web page.

UI Components

jQuery can be used to enhance the functionality and interactivity of various UI components, including buttons, lists, toolbars, and menus. Let’s look at some examples:

1. **Buttons:**
   You can use jQuery to add click event handlers to buttons and perform actions when the button is clicked. For example:

<button id="myButton">Click me</button>
<script>
 $(document).ready(function(){
 $("#myButton").click(function(){
 alert("Button clicked!");
 });
 });
 </script>

2. **Lists:**
jQuery can be used to manipulate lists dynamically, add or remove items, or change their content.

<ul id="myList">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
<script>
 $(document).ready(function(){
 // Add a new item to the list
 $("#myList").append("<li>New Item</li>");
// Remove the second item from the list
 $("#myList li:eq(1)").remove();
 });
 </script>

3. **Toolbars:**
You can use jQuery to create interactive toolbars, toggle buttons, or handle toolbar events.

<div id="myToolbar">
 <button id="btn1">Button 1</button>
 <button id="btn2">Button 2</button>
</div>
<script>
 $(document).ready(function(){
 // Handle button click events
 $("#btn1").click(function(){
 alert("Button 1 clicked!");
 });
$("#btn2").click(function(){
 alert("Button 2 clicked!");
 });
 });
 </script>

4. **Menus:**
jQuery can be used to create dropdown menus or handle menu item selections.

<ul id="myMenu">
 <li>Home</li>
 <li>About</li>
 <li>Contact</li>
</ul>
<script>
 $(document).ready(function(){
 // Handle menu item click events
 $("#myMenu li").click(function(){
 alert("Selected: " + $(this).text());
 });
 });
 </script>

These are just basic examples, and jQuery provides a wide range of methods and functions for more complex UI interactions and animations. Always make sure to include jQuery in your HTML file before using these scripts.

Handling Forms using Jquery :

Handling forms with jQuery can greatly enhance the user experience by providing dynamic interactions and immediate feedback. Here are some common tasks related to form handling using jQuery:

1. **Form Submission:**
   You can prevent the default form submission behavior and handle it using jQuery. This is often done to perform actions like form validation before submission.

<form id="myForm">
 <! - Form fields go here →
 <input type="submit" value="Submit">
</form>
<script>
 $(document).ready(function(){
 $("#myForm").submit(function(event){
 // Prevent the default form submission
 event.preventDefault();
// Perform form validation or other actions
 // …
// If everything is valid, you can submit the form
 // $("#myForm").submit();
 });
 });
</script>

2. **Form Validation:**
jQuery can be used to validate form fields, ensuring that the user enters the correct information before submitting the form.

<form id="myForm">
 <input type="text" id="username" name="username" placeholder="Username">
 <span id="usernameError" style="color: red;"></span>
 <! - Other form fields go here →
 <input type="submit" value="Submit">
</form>
<script>
   $(document).ready(function(){
   $("#myForm").submit(function(event){
   // Prevent the default form submission
   event.preventDefault();
  // Perform form validation
   var username = $("#username").val();
   if (username === "") {
   $("#usernameError").text("Username is required");
   } else {
   // If everything is valid, you can submit the form
   $("#myForm").submit();
   }
   });
   });
</script>

3. **Ajax Form Submission:**
You can use jQuery’s Ajax functions to submit a form asynchronously, without reloading the entire page. This is useful for providing a seamless user experience.

<form id="myForm">
 <! - Form fields go here →
 <input type="submit" value="Submit">
</form>
<script>
   $(document).ready(function(){
   $("#myForm").submit(function(event){
   // Prevent the default form submission
   event.preventDefault();
  // Perform form validation or other actions
   // …
  // If everything is valid, submit the form using Ajax
   $.ajax({
   type: "POST",
   url: "your-server-endpoint",
   data: $("#myForm").serialize(),
   success: function(response){
   // Handle the response
   },
   error: function(error){
   // Handle errors
   }
   });
   });
   });
</script>

These are just a few examples, and the complexity of form handling with jQuery can vary based on the specific requirements of your application. jQuery simplifies many aspects of form manipulation and validation, but keep in mind that modern frameworks like React or Vue.js also offer powerful form-handling capabilities.

Jquery Events :

jQuery provides a powerful and easy-to-use event handling system. Events are actions or occurrences that happen in the browser, such as a user clicking a button or resizing the window. Here are some common jQuery event handling examples:

1. **Click Event:**

<button id="myButton">Click me</button>
<script>
   $(document).ready(function(){
   $("#myButton").click(function(){
   alert("Button clicked!");
   });
   });
</script>

2. **Double Click Event:**

<button id="myButton">Double-click me</button>
<script>
   $(document).ready(function(){
   $("#myButton").dblclick(function(){
   alert("Button double-clicked!");
   });
   });
</script>

3. **Mouse Enter/Leave Events:**

<div id="myDiv" style="width: 100px; height: 100px; background-color: lightblue;"></div>
<script>
   $(document).ready(function(){
   $("#myDiv").mouseenter(function(){
   $(this).css("background-color", "lightgreen");
   }).mouseleave(function(){
   $(this).css("background-color", "lightblue");
   });
   });
</script>

4. **Form Submit Event:**

<form id="myForm">
 <input type="text" id="username" name="username" placeholder="Username">
 <input type="submit" value="Submit">
</form>
<script>
   $(document).ready(function(){
   $("#myForm").submit(function(event){
   alert("Form submitted!");
   event.preventDefault(); // Prevents the default form submission behavior
   });
   });
</script>

5. **Keydown Event:**

<input type="text" id="myInput" placeholder="Type something">
<script>
   $(document).ready(function(){
   $("#myInput").keydown(function(){
   console.log("Key pressed");
   });
   });
</script>

6. **Resize Event:**

<div id="myResizableDiv" style="width: 200px; height: 200px; background-color: lightcoral;"></div>
<script>
   $(document).ready(function(){
   $(window).resize(function(){
   console.log("Window resized");
   });
   });
</script>

These are just a few examples, and jQuery supports a wide range of events. You can attach multiple event handlers to a single element, and events can also be delegated for dynamically added elements. Event handling is a key aspect of creating dynamic and interactive web applications.