Jquery function when calling CSS & HTML

Question

I am confused regarding the use of ' ' and '.' in a jQuery function. When exactly do you use one or the other?

For example,

var main = function(){
    $('.article').click(function(){
        $('.article').removeClass('current')
        $('.description').hide();  
        $(this).addClass('current');
        $(this).children('.description').show();
    }
)};

$(document).ready(main);

Why is it correct to use .addClass('current') and not .addClass('.current'), or children('.description') instead of children('description')?

Thank you, I couldn't really find the answer or knew how to look for it on Google.

Answer 1

The . is when you are referring to a Class. Check this for more about classes. So in your case you are using . when you are doing something with the classes. Example $(this).children('.description').show();. Somewhere in your HTML code there is an element with class .description ( example <div class="description"> </div>). And you didn't use . in .addClass() method because you are not referring to existing class but you are "creating" one.

You should also check this to know more about jQuery selectors..