У меня есть следующий 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>
почему?
Это не имеет ничего общего с jQuery.
Это связано с тем, что именованные элементы (элементы с атрибутом ID или name) становятся свойствами объекта window.
console.log(foo) идентичен console.log(window.foo);
Поскольку ваш div является именованным элементом (id="foo"), он добавляется к window.
Это не поведение jQuery, это (изначально) поведение Internet Explorer. IE всегда создавал глобальные переменные для каждого элемента DOM, который имеет атрибут id. Переменная называется именем id и ссылается на элемент DOM. В последнее время другие браузеры следуют примеру.
JQuery не предполагает этого, но, скорее, JavaScript делает. Ваш foo не определен, поэтому он должен быть либо идентификатором, либо undefined. Элемент с id foo входит в область вашего script, поэтому идентифицируемый им элемент регистрируется.
Если вы переименовали его в bar, вы сможете ссылаться на bar, так как это будет идентификатор верхнего уровня.
Обратите внимание, что такое использование неодобрительно, потому что неясно, что вы делаете в коде, не ссылаясь на html. Использование document.getElementById(...) или его вариант обычно предпочтительнее, потому что ясно, что вы делаете.