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

Posted by Ian Z
Ian Z
14,584 Points

When to use .class instead of just class when selecting things in jquery?

for example look at how some classes have a dot and some dont in this block

var main = function (){
$('.btn').click(function() {
var post = $('.status-box').val();
$('<li>').text(post).prependTo('.posts');
$('status-box').val('');
$('.counter').text('140');
       });

i dont get when to use the dot

1 Answer

Gergő Bogdán
Gergő Bogdán
6,664 Points

I think there is a misconception here. There can be classes in CSS and classes in JavaScript, these have the same name, but are different things. The classes starting with . (for ex: .btn) refer to a CSS class, which is the styling of some HTML element. In jQuery you use the classes to find HTML items within the webpage.

Ian Z
Ian Z
14,584 Points

but doing something like currentDot.removeClass('active-dot'); is incorrect if there is no dot.

status-box in line 5 above also is a class with no dot

Gergő Bogdán
Gergő Bogdán
6,664 Points

Actually if you look at the jQuery removeClass documentation you'll see that specifying the class name without . is correct. Since the . in front of the name represents that it is a CSS class, the method name in jQuery, removeClass already has it in its name you will remove a CSS class, so there is no need to add the . in front of it.

For the status-box I'd need to see the HTML code, because it can happen that the name of the HTML control is also status-box and then that is why its working. Can you please share your HTML code too?

Thanks, Greg