Skip to content

Introduction

jQuery) is a JavaScript library that greatly simplifies programming and creating dynamic pages. Instead of multiple lines in pure Javascript, by using jQuery, we sometimes replace the code with even one line of code. A comparison of jQuery syntax with pure Javascript in selected examples can be found here.

Adding jQuery to the project

To use the jQuery library in a project you must first attach it. This can be done in two ways:

  • download a file with the library from the official website and add it locally to the project just like other files with the .js extension
<script type="text/javascript" src="jquery-3.5.1.js"></script>
  • refer to the version on the network using the url. The easiest way is to go to page cdnjs.com/, type jQuery and after searching - copy the url. 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Document ready

jQuery works on the DOM model structure. To make sure the document is fully loaded, use the document.ready() method before you start executing JS code: 

$(document).ready(function() {
    // Code to be executed
});

or the short version that jQuery offers:

$(function() {
    // Code to be executed
});

Syntax

JQuery uses chaining. Each string begins with a $, and the individual commands are chained together using a dot.

$('#first')
    .css({background: 'red'})
    .hide('slow')
    .show(3000);

The dollar sign $ is a shortcut call to the jQuery function. It returns a jQuery object inheriting from the DOM object extending its functions with jQuery capabilities. This function takes the string or DOM object as the parameter.

let element = $('#elementId'); // identical effect to: jQuery("#elementId")
let element2 = $('.className'); // identical effect to: jQuery(".className")
let element3 = document.getElementById('elementId'); //pure JS, without usage of jQuery

Selectors

The jQuery selectors are used to indicate a single element or collection of elements in an HTML document. The jQuery selectors can be used to indicate, among others, an element by its name, ID, class, attribute type, attribute values. All jQuery selectors start with a dollar sign and brackets: $().

Examples of selectors

const allP = $("p"); // all elements based on the tag name

const idElement = $("#firstSection"); // element o podanym identyfikatorze

const allGreen = $(".green"); // all elements of a given class

const allElements = $("*"); // all elements on the page

const thisElement = $(this); // the current HTML element

const elementClass = $("p.green"); // all elements p with class="green"

const elementFirst = $("p:first"); // first p element

const elementsAttr = $("[href]"); // all elements with href attribute

const elementsTitle = $("[title='Image']"); // all elements with the title='Image' attribute

The general concept is that we use CSS selectors as selectors.

Method each()

The each() method determines the function to be run for all found elements. The function requires a parameter in the form of the function to be run for found elements.

$(selector).each( function() {
    // Code to be executed
});

Example

$('button').click(function() {
    $('li').each(function() {
        console.log($(this).text() );
    });
});

When you click on the <button> element, the function for all <li> elements starts, which prints out the text in the console from the <li> elements.