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 Introduction to jQuery Hello, jQuery! The jQuery Object

Posted by nathanielcusano
nathanielcusano
9,808 Points

Does $(this) refer to the $('li') object? And is $('li') called a "jquery object"?

none

2 Answers

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

Let's look at each question separately:

  • Does $(this) refer to the $('li') object?

Not exactly. The $('li') object represents all list items on the page. But when one of them is clicked on, the handler for the click event runs. Inside the handler, this represents the specific element that was clicked, and $(this) is that same element converted into a jQuery object. But only that specific one. That's why only the one you click on vanishes.

  • And is $('li') called a "jquery object"?

Yes, exactly. And as I said, it represent the collection of all list items (li) elements on the page. So the on method attaches a handler to each one of them.

ywang04
ywang04
6,762 Points
ywang04
ywang04
6,762 Points

Thanks a lot. It is very clear to me.

Roudy Antenor
Roudy Antenor
4,124 Points
Roudy Antenor
Roudy Antenor
4,124 Points

Big thank you for that explanation!

Rosario Dawson
Rosario Dawson
400 Points
Rosario Dawson
Rosario Dawson
400 Points

Steven Parker , is "this" in the given example something like e.target inside

randomDiv.addEventListener("click", (e) => { e.target.style.color = "blue"; });

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

Yes, but you would not be able to use "this" in your example because arrow functions do not establish a "this" value.

But "this" would be the same as "e.target" inside a handler established with a traditional function:

randomDiv.addEventListener("click", e => { e.target.style.color = "blue"; });
// the same as:
randomDiv.addEventListener("click", function (e) { this.style.color = "blue"; });