CODEWITHSUNDEEP
jqueryjquery-selectors
Alex
Alex

Reputation: 7511

Does a jQuery selector by id always work without quotes and # sign?

I suddenly found that while using Mozilla / jQuery v1.8.2 I do not need to use the id with quotes and # sign. For example, $(bt2) works the same as $(“#bt2”), see the code below.

Will this selector always work and are there any potential drawbacks from using this shorter form of selection?

<html>
<head>
    <title>append</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready (function(){
        $(bt2).click(function(){
           $(i1).append("<li>a4</li>", "<li>a5</li>");
        });
    }); 
   </script>
</head>
<body>
    <button id="Button1">Append List</button>
    <ul id="i1">
        <li>a1</li>
    </ul>
</body>
</html>

Upvotes: 1

Views: 3148

Answers (4)

Ralf D&#39;hooge
Ralf D&#39;hooge

Reputation: 262

A browser caches the elements that has an id and stored it in the HTMLCollection of the document. To see this go in chrome to the developer tool en put a breakpoint at the beginning of the javascript, when the page is loaded. Look under the right pane under the section Local. Here you expand this: document and under all: HTMLAllCollection[] you can see al the elements and below theres a list with all elements that have an id. But the jQuery documentation https://api.jquery.com/id-selector/ does not mention this, so it is not the correct syntax. Also for readability and maintenance it's better to stick to $('#id').

Upvotes: 0

Adil
Adil

Reputation: 148150

Some browser support direct access to html elements without id you even do not need jquery selector or document.getElementById to access them. In the jquery selector the id you are passing is not taken as Id but as object (html element) because Button1.id gives you id if it is id then it should not give you id. Here I am not using any selector not even getElementById Live Demo.

Html

<button id="Button1">Append List</button>

Javascript 

alert( Button1.id); //Without any jquery selector or getElementById

In the code given below for binding event on button with Id Button1, Button1 is not taken as id but object and jquery is converting javascript accessible dom object to jquery object and binding click event

$(Button1).click(function(){
});

Upvotes: 1

balexandre
balexandre

Reputation: 75103

That's an assumption that you should not rely on, as every browser uses it's on way.

You're better avoiding that completely as it's not even good for other developers to take your code. You should always try to reason and use the best semantics regarding not only yourself but what it's the documented way.

in jQuery, you have a whole page just regarding selectors.

Please use such descriptions.

Upvotes: 1

toxicate20
toxicate20

Reputation: 5410

You could do that, but be aware of the fact that this might not work in other browsers. Instead you will need to use

$("#id")

Upvotes: 0

Related Questions