DOM object not becoming a jQuery object

Question

How come I cannot make $(frame) a jQuery object in the below case? Below is my output from chrome developer tools.

console: mainFrame
output: <frame src=​"http:​/​/someurl.com" name=​"mainFrame">​
console: $(mainFrame).contents()
output: SyntaxError: Failed to execute 'querySelector' on 'Document': '[object HTMLFrameElement]' is not a valid selector.

Edit:

to respond to comments...

$.toString()
"function $(selector, [startNode]) { [Command Line API] }"

typeof(mainFrame)
"object"

jQuery
ReferenceError: jQuery is not defined

Answer 1

jQuery doesn't seem to be included in your document. Some browsers set $ to querySelector by default (which is a native way to select elements of the DOM using css-like syntax), thereby your error message. Try adding

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Answer 2

Looks like jQuery is not included into the DOM, try to include jQuery either by CDN or add standalone jQuery into the DOM.

You can confirm the jQuery installation by typing $ into the browser inspect tab. If the output is something like

> $
ƒ (e,t){return new x.fn.init(e,t,r)}

then jQuery added successfully.