jQuery Basics

Syntax:

$(selector).action()

Parameters:

  • $: define/access the JQuery.
  • selector: defines selecting the HTML element.
  • action(): defines the action to be performed on the selector elements.

Example:

$("#test").hide() 

Selecting Elements:

In JQuery, selecting elements is similar to CSS. JQuery selection allows you to target and manipulate HTML elements on a web page. The basic syntax for selecting elements in JQuery is similar to CSS selectors.

Syntax:

$("element_name_id_class") 

Manipulating Elements:

In JQuery, manipulating elements involves selecting HTML elements and performing various actions like changing their content, modifiying attributes, applying styles, or handling events.

  • Chaning Text Content: To change the text content of an element, you can use the ‘text()’ method.
$(document).ready(function() {
// Change text content of a paragraph
$('p').text('Geeks For Geeks');
});
  • Changing HTML Content: To change the HTML content of an element, use the HTML () method.
$(document).ready(function() {
// Change HTML content of a div
$('#myDiv').html('<strong>New HTML content</strong>');
});

Handling Events:

In JQuery, Handling events is very easy. It is also a crucial aspect of web development. Handling events allows you to respond to user interaction such as clicks, keypresses, or form submission. Here’s a basic example of Handling Events in JQuery

$(document).ready(function() {
// Selecting a button element
$('button').click(function() {
$('p').text ("Geeks for Geeks)
});
});

Ajax Requests:

Ajax(Asynchronous JavaScript and XML) allows you to send and receive data from the server without reloading the entire page. JQuery simplifies this process with its AJAX methods. There are many methods in JQuery for handling AJAX. Here, I have give very simple example to load the data using AJAX request. you can read more about ajax() method.

Filename: data.txt

Geeks For Geeks
Geeks for Geeks
Geeks for Geeks

Getting Started with jQuery

jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object Model).

Similar Reads

Prerequisites

DOMHTMLAJAX...

How to use jQuery in a Project?

To use JQuery in your project, we must include JQuery in our project. There are several ways to do this task. In this part, I am using the CDN (Content Delivery Network) to do this task. Include this CDN link in your html document in the head tag....

jQuery Basics

Syntax:...

Steps to run the code

Running a jQuery project involves a few key steps. jQuery is a JavaScript library, so you’ll need to create HTML, CSS, and JavaScript files to build your project....

Advantages of using jQuery

These are the advantagse of using JQuery:...