JQuery Tutorialprovides basic and advanced concepts of C# for beginners and professionals.

  1. Home
  2. JQuery Tutorial

JQuery Tutorial

Introduction, Basic JQuery

Introduction to JQuery

Back to: JQuery Tutorial

Introduction to jQuery

jQuery is a fast, small, and feature-rich JavaScript library designed to simplify the client-side scripting of HTML. It makes tasks like event handling, HTML document traversal and manipulation, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. Here's a brief introduction to the core concepts of jQuery:

Key Features of jQuery:

  1. Cross-browser compatibility: jQuery handles the different ways browsers implement JavaScript, so you don't have to worry about inconsistencies across different browsers.
  2. DOM Manipulation: jQuery allows you to easily select, traverse, and manipulate HTML documents using selectors.
  3. Event Handling: jQuery simplifies event handling by providing an easy way to attach events to elements and handle user interactions.
  4. Animation: jQuery offers built-in methods to create animations and effects, such as fading, sliding, and hiding/showing elements.
  5. AJAX: jQuery simplifies making asynchronous HTTP requests with AJAX, allowing you to load data from a server without reloading the entire page.
  6. Plugins: jQuery has a vast collection of plugins that add extra functionality to your web applications.

Getting Started with jQuery

To start using jQuery, you can include the library in your project either by downloading it or by including it via a Content Delivery Network (CDN).

CDN (Content Delivery Network) example:

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

Basic Syntax

The basic syntax of jQuery is designed to be easy and intuitive:

$(selector).action();

  • The $ is a shorthand for jQuery.
  • The selector is used to "find" HTML elements.
  • The action is the method you want to apply to the elements.

Example:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide();
      });
    });
  </script>
</head>
<body>

<button>Click me to hide paragraph</button>
<p>This is a paragraph that will be hidden when the button is clicked.</p>

</body>
</html>

In this example:

  • $() is used to access the DOM elements.
  • "button" selects all button elements, and click() binds an event handler to it.
  • $("p").hide(); hides all <p> elements when the button is clicked.

jQuery Selectors

jQuery selectors are used to "find" or select HTML elements based on their name, id, classes, types, attributes, values, etc.

  • $("#id"): Selects an element with a specific ID.
  • $(".class"): Selects elements with a specific class.
  • $("element"): Selects all elements of a certain type (e.g., $("p") selects all paragraphs).

Example:

$("#myID").hide();  // Hides an element with ID "myID"
$(".myClass").show();  // Shows all elements with class "myClass"

Event Handling

jQuery makes event handling simple with its built-in methods:

  • click(): Triggered when an element is clicked.
  • hover(): Triggered when the mouse is moved over or off an element.
  • on(): Binds an event to the element(s).

Example:

$("button").click(function(){
  alert("Button clicked!");
});

jQuery and AJAX

jQuery provides easy methods to make asynchronous HTTP requests and dynamically load data into a web page.

$.ajax({
  url: "your-server-endpoint",
  method: "GET",
  success: function(data) {
    console.log(data);
  }
});

Conclusion

jQuery simplifies JavaScript programming by providing easy-to-use syntax, cross-browser support, and a wealth of built-in functionalities for DOM manipulation, event handling, and Ajax. Despite the rise of more modern JavaScript frameworks, jQuery remains popular in many legacy systems and projects due to its ease of use and extensive plugin ecosystem.

Scroll to Top