All: Updates for jQuery 1.12/2.2-3.5

Fixes #947 Fixes #949 Fixes #950 Fixes #1142 Ref #970 Ref #972 Closes #1160
jquery · Apr 29, 2020 · 13b661b · 13b661b
1 parent 67942f9
commit 13b661b
Show file tree

Hide file tree

Showing 38 changed files with 367 additions and 127 deletions.
diff --git a/categories.xml b/categories.xml
@@ -71,6 +71,11 @@
         <p>For more information, see the Release Notes/Changelog at <a href="https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/">https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/</a></p>
       ]]></desc>
     </category>
+    <category name="Deprecated 3.2" slug="deprecated-3.2">
+      <desc><![CDATA[All the aspects of the API that were deprecated in the corresponding version of jQuery.
+        <p>For more information, see the Release Notes/Changelog at <a href="https://blog.jquery.com/2017/03/16/jquery-3-2-0-is-out/">https://blog.jquery.com/2017/03/16/jquery-3-2-0-is-out/</a></p>
+      ]]></desc>
+    </category>
     <category name="Deprecated 3.3" slug="deprecated-3.3">
       <desc><![CDATA[All the aspects of the API that were deprecated in the corresponding version of jQuery.
         <p>For more information, see the Release Notes/Changelog at <a href="https://blog.jquery.com/2018/01/19/jquery-3-3-0-a-fragrant-bouquet-of-deprecations-and-is-that-a-new-feature/">https://blog.jquery.com/2018/01/19/jquery-3-3-0-a-fragrant-bouquet-of-deprecations-and-is-that-a-new-feature/</a></p>
@@ -81,6 +86,11 @@
         <p>For more information, see the Release Notes/Changelog at <a href="https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/">https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/</a></p>
       ]]></desc>
     </category>
+    <category name="Deprecated 3.5" slug="deprecated-3.5">
+      <desc><![CDATA[All the aspects of the API that were deprecated in the corresponding version of jQuery.
+        <p>For more information, see the Release Notes/Changelog at <a href="https://blog.jquery.com/2020/04/10/jquery-3-5-0-released/">https://blog.jquery.com/2020/04/10/jquery-3-5-0-released/</a></p>
+      ]]></desc>
+    </category>
   </category>
   <category name="Dimensions" slug="dimensions">
     <desc><![CDATA[These methods are used to get and set the CSS dimensions for the various properties.]]></desc>
@@ -429,7 +439,7 @@ var files = event.originalEvent.dataTransfer.files;
         <hr/>
       ]]></desc>
     </category>
