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('tes开发者_JAVA技巧ting');
});
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" ?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/
$('.row') will select any element with class="row"
$('#row') will select the element with id=row
Check the jQuery page on selectors.
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.
"." 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.
The .
specifies a class called "row." The #
specifies an id called "row."
精彩评论