What does "selection" mean? What about $.fn?

Question

In jQuery Learning Center:

• Methods called on jQuery selections are in the $.fn namespace, and automatically receive and return the selection as this.
• Methods in the $ namespace are generally utility-type methods, and do not work with selections; they are not automatically passed any arguments, and their return value will vary.

I'm not sure what "selection" and $fn mean here. Does "selection" mean DOM element(s) selected using Sizzle? Is the $fn an object (since JavaScript/ECMAScript has no built-in support for namespaces) and the methods for this object are something like $.fn.add()?

I searched "jQuery selection" on the web but didn't get anything that looked promising. Can anyone point me in the right direction? Examples (and explanations) are much appreciated.

Answer 1

A jQuery selection is simply a call of the jQuery method itself (or the $ alias). It's like $("#myDiv"). In this case, $("#myDiv") is a selection. The result of this method is a jQuery object that contains all DOM elements that match your selection. The string you pass to $, is a selector. jQuery supports CSS selectors (eg: #myDiv, .myDiv or div), XPath selectors (eg $('/html/.//div[@id="text"]')) and others. Take a look at Selectors.

$.fn is the "container" of functions available to selections. Let's say you have a plugin called autocomplete. If you define autocomplete in $.fn, then autocomplete is automatically available in any selection. Meaning you can call $("#myDiv").autocomplete(). In the autocomplete implementation you can access the matched DOM elements and apply the plugin to them. You can see how you can implement a simple plugin here.

Answer 2

jQuery selectors are actually CSS selectors. So for example, $('#some_HTML_element_id') will return this element as jQuery object.

What is jQuery object? - A HTML like object which normal Javascript properties, same as - document.getElementBy*(), but with more functionality related with jQuery. For example:

jQuery('any selector').next() // selecting the next sibling element.

// there is no .next() function.
document.getElementBy*('any selector').next 

This is the selection. You just selecting an element, and jQuery adding more functionality. It returning this element so you can use chaining. For example:

$('.tab').eq(0).next().select()

$('.tab') -> returning the jQuery set of objects because you are selecting .tab css class, in most cases, you will have more than one tab.

jQuerySetOfElements.eq(0) -> returning first element from the set. (in this case the first tab as jQuery object).

jQueryFirstTab.next() -> selecting next sibling element as jQuery object.

...

• Methods in the $ namespace are generally utility-type methods, and do not work with selections; they are not automatically passed any arguments, and their return value will vary.

This means utility-type function, that are not based on selectors. For example we have $.each(). As we know Javascript doesn't have foreach loop. So jQuery provide this function for us. See the syntax:

$('selection') --> returning jQuery elements.

$.UtilityFunction() --> Do some work for us.

• Methods called on jQuery selections are in the $.fn namespace, and automatically receive and return the selection as this.

This means that the selected elements with the selector, have the functions in the $.fn namespace, For example: in the $.fn namespace we have all the function that helping us to work with elements like: .hide(), .show(), .toggle(). When we select elements with selection, we can use this functions on the selected element, for example: $('#myDiv').hide().

$.fn is jQuery.protopype. See this: jQuery fn namespace