jQuery Tutorials

jQuery is a useful tool for programmers when coding. This tutorial will cover the basics of jQuery and its related content. Through the article you will have an overview of this Framework and can start practicing with it.

What is jQuery

In 2006, JavaScript launched a new Framework – jQuery – to increase work efficiency, save time, and simplify operations.

Through jQuery, programmers can easily manipulate HTML, DOM, CSS, Ajax, create animations and effects,…

jQuery is also an extremely lightweight library, which is supported and works smoothly on most browsers today.

How to get started with jQuery?

To use JQuery, users can choose from two ways:

Internal implementation: that is, you would load the jQuery library on jQuery.com onto your device and reference it in an HTML <script> tag that looks like this:

<script src="jquery-3.6.0.min.js"></script>

Using CDN ( Content Delivery Network): Directly reference the jQuery library from the CDN (CDN Based Version) on Google, for example:

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

Syntax in jQuery

In jQuery, all code programs start with the dollar sign $. 

Syntax : $(selector).action()

  • $ : This is the sign to declare using Jquery
  • selector : the main selector elements on the web page. Users can choose by id, class, or tag name.
  • action : is the action that the user intends to perform on the web element they have selected

For example, to take all the paragraphs (p tags) in a web page we have:


Or when clicking the button, all p tags are hidden.


jQuery Selectors 

According to the DOM mechanism jQuery Selectors are used to select one or more HTML elements according to the DOM mechanism and the user can manipulate that element.

Below is a list of all the most frequently used selectors.

$(‘*’)To select all elements in HTML
$(‘elementName’);To select by element in the web page
$(‘.className’);To select by class name of the HTML tag
$(‘#idName’);To select by ID
$(‘selector:first’);Choose the first ingredient
$(‘element.class’);//or$(‘element.id’);Select by tags by specific id, or class.

jQuery Effects

Using jQuery makes it possible to create effects quickly.

The hide function simply sets the display:none CSS property for the specified element. Otherwise, the show() function will restore the display property, usually display block, inline, or inline-block.

The syntax is as follows:



In there:

  • selectors: type the HTML element you want
  • speed: hidden/visible, default is 0
  • callback: a function to be executed after hiding/showing the element is completed.

jQuery Events

Events are actions that can be detected by your web application. Example: Clicks, web page loads, mouse hovers over an element…

When these events run, you can use custom functions (Event Handler) to respond to whatever you want to the event.

Some frequently used events in jQuery:

$(document).ready()The event runs when the web page’s html document has finished loading and the DOM tree is created.
click()run when click
dblclick()Activate on double click
mousedown()/mouseenter()/mouseleave()run when mouse button is pressedrun when the mouse moves inside an element’s arearun when the mouse moves out of an element’s area

jQuery DOM Manipulation

One of the important parts of jQuery is the ability to manipulate the DOM. jQuery contains many DOM-related methods for easy access and manipulation of elements and properties.

DOM stands for Document Object Model and defines a standard for retrieving XML and HTML documents.

In jQuery there are 3 simple methods for DOM manipulation:

  • text() – Sets or returns the text content of the selected elements
  • html() – Sets or returns the content of selected elements (including HTML)
  • val() – Set or return the value of data fields

Replace DOM Element in jQuery

To replace a DOM element with the specified HTML or DOM elements, we using the replaceWith() method.



  • content is what you want to replace the original element with. It can be HTML or text.
  • function: function returns request content
  • Index: returns the index position of the element.

Insert DOM Elements in jQuery

Use the before()/ after() methods to insert content before/after a selected element.





For example:

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    $("p").before("<p>Welcome to LearnShareIT</p>");
<button>Click here to insert content before each p element</button>
<p>Hi Nice To Meet You.</p>


jQuery CSS

To set CSS properties, use css( PropertyName, PropertyValue ).


selector.css( PropertyName, PropertyValue );

  • PropertyName accepts the value passed as a JavaScript string
  • PropertyValue can be a string or integer.

To set multiple CSS properties, use the syntax:

selector.css( {key1:value1, key2:value2....keyN:valueN})

  • key: pass in the attribute 
  • value: the value of the attribute

For example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     $("p").css({"background-color": "red", "font-size": "180%"});
<p style="background-color:#ff0000">Welcome to LearnShareIT website.</p>
<p style="background-color:#00ff00">Welcome to LearnShareIT website.</p>
<p style="background-color:#0000ff">Welcome to LearnShareIT website.</p>
<p>Welcome to LearnShareIT website.</p>
<button>Set multiple styles for p</button>


jQuery Ajax

With the jQuery AJAX methods, we can request text, HTML, XML and JSON from the server using both HTTP GET and HTTP POST protocols. We can also get data from the outside directly into the selected element.

Some commonly used methods:

jQuey Load() is used to load data from the server and put the returned data into the selected element.



  • URL: Specify the URL from which you want to get the data
  • data: Key/value pair sent with the request.
  • callback: The name of a function to be executed after the load() method completes.

jQuery $.post() is used to request data from the server using the HTTP POST method.



jQuery ajax() is used to make asynchronous (async) HTTP requests.


$.ajax({name:value, name:value, ... })

Tutorials on JQuery


Thus, we have gathered all the basic and necessary knowledge of jQuery in this tutorial. If you have learned JavaScript well, then working with jQuery will become easier. Interested in other programming languages, you can visit the homepage of the LearnShareIT website to find it. Thanks for reading!

Leave a Reply

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