For more information, see the Release Notes/Changelog at https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/
]]> -
Right click to toggle background color.
Store then retrieve a value from the div element.
Double click to toggle background color.
-
+
:eq() Selector
:eq(index)
@@ -17,6 +17,7 @@
Select the element at index n within the matched set.
+ As of jQuery 3.4, the :eq pseudo-class is deprecated. Remove it from your selectors and filter the results later using .eq().
The index-related selectors (:eq(), :lt(), :gt(), :even, :odd) filter the set of elements that have matched the expressions that precede them. They narrow the set down based on the order of the elements within this matched set. For example, if elements are first selected with a class selector (.myclass) and four elements are returned, these elements are given indices 0 through 3 for the purposes of these selectors.
Note that since JavaScript arrays use 0-based indexing, these selectors reflect that fact. This is why $( ".myclass:eq(1)" ) selects the second element in the document with the class myclass, rather than the first. In contrast, :nth-child(n) uses 1-based indexing to conform to the CSS specification.
Prior to jQuery 1.8, the :eq(index) selector did not accept a negative value for index (though the .eq(index) method did).
@@ -92,4 +93,5 @@ $( "li:eq(-2)" ).addClass( "foo" )
diff --git a/entries/even-selector.xml b/entries/even-selector.xml
index f190e066..ba2dc5d5 100644
--- a/entries/even-selector.xml
+++ b/entries/even-selector.xml
@@ -1,5 +1,5 @@
-
+
:even Selector
:even
@@ -33,4 +33,5 @@ $( "tr:even" ).css( "background-color", "#bbf" );
diff --git a/entries/fadeIn.xml b/entries/fadeIn.xml
index 0f4b6888..a73fdc06 100644
--- a/entries/fadeIn.xml
+++ b/entries/fadeIn.xml
@@ -53,7 +53,7 @@ $( "#clickme" ).click(function() {
Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.
Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.
Fades first paragraph in or out, completing the animation within 600 milliseconds and using a linear easing. Fades last paragraph in or out for 200 milliseconds, inserting a "finished" message upon completion.
finished" );
});
});
diff --git a/entries/first-child-selector.xml b/entries/first-child-selector.xml
index 4b30b503..d91a50b8 100644
--- a/entries/first-child-selector.xml
+++ b/entries/first-child-selector.xml
@@ -7,7 +7,7 @@
Selects all elements that are the first child of their parent.
- While :first matches only a single element, the :first-child selector can match more than one: one for each parent. This is equivalent to :nth-child(1).
+ While .first() matches only a single element, the :first-child selector can match more than one: one for each parent. This is equivalent to :nth-child(1).
Finds the first span in each matched div to underline and add a hover state.
diff --git a/entries/first-selector.xml b/entries/first-selector.xml
index 0676d85f..ded45ccb 100644
--- a/entries/first-selector.xml
+++ b/entries/first-selector.xml
@@ -1,5 +1,5 @@
-
+
:first Selector
:first
@@ -7,6 +7,7 @@
Selects the first matched DOM element.
+ As of jQuery 3.4, the :first pseudo-class is deprecated. Remove it from your selectors and filter the results later using .first().
The :first pseudo-class is equivalent to :eq( 0 ). It could also be written as :lt( 1 ). While this matches only a single element, :first-child can match more than one: One for each parent.
diff --git a/entries/get.xml b/entries/get.xml
index 64272cf4..006d6de5 100644
--- a/entries/get.xml
+++ b/entries/get.xml
@@ -46,7 +46,7 @@ console.log( $( "li" ).get( -1 ) );
$( "*", document.body ).click(function( event ) {
event.stopPropagation();
var domElement = $( this ).get( 0 );
- $( "span:first" ).text( "Clicked on - " + domElement.nodeName );
+ $( "span" ).first().text( "Clicked on - " + domElement.nodeName );
});
]]>
-
+
:gt() Selector
:gt(index)
@@ -17,6 +17,7 @@
Select all elements at an index greater than index within the matched set.
+ As of jQuery 3.4, the :gt pseudo-class is deprecated. Remove it from your selectors and filter the results later using .slice(). For example, :gt(3) can be replaced with a call to .slice( 4 ) (the provided index needs to be increased by one).
index-related selectors
@@ -42,4 +43,5 @@ $( "td:gt(-2)" ).css( "color", "red" );
diff --git a/entries/hasClass.xml b/entries/hasClass.xml
index ddf5d893..622570e9 100644
--- a/entries/hasClass.xml
+++ b/entries/hasClass.xml
@@ -30,8 +30,8 @@ $( "#mydiv" ).hasClass( "quux" )
Looks for the paragraph that contains 'selected' as a class.
***" ) );
}, function() {
- $( this ).find( "span:last" ).remove();
+ $( this ).find( "span" ).last().remove();
}
);
diff --git a/entries/index.xml b/entries/index.xml
index efcde43c..16b3bea9 100644
--- a/entries/index.xml
+++ b/entries/index.xml
@@ -53,7 +53,7 @@ alert( "Index: " + $( "li" ).index( listItem ) );
Note that if the jQuery collection used as the .index() method's argument contains more than one element, the first element within the matched set of elements will be used.
-var listItems = $( "li:gt(0)" );
+var listItems = $( "li" ).slice( 1 );
alert( "Index: " + $( "li" ).index( listItems ) );
We get back the zero-based position of the first list item within the matched set:
@@ -133,7 +133,7 @@ $( "div" ).html( "Index: " + $( "li" ).index( listItem ) );
}
]]>
Get the innerHeight of a paragraph.
Get the innerWidth of a paragraph.
Now, when the user clicks on the word "list" in the first item or anywhere in the third item, the clicked list item will be given a red background. However, when the user clicks on item 1 in the first item or anywhere in the second item, nothing will occur, because in those cases the target of the event would be <strong> or <span>, respectively.
- Prior to jQuery 1.7, in selector strings with positional selectors such as :first, :gt(), or :even, the positional filtering is done against the jQuery object passed to .is(), not against the containing document. So for the HTML shown above, an expression such as $( "li:first" ).is( "li:last" ) returns true, but $( "li:first-child" ).is( "li:last-child" ) returns false. In addition, a bug in Sizzle prevented many positional selectors from working properly. These two factors made positional selectors almost unusable in filters.
- Starting with jQuery 1.7, selector strings with positional selectors apply the selector against the document, and then determine whether the first element of the current jQuery set matches any of the resulting elements. So for the HTML shown above, an expression such as $( "li:first" ).is( "li:last" ) returns false. Note that since positional selectors are jQuery additions and not W3C standard, we recommend using the W3C selectors whenever feasible.
Using a Function
The second form of this method evaluates expressions related to elements based on a function rather than a selector. For each element, if the function returns true, .is() returns true as well. For example, given a somewhat more involved HTML snippet:
diff --git a/entries/jQuery.data.xml b/entries/jQuery.data.xml
index bc1bab43..8e275146 100644
--- a/entries/jQuery.data.xml
+++ b/entries/jQuery.data.xml
@@ -34,8 +34,8 @@ jQuery.data( div, "test", {
first: 16,
last: "pizza!"
});
-$( "span:first" ).text( jQuery.data( div, "test" ).first );
-$( "span:last" ).text( jQuery.data( div, "test" ).last );
+$( "span" ).first().text( jQuery.data( div, "test" ).first );
+$( "span" ).last().text( jQuery.data( div, "test" ).last );
]]>
Set a data store for 2 names then remove one of them.
While :last matches only a single element, :last-child can match more than one: one for each parent.
While .last() matches only a single element, :last-child can match more than one: one for each parent.
As of jQuery 3.4, the :last pseudo-class is deprecated. Remove it from your selectors and filter the results later using .last().
Note that :last selects a single element by filtering the current jQuery collection and matching the last element within it.
index within the matched set.As of jQuery 3.4, the :lt pseudo-class is deprecated. Remove it from your selectors and filter the results later using .slice(). For example, :lt(3) can be replaced with a call to .slice( 0, 3 ).
index-related selectors
@@ -42,4 +43,5 @@ $( "td:lt(-2)" ).css( "color", "red" );Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as :eq() or :even jQuery follows JavaScript's "0-indexed" counting. Given a single <ul> containing two <li>s, $( "li:nth-child(1)" ) selects the first <li> while $( "li:eq(1)" ) selects the second.
The :nth-child(n) pseudo-class is easily confused with :eq(n), even though the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With :eq(n) only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.
Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1. jQuery methods like .first() or .eq() jQuery follows JavaScript's "0-indexed" counting. Given a single <ul> containing two <li>s, $( "li:nth-child(1)" ) selects the first <li> while $( "li" ).eq( 1 ) selects the second.
The :nth-child(n) pseudo-class is easily confused with the .eq( n ) call, even though the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With the .eq( n ) call only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.
Further discussion of this unusual usage can be found in the W3C CSS specification.
Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as :eq() or :even jQuery follows JavaScript's "0-indexed" counting. Given a single <ul> containing three <li>s, $( "li:nth-last-child(1)" ) selects the third, last, <li>.
Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as .first() or .eq() jQuery follows JavaScript's "0-indexed" counting. Given a single <ul> containing three <li>s, $( "li:nth-last-child(1)" ) selects the third, last, <li>.
Further discussion of this usage can be found in the W3C CSS specification.
Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as :eq() or :even jQuery follows JavaScript's "0-indexed" counting. Given a single <ul> containing three <li>s, $('li:nth-last-of-type(1)') selects the third, last, <li>.
Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as .first() or .eq() jQuery follows JavaScript's "0-indexed" counting. Given a single <ul> containing three <li>s, $('li:nth-last-of-type(1)') selects the third, last, <li>.
Further discussion of this usage can be found in the W3C CSS specification.
Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as :eq() or :even jQuery follows JavaScript's "0-indexed" counting.
Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as .first() or .eq() jQuery follows JavaScript's "0-indexed" counting.
Further discussion of this usage can be found in the W3C CSS specification.
.attr( "class", "newClass" ) instead.
As of jQuery 1.4, the .removeClass() method allows us to indicate the class to be removed by passing in a function.
-$( "li:last" ).removeClass(function() {
+$( "li" ).last().removeClass(function() {
return $( this ).prev().attr( "class" );
});
Animates all divs to slide up, completing the animation within 400 milliseconds.
If you'd like to prevent forms from being submitted unless a flag variable is set, try:
To trigger the submit event on the first form on the page, try:
To submit the first form without using the submit() function, try: