What do dot and hash symbols mean in JQuery

Question

Hi all,

I feel confused of the dot and hash symbols in the following example:

<DIV ID="row">
<DIV ID="c1">              
<Input type="radio" name="testing" id="testing" VALUE="1">testing1
</DIV>
</DIV> 

Code 1:

 $('#row DIV').mouseover(function(){     
    $('#row DIV').addClass('testing');  
    });

Code 2

  $('.row div').mouseover(function(){
        $(this).addClass('testing');
    });​

Codes 1 and 2 look very similar, and so it makes me so confused that
when I should use ".row div" to refer to a specific DIV instead of using "#row div" ?

Answer 1

"." refers to a class, while "#" refers to IDs.

<table id="table">
    <tr class="odd"></tr>
    <tr></tr>
    <tr class="odd"></tr>
</table>

$("#table") would get the full table object, while $(".odd") would get everything with the class "odd". $("tr.odd") would only get table rows with that class.

Answer 2

The . specifies a class called "row." The # specifies an id called "row."

Answer 3

$('.row') will select any element with class="row"

$('#row') will select the element with id=row

Check the jQuery page on selectors.

Answer 4

The hash (#) specifies to select elements by their ID's

The dot (.) specifies to select elements by their classname

You can read more about the selectors here: http://api.jquery.com/category/selectors/basic-css-selectors/

Answer 5

These are CSS selectors.

The hash symbol # means that the element is an ID. So #row would match <div id="row">.

Alternatively, the dot symbol . means the element is a CSS class. So .row would match <div class="row">.

There is more information over at W3C.