What does $ mean in javascript?

Question

0.00/5 (No votes)

See more:

I have this code that works (someone wrote it for me), but the $ in it eludes me. I have read online it's an identifier, but it doesn't work as an identifier in my case. I replace the $ sign by anything else, the function that follows doesn't work. Here's the code:

JavaScript

var modal = document.getElementById('modal');

var img = document.getElementsByClassName('.image');
var modalImg = $("#modal-img");
var captionText = document.getElementById("modal-text");
$('.image').click(function(){
    modal.style.display = "block";
    var newSrc = this.src;
    modalImg.attr('src', newSrc);
    captionText.innerHTML = this.alt;
});

var span = document.getElementsByClassName("close-x")[0];

span.onclick = function() {
  modal.style.display = "none";

Thanks

What I have tried:

I have tried replacing the $ by stuff like getElementById, any other identifier, etc.

Posted 6-Jan-18 13:59pm

Member 13610262

Updated 7-Jul-18 4:41am

Karthik_Mahalingam

v2

Add a Solution

Comments

Karthik_Mahalingam 6-Jan-18 23:31pm

do you want to convert everything to jquery or pure javascript ?

Member 13610262 6-Jan-18 23:33pm

How about everything to jQuery? What does that code look like? Thanks for your reply.

Karthik_Mahalingam 6-Jan-18 23:39pm

check the solution

3 solutions

Solution 3

the $ is meant to refer jQuery , in jquery when you want to ad some event to the code you do it like this usually :
jquery("element").event(function to define);

for saving time in writing code the jquery team decided to make it like this:
$("element").event(function to define);

so $ == jquery

Posted 7-Jul-18 4:41am

Member 13902311

Comments

Dave Kreskowiak 7-Jul-18 11:06am

Asked and answered 6 months ago with answers far more extensive than yours.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

David_Wimbley · Accepted Answer · 2018-01-06T15:25:00

Solution 1

In short, your code looks like jquery, the dollar sign is used by jquery. There really serves no purpose for you to mix jquery and vanilla javascript (the document.getElementById code), you should choose a route you want to go and convert all code to that. Given it is already written in jquery, it would seem (to me) pointless to try and rework it all in plain javascript.

jQuery[^]

A quick google search provides the following:

naming conventions - Can someone explain the dollar sign in Javascript? - Stack Overflow[^]

$ sign in javascript[^]

Posted 6-Jan-18 15:25pm

David_Wimbley

Updated 6-Jan-18 15:27pm

v2

Comments

Member 13610262 6-Jan-18 21:41pm

Thanks for your reply. So how can I convert the get element by ID code to jQuery? Would something like function $(x) {return document.getElementById(x);} work?

David_Wimbley 6-Jan-18 22:31pm

So i don't understand your question. Why don't you just use jquery? It looks like you are trying to create a jquery function to utilize plain javascript selectors to return an element.

Why not just keep your jquery code? That code you ask about is intending to do the same thing as $(".modal"). document.getElementByClassName(".modal") would be the plain javascript version (or something to that effect).

I think you first need to think about what you are trying to accomplish. In my opinion, you are trying to reinvent the wheel which seems to me to be pointless unless this is a learning exercise.

If you are doing this for learning I think you need to choose a path and stick with it. By trying to user jquery as a wrapper around plain javascript (Which is what jquery already does) you are just going to create yourself a huge headache.

Member 13610262 6-Jan-18 23:29pm

I see. I'm pretty new to Javascript, and have not yet learnt jQuery, which is why I'm wondering about the difference between the two. So, right now, I'm using both basic Javascript and jQuery, correct? Or is this the jQuery version of the code? If so, why are some selectors properly written in .js fashion (document.getElementById, etc.) and others are written with dollar signs? I understand I'm complicating stuff; I didn't even know that. Could you just give me the code I showed you, but entirely with jQuery, so that I can compare and understand the difference?

David_Wimbley 7-Jan-18 0:58am

Looks like Karthik Bangalore provided you your code as straight jquery.

But to clarify some of your other questions.

"I'm wondering about the difference between the two. "
At a basic level, jquery is a wrapper around javascript to make a lot of javascript code more easily written. For more info on this, I suggest you reference the links i've provided. A quick google search will tell you more of what you are looking for than what i can sit here and type.

"So, right now, I'm using both basic Javascript and jQuery, correct?"

In your sample code and follow up question, yes.

"Or is this the jQuery version of the code?"

See above

"If so, why are some selectors properly written in .js fashion (document.getElementById, etc.) and others are written with dollar signs?"

I don't know why the code was written as it was but the dollar sign with selectors that you see are the jquery equivalent of document.getElementById. Ex: $("#MyTextBox") is the equivalent of ocument.getElementById("MyTextBox").

"Could you just give me the code I showed you, but entirely with jQuery, so that I can compare and understand the difference?"

See second solution provided by Karthik

Member 13610262 7-Jan-18 20:30pm

Thank you so much; I will ask, though, the code works, but there is an error in the console that says Uncaught ReferenceError: $ is not defined at finissants.js:1 what does that mean?

Member 13610262 6-Jan-18 23:30pm

Oh, and thank you for your time. It's very helpful for a newbie like me.

Karthik_Mahalingam · Accepted Answer · 2018-01-06T17:39:00

Solution 2

Quote:
How about everything to jQuery? What does that code look like?

var modal = $('#modal');
       var img = $('.image');
       var modalImg = $("#modal-img");
       var captionText = $("#modal-text");
       img.click(function(){
           modal.show();
           var newSrc = this.src;
           modalImg.attr('src', newSrc);
           captionText.html( this.alt);
       });

       var span = $(".close-x");

       span.click(  function() {
           modal.hide();
       }

refer these
jQuery Effects - Hide and Show[^]
jQuery Selectors[^]
jQuery html() Method[^]
jQuery attr() Method[^]

Posted 6-Jan-18 17:39pm

Karthik_Mahalingam

Updated 7-Jan-18 16:01pm

v2

Comments

Member 13610262 7-Jan-18 20:32pm

Thank you very much. I will mention that the code is missing ); at the end, since it was an error caught by the console. Still, the code works great. May I ask why the console says that $ is not defined (uncaught referenceError)?

Karthik_Mahalingam 7-Jan-18 20:39pm

You will have to add the jquery reference in the head tag

Member 13610262 7-Jan-18 20:54pm

Damn you're good. Thanks a lot.

Karthik_Mahalingam 7-Jan-18 20:56pm

Welcome

Member 13610262 7-Jan-18 21:12pm

Sure.

Allow me to bother you one last time. What do these lines mean?
var newSrc = this.src;
modalImg.attr('src', newSrc);
captionText.html( this.alt);

Like, I know that var img = $('.image'); allows me to select éimage and name it "img" in my file, but what is the point of those lines? They give a new source to the image? What? Basically, why do I need them, and what do they do?

Karthik_Mahalingam 7-Jan-18 21:14pm

Check the links posted in the solution.

Karthik_Mahalingam 7-Jan-18 21:48pm

    var modal = $('#modal'); // ID Selector
        var img = $('.image');  // Class selector 
        var modalImg = $("#modal-img");  // ID selector 
        var captionText = $("#modal-text");// ID selector 
        img.click(function(){  // click function delegate
            modal.show();   // jquery function to show 
            var newSrc = this.src;  // get src attribute from anchor tag
            modalImg.attr('src', newSrc);  // set src for new image 
            captionText.html( this.alt);  // add text to the modal-text control from the iamge alt attribute
        });

        var span = $(".close-x");  // class selector

        span.click(  function() {   // click event 
            modal.hide(); // jquery function to show 
        }

Member 13610262 8-Jan-18 21:10pm

Thank you for that. Can you just tell me what is the role of 'this' in the line of code: var newSrc = this.src;

I mean, what does this.src represent? The original source of the image? If so, why can't I just put src? Why do I need to add keyword 'this'?

Karthik_Mahalingam 8-Jan-18 21:11pm

This means the current object inside the click event of image tag.. so this is an image object

If you see a typical image tag you can see src and alt attribute to specify the image source and alternative text

Member 13610262 8-Jan-18 21:14pm

And the .src means what? I mean, how does 'this' know which source to consider?

Karthik_Mahalingam 8-Jan-18 21:27pm

Src means source attribute of image tag..
This is used inside image click event so this is image.. same as other control events

Karthik_Mahalingam 8-Jan-18 22:24pm

check this
HTML img tag[^]

Understand JavaScript’s “this” With Clarity, and Master It | JavaScript is Sexy[^]