JQuery

Jquery Introduction

Introduction to jQuery

What is jQuery?

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

  • It simplifies HTML document traversal, event handling, animation, and Ajax interactions.

  • Created to make JavaScript easier to use on websites.


Why Use jQuery?

  • Cross-browser compatibility: Works uniformly across different browsers.

  • Simplifies JavaScript syntax: Less code to do common tasks.

  • Rich set of utilities: DOM manipulation, event handling, effects, AJAX, and more.

  • Large community & plugins: Many ready-made solutions available.


Basic Syntax

js
$(selector).action();
  • $ is the jQuery function.

  • selector finds HTML elements (like CSS selectors).

  • action() performs an operation on the selected elements.


Example: Change Text on Button Click

html
<button id="btn">Click Me</button>
<p id="para">Hello!</p>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(
'#btn').click(function() {
$('#para').text('You clicked the button!');
});
</script>


Key jQuery Features

Feature Description
DOM Manipulation Easily change HTML content/styles
Event Handling Attach events like click, hover
Effects & Animation Show/hide, fade, slide effects
AJAX Load data asynchronously
Utilities Helpers for iteration, data, etc.

Getting Started

  • Include jQuery library from CDN:

html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  • Use $() to select elements and call jQuery methods.

Leave a Reply

Your email address will not be published. Required fields are marked *