E.g.: $(".element").fadeOut().delay(500).fadeIn();
Why can I run multiple functions on a single jQuery object and when can I use this feature? Is there any tutorial/documentation on this?
E.g.: Why can I run multiple functions on a single jQuery object and when can I use this feature? Is there any tutorial/documentation on this? |
|||
|
This is known as chaining and helps you create a fluent interface. Each function returns a reference to the current jQuery instance, which is why you can chain the calls together. You first create a jQuery instance using
You can do it all in one line, because each function more-or-less kind of looks like this (this is a very simple example):
It is important to note that not all jQuery functions are not chainable; some do not return a reference to the jQuery instance and so you cannot chain them. Examples include Here's a very simple example that shows you how chaining works:
Now you can create an instance like so:
You can then also call jQuery's documentation will go over which methods are chainable and which are not. If the documentation says that the function returns |
|||||||||||||||||
|
Load the jQuery site in your browser and click on API Documentation. Each function has a table that includes a returns statement. If it says this: ... you can use chaining. Otherwise, you cannot, e.g.: In some methods, the return type depends on parameters passed: |
|||||
|
This is accomplished using design-pattern known as a "Fluent Interface". It is also known as 'chaining'. FOR EXAMPLE:
|
|||||
|
As @vivinpaliath stated, this is something called chaining. It works because almost every method in jQuery returns a reference to the original object (or in a few cases, the edited object). You can chain any built in methods with exception of methods that return specific values. Examples of such are css("cssProperty"), attr("attribute"), prop("property"), html(), text(), and val() |
|||||||||
|