jQuery Introduction

jQuery is a JavaScript Library.

jQuery greatly simplifies JavaScript programming.

jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

The jQuery library contains the following features:

  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities

Tip: In addition, jQuery has plugins for almost any task out there.

jQuery Syntax

The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(*selector*).*action*()

  • A $ sign to define/access jQuery
  • A (selector) to “query (or find)” HTML elements
  • A jQuery action() to be performed on the element(s)

The Document Ready Event

You might have noticed that all jQuery methods in our examples, are inside a document ready event:

1
2
3
4
5
$(document).ready(function(){

 *// jQuery methods go here...*

});

This is to prevent any jQuery code from running before the document is finished loading (is ready).

Tip: The jQuery team has also created an even shorter method for the document ready event:

1
2
3
4
5
$(function(){

 *// jQuery methods go here...*

});

Use the syntax you prefer. We think that the document ready event is easier to understand when reading the code.

jQuery Selectors

All selectors in jQuery start with the dollar sign and parentheses: $().

The element Selector

You can select all <p> elements on a page like this:

1
$("p")
1
2
3
4
5
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

The #id Selector

To find an element with a specific id, write a hash character, followed by the id of the HTML element:

1
$("#test")
1
2
3
4
5
6

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

The .class Selector

To find elements with a specific class, write a period character, followed by the name of the class:

1
$(".test")
1
2
3
4
5
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

Functions In a Separate File

If your website contains a lot of pages, and you want your jQuery functions to be easy to maintain, you can put your jQuery functions in a separate .js file.

1
2
3
4
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>

jQuery Event Methods

The next step is to define what should happen when the event fires. You must pass a function to the event:

1
2
3
$("p").click(function(){
  // action goes here!!
});

jQuery HTML

Three simple, but useful, jQuery methods for DOM manipulation are:

  • text() - Sets or returns the text content of selected elements
  • html() - Sets or returns the content of selected elements (including HTML markup)
  • val() - Sets or returns the value of form fields

jQuery - AJAX

In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.

jQuery load() Method

The load() method loads data from a server and puts the returned data into the selected element.

Syntax:

$(selector).load(URL,data,callback);

The required URL parameter specifies the URL you wish to load.

The optional data parameter specifies a set of querystring key/value pairs to send along with the request.

The optional callback parameter is the name of a function to be executed after the load() method is completed.

The following example loads the content of the file “demo_test.txt” into a specific <div> element:

1
$("#div1").load("demo_test.txt");

It is also possible to add a jQuery selector to the URL parameter.

The following example loads the content of the element with id=”p1”, inside the file “demo_test.txt”, into a specific <div> element:

1
$("#div1").load("demo_test.txt #p1");