From 2d61a889b8a0ec78fe299f0177003f0b419d023f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Wed, 28 Aug 2019 22:09:58 +0200 Subject: [PATCH] All: Mark positional selectors as deprecated since jQuery 3.4.0 Positional selectors: :first, :last, :eq, :even, :odd, :lt, :gt, and :nth are deprecated since jQuery 3.4.0. This is now reflected in the docs & deprecated pseudo-classes are not used in examples on other API pages. Fixes gh-1144 --- categories.xml | 9 +++++++-- entries/addClass.xml | 2 +- entries/animate.xml | 4 ++-- entries/children.xml | 4 ++-- entries/contextmenu.xml | 2 +- entries/data.xml | 4 ++-- entries/dblclick.xml | 2 +- entries/end.xml | 2 +- entries/eq-selector.xml | 4 +++- entries/even-selector.xml | 3 ++- entries/fadeIn.xml | 2 +- entries/fadeTo.xml | 6 +++--- entries/fadeToggle.xml | 8 ++++---- entries/first-child-selector.xml | 2 +- entries/first-selector.xml | 4 +++- entries/get.xml | 2 +- entries/gt-selector.xml | 4 +++- entries/hasClass.xml | 4 ++-- entries/hidden-selector.xml | 4 ++-- entries/hover.xml | 2 +- entries/index.xml | 4 ++-- entries/innerHeight.xml | 4 ++-- entries/innerWidth.xml | 4 ++-- entries/is.xml | 2 -- entries/jQuery.data.xml | 4 ++-- entries/jQuery.removeData.xml | 8 ++++---- entries/jQuery.unique.xml | 4 ++-- entries/jQuery.uniqueSort.xml | 4 ++-- entries/last-child-selector.xml | 2 +- entries/last-selector.xml | 6 ++++-- entries/lt-selector.xml | 4 +++- entries/mouseenter.xml | 12 ++++++------ entries/mouseleave.xml | 12 ++++++------ entries/mousemove.xml | 4 ++-- entries/mouseout.xml | 12 ++++++------ entries/nextAll.xml | 2 +- entries/nth-child-selector.xml | 4 ++-- entries/nth-last-child-selector.xml | 2 +- entries/nth-last-of-type-selector.xml | 2 +- entries/nth-of-type-selector.xml | 2 +- entries/odd-selector.xml | 3 ++- entries/offset.xml | 4 ++-- entries/outerHeight.xml | 4 ++-- entries/outerWidth.xml | 4 ++-- entries/position.xml | 4 ++-- entries/prevAll.xml | 2 +- entries/removeClass.xml | 4 ++-- entries/removeData.xml | 8 ++++---- entries/scrollLeft.xml | 4 ++-- entries/scrollTop.xml | 4 ++-- entries/slideDown.xml | 2 +- entries/slideUp.xml | 2 +- entries/submit.xml | 4 ++-- entries/text.xml | 4 ++-- entries/trigger.xml | 14 +++++++------- 55 files changed, 127 insertions(+), 112 deletions(-) diff --git a/categories.xml b/categories.xml index c02b93b3..78f012b1 100644 --- a/categories.xml +++ b/categories.xml @@ -71,14 +71,19 @@

For more information, see the Release Notes/Changelog at https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/

]]> - + For more information, see the Release Notes/Changelog at https://blog.jquery.com/2018/01/19/jquery-3-3-0-a-fragrant-bouquet-of-deprecations-and-is-that-a-new-feature/

]]> + + For more information, see the Release Notes/Changelog at https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/

