The $.cookie plugin contains useful methods to manage cookies.

Let's paste the following code into the jquerymx_cookie.js file:

steal(
    'jquery/dom/cookie',
    function ($) {

    }
);

We can create a cookie in the console using the following command:

$.cookie('CookieName', 'CookieValue'),

In the resources tab we can see that cookie has been created.

We can get a cookie using it's cookie name, as follows:

$.cookie('CookieName'),

We can also delete a cookie using the following command:

$.cookie('CookieName', null);

The $.fn.compare plugin compares two nodes and returns a number describing how they are positioned each together.

Let's paste following code into the jquerymx_compare.js file:

steal(
    'jquery/dom/compare',
    function ($) {
        $('body').append('<p>paragraph</p><strong>strong</strong>'),
    }
);

In the console, run the following command:

$('p').compare($('strong'));

Next, run the following command:

$('strong').compare($('p'));

In the first case we should get 4 and in the second case 2.

Here is what the numbers mean:

The $.fn.selection plugin sets or gets current text selection on any element.

Let's paste the following code into the jquerymx_selection.js file:

steal(
    'jquery/dom/selection',
    function ($) {
        $('body').append('<p>Hello from paragraph!</p>'),
    }
);

In the console, run the following command:

$('p').selection();

It should return null.

Now, select some part of the text and run the command again, it should return an object as follows:

{
    end: 15,
    start: 4
}

To set the selection, use the following command:

$('p').selection(6, 10);

The $.fn.within plugin returns the elements that are within the given position.

Let's paste the following code into the jquerymx_within.js file:

steal(
    'jquery/dom/within',
    function ($) {
        $('body').append('<p>Hello from paragraph!</p>'),
    }
);

In the console, run the following command:

$('p').within(30, 20);

It should return an array containing all p elements with a position left 30 px and top 20 px.

The $.Range plugin contains useful methods that operate on text selections to support creating, moving, and comparing selections.

Let's paste the following code into the jquerymx_range.js file:

steal(
    'jquery/dom/range',
    function ($) {
        $('body').append('<p>Hello from paragraph!</p>'),
    }
);

In the console, run the following command:

$.Range.current();

To get the current range, select some portion of the text and execute the code again and compare the returned objects.

To get the current selection text, run the following command in the console:

$.Range.current().toString();

The $.route plugin contains useful methods to manage the application state.

Let's paste the following code into the jquerymx_route.js file:

steal(
    'jquery/dom/route',
    function ($) {
        $.route.bind('change', function (e, attr, how, newVal, oldVal) {
            console.log('event: ', e, '| attribute changes: ',attr, '| how changes: ', how, '| new value: ',newVal, '| old value: ', oldVal);
        });
    }
);

At the end of the URL, type the following:

#!&type=UTC

Then, type the following command and observe the console output:

#!&type=GTM

Another example of routing can be found in Chapter 1, Getting Started with JavaScriptMVC, in the Todo application.