0

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>
Abhi7950
  • 168
  • 1
  • 7
  • the console should tell you what line number your code fails on – treyBake Jul 25 '17 at 08:46
  • Sometimes $ is not working, but jQuery() does, depending on how it is injected. – Markus Jul 25 '17 at 08:46
  • 4
    Possible duplicate of [What is the dollar sign in Javascript, if not jQuery](https://stackoverflow.com/questions/22244823/what-is-the-dollar-sign-in-javascript-if-not-jquery) – ɢʀᴜɴᴛ Jul 25 '17 at 08:46
  • the `[Comman Line API]` tells you that `$` is not jQuery but a function of the comman line API in chrome. – t.niese Jul 25 '17 at 08:47
  • It's been part of chrome Dev tools for a while. It's not jQuery, just similar syntax for people trying to do query selectors. ("command line api" tells its this is part of Dev tools). Interesting tip I learned this week: click any element in Dom explorer and type `$0` in the console and it refers to that element. – pinkfloydx33 Jul 25 '17 at 08:49

3 Answers3

1

$ 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.

SVSchmidt
  • 6,269
  • 2
  • 26
  • 37
  • Which is very confusing and misleading. – Jeremy Thille Jul 25 '17 at 08:57
  • @JeremyThille Yip, especially because of the "if the page has jQuery, then $ is jQuery, else it is document.querySelector" part. If you want to check if it is jQuery, you can check for `$.prototype`, which is `undefined` when it is not jQuery. – SVSchmidt Jul 25 '17 at 09:07
0

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.

user94559
  • 59,196
  • 6
  • 103
  • 103
0

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 !!

Om Sao
  • 7,064
  • 2
  • 47
  • 61