-    <category name="Version 1.12 &amp; 2.2" slug="1.12-2.2">
+    <category name="Version 1.12 &amp; 2.2" slug="1.12-and-2.2">
       <desc><![CDATA[
         <p>Aspects of the API that were changed in the corresponding versions of jQuery. Changes in jQuery 1.12 and 2.2 includes performance improvements of the selector engine, manipulation of class names for SVG elements, support for the Symbol type and iterators added in ES2015, and a new hook has been added for filtering HTML. A <a href="https://github.com/jquery/jquery-migrate">jQuery Migrate Plugin</a> was offered to help developers with a transitional upgrade path.
         </p>
@@ -447,7 +457,36 @@ var files = event.originalEvent.dataTransfer.files;
     </category>
     <category name="Version 3.1" slug="3.1">
       <desc><![CDATA[
-        <p><a href="/jQuery.readyException">jQuery.readyException</a> was added.</p>
+        <p>Aspects of the API that were changed in the corresponding version of jQuery. Version 3.1 added the <a href="/jQuery.readyException">jQuery.readyException</a> API.</p>
+        <p>For more information, see the <a href="https://blog.jquery.com/2016/07/07/jquery-3-1-0-released-no-more-silent-errors/">Release Notes/Changelog</a></p>
+        <hr/>
+      ]]></desc>
+    </category>
+    <category name="Version 3.2" slug="3.2">
+      <desc><![CDATA[
+        <p>Aspects of the API that were changed in the corresponding version of jQuery. Version 3.2 added support for custom CSS properties, made <code>.contents()</code> work on the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template"><code>&lt;template&gt;</code> element</a> &amp; made <code>.width()</code> &amp; <code>.height()</code> ignore CSS transforms. A few APIs were deprecated. The deprecated module was added back to the slim build.</p>
+        <p>For more information, see the <a href="https://blog.jquery.com/2017/03/16/jquery-3-2-0-is-out/">Release Notes/Changelog</a></p>
+        <hr/>
+      ]]></desc>
+    </category>
+    <category name="Version 3.3" slug="3.3">
+      <desc><![CDATA[
+        <p>Aspects of the API that were changed in the corresponding version of jQuery. <code>.addClass()</code>, <code>.removeClass()</code> &amp; <code>.toggleClass()</code> now work on arrays of classes; a few APIs were deprecated.</p>
+        <p>For more information, see the <a href="https://blog.jquery.com/2018/01/19/jquery-3-3-0-a-fragrant-bouquet-of-deprecations-and-is-that-a-new-feature/">Release Notes/Changelog</a></p>
+        <hr/>
+      ]]></desc>
+    </category>
+    <category name="Version 3.4" slug="3.4">
+      <desc><![CDATA[
+        <p>Aspects of the API that were changed in the corresponding version of jQuery. <code>nonce</code> &amp; <code>nomodule</code> attributes are now preserved during script manipulation, layout thrashing was eliminated in some cases in <code>.width()</code> &amp; <code>.height()</code> APIs. Radio elements state is now updated before event handlers run. Passing data now works when triggering all events, including <code>focus</code>. A minor security fix is also included.</p>
+        <p>For more information, see the <a href="https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/">Release Notes/Changelog</a></p>
+        <hr/>
+      ]]></desc>
+    </category>
+    <category name="Version 3.5" slug="3.5">
+      <desc><![CDATA[
+        <p>Aspects of the API that were changed in the corresponding version of jQuery. Security fixes, new <code>.even()</code> &amp; <code>.odd()</code> methods; <code>jQuery.globalEval</code> now accepts context; unsuccessful HTTP script responses are no longer evaluated; performance improvements. <code>jQuery.trim</code> is now deprecated.</p>
+        <p>For more information, see the <a href="https://jquery.com/upgrade-guide/3.5/">jQuery Core 3.5 Upgrade guide</a> and the <a href="https://blog.jquery.com/2020/04/10/jquery-3-5-0-released/">Release Notes/Changelog</a></p>
         <hr/>
       ]]></desc>
     </category>

diff --git a/entries/addClass.xml b/entries/addClass.xml
@@ -7,10 +7,16 @@
       <desc>One or more space-separated classes to be added to the class attribute of each matched element.</desc>
     </argument>
   </signature>
+  <signature>
+    <added>3.3</added>
+    <argument name="classNames" type="Array">
+      <desc>An array of classes to be added to the class attribute of each matched element.</desc>
+    </argument>
+  </signature>
   <signature>
     <added>1.4</added>
     <argument name="function" type="Function">
-      <desc>A function returning one or more space-separated class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, <code>this</code> refers to the current element in the set.</desc>
+      <desc>A function returning one or more space-separated classes or an array of classes to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, <code>this</code> refers to the current element in the set.</desc>
       <argument name="index" type="Integer" />
       <argument name="currentClassName" type="String" />
       <return type="String"/>
@@ -82,6 +88,29 @@ $( "p" ).last().addClass( "selected highlight" );
 <p>Hello</p>
 <p>and</p>
 <p>Goodbye</p>
+]]></html>
+  </example>
+  <example>
+    <desc>Add the classes "selected" and "highlight" to the matched elements (3.3+ syntax).</desc>
+    <code><![CDATA[
+$( "p" ).last().addClass( [ "selected", "highlight" ] );
+]]></code>
+    <css><![CDATA[
+  p {
+    margin: 8px;
+    font-size: 16px;
+  }
+  .selected {
+    color: red;
+  }
+  .highlight {
+    background: yellow;
+  }
+]]></css>
+    <html><![CDATA[
+<p>Hello</p>
+<p>and</p>
+<p>Goodbye</p>
 ]]></html>
   </example>
   <example>
