Tutorial: Constructor

Go to definition

A jLight collection can be constructed using a variety of inputs.

When invalid input is provided or no elements matching the selector are found an empty collection is returned.

 


Element selection

Let's assume the following html structure

<div id="one" class="class-name" data-type="one"></div>

<section class="my-section">
  <div id="two" class="class-name" data-type="two"></div>
</section>

We can us all valid css selectors

import $ from 'jlight'; // Will be omitted in further tutorials

let $foo; // All jLight collections in this tutorial are prefixed with the $ symbol to easily identify them

$foo = $('div'); // #one, #two
$foo = $('#one'); // #one
$foo = $('.class-name'); // #one, #two
$foo = $('[data-type]'); // #one, #two
$foo = $('[data-type="my-type"]'); // #one
$foo = $('section div'); // #two
$foo = $('.my-section .class-name'); // #two

 


Element creation

We can easliy create new elements by just passing html to the constructor

let $foo;

// All these create a div element
$foo = $('<div>');
$foo = $('<div/>');
$foo = $('<div />');
$foo = $('<div></div>');

// It is possible to nest tags, all necessary elements wil be created
$foo = $('<section><div></section>');
$foo = $('<div><strong>I am strong!</strong></div>');

// HTMLElements, HTMLCollections an NodeLists are supported as well
$foo = $(document.querySelector('#one'));
$foo = $(document.querySelectorAll('div'));
$foo = $(document.getElementById('#two'));
$foo = $(document.getElementsByTagName('div'));

// It is also possible to get a jLight element from the document or the window
// These elements have a greatly reduced set of functions though

// The full list of the supported functions:
// - on
// - off
// - trigger
// - innerWidth
// - innerHeight
// - outerWidth
// - outerHeight
// - scrollTop
// - scrollLeft
// - scrollTo

$foo = $(document);
$foo = $(window);

 


DOM ready

A function passed to the constructor will be executed when the DOM content has finished loading or immediately if that is already the case.

A jLight element of the document will be returned.

$(() => {
  // ...
});

const myFunction = () => {
  // ...
};

$(myFunction);

 


Monadic structure

Almost all of jLights instance methods behave monadic.

They don't return the current instance but a new one, meaning that the collection at the top of the method chain won't be modified.

Refer to the docs to see which methods return an object of type jLight to see where you can make use of this.

$('div')
  .addClass('new-class')
  .prepend('<strong>I am strong!</strong>')
  .attr('data-type', null)
  .fadeOut()
  // ...