2

I am quite new to Jquery. I have been reading a few books, but could not understand how to interpet what I see on the console when I run a simple selector:

$("table")

I get

jQuery.fn.init(3) [table, table.table.table-bordered, table#dataTable.table.table-bordered, prevObject: jQuery.fn.init(1)]

what does fn.init mean? I could guess that the number 3 means 3 matches. What does prevObject mean and what benefit do I get from knowing that?

I looked at the similar question, but it did not answer my question. What does jquery $ actually return? I have also gone through the entire JQuery core documentation - I do know that the returned Object is a Jquery object which has a number of helpful methods. But here, I am trying to understand what is being printed on the console and how to interpret it when I am doing interactive development of Jquery for a new page in my Chrome console

Siraj Samsudeen
  • 1,624
  • 7
  • 26
  • 35
  • 1
    Does this answer your question? [What does jquery $ actually return?](https://stackoverflow.com/questions/1302428/what-does-jquery-actually-return) – kmoser Aug 24 '20 at 05:45
  • If you want a better understnding look at the main global jQuery object rather than logging `$(selector)` to console. jQuery.fn is where the api methods (and a couple of unpublished ones) that use `$(selector).someMethod()` are, including plugin methods when they are included in page. Try `console.log(jQuery)` or `console.log(jQuery.fn)` – charlietfl Aug 24 '20 at 06:14
  • And for even more in depth understanding look at the source code in their Github repo – charlietfl Aug 24 '20 at 06:18
  • @charlietfl, thanks for your comments. I am not yet experienced enough to look into their source code to understand. I am trying to do interactive development of Jquery through the console - since Chrome prints them this way, I wanted to understand to make use of it. – Siraj Samsudeen Aug 25 '20 at 10:00

1 Answers1

2

Here is an extract from an email that I received from Karl Swedberg, the author of Learning JQuery which I found to be very insightful and helped me to interpret what is printed on the console. So, with all thanks to Karl for taking time to respond to me in such great detail, I am posting it here so that other beginners to Jquery can benefit from these insights.

What you’re seeing in Chrome is the jQuery object. Whenever you call the jQuery (or $) function, and even when you chain other methods to it, you get a new jQuery object back. If you examine that object in the console, you’ll see that the object contains an array of 0 or more elements. In your case, It’s showing you the jQuery object (which is also a function), and the 3 tables that it returned. You’ll also see prevObject:… in there. jQuery always keeps track of itself as it changes, so if you added .filter(’something') or .find(’something’) after $(’table’), you’d see those 3 tables in an array within a jQuery object for prevObject.

enter image description here If you click the arrow, it gives you a detailed look at the object:

enter image description here

I also asked him - what does s.fn.init in the current result vs k.fn.init mean?

Here is his answer: You will see some form of that when you log the jQuery object. They are the exact same thing. What is happening is that many sites run their code through a “minifier” when they put it on a production site. The minifier will change as many variable names as possible to single-letter variable names. So, in one instance jQuery will become s, while in another it will become k—or any other letter of the alphabet. Now, you might also be wondering why it has the .init part there. If you looks at the source code for jQuery, it shows this:

// Define a local copy of jQuery

var jQuery = function( selector, context ) {

  // The jQuery object is actually just the init constructor 'enhanced'
  // Need init if jQuery is called (just allow error to be thrown if not included)
  return new jQuery.fn.init( selector, context );
};

So, jQuery itself has a property called fn, which is a reference to jQuery.prototype, so we can type a 2-letter word instead of a 9-letter word, because we’re lazy :-)

jQuery.fn = jQuery.prototype = {
    // a bunch more code goes here
};

And then jQuery defines the init “constructor” function.

A lot of that stuff is there so as users of jQuery we don’t have to do things like write:

var myjQuery = new jQuery(’table’);
Siraj Samsudeen
  • 1,624
  • 7
  • 26
  • 35