jQuery

JavaScript library that simplifies DOM manipulation and AJAX calls

Lessons
  • What is jQuery?
  • Element Selection
  • Event Handling
  • Changing Content
  • CSS Manipulation
  • Show/Hide Elements
  • Working with Forms
  • AJAX Requests
  • Adding Elements to the DOM
  • Animations
What is jQuery?

jQuery is a fast JavaScript library that simplifies HTML document handling, event binding, and AJAX.

Example:
<script> $(document).ready(function() { alert('Page is ready!'); }); </script>

Example Description:

Shows an alert when the page has finished loading.
Element Selection

Use $() to select and manipulate HTML elements.

Example:
$('#myDiv').hide();

Example Description:

Hides the element with ID myDiv.
Event Handling

jQuery simplifies handling user actions like clicks.

Example:
$('button').click(function() { alert('Button clicked!'); });

Example Description:

Displays an alert when a button is click
Changing Content

jQuery allows easy content updates.

Example:
$('#message').text('New message!');

Example Description:

Changes the text of the #message element.
CSS Manipulation

You can change styles directly.

Example:
$('p').css('color', 'red');

Example Description:

All <p> elements will be styled red.
Show/Hide Elements

jQuery supports hiding/showing elements with effects.

Example:
$('#box').fadeOut();

Example Description:

Fades out the #box element.
Working with Forms

You can easily retrieve input values

Example:
let name = $('#nameInput').val();

Example Description:

Gets the value entered in an input field
AJAX Requests

Fetch data from a server without reloading the page.

Example:
$.get('/api/user', function(data) { console.log(data); });

Example Description:

Sends a GET request and logs the returned data.
Adding Elements to the DOM

You can dynamically add elements to the page

Example:
$('#list').append('<li>New item</li>');

Example Description:

Adds a new list item to an existing list.
Animations

jQuery provides simple built-in animations.

Example:
$('#box').slideToggle();

Example Description:

Toggles visibility of the box with a sliding effect.
You have completed the lesson . Add To Your Completed Course

You have a test for this course. Do you want to submit it to pass the course?