Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 2

Posted by Fatih Hamzah
Fatih Hamzah
8,666 Points

Confuse about $("<h1></h1>") equality in jQuery

As the teacher said in minute around 3:08. Instead of using the HTML tag for the .append(""), we mark is as a variable so that it could be used again easily.

Here is my own code, https://jsfiddle.net/fatihamzah/u5d0cfgj/

Instead of using: "<div id='overlay'></div>" We created: var $overlay = $("<div id='overlay'></div>"); Then we use: $overlay

From this.. $("body main").append("<div id='overlay'></div>"); To this... $("body main").append($overlay);

And we can do this.. $($overlay).fadeIn();

right? my question is:

Logically, this makes the $overlay is interchangable with $("<div id='overlay'></div>") ?? If so,,, why can't we do this...

$($("<div id='overlay'></div>")).fadeIn();

I think I know that it is because of the dollar sign and parenthesis $( ) right??

But why it is only work with $overlay?

What I knew is: var something = "string"

console.log(something) -is interchangable with...

console.log("string")

and both works.

  1. Can someone explain what is happening here, I just need a reason why it is like that... or is it just the 'magic' of jQuery?
  2. I still don't get in why it should be $( "string" ) instead of "string"

Thankyou!

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

The jQuery() function does different things depending on the argument.

When you give it a string, it looks to see if the string starts with an HTML element tag and if so, it creates a new object. But if it finds a selector, it scans the document and returns an object that represents the matching elements(s). It can do other things also, see the jQuery documentation for full details.

In this example: var $overlay = $("<div id='overlay'></div>"); — a new object is created and assigned to the variable $overlay.

:x: $($overlay).fadeIn(); :point_left: You would not do this, since $overlay is already a jQuery object.
:white_check_mark: $overlay.fadeIn(); :point_left: You would do this instead.

Hopefully, that answers question 1. It's not "magic", it's polymorphism.

For question 2, "string" is just a string, no matter what the contents are; but $("string") would be a new jQuery object when the string contains an HTML tag.

Fatih Hamzah
Fatih Hamzah
8,666 Points

ohh.. I see,, I wonder why I was come to a conclusion that $overlay.fadeIn(); would never worked.. but it actually works..

Thankyou very much!