Jquery предполагает идентификатор элемента? нормальное поведение?

У меня есть следующий index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                console.log(foo); // jQuery assumes foo is an id?
            });
        </script>
    </head>
    <body>
        <div id="foo">i'm a div</div>
    </body>
</html>

выходы консоли:

<div id="foo">i'm a div</div>

почему?

Ответ 1

Это не имеет ничего общего с jQuery.

Это связано с тем, что именованные элементы (элементы с атрибутом ID или name) становятся свойствами объекта window.

console.log(foo) идентичен console.log(window.foo);

Поскольку ваш div является именованным элементом (id="foo"), он добавляется к window.

Именованный доступ в окне

Ответ 2

Это не поведение jQuery, это (изначально) поведение Internet Explorer. IE всегда создавал глобальные переменные для каждого элемента DOM, который имеет атрибут id. Переменная называется именем id и ссылается на элемент DOM. В последнее время другие браузеры следуют примеру.

Ответ 3

JQuery не предполагает этого, но, скорее, JavaScript делает. Ваш foo не определен, поэтому он должен быть либо идентификатором, либо undefined. Элемент с id foo входит в область вашего script, поэтому идентифицируемый им элемент регистрируется.

Если вы переименовали его в bar, вы сможете ссылаться на bar, так как это будет идентификатор верхнего уровня.

Обратите внимание, что такое использование неодобрительно, потому что неясно, что вы делаете в коде, не ссылаясь на html. Использование document.getElementById(...) или его вариант обычно предпочтительнее, потому что ясно, что вы делаете.