+ ]]> + - + diff --git a/entries/addClass.xml b/entries/addClass.xml index 5dd99ec5..3b28a708 100644 --- a/entries/addClass.xml +++ b/entries/addClass.xml @@ -64,7 +64,7 @@ $( "p" ).last().addClass( "selected" ); Add the classes "selected" and "highlight" to the matched elements. Animates the first div's left property and synchronizes the remaining divs, using the step function to set their left properties at each stage of the animation. 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. @@ -128,8 +128,8 @@ var getPos = function( n ) { $( "p" ).each(function( n ) { var r = Math.floor( Math.random() * 3 ); var tmp = $( this ).text(); - $( this ).text( $( "p:eq(" + r + ")" ).text() ); - $( "p:eq(" + r + ")" ).text( tmp ); + $( this ).text( $( "p" ).eq( r ).text() ); + $( "p" ).eq( r ).text( tmp ); $( this ).css( "left", getPos( n ) ); }); $( "div" ) diff --git a/entries/fadeToggle.xml b/entries/fadeToggle.xml index f3906b45..b4d4fb0b 100644 --- a/entries/fadeToggle.xml +++ b/entries/fadeToggle.xml @@ -26,11 +26,11 @@ 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.

 @@ -33,4 +34,5 @@ $( "tr:first" ).css( "font-style", "italic" ); + 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.
     
     
     
     
   Selects all elements that are the last child of their parent.
   
-    
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.

   
   
     Find the last span in each matched div and add some css plus a hover state.
diff --git a/entries/last-selector.xml b/entries/last-selector.xml
index 2cbd886f..42cd8490 100644
--- a/entries/last-selector.xml
+++ b/entries/last-selector.xml
@@ -1,5 +1,5 @@
 
-
+
   :last Selector
   :last
   
@@ -7,13 +7,14 @@
   
   Selects the last matched element.
   
+    
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.

   
   
   
     Finds the last table row.
     
     
@@ -26,4 +27,5 @@ $( "tr:last" ).css({ backgroundColor: "yellow", fontWeight: "bolder" });
   
   
   
+  
 
diff --git a/entries/lt-selector.xml b/entries/lt-selector.xml
index b85b5f77..d8c893ea 100644
--- a/entries/lt-selector.xml
+++ b/entries/lt-selector.xml
@@ -1,5 +1,5 @@
 
-
+
   :lt() Selector
   
     :lt(index)
@@ -17,6 +17,7 @@
   
   Select all elements at an index less than 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" );
   
   
   
+  
 
diff --git a/entries/mouseenter.xml b/entries/mouseenter.xml
index f9c39697..08bb0632 100644
--- a/entries/mouseenter.xml
+++ b/entries/mouseenter.xml
@@ -84,21 +84,21 @@ $( "#other" ).click(function() {
 var i = 0;
 $( "div.overout" )
   .mouseover(function() {
-    $( "p:first", this ).text( "mouse over" );
-    $( "p:last", this ).text( ++i );
+    $( "p", this ).first().text( "mouse over" );
+    $( "p", this ).last().text( ++i );
   })
   .mouseout(function() {
-    $( "p:first", this ).text( "mouse out" );
+    $( "p", this ).first().text( "mouse out" );
   });
 
 var n = 0;
 $( "div.enterleave" )
   .mouseenter(function() {
-    $( "p:first", this ).text( "mouse enter" );
-    $( "p:last", this ).text( ++n );
+    $( "p", this ).first().text( "mouse enter" );
+    $( "p", this ).last().text( ++n );
   })
   .mouseleave(function() {
-    $( "p:first", this ).text( "mouse leave" );
+    $( "p", this ).first().text( "mouse leave" );
   });
 ]]>
     
     
     300
diff --git a/entries/mouseout.xml b/entries/mouseout.xml
index 57304cb1..d95273c5 100644
--- a/entries/mouseout.xml
+++ b/entries/mouseout.xml
@@ -85,21 +85,21 @@ $( "#other" ).click(function() {
 var i = 0;
 $( "div.overout" )
   .mouseout(function() {
-    $( "p:first", this ).text( "mouse out" );
-    $( "p:last", this ).text( ++i );
+    $( "p", this ).first().text( "mouse out" );
+    $( "p", this ).last().text( ++i );
   })
   .mouseover(function() {
-    $( "p:first", this ).text( "mouse over" );
+    $( "p", this ).first().text( "mouse over" );
   });
 
 var n = 0;
 $( "div.enterleave" )
   .on( "mouseenter", function() {
-    $( "p:first", this ).text( "mouse enter" );
+    $( "p", this ).first().text( "mouse enter" );
   })
   .on( "mouseleave", function() {
-    $( "p:first", this ).text( "mouse leave" );
-    $( "p:last", this ).text( ++n );
+    $( "p", this ).first().text( "mouse leave" );
+    $( "p", this ).last().text( ++n );
   });
 ]]>
     
     Locate all the divs after the first and give them a class.
     
     
   Selects all elements that are the nth-child of their parent.
   
