Simple jQuery selector only selects first element in Chrome..?

Question

I'm a bit new to jQuery so forgive me for being dense. I want to select all <td> elements on a particular page via Chrome's JS console:

$('td') 

Yet when I do this, I get the following output:

<td>Apples</td> 

Isn't jQuery supposed to return an array of elements with the <td> tag? Why am I only seeing the first element that matches this criteria?

Here is the site in question: http://www.w3schools.com/html/html_tables.asp

EDIT: I'd like to add that when I type a jQuery function into Chrome console, I do NOT get a jQuery object back. I get a plain HTML element. Something must be wrong with the way my Chrome is set-up/configured.

Answer 1

If jQuery isn't present on the webpage, and of course no other code assigns something to $, Chrome's JS console assigns $ a shortcut to document.querySelector().

You can achieve what you want with $$(), which is assigned by the console a shortcut to document.querySelectorAll().

To know if the page contains jQuery, you can execute jQuery in the console. To know if jQuery is assigned to $, you can execute $().jquery which will return jQuery version if that's the case.

Also, there are browser addons to inject jQuery in every webpage.

Answer 2

It seems jQuery is not properly included to run on your target page. I had a similar problem and solved as follows for Google Chrome.

Add a bookmark to your Chrome browser containing the following one-liner code as the URL field (it's beautified for readability):

javascript: (function () {     var s = document.createElement('script');     s.setAttribute('src', 'https://code.jquery.com/jquery-latest.min.js');     if (typeof jQuery == 'undefined') {         document.getElementsByTagName('head')[0].appendChild(s);     }     jQuery("td.edit select option[value=BN]").attr("selected", ""); })(); 

Then just click that bookmark to run it. It is expected to include jQuery normally and make the console to return something like function (e,t){return new b.fn.init(e,t,r)} as you type in $.

The process of creating the bookmark (also called bookmarklet) is a short-hand for injecting jQuery in every page you wish to work on with the console. However, the snippet code also works if you copy-paste it directly into the JS console.

PS: Credits for the snippet is not mine, since I'm using it for a while and can't remember where I get that from.

Hope it helps.