Menu
Basic selectors are of the forms:
jQuery( element )
jQuery( selector [, context ] )
HTML elements work fine if quoted:
$("div").length // value is 2
$("body").length // value is 1
$(body).length // Uncaught ReferenceError: body is not defined
Yet document and document.body both work without quotes:
$(document).length // value is 1
$(document.body).length // value is 1
$("document").length // value is 0
$("document.body").length // value is 0
Question 1: Are there any other jQuery elements/selectors that work without quotes?
Question 2: Why does document and document.body fail with quotes?
I understand "document" is not an HTML element like <body> and may be a special case. Which leads me to my last question.
Question 3: Why does document.body work but the following return a length of 0?
$(document.body.div).length // value is 0
$("document.body.div").length // value is 0
jQuery selector syntax: http://api.jquery.com/jQuery/#jQuery-elementArray
CSS 3 selectors: http://www.w3.org/TR/css3-selectors/#type-selectors
461
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector).action() A $ sign to define/access jQuery. A (selector) to "query (or find)" HTML elements. A jQuery action() to be performed on the element(s)
All Selector (“*”) Selects all elements.
The attr() method sets or returns attributes and values of the selected elements.
document isn't an element in the DOM. It is the DOM. And JavaScript has an object for it in scope ready to be used. So this selector:
$(document)
is referencing that object, wrapping it in the jQuery function to create a jQuery object based on the original object. This same thing happens a lot. For example, you can do this:
var someElement = document.getElementById('someId');
Now someElement is an object. (Which coincidentally happens to refer to an HTML element in the DOM, but that's not important.) And it can be wrapped as a jQuery object:
$(someElement)
Additionally, document.body works because body is a property on the document object. This object, and its properties, exist in plain JavaScript as part of the engine overall and aren't part of jQuery.
On the other hand, $("document") doesn't work because it's telling jQuery to find an HTML element called "document" inside the DOM. Something like:
<document>some text</document>
Naturally, this doesn't exist. Nor does this:
$("document.body")
Because, again, this is using a jQuery selector instead of an existing object. This selector is looking again for an element called "document" and specifically with a class called "body", like this:
<document class="body">some text</document>
It doesn't exist, so no such element is found by the selector.
Your first examples are just using JavaScript objects, which exist. Your second examples are using jQuery selectors which are attempting to find elements in the DOM which don't exist. They're very different.
112
when you use $(body) it tries to access a variable called body but it is not declared anywhere so it throws a reference error. But document is a variable declared in the global scope which refers to the current document object that is why it is working. document.body is a property of document object so that also works.
when you use 'document' or 'document.body' it consider it as element selectors and looks for elements like <document> in the dom which will not be found
document.body.div returns undefined so $(document.body.div) will not return any result
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
