|Just jQuery The Core UI - The JQuery Object|
|Written by Ian Elliot|
|Saturday, 24 September 2022|
Page 2 of 2
One of the things that makes jQuery so powerful is the way that it makes use of the fluent style of function calling. This allows you to write a chain of function calls:
For this to work function1 has to return an object which has function2 as a method and function2 has to return an object which has function3 as a method.
Notice that the first call is a simple evaluation of a Function object. That is, function1 is a Function object. The second call to function2 is a call to a Function property of whatever object function1 returns and so on.
This fluent style of function use depends on each function in the chain returning an object of the correct type to satisfy the next function call in the chain. This is usually, and most easily, done by creating function1 as a Function object which has function2, function3 and so on as properties. This is simple because the rule that each function has to return the correct type of object is transformed into:
So, to implement our chained functions all we need to do is:
You can see here that function1 is a Function object which has function2 and function3 as its properties. When function1 is called it returns this, which is a reference to function1. As a result the call to function2 works, as does the call to function3.
The jQuery Object Revisited
When you start using jQuery one of the first things you learn is how to make use of selectors to extract elements from the DOM. Often you start doing this without really examining what exactly is going on. The time has come to get to grips with the details.
When you are introduced to jQuery you are told that there is a function called jQuery or $ and you can use it to find DOM elements.
selects all of the <p> elements in a page.
You can see quite clearly that this is a call to a function, even when written as $(). From the previous section you can also see that jQuery or $ is an instance of a global Function object – the global jQuery object.
The clever part is that this function returns a new jQuery results object complete with an array-like property that stores the DOM objects that matched the selector.
Why is this clever? Because the returned object has all of the functions and properties that you expect and you can start to use it at once. This allows you to use the fluent style of function calls.
Notice that the global jQuery object is a constructor for the jQuery results object – the two are related but they are not the same.
For example the results jQuery object has a function property called append and you can call this on the object returned by the first call.
adds a paragraph with content "Hello" after every paragraph extracted by the selector "p".
The append function also returns a jQuery results object with an array of results of its operation and you can use this to call yet more jQuery functions.
You might be wondering why the term “array-like” keeps being used in connection with the jQuery results object?
You can convert any array-like object into a true array using:
Notice that makeArray is a property of the global jQuery object. That is, you call it using $ or jQuery. This is often confusing when you first meet the idea, but the fact that the jQuery object has properties and functions of its own and you can make use of them directly is very powerful.
That is, when we write:
we call the global jQuery function and generally get a jQuery results object back. However, when we write:
you are calling the makeArray function defined on the jQuery global object.
This distinction is important and there are also lots of examples of very similar functions being available as properties of the global jQuery object and as properties of the jQuery results object.
You really do need to keep in mind, and it has been stated several times earlier, that the jQuery results object is always an array-like object that has elements that are DOM objects. Forgetting it is the cause of most jQuery errors.
only matches a single element, the result is still an array-like object of just one element and if you want to work with it directly you need to use:
You also need to remember that elements of the jQuery result are DOM elements not jQuery objects in their own right.
is a jQuery object, but:
is a DOM element object and doesn’t have any of the jQuery methods that we have been using.
As already discussed, if you want to make use of any DOM object as a jQuery results object then the solution is to use the global jQuery function to create a jQuery results wrapper object.
returns a jQuery object which wraps the ith selected paragraph. After this you can do things like
which would append the new paragraph to the ith selected paragraph.
There is one final subtle point to be aware of. When you call the global jQuery function it creates a new jQuery results object. If you call another jQuery function using that results object then in most cases it will return a new jQuery results object.
That is, in:
a new jQuery results object is created as the result of each function call. This means four different results objects are created and there is a sense in which this chain is equivalent to:
var r1=$(“selector”); var r2=r1.function1(); var r3=r2.function2(); var r4=r3.function3();
The new jQuery results object contains a reference to the old jQuery results object and as you make a chain of function calls all of the intermediate results are kept.
There are also ways to revert to earlier results generated by a chain of function calls as discussed at the end of Chapter 5.
Available as a Book:
buy from Amazon
buy from Amazon
or email your comment to: firstname.lastname@example.org
|Last Updated ( Saturday, 24 September 2022 )|