CODEWITHSUNDEEP
javascriptjquerygoogle-chrome-devtools
Abhi7950
Abhi7950

Reputation: 158

Unable to find where $ is defined in the webpage

I was trying to manipulate the dom to include script tag with source pointing to the Google jQuery CDN. My original web page is a simple html with no other scripts included. However I find, even without including the jquery src to my page, when I type $, it accepts it and shows it as a function. I am using chrome Version 59.0.3071.115. Just typing $ on console shows first attached screenshot.

My question is how to find out where the function associated with $ is defined and how did it get included.I have already tried the search box for '$', no search results. Interestingly when I type jQuery it shows undefined.My guess is $ is being used for some other function. But if I type something like $('body'), it gives me the entire body tree starting with root element (second screenshot). This issue does not happen on my colleague's machine. Any help or pointers would be much appreciated!

enter image description here enter image description here

The actual html that I was inspecting in chrome dev tools.

<html>
<h1 align="center">Beer Selection Page </h1>
<form method="POST" action="SelectBeer.do">
Select beer characteristics<p>
Color:<select name="color" size="1">
<option>light
<option>amber
<option>brown
<option>dark
<br><br>
<input type="SUBMIT">
</form>
</body>
</html>

Upvotes: 0

Views: 70

Answers (3)

Om Sao
Om Sao

Reputation: 7643

Dollar sign($) is not jQuery here, you can check that by trying. some jQuery commands like: $('h1').show() or .hide()

Then, what is $ here. In my browswer console of Chrome it returns: function (a,b){return new n.fn.init(a,b)}

while in your console: function$(selector, [startNode]) { [Command Line API] }

It shows that $ is taken up by the browser if not defined by the page. In case of Chrome, it is the above function it takes to make debugging easy. For example if you type:

$('h1') or $('div') in browser devconsole You will find it returns all <h1> or <div> in page.

Hence, $ and similarly $$ and several other helper functions/commands are defined if your html/js code doesn't define explicity $ and $$

So, please don't get confused next time !!

Upvotes: 0

SVSchmidt
SVSchmidt

Reputation: 6517

$ in this case does not refer to jQuery, thus it is not defined anywhere on the page. Actually, it is a part of the developer tools. See: developers.google.com. It turns out to be an alias for document.querySelector.

As a side node, I can understand your thinking. As far as I know, the browser vendors introduced the $(selector) function (with exactly that name) in their developer tools because of the popularity of jQuery. However, according to the referenced documentation,

[if a page is] using a library such as jQuery that uses $, this functionality will be overwritten, and $ will correspond to that library's implementation.

Upvotes: 1

user94559
user94559

Reputation: 60143

The Chrome dev tools add this function. Try an alert($); in JavaScript on your page (not in the dev tools) to confirm that it doesn't exist there.

Upvotes: 0

Related Questions