jQuery 1.4: 15 new features
January 14, jQuery 1.4 was born. This release contains many new features and improvements. This article discusses those that you may find most useful.
Previously, prior to version 1.4, jQuery supported adding attributes to elements of a collection using the convenient attr method, which took either the attribute name and its value or the object that defines several attributes at once. JQuery 1.4 now has the ability to pass attributes as the second argument when creating an element. Let's say you need to create a hyperlink with several attributes. Using version 1.4, it is done this way:
You, probably, noticed the text attribute and, probably, were surprised that it does here, after all links have no such attribute! The fact is that jQuery 1.4 uses its own methods for processing them. Thus, having encountered the text attribute, jQuery calls the .text () function and passes the value “Go to Google!”.
Another great example:
')
The id attribute is treated as a normal attribute, and css and click as calls to the corresponding methods. In previous versions of jQuery, you would write this:
Three new methods have appeared in the DOM bypass arsenal: “nextUntil”, “prevUntil” and “parentsUntil”. Each of these methods will bypass the DOM in a given direction until the condition of the passed selector is met. So let's say you have a list of fruits:
You need to select all items after “Apple” and stop at “Strawberry”. It looks very simple:
Instead of using a chain of events, you can link several events in one call at once. For example:
This also works with the .one () method.
Now, instead of defining one function for one type of animation, you can define different functions for each property being animated. jQuery includes two types of animation: swing (default) and ramp. Others you need to download separately .
To specify an animation function for each property, you simply need to define an array, the first value of each element is the property to be animated, and the second function used:
A little example.
You can also use a specialEasing object, that is, the following entry:
JQuery 1.4 now has support for the " submit ", " change ", " focus " and " blur " event handlers. JQuery uses the .live () method to add event handlers. This is useful when you add handlers for several items at once, as well as when adding new ones.
Note that you need to use the names 'focusin' and 'focusout' to use the “focus” and “blur” events!
jQuery 1.4 provides a new “proxy” function in the jQuery namespace. This function takes two arguments: “scope” and the name of the method. Let's take an example.
Below, an “app” object is created with two properties: “clickHandler” and “config”.
For the ".clickHandler ()" method, the execution context will be “app”, this implies that “this” refers to it. This works as expected:
Let's try to cling to the event:
When you click on the link, nothing happens. Because jQuery will, by default, set the required item for the context of the handler (in our case, the link), that is, this in this example is a hyperlink. But we do not want this! We want this in this case to mean an “app” object. In jQuery 1.4, this can be achieved very simply:
Now clicking on the link will lead to the expected result.
The proxy function will return the "wrapped" version of your function, and also set the object you specified to "this". This is useful in cases where you need to pass a function as a parameter to another jQuery method or to any plugin.
Now you can add a pause before processing the animation event queue. In fact, it works with any event queue, but this feature is most in demand when working with animation, that is, with the 'fx' queue. This will save you the confusion of calling setTimeout and passing methods. It looks like this:
If you want to use the method for a queue other than the effect queue (used by default), then you need to pass its name as the second parameter to the function.
jQuery 1.4 makes it easy to check for the presence of an element in another. This is equivalent to the : has () filter in the selector. This method returns all elements that contain at least one element that corresponds to the passed selector.
In this case, the result will be a collection of div elements that contain the ul element. In this situation, of course, it is more convenient to use the selector ( : has () ), but the method is useful in cases when you need to filter the collection dynamically.
jQuery 1.4 also provides the “contains” function. This is a low-level function that takes two DOM elements as arguments and returns a boolean result indicating whether the second element is contained in the first one. For example:
We all know about the .wrap () method. JQuery 1.4 introduced the .unwrap () function, which acts strictly the opposite. For example, we have the following structure:
Calling this code:
... will give us the following structure:
In other words, the method removes the parent from any element.
The new .detach () method will allow you to remove elements from the document, just as the .remove () method does . The key difference is that the new method does not remove information about these elements from jQuery. This implies that both the data added by the .data () method and any event handler added via the jQuery event system will remain active.
This can be useful in cases when you delete an element, but know that you may need it later. His events and data will be relevant in this case.
jQuery 1.4 allows you to use the .index () method in two new ways. Previously, you could pass an item as a parameter, and as a result you get the index of this item in the current collection.
If the method does not pass arguments, it returns the index of the item in the collection in which it is located. For example:
When you click on a list item, a message appears with its index. This is done like this:
jQuery 1.4 also allows you to specify a selector as an argument to the .index () function, which allows you to find out the index in the collection of the resulting selector.
The return value is of type integer, and the result is -1 if the item is not found in the collection.
Most document model management methods can now take a function as an argument. This function will be called for each item in the collection, which is defined using the desired method.
The following functions have this capability:
In this function, the current element is this , and its index is passed as an argument.
Also, with some functions you can use the second argument. If you call the so-called installation method (for example .html () or .attr ('href') ), the second argument is the value. For example:
As you can see, the .css () and .attr () methods can be passed the second argument to the function, and the first is the property you want to change:
jQuery 1.4 contains two new helper functions that will help you determine the type of target object.
First, the isEmptyObject function. This function returns a boolean result, and indicates whether the transferred object is empty (devoid of properties, directly or indirectly). Secondly, it is the isPlainObject function, which shows whether the transferred object is a javaScript object created either through '{}' or through 'new Object ()'.
The .closest () method can now take an array of selectors as a parameter. This is very useful when you want to select more than one item with specific characteristics.
In addition, the execution context can be passed as the second argument. That is, you can control how far the desired item will be searched. Both of these improvements are rarely used in practice, but they gave a terrific effect when developing jQuery.
You should use these events when working with focus and blur . These events will allow you to perform some actions when an element gains or loses focus.
Please note that both of these events are not passed on (bubble effect). This means that the item below, or the parent item, will not receive this event.
Initially, the article was translated for the blog , but once the opportunity to publish on Habré (thanks to deerua ).
1. Passing jQuery Attributes (...)
Previously, prior to version 1.4, jQuery supported adding attributes to elements of a collection using the convenient attr method, which took either the attribute name and its value or the object that defines several attributes at once. JQuery 1.4 now has the ability to pass attributes as the second argument when creating an element. Let's say you need to create a hyperlink with several attributes. Using version 1.4, it is done this way:
jQuery ('<a/>', {
id: 'foo',
href: 'http://google.com',
title: 'Become a Googler',
rel: 'external',
text: 'Go to Google!'
}); You, probably, noticed the text attribute and, probably, were surprised that it does here, after all links have no such attribute! The fact is that jQuery 1.4 uses its own methods for processing them. Thus, having encountered the text attribute, jQuery calls the .text () function and passes the value “Go to Google!”.
Another great example:
')
jQuery ('<div />', {
id: 'foo',
css: {
fontWeight: 700,
color: 'green'
},
click: function () {
alert ('Foo has been clicked!');
}
}); The id attribute is treated as a normal attribute, and css and click as calls to the corresponding methods. In previous versions of jQuery, you would write this:
jQuery ('<div />')
.attr ('id', 'foo')
.css ({
fontWeight: 700,
color: 'green'
})
.click (function () {
alert ('Foo has been clicked!');
}); 2. "until" to everything!
Three new methods have appeared in the DOM bypass arsenal: “nextUntil”, “prevUntil” and “parentsUntil”. Each of these methods will bypass the DOM in a given direction until the condition of the passed selector is met. So let's say you have a list of fruits:
<ul> <li> Apple </ li> <li> Banana </ li> <li> Grape </ li> <li> Strawberry </ li> <li> Pear </ li> <li> Peach </ li> </ ul>
You need to select all items after “Apple” and stop at “Strawberry”. It looks very simple:
jQuery ('ul li: contains (Apple)'). nextUntil (': contains (Pear)'); 3. Multibinding event handlers
Instead of using a chain of events, you can link several events in one call at once. For example:
jQuery ('# foo) .bind ({
click: function () {
// do something
},
mouseover: function () {
// do something
},
mouseout: function () {
// do something
}
}) This also works with the .one () method.
4. New in animation
Now, instead of defining one function for one type of animation, you can define different functions for each property being animated. jQuery includes two types of animation: swing (default) and ramp. Others you need to download separately .
To specify an animation function for each property, you simply need to define an array, the first value of each element is the property to be animated, and the second function used:
jQuery ('# foo'). animate ({
left: 500,
top: [500, 'easeOutBounce']
}, 2000); A little example.
You can also use a specialEasing object, that is, the following entry:
jQuery ('# foo'). animate ({
left: 500,
top: 500
}, {
duration: 2000,
specialEasing: {
top: 'easeOutBounce'
}
}); 5. New events for the live method.
JQuery 1.4 now has support for the " submit ", " change ", " focus " and " blur " event handlers. JQuery uses the .live () method to add event handlers. This is useful when you add handlers for several items at once, as well as when adding new ones.
Note that you need to use the names 'focusin' and 'focusout' to use the “focus” and “blur” events!
jQuery ('input'). live ('focusin', function () {
// do something with this
}); 6. Controlling the context of functions.
jQuery 1.4 provides a new “proxy” function in the jQuery namespace. This function takes two arguments: “scope” and the name of the method. Let's take an example.
Below, an “app” object is created with two properties: “clickHandler” and “config”.
var app = {
config: {
clickMessage: 'Hi!'
},
clickHandler: function () {
alert (this.config.clickMessage);
}
}; For the ".clickHandler ()" method, the execution context will be “app”, this implies that “this” refers to it. This works as expected:
app.clickHandler (); // "Hi!"
Let's try to cling to the event:
jQuery ('a'). bind ('click', app.clickHandler); When you click on the link, nothing happens. Because jQuery will, by default, set the required item for the context of the handler (in our case, the link), that is, this in this example is a hyperlink. But we do not want this! We want this in this case to mean an “app” object. In jQuery 1.4, this can be achieved very simply:
jQuery ('a'). bind (
'click',
jQuery.proxy (app, 'clickHandler')
); Now clicking on the link will lead to the expected result.
The proxy function will return the "wrapped" version of your function, and also set the object you specified to "this". This is useful in cases where you need to pass a function as a parameter to another jQuery method or to any plugin.
7. Pause before performing animation.
Now you can add a pause before processing the animation event queue. In fact, it works with any event queue, but this feature is most in demand when working with animation, that is, with the 'fx' queue. This will save you the confusion of calling setTimeout and passing methods. It looks like this:
jQuery ('# foo')
.slideDown () // animation times
.delay (200) // pause
.fadeIn (); // animation two If you want to use the method for a queue other than the effect queue (used by default), then you need to pass its name as the second parameter to the function.
8. Function .has ()
jQuery 1.4 makes it easy to check for the presence of an element in another. This is equivalent to the : has () filter in the selector. This method returns all elements that contain at least one element that corresponds to the passed selector.
jQuery ('div'). has ('ul'); In this case, the result will be a collection of div elements that contain the ul element. In this situation, of course, it is more convenient to use the selector ( : has () ), but the method is useful in cases when you need to filter the collection dynamically.
jQuery 1.4 also provides the “contains” function. This is a low-level function that takes two DOM elements as arguments and returns a boolean result indicating whether the second element is contained in the first one. For example:
jQuery.contains (document.documentElement, document.body); // The result is true - <body> is inside <html>
9. Unwrap!
We all know about the .wrap () method. JQuery 1.4 introduced the .unwrap () function, which acts strictly the opposite. For example, we have the following structure:
<div>
<p> Foo </ p>
</ div> Calling this code:
jQuery ('p'). unwrap (); ... will give us the following structure:
<p> Foo </ p>
In other words, the method removes the parent from any element.
10. Deleting items without deleting data
The new .detach () method will allow you to remove elements from the document, just as the .remove () method does . The key difference is that the new method does not remove information about these elements from jQuery. This implies that both the data added by the .data () method and any event handler added via the jQuery event system will remain active.
This can be useful in cases when you delete an element, but know that you may need it later. His events and data will be relevant in this case.
var foo = jQuery ('# foo');
// important handler
foo.click (function () {
alert ('Foo!');
});
foo.detach (); // remove object from DOM
// ... a lot of code
foo.appendTo ('body'); // add object
foo.click (); // "Foo!" 11. Improvements index (...)
jQuery 1.4 allows you to use the .index () method in two new ways. Previously, you could pass an item as a parameter, and as a result you get the index of this item in the current collection.
If the method does not pass arguments, it returns the index of the item in the collection in which it is located. For example:
<ul>
<li> Apple </ li>
<li> Banana </ li>
<li> Grape </ li>
<li> Strawberry </ li>
<li> Pear </ li>
<li> Peach </ li>
</ ul> When you click on a list item, a message appears with its index. This is done like this:
jQuery ('li'). click (function () {
alert (jQuery (this) .index ());
}); jQuery 1.4 also allows you to specify a selector as an argument to the .index () function, which allows you to find out the index in the collection of the resulting selector.
The return value is of type integer, and the result is -1 if the item is not found in the collection.
12. DOM control methods that take functions as arguments.
Most document model management methods can now take a function as an argument. This function will be called for each item in the collection, which is defined using the desired method.
The following functions have this capability:
- after
- before
- append
- prepend
- addClass
- toggleClass
- removeClass
- wrap
- wrapAll
- wrapInner
- val
- text
- replaceWith
- css
- attr
- html
In this function, the current element is this , and its index is passed as an argument.
jQuery ('li'). html (function (i) {
return 'The index of the current item:' + i;
}); Also, with some functions you can use the second argument. If you call the so-called installation method (for example .html () or .attr ('href') ), the second argument is the value. For example:
jQuery ('a'). attr ('href', function (i, currentHref) {
return currentHref + '? foo = bar';
}); As you can see, the .css () and .attr () methods can be passed the second argument to the function, and the first is the property you want to change:
jQuery ('li'). css ('color', function (i, currentCssColor) {
return i% 2? 'red': 'blue';
}); 13. Determination of object type
jQuery 1.4 contains two new helper functions that will help you determine the type of target object.
First, the isEmptyObject function. This function returns a boolean result, and indicates whether the transferred object is empty (devoid of properties, directly or indirectly). Secondly, it is the isPlainObject function, which shows whether the transferred object is a javaScript object created either through '{}' or through 'new Object ()'.
jQuery.isEmptyObject ({}); // true
jQuery.isEmptyObject ({foo: 1}); // false
jQuery.isPlainObject ({}); // true
jQuery.isPlainObject (window); // false
jQuery.isPlainObject (jQuery ()); // false 14. Improvements to the closest (...) method .
The .closest () method can now take an array of selectors as a parameter. This is very useful when you want to select more than one item with specific characteristics.
In addition, the execution context can be passed as the second argument. That is, you can control how far the desired item will be searched. Both of these improvements are rarely used in practice, but they gave a terrific effect when developing jQuery.
15. New events 'focusin' and 'focusout'
You should use these events when working with focus and blur . These events will allow you to perform some actions when an element gains or loses focus.
jQuery ('form')
.focusin (function () {
jQuery (this) .addClass ('focused');
});
.focusout (function () {
jQuery (this) .removeClass ('focused');
}); Please note that both of these events are not passed on (bubble effect). This means that the item below, or the parent item, will not receive this event.
Initially, the article was translated for the blog , but once the opportunity to publish on Habré (thanks to deerua ).
Source: https://habr.com/ru/post/80858/
All Articles