@@ -122,4 +151,6 @@ $( "div" ).addClass(function( index, currentClass ) {
   <category slug="css"/>
   <category slug="version/1.0"/>
   <category slug="version/1.4"/>
+  <category slug="version/1.12-and-2.2"/>
+  <category slug="version/3.3"/>
 </entry>
diff --git a/entries/contents.xml b/entries/contents.xml
@@ -8,6 +8,7 @@
   <longdesc>
     <p>Given a jQuery object that represents a set of DOM elements, the <code>.contents()</code> method allows us to search through the immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The <code>.contents()</code> and <code>.children()</code> methods are similar, except that the former includes text nodes and comment nodes as well as HTML elements in the resulting jQuery object. Please note that most jQuery operations don't support text nodes and comment nodes. The few that do will have an explicit note on their API documentation page.</p>
     <p>The <code>.contents()</code> method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.</p>
+    <p><strong>As of jQuery 3.2</strong>, <code>.contents()</code> returns contents of <code>&lt;template&gt;</code> elements as well.</p>
     <p>Consider a simple <code>&lt;div&gt;</code> with a number of text nodes, each of which is separated by two line break elements (<code>&lt;br&gt;</code>):</p>
     <pre><code>
 &lt;div class="container"&gt;
@@ -60,4 +61,5 @@ $( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );
   </example>
   <category slug="traversing/miscellaneous-traversal"/>
   <category slug="version/1.2"/>
+  <category slug="version/3.2"/>
 </entry>
diff --git a/entries/css.xml b/entries/css.xml
@@ -23,6 +23,7 @@
       <p>Retrieval of shorthand CSS properties (e.g., <code>margin</code>, <code>background</code>, <code>border</code>), although functional with some browsers, is not guaranteed. For example, if you want to retrieve the rendered <code>border-width</code>, use: <code>$( elem ).css( "borderTopWidth" )</code>, <code>$( elem ).css( "borderBottomWidth" )</code>, and so on.</p>
       <p>An element should be connected to the DOM when calling <code>.css()</code> on it. If it isn't, jQuery may throw an error.</p>
       <p><strong>As of jQuery 1.9</strong>, passing an array of style properties to <code>.css()</code> will result in an object of property-value pairs. For example, to retrieve all four rendered <code>border-width</code> values, you could use <code>$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ])</code>. </p>
+      <p><strong>As of jQuery 3.2</strong>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*">CSS Custom Properties</a> (also called CSS Variables) are supported: <code>$( "p" ).css( "--custom-property" )</code>. Note that you need to provide the property name as-is, camelCasing it won't work as it does for regular CSS properties.</p>
     </longdesc>
     <example>
       <desc>Get the background color of a clicked div.</desc>
