Drupal and jQuery. Lesson 2. Selectors, effects.

In this lesson, we will explore jQuery selectors and jQuery effects.

Selectors

Among selectors, we will most often use classes and IDs. Selectors generally correspond to CSS selectors, so if you know how to write selectors in CSS, you already know how to write them in jQuery. Here's how we select classes:

$('.class')

And here's how we select IDs:

$('#id')

Effects

jQuery has a large number of effects: hide/show (hides from the bottom right corner), slideUp/slideDown (you can choose the direction of the slide), fadeOut/fadeIn (gradually changes opacity).

$('.class').hide(1000);

$('.class').fadeOut(1000);

$('.class').slideUp(1000);

In the lesson, we also used the setTimeout function. This is a JavaScript function that delays code execution:

setTimeout(function(){

// code here

}, 1000);

The first parameter of setTimeout is a function containing the code to be delayed, and the second parameter is the delay time in milliseconds.