When should a period be used after $ in jQuery?

Question

Hi,

I am a beginner in JQuery.

When should be used point after $ in JQuery?

$.trim(str) and not $trim(str)?

And some cases without point: $(document).ready, but not $.(document).ready?

Thanks.

Answer 1

I don't believe you have a choice, only one syntax is correct and will actually work. The $ symbol is nothing more than a shorthand notation for the jQuery function, so when you write:

$('some selector')

You are calling a function, called jQuery, and passing in a string, or in your case, you're passing in the document object.

When it comes to invoking a method, such as a helper method like trim, you will need to use the following syntax, either jQuery.trim() or $.trim(). It's easy to check yourself, just try this out:

typeof($.trim) //returns "function"
typeof($trim) //returns "undefined"

Answer 2

When you are accessing the static method of jQuery that isn't available in the prototype of say, a DOM element. trim is a static method exposed by the API.

There is no $.fn.trim and we can't reliably rely on String.prototype.trim since the methods can differ.

Regarding $trim that's not defined. The trim is a method of $ which is jQuery. You can do either $['trim'] or $.trim, and that should be the only way to access it.

Answer 3

In jQuery, $ is a variable name, like foo or bar, which references the global jQuery object. If you want to access a property on the jQuery object, then you use the dot. These are basically the same:

$.property
jQuery.property

(Since $ is a variable like any other, it is possible for you to set it to anything you like. This might happen if you were to include the Prototype library after including the jQuery library, which would leave you with $ pointing to an alias of the document.getElementById function.)

The jQuery object happens to also be a function, so you can call that function the same as you would call any other function:

$(arguments)
alert("arguments!")

On the other hand, $trim is just another global variable, like $ or location, which could be a function you defined yourself:

var $trim = function(arguments) {
    return "foo";
};

$trim(str)

Answer 4

The $.foo syntax means that $ is being treated as an object with a field called foo, which is typically a function you're calling. So this is really nothing different to a standalone function called foo - it's just prefixed with $. to distinguish it from any other function and associate it with the jQuery library.

When you use $(something).foo then you're passing something to the jQuery function, and the result depends on what you're passing (could be a selector to find an existing object, or it could be a scrap of HTML to build a new object, or it could be a function to be registered to run on page load). In any case, you're then calling foo on the resulting returned object, which may be applied to several DOM objects if the selector you passed identifies a class, for example.

The first syntax is used when the jQuery function operates on something other than DOM objects (parts of the HTML page). For example, a string ($.trim), or an array ($.each). Those aren't elements of the page, they're just pure data in JavaScript.

The second syntax is used when operating on DOM elements - you use $(something) to make a jQuery object, which is a wrapper around zero or more DOM elements. Then you call functions on the returned wrapper to conveniently manipulate the objects it wraps.