div not being selected when pound sign is appended

问题

For debugging purposes, this is what I tried to type in Chrome Console:

$("#loading")
>  null

But if I do this, it correctly retrieves the div:

$("loading")
>  <div id="loading" align="center" style="display: none;">

I'm using jquery-1.4.1.min.js.

<script type="text/javascript" src="../../js/jquery-1.4.1.min.js"></script>

This doesn't make sense to me, why can I not select a div by # sign but I can when I exclude it?

Edit: Sorry, huge fail on my part. I meant the other way around. Please see the revised question.

The only other js library i have is prototype.js, which is loaded after jquery script.

回答1:

You should have a look at the jQuery selector documentation.

Some basic rules when using jQuery selectors follow (these are by no means exhaustive, you should look at the docs):

Using a # at the beginning of your selector will search for all DOM nodes with an id of whatever word follows the #. So $('#loading') will select DOM nodes with id="loading". This should only return one element, since non-unique ids on a page are invalid HTML.
Using a . at the beginning of your selector will do a similar search to #, but will look at all DOM nodes' class attributes instead and select those with a class matching your selector. So ('.loading') will select DOM nodes with loading in their class attribute's value.
Using simply a word with no preceding symbols will attempt to select all DOM nodes whose element tag name matches your selector's word. So $('loading') will attempt to find all <loading> tags, but since this isn't an actual HTML tag, nothing will be selected.

EDIT So while the above is true, it seems that you had conflicts between prototype.js and jQuery. These are well known and much lamented. You can look at jQuery's wiki entry on using jQuery with other libraries and the documentation on jQuery.noConflict() for more information on this. Essentially, you will need to use jQuery instead of $ to access the jQuery library.

回答2:

$("#loading") indicates to get dom with specific id for that # sign is used.

without # jQuery will not recognize dom with id.

Similarly to get specific DOM with class name you has to use .

Some example selectors are :

Selector        Example             Selects
  *              $("*")             All elements
  #id            $("#lastname")     The element with id="lastname"
.class           $(".intro")        All elements with class="intro"
.class,.class   $(".intro,.demo")   All elements with the class "intro" or "demo"

I have checked at my side and see the result.