Skip to content

Commit

Permalink
All: Updates for jQuery 1.12/2.2-3.5
Browse files Browse the repository at this point in the history
  • Loading branch information
mgol committed Apr 23, 2020
1 parent 0b081f2 commit 03ea98e
Show file tree
Hide file tree
Showing 37 changed files with 364 additions and 124 deletions.
41 changes: 40 additions & 1 deletion categories.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
33 changes: 32 additions & 1 deletion entries/addClass.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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-2.2"/>
<category slug="version/3.3"/>
</entry>
2 changes: 2 additions & 0 deletions entries/contents.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
4 changes: 4 additions & 0 deletions entries/css.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
4 changes: 3 additions & 1 deletion entries/eq-selector.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 4 additions & 1 deletion entries/even-selector.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand Down
47 changes: 47 additions & 0 deletions entries/even.xml
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions entries/filter.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 3 additions & 1 deletion entries/first-selector.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand Down
19 changes: 10 additions & 9 deletions entries/first.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand Down
4 changes: 3 additions & 1 deletion entries/gt-selector.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions entries/hover.xml
Original file line number Diff line number Diff line change
Expand Up @@ -102,10 +102,10 @@ $( selector ).on( "mouseenter mouseleave", handlerInOut );
<desc>Slide the next sibling LI up or down on hover, and toggle a class.</desc>
<code><![CDATA[
$( "li" )
.filter( ":odd" )
.odd()
.hide()
.end()
.filter( ":even" )
.even()
.hover(function() {
$( this )
.toggleClass( "active" )
Expand Down
Loading

0 comments on commit 03ea98e

Please sign in to comment.