-    
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.

   
   
diff --git a/entries/nth-last-child-selector.xml b/entries/nth-last-child-selector.xml
index 9d63636a..c71dc0be 100644
--- a/entries/nth-last-child-selector.xml
+++ b/entries/nth-last-child-selector.xml
@@ -10,7 +10,7 @@
   
   Selects all elements that are the nth-child of their parent, counting from the last element to the first.
   
-    
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.

   
   
diff --git a/entries/nth-last-of-type-selector.xml b/entries/nth-last-of-type-selector.xml
index 602d430a..73d488ae 100644
--- a/entries/nth-last-of-type-selector.xml
+++ b/entries/nth-last-of-type-selector.xml
@@ -10,7 +10,7 @@
   
   Selects all the elements that are the nth-child of their parent in relation to siblings with the same element name, counting from the last element to the first.
   
-    
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.

   
   
diff --git a/entries/nth-of-type-selector.xml b/entries/nth-of-type-selector.xml
index 89e6d452..0d93ab8c 100644
--- a/entries/nth-of-type-selector.xml
+++ b/entries/nth-of-type-selector.xml
@@ -10,7 +10,7 @@
   
   Selects all elements that are the nth child of their parent in relation to siblings with the same element name.
   
-    
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.

   
     
diff --git a/entries/odd-selector.xml b/entries/odd-selector.xml
index 12a75cb8..029f2e72 100644
--- a/entries/odd-selector.xml
+++ b/entries/odd-selector.xml
@@ -1,5 +1,5 @@
 
-
+
   :odd Selector
   :odd
   
@@ -33,4 +33,5 @@ $( "tr:odd" ).css( "background-color", "#bbbbff" );
   
   
   
+  
 
diff --git a/entries/offset.xml b/entries/offset.xml
index 9a588ca2..a115255c 100644
--- a/entries/offset.xml
+++ b/entries/offset.xml
@@ -19,7 +19,7 @@
      
       Access the offset of the second paragraph:
       
@@ -101,7 +101,7 @@ $( "*", document.body ).click(function( event ) {
     
       Set the offset of the second paragraph:
       
       
     Get the outerHeight of a paragraph.
     
diff --git a/entries/outerWidth.xml b/entries/outerWidth.xml
index cfb07bc8..c8e6f87e 100644
--- a/entries/outerWidth.xml
+++ b/entries/outerWidth.xml
@@ -23,8 +23,8 @@
   
     Get the outerWidth of a paragraph.
     
diff --git a/entries/position.xml b/entries/position.xml
index 3eed46b4..60b3e6a2 100644
--- a/entries/position.xml
+++ b/entries/position.xml
@@ -16,9 +16,9 @@
    
     Access the position of the second paragraph:
     
     
     Locate all the divs preceding the last div and give them a class.
     
     To replace all existing classes with another class, we can use .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" );
 });
     

@@ -98,7 +98,7 @@ $( "p:odd" ).removeClass( "blue under" );
   
     Remove all the classes from the matched elements.
     
     
     Set a data store for 2 names then remove one of them.
     
     
       Get the scrollLeft of a paragraph.
       
       
       Get the scrollTop of a paragraph.
       
       Animates all divs to slide down and show themselves over 600 milliseconds.
     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:
     
   
   
diff --git a/entries/text.xml b/entries/text.xml
index 3752dd10..ff9c537e 100644
--- a/entries/text.xml
+++ b/entries/text.xml
@@ -28,8 +28,8 @@
     
       Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).
       
       
     Clicks to button #2 also trigger a click for button #1.
     
     To submit the first form without using the submit() function, try:
     
   
   
     To submit the first form without using the submit() function, try: