CODEWITHSUNDEEP
javascript
Naeio
Naeio

Reputation: 1181

Why do I need to use $() ? What is it purpose?

I am new to javascript, and I am currently trying to understand a piece of code, though I don't understand the use of $() inside my code. My question might be stupid, and I am sorry if it is the case.

Here's more details : There's an object, named p_Element, which has two properties (target and menu). Then, there's this line :

let l_Element = $(p_Element.target);

I tried replacing it by :

let l_Element = p_Element.target;

but the script doesn't seem to execute.

So here's my question: What is the difference between these two lines? What does $(p_Element.target) returns?

In case you need more details, here's the piece of code I am trying to understand :

var l_Targets = [
    {target: "#pve",            menu: ".pve"},
    {target: "#tutorial",       menu: ".tutorial"},
    {target: "#donation_home",  menu: ".donation"},
    {target: "#register",       menu: ".register"},
    {target: "#account_top",    menu: ".team"},
    {target: "#races",          menu: ".races"}
];
var l_Infos = {};
l_Targets.forEach(function(p_Element)
{
    let l_Element = $(p_Element.target); // Please explain me this line
    if (l_Element.length === 0 || l_Element.length > 1)
        return;
    let l_Top    = parseInt(l_Element.offset().top);
    let l_Bottom = parseInt(l_Element.offset().top + l_Element.height());
    l_Infos[p_Element.target] = {
        top: l_Top,
        bottom: l_Bottom,
        menu: p_Element.menu
    };

});

I don't own this script, it comes from here: https://naicaonline.com/assets/js/home/navbar.js?v=0.08

Upvotes: 1

Views: 203

Answers (3)

McBern
McBern

Reputation: 549

let l_Element = $(p_Element.target); // This returns a JQuery Object.

This is equal to document.getElementById(p_Element.target); //but you need to remove # because in JQuery # this char is used to select dom elements by ID and . is used to select dom elements by class

JQuery makes the native JS command short and easy to use.

Upvotes: 0

Jack Bashford
Jack Bashford

Reputation: 44107

This is called a jQuery selector, and here's how the specific one you're using works:

let l_Element = $(p_Element.target);

It assigns the block scope variable l_Element to $(p_Element.target). p_Element is the current item used in the forEach loop, and .target is the target property of p_Element. Look at the array l_Targets - here's what each iteration over it will make l_Element equal to:

var l_Targets = [
    {target: "#pve",            menu: ".pve"},
    {target: "#tutorial",       menu: ".tutorial"},
    {target: "#donation_home",  menu: ".donation"},
    {target: "#register",       menu: ".register"},
    {target: "#account_top",    menu: ".team"},
    {target: "#races",          menu: ".races"}
];

Each value of l_Element will change depending on the current iteration. Here's what the values will be:

l_Element = $("#pve"); //1st iteration
l_Element = $("#tutorial"); //2nd iteration
l_Element = $("#donation_home"); //3rd iteration
l_Element = $("#register"); //4th iteration
l_Element = $("#account_top"); //5th iteration
l_Element = $("#races"); //6th iteration

Find out more about jQuery here.

Upvotes: 1

melpomene
melpomene

Reputation: 85767

$ is the name of a function. $(...) calls that function.

It's not something built into JavaScript. In principle you could define your own variable or function and call it $, but in practice it's probably the one provided by jQuery. See this link for an introduction.

Upvotes: 3

Related Questions