@@ -106,6 +107,7 @@ $( "div" ).click(function() {
     <category slug="version/1.0"/>
     <category slug="version/1.4"/>
     <category slug="version/1.9"/>
+    <category slug="version/3.2"/>
   </entry>
   <entry type="method" name="css" return="jQuery">
     <signature>
@@ -157,6 +159,7 @@ $( "div.example" ).css( "width", function( index ) {
       </code></pre>
       <p>This example sets the widths of the matched elements to incrementally larger values.</p>
       <p><strong>Note: </strong>If nothing is returned in the setter function (ie. <code>function( index, style ){} )</code>, or if <code>undefined</code> is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.</p>
+      <p><strong>As of jQuery 3.2</strong>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*">CSS Custom Properties</a> (also called CSS Variables) are supported: <code>$( "p" ).css( "--custom-property", "value" )</code>. Note that you need to provide the property name as-is, camelCasing it won't work as it does for regular CSS properties.</p>
     </longdesc>
     <example>
       <desc>Change the color of any paragraph to red on mouseover event.</desc>
@@ -282,5 +285,6 @@ $( "div" ).on( "click", function() {
     <category slug="manipulation/style-properties"/>
     <category slug="version/1.0"/>
     <category slug="version/1.4"/>
+    <category slug="version/3.2"/>
   </entry>
 </entries>
diff --git a/entries/eq-selector.xml b/entries/eq-selector.xml
@@ -17,7 +17,9 @@
   </signature>
   <desc>Select the element at index <code>n</code> within the matched set.</desc>
   <longdesc>
-    <p><strong>As of jQuery 3.4</strong>, the <code>:eq</code> pseudo-class is deprecated. Remove it from your selectors and filter the results later using <a href="/eq/"><code>.eq()</code></a>.</p>
+    <div class="warning">
+      <p><strong>As of jQuery 3.4</strong>, the <code>:eq</code> pseudo-class is deprecated. Remove it from your selectors and filter the results later using <a href="/eq/"><code>.eq()</code></a>.</p>
+    </div>
     <p>The index-related selectors (<code>:eq()</code>, <code>:lt()</code>, <code>:gt()</code>, <code>:even</code>, <code>:odd</code>) 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 (<code>.myclass</code>) and four elements are returned, these elements are given indices <code>0</code> through <code>3</code> for the purposes of these selectors.</p>
     <p>Note that since JavaScript arrays use <em>0-based indexing</em>, these selectors reflect that fact. This is why <code>$( ".myclass:eq(1)" )</code> selects the second element in the document with the class myclass, rather than the first. In contrast, <code>:nth-child(n)</code> uses <em>1-based indexing</em> to conform to the CSS specification.</p>
     <p>Prior to jQuery 1.8, the <code>:eq(index)</code> selector did <em>not</em> accept a negative value for <code>index</code> (though the <a href="/eq/"><code>.eq(index)</code></a> method did).</p>

diff --git a/entries/even-selector.xml b/entries/even-selector.xml
@@ -5,8 +5,11 @@
   <signature>
     <added>1.0</added>
   </signature>
-  <desc>Selects even elements, zero-indexed.  See also <a href="/Selectors/odd/">odd</a>.</desc>
+  <desc>Selects even elements, zero-indexed.  See also <a href="/odd-selector/"><code>:odd</code></a>.</desc>
   <longdesc>
+    <div class="warning">
+      <p><strong>As of jQuery 3.4</strong>, the <code>:even</code> pseudo-class is deprecated. Remove it from your selectors and filter the results later using <a href="/even/"><code>.even()</code></a> (available in jQuery 3.5.0 or newer).</p>
+    </div>
     <p>In particular, note that the <em>0-based indexing</em> means that, counter-intuitively, <code>:even</code> selects the first element, third element, and so on within the matched set.</p>
   </longdesc>
   <note id="jquery-selector-extension" type="additional" data-selector=":even"/>

diff --git a/entries/even.xml b/entries/even.xml
@@ -0,0 +1,47 @@
+<?xml version="1.0"?>
+<entry type="method" name="even" return="jQuery">
+  <title>.even()</title>
+  <signature>
+    <added>3.5</added>
+  </signature>
+  <desc>Reduce the set of matched elements to the even ones in the set, numbered from zero.</desc>
+  <longdesc>
+    <p>Given a jQuery object that represents a set of DOM elements, the <code>.even()</code> method constructs a new jQuery object from the even elements in that set. Counting starts from zero!</p>
+    <p>Consider a page with a simple list on it:</p>
+    <pre><code>
+&lt;ul&gt;
+  &lt;li&gt;list item 1&lt;/li&gt;
+  &lt;li&gt;list item 2&lt;/li&gt;
+  &lt;li&gt;list item 3&lt;/li&gt;
+  &lt;li&gt;list item 4&lt;/li&gt;
+  &lt;li&gt;list item 5&lt;/li&gt;
+&lt;/ul&gt;
+    </code></pre>
+    <p>We can apply this method to the set of list items:</p>
+    <pre><code>
+$( "li" ).even().css( "background-color", "red" );
+    </code></pre>
+    <p>The result of this call is a red background for the first, third &amp; 5th items.</p>
+  </longdesc>
+  <example>
+    <desc>Highlight the even items in a list.</desc>
+    <css><![CDATA[
+  .highlight {
+    background-color: yellow;
+  }
+]]></css>
+    <code><![CDATA[
+$( "ul li" ).even().addClass( "highlight" );
+]]></code>
+    <html><![CDATA[
+<ul>
+  <li>Look:</li>
+  <li>This is some text in a list.</li>
+  <li>This is a note about it.</li>
+  <li>This is another note about it.</li>
+</ul>
+]]></html>
+  </example>
+  <category slug="traversing/filtering"/>
+  <category slug="version/3.5"/>
+</entry>
diff --git a/entries/filter.xml b/entries/filter.xml
@@ -42,9 +42,9 @@
     </code></pre>
     <p>We can apply this method to the set of list items:</p>
     <pre><code>
-$( "li" ).filter( ":even" ).css( "background-color", "red" );
+$( "li" ).filter( ":nth-child(2n)" ).css( "background-color", "red" );
     </code></pre>
-    <p>The result of this call is a red background for items 1, 3, and 5, as they match the selector (recall that <code>:even</code> and <code>:odd</code> use 0-based indexing).</p>
+    <p>The result of this call is a red background for items 2, 4, and 6, as they match the selector.</p>
     <h4 id="using-filter-function">Using a Filter Function</h4>
     <p>The second form of this method allows us to filter elements against a function rather than a selector. For each element, if the function returns <code>true</code> (or a "truthy" value), the element will be included in the filtered set; otherwise, it will be excluded. Suppose we have a somewhat more involved HTML snippet:</p>
     <pre><code>

diff --git a/entries/first-selector.xml b/entries/first-selector.xml
@@ -7,7 +7,9 @@
   </signature>
   <desc>Selects the first matched DOM element.</desc>
   <longdesc>
-    <p><strong>As of jQuery 3.4</strong>, the <code>:first</code> pseudo-class is deprecated. Remove it from your selectors and filter the results later using <a href="/first/"><code>.first()</code></a>.</p>
+    <div class="warning">
+      <p><strong>As of jQuery 3.4</strong>, the <code>:first</code> pseudo-class is deprecated. Remove it from your selectors and filter the results later using <a href="/first/"><code>.first()</code></a>.</p>
+    </div>
     <p>The <code>:first</code> pseudo-class is equivalent to <code>:eq( 0 )</code>. It could also be written as <code>:lt( 1 )</code>. While this matches only a single element, <a href="/first-child-selector/">:first-child</a> can match more than one: One for each parent.</p>
   </longdesc>
   <note id="jquery-selector-extension" type="additional" data-selector=":first"/>

diff --git a/entries/first.xml b/entries/first.xml
@@ -24,21 +24,22 @@ $( "li" ).first().css( "background-color", "red" );
     <p>The result of this call is a red background for the first item.</p>
   </longdesc>
   <example>
-    <desc>Highlight the first span in a paragraph.</desc>
+    <desc>Highlight the first item in a list.</desc>
     <css><![CDATA[
-  .highlight{
-    background-color: yellow
+  .highlight {
+    background-color: yellow;
   }
 ]]></css>
     <code><![CDATA[
-$( "p span" ).first().addClass( "highlight" );
+$( "ul li" ).first().addClass( "highlight" );
 ]]></code>
     <html><![CDATA[
-<p>
-  <span>Look:</span>
-  <span>This is some text in a paragraph.</span>
-  <span>This is a note about it.</span>
-</p>
+<ul>
+  <li>Look:</li>
+  <li>This is some text in a list.</li>
+  <li>This is a note about it.</li>
+  <li>This is another note about it.</li>
+</ul>
 ]]></html>
   </example>
   <category slug="traversing/filtering"/>

diff --git a/entries/gt-selector.xml b/entries/gt-selector.xml
@@ -17,7 +17,9 @@
   </signature>
   <desc>Select all elements at an index greater than <code>index</code> within the matched set.</desc>
   <longdesc>
-    <p><strong>As of jQuery 3.4</strong>, the <code>:gt</code> pseudo-class is deprecated. Remove it from your selectors and filter the results later using <a href="/slice/"><code>.slice()</code></a>. For example, <code>:gt(3)</code> can be replaced with a call to <code>.slice( 4 )</code> (the provided index needs to be increased by one).</p>
+    <div class="warning">
+      <p><strong>As of jQuery 3.4</strong>, the <code>:gt</code> pseudo-class is deprecated. Remove it from your selectors and filter the results later using <a href="/slice/"><code>.slice()</code></a>. For example, <code>:gt(3)</code> can be replaced with a call to <code>.slice( 4 )</code> (the provided index needs to be increased by one).</p>
+    </div>
     <p>
       <strong>index-related selectors</strong>
     </p>