-1

Today I found code online like this.

Here's a simplified version of what I don't understand.

<div id="foo"></div>

$(foo) //gets the correct element

How does foo not throw an error and select the right DOM element?

christo8989
  • 6,442
  • 5
  • 37
  • 43
mlimon
  • 661
  • 8
  • 19
  • 1
    This is very confusing. Are you asking how all that code works together? – christo8989 Feb 19 '18 at 07:25
  • Yes, I'm confused too :P anyway I just need to know how it's works together ? – mlimon Feb 19 '18 at 07:29
  • `$(overlay)` and `$(seemore)` or more specifically, `overlay` and `seemore` variables would need to be declared somewhere. Or, the actual code is `$('#overlay')` and `$('#seemore')`. You should really fix those typos and make sure its exactly what the code looks like. – christo8989 Feb 19 '18 at 07:40
  • yes, that's my question here ? see I added a pen according to the question. actually I did not know that javascript variable work like this so I need to sure how it's work if I'm not set variable or there value – mlimon Feb 19 '18 at 07:43

2 Answers2

1

Honestly, I did not know this was possible but it is a feature of javascript. You should read this stackoverflow answer which basically says, do NOT use this feature.

I don't have a detailed explanation but I'll say this. It has nothing to do with jQuery. This is purely a javascript feature.

Run this test to understand. Create an index.html file and then open up the console in developer tools. Type out the id name on the element and javascript will print out the javascript.

index.html

<html>
<body>
  <div id="foo"></div>
</body>
</html>

In the console log, write out foo and click enter. Chrome console should print out <div id="foo"></div>.

christo8989
  • 6,442
  • 5
  • 37
  • 43
0

In your example, you should fix the typos so you get a clearer understanding. I may not be using the official jQuery verbiage here, you should read the docs, but this should make some sense of the example.

These are not variables, they are jQuery objects.

The javascript elements like $( '#overlay' ) are calls to the jQuery function with a selector which can be the same as a CSS selector. The return value is a jQuery object, and jQuery's method .addClass() is being invoked right away on the returned object.

In your example, the selectors are ids, but tag names, classes and pseudo classes work too, and you can even wrap javascript references to DOM elements in $( ... ) to use jQuery functions. jQuery returns an object that includes many member functions, not just the .addClass() method shown here, and some selectors will return a collection not just a single item. For instance, $( 'a' ) returns a jQuery object with a reference to every link on the page.

JasonB
  • 6,243
  • 2
  • 17
  • 27
  • thanks for understanding my question and thanks for the explanation, I think now I have a little idea about this one too, I already search before post here and found about jquery object but couldn't understand that so lastly I asked here. anyway can you point me where I can learn this kind of weird staff of js or jQuery? – mlimon Feb 19 '18 at 07:50
  • This page has some good short examples with plain explanations. https://www.w3schools.com/jquery/jquery_examples.asp Once you play around with the examples the jQuery documentation starts to make more sense. http://api.jquery.com/ – JasonB Feb 19 '18 at 07:55
  • thanks, but I already know little bit about jQuery as well javascript. but I didn't see this type of code that's why I thought there something I need to know. hope it make sense. – mlimon Feb 19 '18 at 08:03