1

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>
Alex
  • 7,007
  • 18
  • 69
  • 114
  • Apparently the browser is interpreting it as a string. anarinsky is saying that he is able to use `"#bt2` and `bt2` interchangeably. – Alex Nov 18 '12 at 11:09

4 Answers4

1

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.

Matt
  • 74,352
  • 26
  • 153
  • 180
balexandre
  • 73,608
  • 45
  • 233
  • 342
1

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(){
});
Adil
  • 146,340
  • 25
  • 209
  • 204
  • And what does this have to do with jQuery? – BoltClock Nov 18 '12 at 11:39
  • @BoltClock, I have updated my answer to elaborate my answer. Sorry for late reply there was internet connectivity issues. – Adil Nov 18 '12 at 16:59
  • It is very interesting, thank you. I checked all available browsers - works the same on Firefox, IE, Chrome, Opera. Can we state that we can use this syntax? – Alex Nov 18 '12 at 18:56
  • Few years back I think it was not working for some browser so might be incompatible with older version. Its safe to use selector or document.getElementById principally. – Adil Nov 19 '12 at 00:26
0

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")
toxicate20
  • 5,270
  • 3
  • 26
  • 38
  • Thank you. I tested this code also on IE, Chrome and Opera in addition to Firefox. The result is the same – it is working – Alex Nov 18 '12 at 13:12
0

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').

Ralf D'hooge
  • 262
  • 3
  • 7