diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 000000000..8b808995d
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.js, *.xsl]
+indent_style = tab
diff --git a/.github/configs/hydra-config.json b/.github/configs/hydra-config.json
new file mode 100644
index 000000000..2173722b4
--- /dev/null
+++ b/.github/configs/hydra-config.json
@@ -0,0 +1,10 @@
+{
+ "//": [
+ "2023-05: twitter.com serves broken redirect-loop",
+ "2025-04: The oembed endpoint responds HTTP 429 Too Many Requests too often; perhaps because almost every page links to one"
+ ],
+ "exclude_scheme_prefixes": [
+ "https://twitter.com/",
+ "https://api.jquery.com/wp-json/oembed/1.0/embed"
+ ]
+}
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 000000000..aa2f74565
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,13 @@
+version: 2
+updates:
+ - package-ecosystem: github-actions
+ directory: "/"
+ schedule:
+ interval: monthly
+
+ # Group all dependabot version update PRs into one
+ groups:
+ github-actions:
+ applies-to: version-updates
+ patterns:
+ - "*"
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
new file mode 100644
index 000000000..26f673d8d
--- /dev/null
+++ b/.github/workflows/node.js.yml
@@ -0,0 +1,30 @@
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+ pull_request:
+ push:
+ branches-ignore: "dependabot/**"
+
+jobs:
+ build:
+
+ runs-on: ubuntu-latest
+
+ strategy:
+ matrix:
+ node-version: [18.x, 20.x]
+
+ steps:
+ - name: Checkout
+ uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+ - name: Install xmllint
+ run: sudo apt-get install -y libxml2-utils
+ - name: Use Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0
+ with:
+ node-version: ${{ matrix.node-version }}
+ cache: 'npm'
+ - run: npm ci
+ - run: npm test
diff --git a/.github/workflows/spider-check.yaml b/.github/workflows/spider-check.yaml
new file mode 100644
index 000000000..95ea1ea24
--- /dev/null
+++ b/.github/workflows/spider-check.yaml
@@ -0,0 +1,32 @@
+name: spider-check
+on:
+ # Once a week on Friday at 00:00
+ schedule:
+ - cron: '0 0 * * 5'
+ # Or manually
+ workflow_dispatch:
+ # Or when developing this workflow
+ push:
+ paths:
+ - .github/workflows/spider-check.yaml
+ - .github/configs/hydra-config.json
+ pull_request:
+ paths:
+ - .github/workflows/spider-check.yaml
+ - .github/configs/hydra-config.json
+
+jobs:
+ spider-check:
+ if: ${{ github.repository_owner == 'jquery' }} # skip on forks
+ runs-on: ubuntu-latest
+ env:
+ # Site address to crawl
+ MY_SITE: https://api.jquery.com
+ steps:
+ - name: Checkout
+ uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+
+ - name: Run hydra-link-checker
+ run: |
+ curl -O https://raw.githubusercontent.com/jquery/hydra-link-checker/v2.0.0/hydra.py
+ python3 hydra.py "$MY_SITE" --config .github/configs/hydra-config.json
diff --git a/.github/workflows/typesense.yaml b/.github/workflows/typesense.yaml
new file mode 100644
index 000000000..de973410d
--- /dev/null
+++ b/.github/workflows/typesense.yaml
@@ -0,0 +1,30 @@
+name: typesense
+on:
+ # Once a day at 11:30 UTC <https://crontab.guru/>
+ schedule:
+ - cron: '30 11 * * *'
+ # Or after a deployment
+ push:
+ branches:
+ - main
+ # Or manually
+ workflow_dispatch:
+
+jobs:
+ typesense:
+ name: Update Typesense
+ if: ${{ github.repository_owner == 'jquery' }} # skip on forks
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+ - name: Docsearch Scraper
+ shell: bash
+ run: |
+ docker run \
+ -e TYPESENSE_API_KEY=${{ secrets.TYPESENSE_ADMIN_KEY }} \
+ -e TYPESENSE_HOST="${{ secrets.TYPESENSE_HOST }}" \
+ -e TYPESENSE_PORT="443" \
+ -e TYPESENSE_PROTOCOL="https" \
+ -e CONFIG="$(cat docsearch.config.json | jq -r tostring)" \
+ typesense/docsearch-scraper:0.9.1
diff --git a/.gitignore b/.gitignore
index 2dc8b339c..633f1bdef 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,10 +1,3 @@
-dist
-entries_tmp
-node_modules
-config.json
-.project
-*~
-*.diff
-*.patch
-.DS_Store
-.settings
\ No newline at end of file
+/dist/
+/node_modules/
+config.js*
diff --git a/.mailmap b/.mailmap
index 175ab74fc..5f931fbce 100644
--- a/.mailmap
+++ b/.mailmap
@@ -1 +1,6 @@
Matic Potočnik <maticpotocnik@gmail.com> <hairyfotr@gmail.com>
+Michał Gołębiowski-Owczarek <m.goleb@gmail.com>
+Timmy Willison <timmywil@users.noreply.github.com>
+Timmy Willison <timmywil@users.noreply.github.com> <4timmywil@gmail.com>
+Timmy Willison <timmywil@users.noreply.github.com> <timmywillisn@gmail.com>
+Timo Tijhof <krinkle@fastmail.com> <krinklemail@gmail.com>
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 000000000..3c032078a
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+18
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index ba9f6b8f2..9a004cd36 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,5 +1,5 @@
-Welcome! Thanks for your interest in contributing to api.jquery.com. You're **almost** in the right place. More information on how to contribute to this and all other jQuery Foundation projects is over at [contribute.jquery.org](http://contribute.jquery.org). You'll definitely want to take a look at the articles on contributing [documentation](http://contribute.jquery.org/documentation).
+Welcome! Thanks for your interest in contributing to api.jquery.com. You're **almost** in the right place. More information on how to contribute to this and all other jQuery Foundation projects is over at [contribute.jquery.org](https://contribute.jquery.org). You'll definitely want to take a look at the articles on contributing [documentation](https://contribute.jquery.org/documentation).
-You may also want to take a look at our [commit & pull request guide](http://contribute.jquery.org/commits-and-pull-requests/) and [style guides](http://contribute.jquery.org/style-guide/) for instructions on how to maintain your fork and submit your code. Before we can merge any pull request, we'll also need you to sign our [contributor license agreement](http://contribute.jquery.org/cla).
+You may also want to take a look at our [commit & pull request guide](https://contribute.jquery.org/commits-and-pull-requests/) and [style guides](https://contribute.jquery.org/style-guide/) for instructions on how to maintain your fork and submit your code. Before we can merge any pull request, we'll also need you to sign our [contributor license agreement](https://contribute.jquery.org/cla).
-You can find us on [IRC](http://irc.jquery.org), specifically in #jquery-dev and #jquery-content should you have any questions. If you've never contributed to open source before, we've put together [a short guide with tips, tricks, and ideas on getting started](http://contribute.jquery.org/open-source/).
+You can find us on [IRC](https://irc.jquery.org), specifically in #jquery-dev and #jquery-content should you have any questions. If you've never contributed to open source before, we've put together [a short guide with tips, tricks, and ideas on getting started](https://contribute.jquery.org/open-source/).
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 000000000..10aa18ab0
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,48 @@
+module.exports = function( grunt ) {
+
+grunt.loadNpmTasks( "grunt-jquery-content" );
+
+grunt.initConfig({
+ xmllint: {
+ all: [
+ "entries/**",
+ "includes/**",
+ "categories.xml",
+ "entries2html.xsl",
+ "notes.xsl"
+ ]
+ },
+ "build-posts": {
+ page: "pages/**"
+ },
+ "build-xml-entries": {
+ all: "entries/**"
+ },
+ "build-resources": {
+ all: "resources/**"
+ },
+ wordpress: (function() {
+
+ // There's no config for CI, but we don't need one for basic testing
+ var config = {};
+ try {
+ config = require( "./config" );
+ } catch ( error ) {}
+ config.dir = "dist/wordpress";
+ return config;
+ })()
+});
+
+grunt.registerTask( "lint", [ "xmllint" ]);
+
+grunt.registerTask( "build", [
+ "build-posts",
+ "build-resources",
+ "build-xml-entries",
+ "build-xml-categories",
+ "build-xml-full"
+]);
+
+grunt.registerTask( "deploy", [ "wordpress-deploy", "deploy-redirects" ] );
+
+};
diff --git a/LICENSE.txt b/LICENSE.txt
index 018397183..203b68a7b 100644
--- a/LICENSE.txt
+++ b/LICENSE.txt
@@ -1,6 +1,5 @@
-Copyright 2009 Packt Publishing, http://packtpub.com/
-Copyright 2012, 2014 jQuery Foundation and other contributors,
-https://jquery.org/
+Copyright Packt Publishing (https://www.packtpub.com/),
+jQuery Foundation (https://jquery.org/), and other contributors.
This software consists of voluntary contributions made by many
individuals. For exact contribution history, see the revision history
@@ -36,7 +35,7 @@ Copyright and related rights for sample code are waived via CC0. Sample
code is defined as all source code displayed within the prose of the
documentation and all examples and demos.
-CC0: http://creativecommons.org/publicdomain/zero/1.0/
+CC0: https://creativecommons.org/publicdomain/zero/1.0/
====
diff --git a/README.md b/README.md
index e33d90996..f79208030 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,17 @@
-## Referencing Bug Tracker Tickets
+# api.jquery.com
-* Pull requests for changes that were requested or recommended via the [jQuery Issue Tracker](https://github.com/jquery/jquery/issues) should include a link back to the relevant ticket.
+## Building and Deploying
-## Building
+To build and deploy your changes for previewing in a [`jquery-wp-content`](https://github.com/jquery/jquery-wp-content) instance, follow the [workflow instructions](https://contribute.jquery.org/web-sites/#workflow) from our documentation on [contributing to jQuery Foundation web sites](https://contribute.jquery.org/web-sites/).
### Requirements
-* <a href="http://www.xmlsoft.org/">libxml2</a>
-* <a href="http://xmlsoft.org/XSLT/">libxslt</a>
-The `xmllint` and `xsltproc` utilities need to be in your path. If you are on Windows, you can get libxml2 and libxslt from <a href="http://www.zlatkovic.com/libxml.en.html">zlatkovic.com</a>.
+* [libxml2](http://xmlsoft.org/)
+* [libxslt](http://xmlsoft.org/libxslt/)
-### Build
+The `xmllint` and `xsltproc` utilities need to be in your path. If you are on Windows, you can get libxml2 and libxslt from <a href="https://www.zlatkovic.com/libxml.en.html">zlatkovic.com</a>.
-To build and deploy your changes for previewing in a [jquery-wp-content](https://github.com/jquery/jquery-wp-content) instance, follow the [workflow instructions](http://contribute.jquery.org/web-sites/#workflow) from our documentation on [contributing to jQuery Foundation web sites](http://contribute.jquery.org/web-sites/).
+**Note**: If you're using Windows and you receive the error "Error" when executing the task `build-xml-entries:all`, try to add the DLL `libwinpthread-1.dll` in the root of the project.
## Style Guidelines
@@ -35,7 +34,7 @@ To build and deploy your changes for previewing in a [jquery-wp-content](https:/
#### Pronoun Usage
* Use second-person pronoun ("you") when necessary, but try to avoid it.
-* Favor the definite article ("the") over second-person possesive ("your").
+* Favor the definite article ("the") over second-person possessive ("your").
* **Yes**: Insert the paragraph after the unordered list.
* **No**: Insert your paragraph after the unordered list.
* When editing current entries, change first-person plural pronouns ("we," "our," "us") to second-person.
@@ -50,7 +49,7 @@ To build and deploy your changes for previewing in a [jquery-wp-content](https:/
### Code Style
-Code in the API documentation should follow the [jQuery Core Style Guide](http://contribute.jquery.org/style-guide/) with the following addition:
+Code in the API documentation should follow the [jQuery Core Style Guide](https://contribute.jquery.org/style-guide/) with the following addition:
* **Document ready syntax**: Use `$( document ).ready(function() {` instead of `$(function() {` as it's harder for new users to distinguish the difference between the latter and an IIFE.
@@ -86,5 +85,5 @@ Code in the API documentation should follow the [jQuery Core Style Guide](http:/
* Strong in English writing
* Tone
* Middle ground between formal and familiar. Err on the side of formality.
- * Authoritive
+ * Authoritative
* Tactful
diff --git a/categories.xml b/categories.xml
index d4941b0e6..8dc523ece 100644
--- a/categories.xml
+++ b/categories.xml
@@ -37,38 +37,80 @@
<category name="Deprecated" slug="deprecated">
<desc/>
<category name="Deprecated 1.3" slug="deprecated-1.3">
- <desc><![CDATA[All the aspects of the API that were deprecated in the corresponding version of jQuery.
- <p>For more information, see the <a href="http://blog.jquery.com/2009/01/14/jquery-1-3-released/">jQuery 1.3 Release Notes</a>.</p>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>This version is no longer supported. Read more about our <a href="https://jquery.com/support/">Version Support</a>.</span></div>
+ <p>All the aspects of the API that were deprecated in the corresponding version of jQuery.</p>
+ <p>For more information, see the <a href="https://blog.jquery.com/2009/01/14/jquery-1-3-released/">jQuery 1.3 Release Notes</a>.</p>
]]></desc>
</category>
<category name="Deprecated 1.4" slug="deprecated-1.4">
- <desc><![CDATA[All the aspects of the API that were deprecated in the corresponding version of jQuery.
- <p>For more information, see the <a href="http://jquery14.com/day-01/jquery-14">jQuery 1.4 Release Notes</a></p>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>This version is no longer supported. Read more about our <a href="https://jquery.com/support/">Version Support</a>.</span></div>
+ <p>All the aspects of the API that were deprecated in the corresponding version of jQuery.</p>
+ <p>For more information, see the <a href="https://web.archive.org/web/20150119205819/http://jquery14.com/day-01/jquery-14">jQuery 1.4 Release Notes</a></p>
]]></desc>
</category>
<category name="Deprecated 1.7" slug="deprecated-1.7">
- <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="http://blog.jquery.com/2011/11/03/jquery-1-7-released/">http://blog.jquery.com/2011/11/03/jquery-1-7-released/</a></p>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>This version is no longer supported. Read more about our <a href="https://jquery.com/support/">Version Support</a>.</span></div>
+ <p>All the aspects of the API that were deprecated in the corresponding version of jQuery.</p>
+ <p>For more information, see the Release Notes/Changelog at <a href="https://blog.jquery.com/2011/11/03/jquery-1-7-released/">https://blog.jquery.com/2011/11/03/jquery-1-7-released/</a></p>
]]></desc>
</category>
<category name="Deprecated 1.8" slug="deprecated-1.8">
- <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="http://blog.jquery.com/2012/08/09/jquery-1-8-released/">http://blog.jquery.com/2012/08/09/jquery-1-8-released/</a></p>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>This version is no longer supported. Read more about our <a href="https://jquery.com/support/">Version Support</a>.</span></div>
+ <p>All the aspects of the API that were deprecated in the corresponding version of jQuery.</p>
+ <p>For more information, see the Release Notes/Changelog at <a href="https://blog.jquery.com/2012/08/09/jquery-1-8-released/">https://blog.jquery.com/2012/08/09/jquery-1-8-released/</a></p>
]]></desc>
</category>
<category name="Deprecated 1.9" slug="deprecated-1.9">
- <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="http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/">http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/</a></p>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>This version is no longer supported. Read more about our <a href="https://jquery.com/support/">Version Support</a>.</span></div>
+ <p>All the aspects of the API that were deprecated in the corresponding version of jQuery.</p>
+ <p>For more information, see the Release Notes/Changelog at <a href="https://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/">https://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/</a></p>
+ ]]></desc>
+ </category>
+ <category name="Deprecated 1.10 & 2.0" slug="deprecated-1.10-and-2.0">
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>These versions are no longer supported. Read more about our <a href="https://jquery.com/support/">Version Support</a>.</span></div>
+ <p>All the aspects of the API that were deprecated in the corresponding version of jQuery.</p>
+ <p>For more information, see the Release Notes/Changelog at <a href="https://blog.jquery.com/2013/05/24/jquery-1-10-0-and-2-0-1-released/">https://blog.jquery.com/2013/05/24/jquery-1-10-0-and-2-0-1-released/</a></p>
+ ]]></desc>
+ </category>
+ <category name="Deprecated 3.0" slug="deprecated-3.0">
+ <desc><![CDATA[
+ <p>All the aspects of the API that were deprecated in the corresponding version of jQuery.</p>
+ <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[
+ <p>All the aspects of the API that were deprecated in the corresponding version of jQuery.</p>
+ <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[
+ <p>All the aspects of the API that were deprecated in the corresponding version of jQuery.</p>
+ <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>
]]></desc>
</category>
- <category name="Deprecated 1.10" slug="deprecated-1.10">
- <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="http://blog.jquery.com/2013/05/24/jquery-1-10-0-and-2-0-1-released/">http://blog.jquery.com/2013/05/24/jquery-1-10-0-and-2-0-1-released/</a></p>
+ <category name="Deprecated 3.4" slug="deprecated-3.4">
+ <desc><![CDATA[
+ <p>All the aspects of the API that were deprecated in the corresponding version of jQuery.</p>
+ <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[
+ <p>All the aspects of the API that were deprecated in the corresponding version of jQuery.</p>
+ <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>
+ <desc><![CDATA[These methods are used to get and set the CSS dimensions for the various properties.]]></desc>
</category>
<category name="Effects" slug="effects">
<desc><![CDATA[The jQuery library provides several techniques for adding animation to a web page. These include simple, standard animations that are frequently used, and the ability to craft sophisticated custom effects.]]></desc>
@@ -98,7 +140,7 @@
</category>
<category name="Event Object" slug="event-object">
<desc><![CDATA[
- <p>jQuery's event system normalizes the event object according to <a href="http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html">W3C standards</a>. The event object is guaranteed to be passed to the event handler. Most properties from the original event are copied over and normalized to the new event object.</p>
+ <p>jQuery's event system normalizes the event object according to <a href="https://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html">W3C standards</a>. The event object is guaranteed to be passed to the event handler. Most properties from the original event are copied over and normalized to the new event object.</p>
<div class="longdesc">
<h4>jQuery.Event Constructor</h4>
<p>The <code>jQuery.Event</code> constructor is exposed and can be used when calling <a href="/https/github.com/trigger">trigger</a>. The <code>new</code> operator is optional.</p>
@@ -120,7 +162,7 @@ var e = jQuery.Event( "keydown", { keyCode: 64 } );
// trigger an artificial keydown event with keyCode 64
jQuery( "body" ).trigger( e );
</code></pre>
- <h4>Event Properties</h4>
+ <h4>Common Event Properties</h4>
<p>jQuery normalizes the following properties for cross-browser consistency:</p>
<ul>
<li>
@@ -143,14 +185,13 @@ jQuery( "body" ).trigger( e );
</li>
</ul>
<p>The following properties are also copied to the event object, though some of their values may be undefined depending on the event:</p>
- <p>altKey, bubbles, button, cancelable, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, metaKey, offsetX, offsetY, originalTarget, pageX, pageY, relatedTarget, screenX, screenY, shiftKey, target, view, which</p>
- <h4>OtherProperties</h4>
- <p>Certain events may have properties specific to them. Those can be accessed as properties of the <code>event.originalEvent</code> object.</p>
- <p>Example:</p>
+ <p>altKey, bubbles, button, buttons, cancelable, char, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, key, keyCode, metaKey, offsetX, offsetY, originalTarget, pageX, pageY, relatedTarget, screenX, screenY, shiftKey, target, toElement, view, which</p>
+ <h4>Other Properties</h4>
+ <p>To access event properties not listed above, use the <code>event.originalEvent</code> object:</p>
<pre><code>
-// add the dataTransfer property for use with the native `drop` event
-// to capture information about files dropped into the browser window
-jQuery.event.props.push( "dataTransfer" );
+// Access the `dataTransfer` property from the `drop` event which
+// holds the files dropped into the browser window.
+var files = event.originalEvent.dataTransfer.files;
</code></pre>
</div>
]]></desc>
@@ -166,15 +207,15 @@ jQuery.event.props.push( "dataTransfer" );
</category>
</category>
<category name="Forms" slug="forms">
- <desc><![CDATA[These methods and event handlers handle forms and their various elements.]]></desc>
+ <desc><![CDATA[These methods and event handlers handle forms and their various elements.]]></desc>
</category>
<category name="Internals" slug="internals">
<desc><![CDATA[Although this category is referred to as 'internal', any methods documented within the API site should be considered public and may be freely used. ]]></desc>
</category>
<category name="Manipulation" slug="manipulation">
<desc><![CDATA[All of the methods in this section manipulate the DOM in some manner. A few of them simply change one of the attributes of an element (also listed in the <a href="/https/github.com/category/attributes/">Attributes category</a>), while others set an element's style properties (also listed in the <a href="/https/github.com/category/css/">CSS category</a>). Still others modify entire elements (or groups of elements) themselves—inserting, copying, removing, and so on. All of these methods are referred to as "setters," as they change the values of properties.
- A few of these methods—such as <code>.attr()</code>, <code>.html()</code>, and <code>.val()</code>—also act as "getters," retrieving information from DOM elements for later use.
- ]]></desc>
+ A few of these methods—such as <code>.attr()</code>, <code>.html()</code>, and <code>.val()</code>—also act as "getters," retrieving information from DOM elements for later use.
+ ]]></desc>
<category name="Class Attribute" slug="class-attribute">
<desc><![CDATA[These methods inspect and manipulate the CSS classes assigned to elements.]]></desc>
</category>
@@ -239,13 +280,13 @@ jQuery.event.props.push( "dataTransfer" );
<category name="Selectors" slug="selectors">
<desc><![CDATA[
<p>Borrowing from CSS 1–3, and then adding its own, jQuery offers a powerful set of tools for matching a set of elements in a document.</p>
- <p>To use any of the meta-characters ( such as <code> !"#$%&'()*+,./:;<=>?@[\]^`{|}~</code> ) as a literal part of a name, it must be escaped with with two backslashes: <code>\\</code>. For example, an element with <code>id="foo.bar"</code>, can use the selector <code>$("#foo\\.bar")</code>. The W3C CSS specification contains the <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">complete set of rules regarding valid CSS selectors</a>. Also useful is the blog entry by Mathias Bynens on <a href="http://mathiasbynens.be/notes/css-escapes">CSS character escape sequences for identifiers</a>.</p>
+ <p>To use any of the meta-characters ( such as <code> !"#$%&'()*+,./:;<=>?@[\]^`{|}~</code> ) as a literal part of a name, it must be escaped with with two backslashes: <code>\\</code>. For example, an element with <code>id="foo.bar"</code>, can use the selector <code>$("#foo\\.bar")</code>. The W3C CSS specification contains the <a href="https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">complete set of rules regarding valid CSS selectors</a>. Also useful is the blog entry by Mathias Bynens on <a href="https://mathiasbynens.be/notes/css-escapes">CSS character escape sequences for identifiers</a>.</p>
]]></desc>
<category name="Attribute" slug="attribute-selectors">
<desc><![CDATA[
<p>The CSS specification allows elements to be identified by their attributes. While not supported by some older browsers for the purpose of styling documents, jQuery allows you to employ them regardless of the browser being used.</p>
<p>When using any of the following attribute selectors, you should account for attributes that have multiple, space-separated values. Since these selectors see attribute values as a single string, this selector, for example, <code>$("a[rel='nofollow']")</code>, will select <code><a href="example.html" rel="nofollow">Some text</a></code> but not <code><a href="example.html" rel="nofollow foe">Some text</a></code>.</p>
- <p>Attribute values in selector expressions <b>must</b> follow the rules for W3C CSS selectors; in general, that means anything other than a <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">valid identifier</a> should be surrounded by quotation marks.</p>
+ <p>Attribute values in selector expressions <b>must</b> follow the rules for W3C CSS selectors; in general, that means anything other than a <a href="https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">valid identifier</a> should be surrounded by quotation marks.</p>
<ul>
<li>double quotes inside single quotes: <code>$('a[rel="nofollow self"]')</code></li>
<li>single quotes inside double quotes: <code>$("a[rel='nofollow self']")</code></li>
@@ -259,7 +300,7 @@ jQuery.event.props.push( "dataTransfer" );
</desc>
</category>
<category name="Basic" slug="basic-css-selectors">
- <desc><![CDATA[The following selectors are based on the Cascading Style Sheet 1 specification, as outlined by the W3C. For more information about the specifications, visit <a href="http://www.w3.org/Style/CSS/#specs">http://www.w3.org/Style/CSS/#specs</a>. ]]></desc>
+ <desc><![CDATA[The following selectors are based on the Cascading Style Sheet 1 specification, as outlined by the W3C. For more information about the specifications, visit <a href="https://www.w3.org/Style/CSS/#specs">https://www.w3.org/Style/CSS/#specs</a>. ]]></desc>
</category>
<category name="Basic Filter" slug="basic-filter-selectors">
<desc/>
@@ -277,7 +318,7 @@ jQuery.event.props.push( "dataTransfer" );
<desc/>
</category>
<category name="jQuery Extensions" slug="jquery-selector-extensions">
- <desc><![CDATA[jQuery has extended the CSS3 selectors with the following selectors. Because these selectors are jQuery extension and not part of the CSS specification, queries using them cannot take advantage of the performance boost provided by the native DOM <code>querySelectorAll()</code> method. To achieve the best performance when using these selectors, first select some elements using a pure CSS selector, then use <a href="http://api.jquery.com/filter/"><code>.filter()</code></a>.]]></desc>
+ <desc><![CDATA[jQuery has extended the CSS3 selectors with the following selectors. Because these selectors are jQuery extension and not part of the CSS specification, queries using them cannot take advantage of the performance boost provided by the native DOM <code>querySelectorAll()</code> method. To achieve the best performance when using these selectors, first select some elements using a pure CSS selector, then use <a href="https://api.jquery.com/filter/"><code>.filter()</code></a>.]]></desc>
</category>
<category name="Visibility Filter" slug="visibility-filter-selectors">
<desc/>
@@ -302,116 +343,284 @@ jQuery.event.props.push( "dataTransfer" );
<category name="Version" slug="version">
<desc/>
<category name="Version 1.0" slug="1.0">
- <desc><![CDATA[All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.
- <a href="http://blog.jquery.com/2006/08/26/jquery-10/">jQuery 1.0 Release Notes</a>.
- ]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <a href="https://blog.jquery.com/2006/08/26/jquery-10/">jQuery 1.0 Release Notes</a>.
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.0.4" slug="1.0.4">
- <desc><![CDATA[All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.
- Release Notes: <a href="http://blog.jquery.com/2006/08/31/jquery-101/">1.0.1</a>, <a href="http://blog.jquery.com/2006/10/09/jquery-102/">1.0.2</a>, <a href="http://blog.jquery.com/2006/10/27/jquery-103/">1.0.3</a>, <a href="http://blog.jquery.com/2006/12/12/jquery-104/">1.0.4</a>.
- ]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ Release Notes: <a href="https://blog.jquery.com/2006/08/31/jquery-101/">1.0.1</a>, <a href="https://blog.jquery.com/2006/10/09/jquery-102/">1.0.2</a>, <a href="https://blog.jquery.com/2006/10/27/jquery-103/">1.0.3</a>, <a href="https://blog.jquery.com/2006/12/12/jquery-104/">1.0.4</a>.
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.1" slug="1.1">
- <desc><![CDATA[All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.
- <a href="http://blog.jquery.com/2007/01/14/jquery-birthday-11-new-site-new-docs/">jQuery 1.1 Release Notes</a>.
- ]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <a href="https://blog.jquery.com/2007/01/14/jquery-birthday-11-new-site-new-docs/">jQuery 1.1 Release Notes</a>.
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.1.2" slug="1.1.2">
- <desc><![CDATA[All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.
- <a href="http://blog.jquery.com/2007/02/27/jquery-112/">jQuery 1.1.2 Release Notes</a>.
- ]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <a href="https://blog.jquery.com/2007/02/27/jquery-112/">jQuery 1.1.2 Release Notes</a>.
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.1.3" slug="1.1.3">
- <desc><![CDATA[All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.
- <a href="http://blog.jquery.com/2007/07/01/jquery-113-800-faster-still-20kb/">jQuery 1.1.3 Release Notes</a>
- ]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <a href="https://blog.jquery.com/2007/07/01/jquery-113-800-faster-still-20kb/">jQuery 1.1.3 Release Notes</a>
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.1.4" slug="1.1.4">
- <desc><![CDATA[All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.
- <a href="http://blog.jquery.com/2007/08/24/jquery-114-faster-more-tests-ready-for-12/">jQuery 1.1.4 Release Notes</a>.
- ]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <a href="https://blog.jquery.com/2007/08/24/jquery-114-faster-more-tests-ready-for-12/">jQuery 1.1.4 Release Notes</a>.
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.2" slug="1.2">
- <desc><![CDATA[All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.
- <a href="http://blog.jquery.com/2007/09/10/jquery-1-2-released/">jQuery 1.2 Release Notes</a>
- ]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <a href="https://blog.jquery.com/2007/09/10/jquery-1-2-released/">jQuery 1.2 Release Notes</a>
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.2.3" slug="1.2.3">
- <desc><![CDATA[All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.
- Release Notes: <a href="http://blog.jquery.com/2007/09/16/jquery-1-2-1-released/">1.2.1</a>, <a href="http://blog.jquery.com/2008/01/14/jquery-1-2-2-released/">1.2.2</a>, <a href="http://blog.jquery.com/2008/02/07/jquery-1-2-3-released/">1.2.3</a>.
- ]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ Release Notes: <a href="https://blog.jquery.com/2007/09/16/jquery-1-2-1-released/">1.2.1</a>, <a href="https://blog.jquery.com/2008/01/14/jquery-1-2-2-released/">1.2.2</a>, <a href="https://blog.jquery.com/2008/02/07/jquery-1-2-3-released/">1.2.3</a>.
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.2.6" slug="1.2.6">
- <desc><![CDATA[All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.
- <a href="http://blog.jquery.com/2008/05/24/jquery-1-2-6-released/">jQuery 1.2.6 Release Notes</a>.
- ]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <a href="https://blog.jquery.com/2008/05/24/jquery-1-2-6-released/">jQuery 1.2.6 Release Notes</a>.
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.3" slug="1.3">
- <desc><![CDATA[All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.
- Release Notes: <a href="http://blog.jquery.com/2009/01/14/jquery-1-3-released/">1.3</a>, <a href="http://blog.jquery.com/2009/01/21/jquery-131-released/">1.3.1</a>, <a href="http://blog.jquery.com/2009/02/20/jquery-1-3-2-released/">1.3.2</a>
- ]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ Release Notes: <a href="https://blog.jquery.com/2009/01/14/jquery-1-3-released/">1.3</a>, <a href="https://blog.jquery.com/2009/01/21/jquery-131-released/">1.3.1</a>, <a href="https://blog.jquery.com/2009/02/20/jquery-1-3-2-released/">1.3.2</a>
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.4" slug="1.4">
- <desc><![CDATA[All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.
- <a href="http://jquery14.com/day-01/jquery-14">jQuery 1.4 Release Notes</a>.
- ]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <a href="https://web.archive.org/web/20150119205819/http://jquery14.com/day-01/jquery-14">jQuery 1.4 Release Notes</a>.
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.4.1" slug="1.4.1">
- <desc><![CDATA[All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.
- <a href="http://jquery14.com/day-12/jquery-141-released">jQuery 1.4.1 Release Notes</a>.
- ]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <a href="https://web.archive.org/web/20150213113058/http://jquery14.com/day-12/jquery-141-released">jQuery 1.4.1 Release Notes</a>.
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.4.2" slug="1.4.2">
- <desc><![CDATA[All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.
- <a href="http://blog.jquery.com/2010/02/19/jquery-142-released/">jQuery 1.4.2 Release Notes</a>.
- ]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <a href="https://blog.jquery.com/2010/02/19/jquery-142-released/">jQuery 1.4.2 Release Notes</a>.
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.4.3" slug="1.4.3">
- <desc><![CDATA[All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.
- <a href="http://blog.jquery.com/2010/10/16/jquery-143-released/">jQuery 1.4.3 Release Notes</a>.
- ]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <a href="https://blog.jquery.com/2010/10/16/jquery-143-released/">jQuery 1.4.3 Release Notes</a>.
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.4.4" slug="1.4.4">
- <desc><![CDATA[All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery. <a href="http://blog.jquery.com/2010/11/11/jquery-1-4-4-release-notes/">jQuery 1.4.4 Release Notes</a>.]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <a href="https://blog.jquery.com/2010/11/11/jquery-1-4-4-release-notes/">jQuery 1.4.4 Release Notes</a>.
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.5" slug="1.5">
<desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
<p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
- <p>jQuery 1.5 also includes a large rewrite of the Ajax module, which has a number of extensibility improvements. You can find out more about those improvements in the <a href="http://api.jquery.com/extending-ajax/">Extending Ajax</a> documentation.</p>
- <p>Additionally jQuery 1.5 includes a new Deferred callback management system you can learn more about in in the <a href="http://api.jquery.com/category/deferred-object/">Deferred Object</a> documentation.</p>
+ <p>jQuery 1.5 also includes a large rewrite of the Ajax module, which has a number of extensibility improvements. You can find out more about those improvements in the <a href="https://api.jquery.com/jQuery.ajax/#extending-ajax">Extending Ajax</a> documentation.</p>
+ <p>Additionally, jQuery 1.5 includes a new Deferred callback management system you can learn more about in the <a href="https://api.jquery.com/category/deferred-object/">Deferred Object</a> documentation.</p>
+ <hr/>
]]></desc>
</category>
<category name="Version 1.5.1" slug="1.5.1">
- <desc><![CDATA[Aspects of the API that were changed in the corresponding version of jQuery. API changes in jQuery 1.5.1 dealt primarily with jQuery.ajax settings and jQuery.support properties.]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <p>API changes in jQuery 1.5.1 dealt primarily with jQuery.ajax settings and jQuery.support properties.</p>
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.6" slug="1.6">
- <desc><![CDATA[All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.]]></desc>
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <hr/>
+ ]]></desc>
</category>
<category name="Version 1.7" slug="1.7">
<desc><![CDATA[
- <p>Aspects of the API that were changed in the corresponding version of jQuery. API changes in jQuery 1.7.0 dealt primarily with the new
- Event APIs: <code>.on()</code> and <code>.off()</code>
- Better Support for HTML5 in IE6/7/8
- <code>jQuery.Callbacks()</code>
- Toggling Animations Work Intuitively
- </p>
- <p>For more information, see the Release Notes/Changelog at <a href="http://blog.jquery.com/2011/11/03/jquery-1-7-released/">http://blog.jquery.com/2011/11/03/jquery-1-7-released/</a></p>
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <p>jQuery 1.7.0 included:</p>
+ <ul>
+ <li>New event APIs: <code>.on()</code> and <code>.off()</code></li>
+ <li>Better Support for HTML5 in IE6/7/8</li>
+ <li><code>jQuery.Callbacks()</code></li>
+ <li>Toggling Animations Work Intuitively</li>
+ </ul>
+ <p>For more information, see the <a href="https://blog.jquery.com/2011/11/03/jquery-1-7-released/">Release Notes/Changelog</a></p>
<hr/>
]]></desc>
</category>
<category name="Version 1.8" slug="1.8">
<desc><![CDATA[
- <p>Aspects of the API that were changed in the corresponding version of jQuery. API changes in jQuery 1.8.0 dealt primarily with animations and the removal of some methods such as <code>deferred.isResolved()</code>, <code>deferred.isRejected()</code>, <code>$.curCSS()</code>, <code>$.attrFn()</code>, and <code>$(element).closest(Array)</code> returning Array.
- </p>
- <p>For more information, see the Release Notes/Changelog at <a href="http://blog.jquery.com/2012/08/09/jquery-1-8-released/">http://blog.jquery.com/2012/08/09/jquery-1-8-released/</a></p>
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <p>API changes in jQuery 1.8.0 dealt primarily with animations and the removal of some methods such as <code>deferred.isResolved()</code>, <code>deferred.isRejected()</code>, <code>$.curCSS()</code>, <code>$.attrFn()</code>, and <code>$(element).closest(Array)</code> returning Array.</p>
+ <p>For more information, see the <a href="https://blog.jquery.com/2012/08/09/jquery-1-8-released/">Release Notes/Changelog</a></p>
<hr/>
]]></desc>
</category>
<category name="Version 1.9" slug="1.9">
<desc><![CDATA[
- <p>Aspects of the API that were changed in the corresponding version of jQuery. Changes in jQuery 1.9 dealt primarily removal or modification of several APIs that behaved inconsistently or inefficiently in the past. A <a href="https://github.com/jquery/jquery-migrate">jQuery Migrate Plugin</a> was offered to help developers with a transitional upgrade path.
- </p>
- <p>For more information, see the <a href="http://jquery.com/upgrade-guide/1.9/">jQuery Core 1.9 Upgrade guide</a> and the <a href="http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/">Release Notes/Changelog</a></p>
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since this version was released. If using this version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <p>Changes in jQuery 1.9 dealt primarily with removal or modification of several APIs that behaved inconsistently or inefficiently in the past.</p>
+ <p>A <a href="https://github.com/jquery/jquery-migrate">jQuery Migrate Plugin</a> was offered to help developers with a transitional upgrade path.</p>
+ <p>For more information, see the <a href="https://jquery.com/upgrade-guide/1.9/">jQuery Core 1.9 Upgrade guide</a> and the <a href="https://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/">Release Notes/Changelog</a></p>
+ <hr/>
+ ]]></desc>
+ </category>
+ <category name="Version 1.10 & 2.0" slug="1.10-and-2.0">
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since these versions were released. If using either version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <p>Changes in jQuery 1.10 and 2.0 include a new `wrap` module, relaxing HTML parsing, and aligning the 1.x & 2.x lines.</p>
+ <p>For more information, see the <a href="https://blog.jquery.com/2013/04/18/jquery-2-0-released/">2.0 Release Notes/Changelog</a> and <a href="https://blog.jquery.com/2013/05/24/jquery-1-10-0-and-2-0-1-released/">1.10.0/2.0.1 Release Notes/Changelog</a>.</p>
+ <hr/>
+ ]]></desc>
+ </category>
+ <category name="Version 1.11 & 2.1" slug="1.11-and-2.1">
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since these versions were released. If using either version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <p>Changes in jQuery 1.11 and 2.1 include lower startup overhead & fewer forced layouts; jQuery is now authored via AMD and published to npm & bower under the name <code>jquery</code>.</p>
+ <p>For more information, see the <a href="https://blog.jquery.com/2014/01/24/jquery-1-11-and-2-1-released/">Release Notes/Changelog</a>.</p>
+ <hr/>
+ ]]></desc>
+ </category>
+ <category name="Version 1.12 & 2.2" slug="1.12-and-2.2">
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>Some APIs may have changed since these versions were released. If using either version, find out about our <a href="https://jquery.com/support">version support</a>.</span></div>
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <p>Changes in jQuery 1.12 and 2.2 include 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.</p>
+ <p>For more information, see the <a href="https://blog.jquery.com/2016/01/08/jquery-2-2-and-1-12-released/">Release Notes/Changelog</a>.</p>
+ <hr/>
+ ]]></desc>
+ </category>
+ <category name="Version 3.0" slug="3.0">
+ <desc><![CDATA[
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <p>Changes in jQuery 3.0 dealt primarily with deferreds, data, show/hide and removal of some deprecated APIs. A <a href="https://github.com/jquery/jquery-migrate">jQuery Migrate Plugin</a> was offered to help developers with a transitional upgrade path.</p>
+ <p>For more information, see the <a href="https://jquery.com/upgrade-guide/3.0/">jQuery Core 3.0 Upgrade guide</a> and the <a href="https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/">Release Notes/Changelog</a>.</p>
+ <hr/>
+ ]]></desc>
+ </category>
+ <category name="Version 3.1" slug="3.1">
+ <desc><![CDATA[
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <p>Version 3.1 added the <a href="/https/github.com/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>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <p>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><template></code> element</a> & made <code>.width()</code> & <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>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <p><code>.addClass()</code>, <code>.removeClass()</code> & <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>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <p><code>nonce</code> & <code>nomodule</code> attributes are now preserved during script manipulation, layout thrashing was eliminated in some cases in <code>.width()</code> & <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>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <p>Security fixes, including a breaking change to <code>jQuery.htmlPrefilter</code>; new <code>.even()</code> & <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. A <a href="https://github.com/jquery/jquery-migrate">jQuery Migrate Plugin</a> was offered to help developers with a transitional upgrade path.</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>
+ <category name="Version 3.6" slug="3.6">
+ <desc><![CDATA[
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <p>Returning JSON even for JSONP erroneous responses is working again, a few focus fixes.</p>
+ <p>For more information, see the <a href="https://blog.jquery.com/2021/03/02/jquery-3-6-0-released/">Release Notes/Changelog</a>.</p>
+ <hr/>
+ ]]></desc>
+ </category>
+ <category name="Version 3.7" slug="3.7">
+ <desc><![CDATA[
+ <p>All the aspects of the API that were added, or had a new signature added, in the corresponding version of jQuery.</p>
+ <p>New <code>.uniqueSort()</code> method performance improvements in manipulation, fixes for <code>.outerWidth( true )</code> & <code>.outerHeight( true )</code> with negative margins, focus fixes.</p>
+ <p>As of this release, jQuery no longer relies on Sizzle.</p>
+ <p>Native events for <code>focus</code> & <code>blur</code> changed in IE to - respectively - <code>focusin</code> and <code>focusout</code>.</p>
+ <p>For more information, see the <a href="https://blog.jquery.com/2023/05/11/jquery-3-7-0-released-staying-in-order/">Release Notes/Changelog</a>.</p>
+ <hr/>
+ ]]></desc>
+ </category>
+ <category name="Version 4.0" slug="4.0">
+ <desc><![CDATA[
+ <div id="version-support-warning" class="warning"><i class="icon-info-sign"></i> <span>This is a pre-release. Behavior may change before 4.0.0 final is released.</span></div>
+ <p>Aspects of the API that were changed in the corresponding version of jQuery.</p>
+ <p>Dropped support for IE <11 & Edge Legacy, removed deprecated APIs, added FormData support, improved support for CSP & Trusted Types. Automatic JSONP promotion removed. Special handling of boolean attributes removed.</p>
+ <p>Callbacks & Deferred modules are now excluded from the Slim build.</p>
+ <p>jQuery is now authored in ESM.</p>
+ <p>For more information, see the <a href="https://blog.jquery.com/2024/07/17/second-beta-of-jquery-4-0-0/">Release Notes/Changelog of jQuery 4.0.0-beta.2</a>.</p>
<hr/>
]]></desc>
</category>
diff --git a/config-sample.json b/config-sample.json
index b26cf9fce..2a56329c3 100644
--- a/config-sample.json
+++ b/config-sample.json
@@ -1,5 +1,5 @@
{
- "url": "vagrant.api.jquery.com",
- "username": "admin",
- "password": "secret"
+ "url": "http://local.api.jquery.com",
+ "username": "dev",
+ "password": "dev"
}
diff --git a/docsearch.config.json b/docsearch.config.json
new file mode 100644
index 000000000..f420af4af
--- /dev/null
+++ b/docsearch.config.json
@@ -0,0 +1,52 @@
+{
+ "index_name": "jquery_com",
+ "start_urls": [
+ { "url": "https://api.jquery.com", "selectors_key": "api", "page_rank": 20 },
+ { "url": "https://jquery.com", "page_rank": 10 }
+ ],
+ "stop_urls": [
+ ".com/category/"
+ ],
+ "selectors": {
+ "default": {
+ "lvl0": {
+ "selector": "#menu-top .menu-item.current > a",
+ "global": true,
+ "default_value": "Documentation"
+ },
+ "lvl1": "#content h1",
+ "lvl2": "#content h2",
+ "lvl3": "#content h3",
+ "lvl4": "#content h4",
+ "lvl5": "#content h5",
+ "text": "#content p, #content li, #content tr"
+ },
+ "api": {
+ "lvl0": {
+ "selector": "#categories .cat-item.current-cat > a",
+ "global": true,
+ "default_value": "API"
+ },
+ "lvl1": "#content h1",
+ "lvl2": "#content h2, #content h4.name",
+ "lvl3": "#content h3, #content h4:not(.name)",
+ "lvl4": "#content h5, #content strong:first-child",
+ "text": ".entry-content p, .entry-content li"
+ }
+ },
+ "custom_settings": {
+ "token_separators": ["_", "-", "."]
+ },
+ "selectors_exclude": [
+ "header ~ article",
+ ".returns",
+ ".version-details",
+ ".section-title",
+ ".icon-link.toc-link",
+ "[class^=toclevel]",
+ "#toctitle",
+ ".desc strong:first-child"
+ ],
+ "min_indexed_level": 2,
+ "scrape_start_urls": false
+}
diff --git a/entries/add.xml b/entries/add.xml
index 04b4a3bc0..bb95b0f0b 100644
--- a/entries/add.xml
+++ b/entries/add.xml
@@ -9,7 +9,7 @@
</signature>
<signature>
<added>1.0</added>
- <argument name="elements" type="Elements">
+ <argument name="elements" type="Element">
<desc>One or more elements to add to the set of matched elements.</desc>
</argument>
</signature>
@@ -20,7 +20,7 @@
</argument>
</signature>
<signature>
- <added>1.3.2</added>
+ <added>1.1</added>
<argument name="selection" type="jQuery">
<desc>An existing jQuery object to add to the set of matched elements.</desc>
</argument>
diff --git a/entries/addClass.xml b/entries/addClass.xml
index 238d03e5f..39d6a0bf5 100644
--- a/entries/addClass.xml
+++ b/entries/addClass.xml
@@ -7,6 +7,12 @@
<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">
@@ -16,9 +22,21 @@
<return type="String"/>
</argument>
</signature>
- <desc>Adds the specified class(es) to each of the set of matched elements.</desc>
+ <signature>
+ <added>3.3</added>
+ <argument name="function" type="Function">
+ <desc>A function returning one or more space-separated class names or an array of 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>
+ <argument name="index" type="Integer" />
+ <argument name="currentClassName" type="String" />
+ <return type="String"/>
+ <return type="Array"/>
+ </argument>
+ </signature>
+ <desc>Adds the specified class(es) to each element in the set of matched elements.</desc>
<longdesc>
<p>It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.</p>
+ <p>Before jQuery version 1.12/2.2, the <code>.addClass()</code> method manipulated the <code>className</code> <em>property</em> of the selected elements, not the <code>class</code> <em>attribute</em>. Once the property was changed, it was the browser that updated the attribute accordingly. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).</p>
+ <p>As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the <code>class</code> <em>attribute</em> is used instead. So, <code>.addClass()</code> can be used on XML or SVG documents.</p>
<p>More than one class may be added at a time, separated by a space, to the set of matched elements, like so:</p>
<pre><code>
$( "p" ).addClass( "myClass yourClass" );
@@ -62,7 +80,30 @@ $( "p" ).last().addClass( "selected" );
<example>
<desc>Add the classes "selected" and "highlight" to the matched elements.</desc>
<code><![CDATA[
-$( "p:last" ).addClass( "selected highlight" );
+$( "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>
+ <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 {
@@ -120,4 +161,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/after.xml b/entries/after.xml
index 1e1955102..2ea48a9c5 100644
--- a/entries/after.xml
+++ b/entries/after.xml
@@ -4,16 +4,18 @@
<signature>
<added>1.0</added>
<argument name="content">
- <desc>HTML string, DOM element, array of elements, or jQuery object to insert after each element in the set of matched elements.</desc>
+ <desc>HTML string, DOM element, text node, array of elements and text nodes, or jQuery object to insert after each element in the set of matched elements.</desc>
<type name="htmlString"/>
<type name="Element"/>
+ <type name="Text"/>
<type name="Array"/>
<type name="jQuery"/>
</argument>
<argument name="content" optional="true">
- <desc>One or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert after each element in the set of matched elements.</desc>
+ <desc>One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or jQuery objects to insert after each element in the set of matched elements.</desc>
<type name="htmlString"/>
<type name="Element"/>
+ <type name="Text"/>
<type name="Array"/>
<type name="jQuery"/>
</argument>
@@ -21,24 +23,26 @@
<signature>
<added>1.4</added>
<argument name="function" type="Function">
- <desc>A function that returns an HTML string, DOM element(s), or jQuery object to insert after each element in the set of matched elements. Receives the index position of the element in the set as an argument. Within the function, <code>this</code> refers to the current element in the set.</desc>
+ <desc>A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert after each element in the set of matched elements. Receives the index position of the element in the set as an argument. Within the function, <code>this</code> refers to the current element in the set.</desc>
<argument name="index" type="Integer" />
<return>
<type name="htmlString"/>
<type name="Element"/>
+ <type name="Text"/>
<type name="jQuery"/>
</return>
</argument>
</signature>
- <signature>
- <added>1.10</added>
- <argument name="function" type="Function">
- <desc>A function that returns an HTML string, DOM element(s), or jQuery object to insert after each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, <code>this</code> refers to the current element in the set.</desc>
+ <signature>
+ <added>1.10-and-2.0</added>
+ <argument name="function-html" type="Function">
+ <desc>A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert after each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, <code>this</code> refers to the current element in the set.</desc>
<argument name="index" type="Integer" />
<argument name="html" type="String" />
<return>
<type name="htmlString"/>
<type name="Element"/>
+ <type name="Text"/>
<type name="jQuery"/>
</return>
</argument>
@@ -92,7 +96,7 @@ $( "p" ).after(function() {
<p>Similar to other content-adding methods such as <code><a href="/https/github.com/prepend/">.prepend()</a></code> and <code><a href="/https/github.com/before/">.before()</a></code>, <code>.after()</code> also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.</p>
<p>For example, the following will insert two new <code><div></code>s and an existing <code><div></code> after the first paragraph:</p>
<pre><code>
-var $newdiv1 = $( "<div id='object1'/>" ),
+var $newdiv1 = $( "<div id='object1'></div>" ),
newdiv2 = document.createElement( "div" ),
existingdiv1 = document.getElementById( "foo" );
diff --git a/entries/ajaxComplete-shorthand.xml b/entries/ajaxComplete-shorthand.xml
new file mode 100644
index 000000000..3f44abc14
--- /dev/null
+++ b/entries/ajaxComplete-shorthand.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0"?>
+<entry type="method" name="ajaxComplete" return="jQuery" deprecated="3.5">
+ <title>.ajaxComplete()</title>
+ <desc>Register a handler to be called when Ajax requests complete. This is an <a href="/Ajax_Events/">AjaxEvent</a>.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>The function to be invoked.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated. Use <a href="/https/github.com/ajaxComplete/"><code>.on( "ajaxComplete", handler )</code></a> instead.</p>
+ </div>
+ </longdesc>
+ <category slug="ajax/global-ajax-event-handlers"/>
+ <category slug="version/1.0"/>
+ <category slug="deprecated/deprecated-3.5"/>
+</entry>
diff --git a/entries/ajaxComplete.xml b/entries/ajaxComplete.xml
index 7f0459731..0c133516f 100644
--- a/entries/ajaxComplete.xml
+++ b/entries/ajaxComplete.xml
@@ -1,18 +1,24 @@
<?xml version="1.0"?>
-<entry type="method" name="ajaxComplete" return="jQuery">
- <title>.ajaxComplete()</title>
+<entry type="method" name="on" return="jQuery">
+ <title>ajaxComplete event</title>
+ <desc>Register a handler to be called when Ajax requests complete. This is an <a href="/Ajax_Events/">AjaxEvent</a>.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
+ <added>1.7</added>
+ <argument name=""ajaxComplete"" type="string">
+ <desc>The string <code>"ajaxComplete"</code>.</desc>
+ </argument>
+ <argument name="handler" type="Function">
<argument name="event" type="Event" />
<argument name="jqXHR" type="jqXHR" />
<argument name="ajaxOptions" type="PlainObject" />
<desc>The function to be invoked.</desc>
</argument>
</signature>
- <desc>Register a handler to be called when Ajax requests complete. This is an <a href="/Ajax_Events/">AjaxEvent</a>.</desc>
<longdesc>
- <p>Whenever an Ajax request completes, jQuery triggers the <code>ajaxComplete</code> event. Any and all handlers that have been registered with the <code>.ajaxComplete()</code> method are executed at this time.</p>
+ <div class="warning">
+ <p>This page describes the <code>ajaxComplete</code> event. For the deprecated <code>.ajaxComplete()</code> method, see <a href="/https/github.com/ajaxComplete-shorthand/"><code>.ajaxComplete()</code></a>.</p>
+ </div>
+ <p>Whenever an Ajax request completes, jQuery triggers the <code>ajaxComplete</code> event. Any and all registered <code>ajaxComplete</code> handlers are executed at this time.</p>
<p>To observe this method in action, set up a basic Ajax load request:</p>
<pre><code>
<div class="trigger">Trigger</div>
@@ -21,38 +27,39 @@
</code></pre>
<p>Attach the event handler to the document:</p>
<pre><code>
-$( document ).ajaxComplete(function() {
+$( document ).on( "ajaxComplete", function() {
$( ".log" ).text( "Triggered ajaxComplete handler." );
-});
+} );
</code></pre>
<p>Now, make an Ajax request using any jQuery method:</p>
<pre><code>
-$( ".trigger" ).click(function() {
+$( ".trigger" ).on( "click", function() {
$( ".result" ).load( "ajax/test.html" );
-});
+} );
</code></pre>
<p>When the user clicks the element with class <code>trigger</code> and the Ajax request completes, the log message is displayed.</p>
- <p><strong>As of jQuery 1.8, the <code>.ajaxComplete()</code> method should only be attached to <code>document</code>.</strong></p>
<p>All <code>ajaxComplete</code> handlers are invoked, regardless of what Ajax request was completed. If you must differentiate between the requests, use the parameters passed to the handler. Each time an <code>ajaxComplete</code> handler is executed, it is passed the event object, the <code>XMLHttpRequest</code> object, and the settings object that was used in the creation of the request. For example, you can restrict the callback to only handling events dealing with a particular URL:</p>
<pre><code>
-$( document ).ajaxComplete(function( event, xhr, settings ) {
+$( document ).on( "ajaxComplete", function( event, xhr, settings ) {
if ( settings.url === "ajax/test.html" ) {
$( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
xhr.responseText );
}
-});
+} );
</code></pre>
- <p><strong>Note:</strong> You can get the returned ajax contents by looking at <code>xhr.responseText</code>.</p>
+ <p><strong>Note:</strong> You can get the returned Ajax contents by looking at <code>xhr.responseText</code>.</p>
</longdesc>
- <note id="ajax-global-false" type="additional" data-title=".ajaxComplete()"/>
+ <note id="global-ajax-event" type="additional" data-title="ajaxComplete"/>
+ <note id="ajax-global-false" type="additional" data-title="ajaxComplete"/>
<example>
<desc>Show a message when an Ajax request completes.</desc>
<code><![CDATA[
-$( document ).ajaxComplete(function( event,request, settings ) {
+$( document ).on( "ajaxComplete", function( event, request, settings ) {
$( "#msg" ).append( "<li>Request Complete.</li>" );
-});
+} );
]]></code>
</example>
<category slug="ajax/global-ajax-event-handlers"/>
<category slug="version/1.0"/>
+ <category slug="version/1.7"/>
</entry>
diff --git a/entries/ajaxError-shorthand.xml b/entries/ajaxError-shorthand.xml
new file mode 100644
index 000000000..f36ac54a8
--- /dev/null
+++ b/entries/ajaxError-shorthand.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0"?>
+<entry type="method" name="ajaxError" return="jQuery" deprecated="3.5">
+ <title>.ajaxError()</title>
+ <desc>Register a handler to be called when Ajax requests complete with an error. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>The function to be invoked.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated. Use <a href="/https/github.com/ajaxError/"><code>.on( "ajaxError", handler )</code></a> instead.</p>
+ </div>
+ </longdesc>
+ <category slug="ajax/global-ajax-event-handlers"/>
+ <category slug="version/1.0"/>
+ <category slug="deprecated/deprecated-3.5"/>
+</entry>
diff --git a/entries/ajaxError.xml b/entries/ajaxError.xml
index d13f71e6b..d18cf9775 100644
--- a/entries/ajaxError.xml
+++ b/entries/ajaxError.xml
@@ -1,8 +1,12 @@
<?xml version="1.0"?>
-<entry type="method" name="ajaxError" return="jQuery">
- <title>.ajaxError()</title>
+<entry type="method" name="on" return="jQuery">
+ <title>ajaxError event</title>
+ <desc>Register a handler to be called when Ajax requests complete with an error. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
<signature>
- <added>1.0</added>
+ <added>1.7</added>
+ <argument name=""ajaxError"" type="string">
+ <desc>The string <code>"ajaxError"</code>.</desc>
+ </argument>
<argument name="handler" type="Function">
<desc>The function to be invoked.</desc>
<argument name="event" type="Event" />
@@ -11,9 +15,11 @@
<argument name="thrownError" type="String" />
</argument>
</signature>
- <desc>Register a handler to be called when Ajax requests complete with an error. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
<longdesc>
- <p>Whenever an Ajax request completes with an error, jQuery triggers the <code>ajaxError</code> event. Any and all handlers that have been registered with the <code>.ajaxError()</code> method are executed at this time. <strong>Note:</strong> <em>This handler is not called for cross-domain script and cross-domain JSONP requests.</em></p>
+ <div class="warning">
+ <p>This page describes the <code>ajaxError</code> event. For the deprecated <code>.ajaxError()</code> method, see <a href="/https/github.com/ajaxError-shorthand/"><code>.ajaxError()</code></a>.</p>
+ </div>
+ <p>Whenever an Ajax request completes with an error, jQuery triggers the <code>ajaxError</code> event. Any and all registered <code>ajaxError</code> handlers are executed at this time. <strong>Note:</strong> <em>This handler is not called for cross-domain script and cross-domain JSONP requests.</em></p>
<p>To observe this method in action, set up a basic Ajax load request.</p>
<pre><code>
<button class="trigger">Trigger</button>
@@ -22,35 +28,37 @@
</code></pre>
<p>Attach the event handler to the document:</p>
<pre><code>
-$( document ).ajaxError(function() {
+$( document ).on( "ajaxError", function() {
$( ".log" ).text( "Triggered ajaxError handler." );
-});
+} );
</code></pre>
<p>Now, make an Ajax request using any jQuery method:</p>
<pre><code>
$( "button.trigger" ).on( "click", function() {
$( "div.result" ).load( "ajax/missing.html" );
-});
+} );
</code></pre>
<p>When the user clicks the button and the Ajax request fails, because the requested file is missing, the log message is displayed.</p>
- <p><strong>As of jQuery 1.8, the <code>.ajaxError()</code> method should only be attached to <code>document</code>.</strong></p>
<p>All <code>ajaxError</code> handlers are invoked, regardless of what Ajax request was completed. To differentiate between the requests, use the parameters passed to the handler. Each time an <code>ajaxError</code> handler is executed, it is passed the event object, the <code>jqXHR</code> object (prior to jQuery 1.5, the <code><abbr title="XMLHttpRequest">XHR</abbr></code> object), and the settings object that was used in the creation of the request. When an HTTP error occurs, the fourth argument (<code>thrownError</code>) receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." For example, to restrict the error callback to only handling events dealing with a particular URL:</p>
<pre><code>
-$( document ).ajaxError(function( event, jqxhr, settings, thrownError ) {
+$( document ).on( "ajaxError", function( event, jqxhr, settings, thrownError ) {
if ( settings.url == "ajax/missing.html" ) {
$( "div.log" ).text( "Triggered ajaxError handler." );
}
-});</code></pre>
+} );
+ </code></pre>
</longdesc>
- <note id="ajax-global-false" type="additional" data-title=".ajaxError()"/>
+ <note id="global-ajax-event" type="additional" data-title="ajaxError"/>
+ <note id="ajax-global-false" type="additional" data-title="ajaxError"/>
<example>
<desc>Show a message when an Ajax request fails.</desc>
<code><![CDATA[
-$( document ).ajaxError(function( event, request, settings ) {
+$( document ).on( "ajaxError", function( event, request, settings ) {
$( "#msg" ).append( "<li>Error requesting page " + settings.url + "</li>" );
-});
+} );
]]></code>
</example>
<category slug="ajax/global-ajax-event-handlers"/>
<category slug="version/1.0"/>
+ <category slug="version/1.7"/>
</entry>
diff --git a/entries/ajaxSend-shorthand.xml b/entries/ajaxSend-shorthand.xml
new file mode 100644
index 000000000..a9ae031e7
--- /dev/null
+++ b/entries/ajaxSend-shorthand.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0"?>
+<entry type="method" name="ajaxSend" return="jQuery" deprecated="3.5">
+ <title>.ajaxSend()</title>
+ <desc>Attach a function to be executed before an Ajax request is sent. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>The function to be invoked.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated. Use <a href="/https/github.com/ajaxSend/"><code>.on( "ajaxSend", handler )</code></a> instead.</p>
+ </div>
+ </longdesc>
+ <category slug="ajax/global-ajax-event-handlers"/>
+ <category slug="version/1.0"/>
+ <category slug="deprecated/deprecated-3.5"/>
+</entry>
diff --git a/entries/ajaxSend.xml b/entries/ajaxSend.xml
index 2d609b718..cbd1641cd 100644
--- a/entries/ajaxSend.xml
+++ b/entries/ajaxSend.xml
@@ -1,8 +1,12 @@
<?xml version="1.0"?>
-<entry type="method" name="ajaxSend" return="jQuery">
- <title>.ajaxSend()</title>
+<entry type="method" name="on" return="jQuery">
+ <title>ajaxSend event</title>
+ <desc>Attach a function to be executed before an Ajax request is sent. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
<signature>
- <added>1.0</added>
+ <added>1.7</added>
+ <argument name=""ajaxSend"" type="string">
+ <desc>The string <code>"ajaxSend"</code>.</desc>
+ </argument>
<argument name="handler" type="Function">
<desc>The function to be invoked.</desc>
<argument name="event" type="Event" />
@@ -10,9 +14,11 @@
<argument name="ajaxOptions" type="PlainObject" />
</argument>
</signature>
- <desc>Attach a function to be executed before an Ajax request is sent. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
<longdesc>
- <p>Whenever an Ajax request is about to be sent, jQuery triggers the <code>ajaxSend</code> event. Any and all handlers that have been registered with the <code>.ajaxSend()</code> method are executed at this time.</p>
+ <div class="warning">
+ <p>This page describes the <code>ajaxSend</code> event. For the deprecated <code>.ajaxSend()</code> method, see <a href="/https/github.com/ajaxSend-shorthand/"><code>.ajaxSend()</code></a>.</p>
+ </div>
+ <p>Whenever an Ajax request is about to be sent, jQuery triggers the <code>ajaxSend</code> event. Any and all registerd <code>ajaxSend</code> handlers are executed at this time.</p>
<p>To observe this method in action, set up a basic Ajax load request:</p>
<pre><code>
<div class="trigger">Trigger</div>
@@ -21,36 +27,37 @@
</code></pre>
<p>Attach the event handler to the document:</p>
<pre><code>
-$( document ).ajaxSend(function() {
+$( document ).on( "ajaxSend", function() {
$( ".log" ).text( "Triggered ajaxSend handler." );
-});
+} );
</code></pre>
<p>Now, make an Ajax request using any jQuery method:</p>
<pre><code>
-$( ".trigger" ).click(function() {
+$( ".trigger" ).on( "click", function() {
$( ".result" ).load( "ajax/test.html" );
-});
+} );
</code></pre>
<p>When the user clicks the element with class <code>trigger</code> and the Ajax request is about to begin, the log message is displayed.</p>
- <p><strong>As of jQuery 1.8, the <code>.ajaxSend()</code> method should only be attached to <code>document</code>.</strong></p>
<p>All <code>ajaxSend</code> handlers are invoked, regardless of what Ajax request is to be sent. If you must differentiate between the requests, use the parameters passed to the handler. Each time an <code>ajaxSend</code> handler is executed, it is passed the event object, the <code>jqXHR</code> object (in version 1.4, <code>XMLHttpRequest</code>object), and the <a href="/https/github.com/jQuery.ajax/">settings object</a> that was used in the creation of the Ajax request. For example, you can restrict the callback to only handling events dealing with a particular URL:</p>
<pre><code>
-$( document ).ajaxSend(function( event, jqxhr, settings ) {
+$( document ).on( "ajaxSend", function( event, jqxhr, settings ) {
if ( settings.url == "ajax/test.html" ) {
$( ".log" ).text( "Triggered ajaxSend handler." );
}
-});
+} );
</code></pre>
</longdesc>
- <note id="ajax-global-false" type="additional" data-title=".ajaxSend()"/>
+ <note id="global-ajax-event" type="additional" data-title="ajaxSend"/>
+ <note id="ajax-global-false" type="additional" data-title="ajaxSend"/>
<example>
<desc>Show a message before an Ajax request is sent.</desc>
<code><![CDATA[
-$( document ).ajaxSend(function( event, request, settings ) {
+$( document ).on( "ajaxSend", function( event, request, settings ) {
$( "#msg" ).append( "<li>Starting request at " + settings.url + "</li>" );
-});
+} );
]]></code>
</example>
<category slug="ajax/global-ajax-event-handlers"/>
<category slug="version/1.0"/>
+ <category slug="version/1.7"/>
</entry>
diff --git a/entries/ajaxStart-shorthand.xml b/entries/ajaxStart-shorthand.xml
new file mode 100644
index 000000000..51b2fc9e3
--- /dev/null
+++ b/entries/ajaxStart-shorthand.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0"?>
+<entry type="method" name="ajaxStart" return="jQuery" deprecated="3.5">
+ <title>.ajaxStart()</title>
+ <desc>Register a handler to be called when the first Ajax request begins. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>The function to be invoked.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated. Use <a href="/https/github.com/ajaxStart/"><code>.on( "ajaxStart", handler )</code></a> instead.</p>
+ </div>
+ </longdesc>
+ <category slug="ajax/global-ajax-event-handlers"/>
+ <category slug="version/1.0"/>
+ <category slug="deprecated/deprecated-3.5"/>
+</entry>
diff --git a/entries/ajaxStart.xml b/entries/ajaxStart.xml
index 7747e5b6c..3d8f4df4f 100644
--- a/entries/ajaxStart.xml
+++ b/entries/ajaxStart.xml
@@ -1,15 +1,21 @@
<?xml version="1.0"?>
-<entry type="method" name="ajaxStart" return="jQuery">
- <title>.ajaxStart()</title>
+<entry type="method" name="on" return="jQuery">
+ <title>ajaxStart event</title>
+ <desc>Register a handler to be called when the first Ajax request begins. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
<signature>
- <added>1.0</added>
+ <added>1.7</added>
+ <argument name=""ajaxStart"" type="string">
+ <desc>The string <code>"ajaxStart"</code>.</desc>
+ </argument>
<argument name="handler" type="Function">
<desc>The function to be invoked.</desc>
</argument>
</signature>
- <desc>Register a handler to be called when the first Ajax request begins. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
<longdesc>
- <p>Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the <code>ajaxStart</code> event. Any and all handlers that have been registered with the <code>.ajaxStart()</code> method are executed at this time.</p>
+ <div class="warning">
+ <p>This page describes the <code>ajaxStart</code> event. For the deprecated <code>.ajaxStart()</code> method, see <a href="/https/github.com/ajaxStart-shorthand/"><code>.ajaxStart()</code></a>.</p>
+ </div>
+ <p>Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the <code>ajaxStart</code> event. Any and all handlers that have been registered with <code>.on( "ajaxStart", ... )</code> are executed at this time.</p>
<p>To observe this method in action, set up a basic Ajax load request:</p>
<pre><code>
<div class="trigger">Trigger</div>
@@ -18,28 +24,29 @@
</code></pre>
<p>Attach the event handler to any element:</p>
<pre><code>
-$( document ).ajaxStart(function() {
+$( document ).on( "ajaxStart", function() {
$( ".log" ).text( "Triggered ajaxStart handler." );
-});
+} );
</code></pre>
<p>Now, make an Ajax request using any jQuery method:</p>
<pre><code>
-$( ".trigger" ).click(function() {
+$( ".trigger" ).on( "click", function() {
$( ".result" ).load( "ajax/test.html" );
-});
+} );
</code></pre>
<p>When the user clicks the element with class <code>trigger</code> and the Ajax request is sent, the log message is displayed.</p>
- <p><strong>As of jQuery 1.8, the <code>.ajaxStart()</code> method should only be attached to <code>document</code>.</strong></p>
</longdesc>
- <note id="ajax-global-false" type="additional" data-title=".ajaxStart()"/>
+ <note id="global-ajax-event" type="additional" data-title="ajaxStart"/>
+ <note id="ajax-global-false" type="additional" data-title="ajaxStart"/>
<example>
<desc>Show a loading message whenever an Ajax request starts (and none is already active).</desc>
<code><![CDATA[
-$( document ).ajaxStart(function() {
+$( document ).on( "ajaxStart", function() {
$( "#loading" ).show();
-});
+} );
]]></code>
</example>
<category slug="ajax/global-ajax-event-handlers"/>
<category slug="version/1.0"/>
+ <category slug="version/1.7"/>
</entry>
diff --git a/entries/ajaxStop-shorthand.xml b/entries/ajaxStop-shorthand.xml
new file mode 100644
index 000000000..781216575
--- /dev/null
+++ b/entries/ajaxStop-shorthand.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0"?>
+<entry type="method" name="ajaxStop" return="jQuery" deprecated="3.5">
+ <title>.ajaxStop()</title>
+ <desc>Register a handler to be called when all Ajax requests have completed. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>The function to be invoked.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated. Use <a href="/https/github.com/ajaxStop/"><code>.on( "ajaxStop", handler )</code></a> instead.</p>
+ </div>
+ </longdesc>
+ <category slug="ajax/global-ajax-event-handlers"/>
+ <category slug="version/1.0"/>
+ <category slug="deprecated/deprecated-3.5"/>
+</entry>
diff --git a/entries/ajaxStop.xml b/entries/ajaxStop.xml
index 76b3bffc2..f42c74448 100644
--- a/entries/ajaxStop.xml
+++ b/entries/ajaxStop.xml
@@ -1,15 +1,21 @@
<?xml version="1.0"?>
-<entry type="method" name="ajaxStop" return="jQuery">
- <title>.ajaxStop()</title>
+<entry type="method" name="on" return="jQuery">
+ <title>ajaxStop event</title>
<desc>Register a handler to be called when all Ajax requests have completed. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
<signature>
- <added>1.0</added>
+ <added>1.7</added>
+ <argument name=""ajaxStop"" type="string">
+ <desc>The string <code>"ajaxStop"</code>.</desc>
+ </argument>
<argument name="handler" type="Function">
<desc>The function to be invoked.</desc>
</argument>
</signature>
<longdesc>
- <p>Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the <code>ajaxStop</code> event. Any and all handlers that have been registered with the <code>.ajaxStop()</code> method are executed at this time. The <code>ajaxStop</code> event is also triggered if the last outstanding Ajax request is cancelled by returning false within the <code>beforeSend</code> callback function. </p>
+ <div class="warning">
+ <p>This page describes the <code>ajaxStop</code> event. For the deprecated <code>.ajaxStop()</code> method, see <a href="/https/github.com/ajaxStop-shorthand/"><code>.ajaxStop()</code></a>.</p>
+ </div>
+ <p>Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the <code>ajaxStop</code> event. Any and all registered <code>ajaxStop</code> handlers are executed at this time. The <code>ajaxStop</code> event is also triggered if the last outstanding Ajax request is cancelled by returning false within the <code>beforeSend</code> callback function. </p>
<p>To observe this method in action, set up a basic Ajax load request:</p>
<pre><code>
<div class="trigger">Trigger</div>
@@ -18,28 +24,29 @@
</code></pre>
<p>Attach the event handler to the document:</p>
<pre><code>
-$( document ).ajaxStop(function() {
+$( document ).on( "ajaxStop", function() {
$( ".log" ).text( "Triggered ajaxStop handler." );
-});
+} );
</code></pre>
<p>Now, make an Ajax request using any jQuery method:</p>
<pre><code>
-$( ".trigger" ).click(function() {
+$( ".trigger" ).on( "click", function() {
$( ".result" ).load( "ajax/test.html" );
-});
+} );
</code></pre>
<p>When the user clicks the element with class <code>trigger</code> and the Ajax request completes, the log message is displayed.</p>
- <p><strong>As of jQuery 1.8, the <code>.ajaxStop()</code> method should only be attached to <code>document</code>.</strong></p>
</longdesc>
- <note id="ajax-global-false" type="additional" data-title=".ajaxStop()"/>
+ <note id="global-ajax-event" type="additional" data-title="ajaxStop"/>
+ <note id="ajax-global-false" type="additional" data-title="ajaxStop"/>
<example>
<desc>Hide a loading message after all the Ajax requests have stopped.</desc>
<code><![CDATA[
-$( document ).ajaxStop(function() {
+$( document ).on( "ajaxStop", function() {
$( "#loading" ).hide();
-});
+} );
]]></code>
</example>
<category slug="ajax/global-ajax-event-handlers"/>
<category slug="version/1.0"/>
+ <category slug="version/1.7"/>
</entry>
diff --git a/entries/ajaxSuccess-shorthand.xml b/entries/ajaxSuccess-shorthand.xml
new file mode 100644
index 000000000..a9e543350
--- /dev/null
+++ b/entries/ajaxSuccess-shorthand.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0"?>
+<entry type="method" name="ajaxSuccess" return="jQuery" deprecated="3.5">
+ <title>.ajaxSuccess()</title>
+ <desc>Attach a function to be executed whenever an Ajax request completes successfully. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>The function to be invoked.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated. Use <a href="/https/github.com/ajaxSuccess/"><code>.on( "ajaxSuccess", handler )</code></a> instead.</p>
+ </div>
+ </longdesc>
+ <category slug="ajax/global-ajax-event-handlers"/>
+ <category slug="version/1.0"/>
+ <category slug="deprecated/deprecated-3.5"/>
+</entry>
diff --git a/entries/ajaxSuccess.xml b/entries/ajaxSuccess.xml
index 26583e2e5..8824a6212 100644
--- a/entries/ajaxSuccess.xml
+++ b/entries/ajaxSuccess.xml
@@ -1,8 +1,12 @@
<?xml version="1.0"?>
-<entry type="method" name="ajaxSuccess" return="jQuery">
- <title>.ajaxSuccess()</title>
+<entry type="method" name="on" return="jQuery">
+ <title>ajaxSuccess event</title>
+ <desc>Attach a function to be executed whenever an Ajax request completes successfully. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
<signature>
- <added>1.0</added>
+ <added>1.7</added>
+ <argument name=""ajaxSuccess"" type="string">
+ <desc>The string <code>"ajaxSuccess"</code>.</desc>
+ </argument>
<argument name="handler" type="Function">
<desc>The function to be invoked.</desc>
<argument name="event" type="Event" />
@@ -11,9 +15,11 @@
<argument name="data" type="PlainObject" />
</argument>
</signature>
- <desc>Attach a function to be executed whenever an Ajax request completes successfully. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
<longdesc>
- <p>Whenever an Ajax request completes successfully, jQuery triggers the <code>ajaxSuccess</code> event. Any and all handlers that have been registered with the <code>.ajaxSuccess()</code> method are executed at this time.</p>
+ <div class="warning">
+ <p>This page describes the <code>ajaxSuccess</code> event. For the deprecated <code>.ajaxSuccess()</code> method, see <a href="/https/github.com/ajaxSuccess-shorthand/"><code>.ajaxSuccess()</code></a>.</p>
+ </div>
+ <p>Whenever an Ajax request completes successfully, jQuery triggers the <code>ajaxSuccess</code> event. Any and all registered <code>ajaxSuccess</code> handlers are executed at this time.</p>
<p>To observe this method in action, set up a basic Ajax load request:</p>
<pre><code>
<div class="trigger">Trigger</div>
@@ -22,38 +28,39 @@
</code></pre>
<p>Attach the event handler to any element:</p>
<pre><code>
-$(document).ajaxSuccess(function() {
+$( document ).on( "ajaxSuccess", function() {
$( ".log" ).text( "Triggered ajaxSuccess handler." );
-});
+} );
</code></pre>
<p>Now, make an Ajax request using any jQuery method:</p>
<pre><code>
$( ".trigger" ).on( "click", function() {
$( ".result" ).load( "ajax/test.html" );
-});
+} );
</code></pre>
<p>When the user clicks the element with class <code>trigger</code> and the Ajax request completes successfully, the log message is displayed.</p>
- <p><strong>As of jQuery 1.8, the <code>.ajaxSuccess()</code> method should only be attached to <code>document</code>.</strong></p>
<p>All <code>ajaxSuccess</code> handlers are invoked, regardless of what Ajax request was completed. If you must differentiate between the requests, you can use the parameters passed to the handler. Each time an <code>ajaxSuccess</code> handler is executed, it is passed the event object, the <code>XMLHttpRequest</code> object, and the settings object that was used in the creation of the request. For example, you can restrict the callback to only handling events dealing with a particular URL:</p>
<pre><code>
-$( document ).ajaxSuccess(function( event, xhr, settings ) {
+$( document ).on( "ajaxSuccess", function( event, xhr, settings ) {
if ( settings.url == "ajax/test.html" ) {
- $( ".log" ).text( "Triggered ajaxSuccess handler. The ajax response was: " +
+ $( ".log" ).text( "Triggered ajaxSuccess handler. The Ajax response was: " +
xhr.responseText );
}
-});
+} );
</code></pre>
- <p><strong>Note:</strong> You can get the returned ajax contents by looking at <code>xhr.responseXML</code> or <code>xhr.responseText</code> for xml and html respectively.</p>
+ <p><strong>Note:</strong> You can get the returned Ajax contents by looking at <code>xhr.responseXML</code> or <code>xhr.responseText</code> for xml and html respectively.</p>
</longdesc>
- <note id="ajax-global-false" type="additional" data-title=".ajaxSuccess()"/>
+ <note id="global-ajax-event" type="additional" data-title="ajaxSuccess"/>
+ <note id="ajax-global-false" type="additional" data-title="ajaxSuccess"/>
<example>
<desc>Show a message when an Ajax request completes successfully.</desc>
<code><![CDATA[
-$( document ).ajaxSuccess(function( event, request, settings ) {
+$( document ).on( "ajaxSuccess", function( event, request, settings ) {
$( "#msg" ).append( "<li>Successful Request!</li>" );
-});
+} );
]]></code>
</example>
<category slug="ajax/global-ajax-event-handlers"/>
<category slug="version/1.0"/>
+ <category slug="version/1.7"/>
</entry>
diff --git a/entries/andSelf.xml b/entries/andSelf.xml
index 6870b4795..967c72ef5 100644
--- a/entries/andSelf.xml
+++ b/entries/andSelf.xml
@@ -1,78 +1,17 @@
<?xml version="1.0"?>
-<entry type="method" name="andSelf" return="jQuery" deprecated="1.8">
+<entry type="method" name="andSelf" return="jQuery" deprecated="1.8" removed="3.0">
<title>.andSelf()</title>
<signature>
<added>1.2</added>
</signature>
<desc>Add the previous set of elements on the stack to the current set.</desc>
<longdesc>
- <p><strong>Note:</strong> This function has been deprecated and is now an alias for <a href="/https/github.com/addBack/"><code>.addBack()</code></a>, which should be used with jQuery 1.8 and later.</p>
- <p>As described in the discussion for <code><a href="/https/github.com/end/">.end()</a></code>, jQuery objects maintain an internal stack that keeps track of changes to the matched set of elements. When one of the DOM traversal methods is called, the new set of elements is pushed onto the stack. If the previous set of elements is desired as well, <code>.andSelf()</code> can help.</p>
- <p>Consider a page with a simple list on it:</p>
- <pre><code>
-<ul>
- <li>list item 1</li>
- <li>list item 2</li>
- <li class="third-item">list item 3</li>
- <li>list item 4</li>
- <li>list item 5</li>
-</ul>
- </code></pre>
- <p>The result of the following code is a red background behind items 3, 4 and 5:</p>
- <pre><code>
-$( "li.third-item" ).nextAll().andSelf()
- .css( "background-color", "red" );
- </code></pre>
- <p>First, the initial selector locates item 3, initializing the stack with the set containing just this item. The call to <code>.nextAll()</code> then pushes the set of items 4 and 5 onto the stack. Finally, the <code>.andSelf()</code> invocation merges these two sets together, creating a jQuery object that points to all three items in document order: <code>[ <li.third-item>, <li>, <li> ]</code>.</p>
+ <div class="warning">
+ <p>Note: This API has been removed in jQuery 3.0; use <a href="/https/github.com/addBack/"><code>.addBack()</code></a> instead, which should work identically.</p>
+ </div>
</longdesc>
- <example>
- <desc>The <code>.andSelf()</code> method causes the previous set of DOM elements in the traversal stack to be added to the current set. In the first example, the top stack contains the set resulting from <code>.find("p")</code>. In the second example, <code>.andSelf()</code> adds the previous set of elements on the stack — in this case <code>$( "div.after-andself" )</code> — to the current set, selecting both the div and its enclosed paragraphs.</desc>
- <code><![CDATA[
-$( "div.left, div.right" ).find( "div, div > p" ).addClass( "border" );
-
-// First Example
-$( "div.before-andself" ).find( "p" ).addClass( "background" );
-
-// Second Example
-$( "div.after-andself" ).find( "p" ).andSelf().addClass( "background" );
-]]></code>
- <css><![CDATA[
- p, div {
- margin: 5px;
- padding: 5px;
- }
- .border {
- border: 2px solid red;
- }
- .background {
- background: yellow;
- }
- .left, .right {
- width: 45%;
- float: left;
- }
- .right {
- margin-left: 3%;
- }
-]]></css>
- <html><![CDATA[
-<div class="left">
- <p><strong>Before <code>andSelf()</code></strong></p>
- <div class="before-andself">
- <p>First Paragraph</p>
- <p>Second Paragraph</p>
- </div>
-</div>
-<div class="right">
- <p><strong>After <code>andSelf()</code></strong></p>
- <div class="after-andself">
- <p>First Paragraph</p>
- <p>Second Paragraph</p>
- </div>
-</div>
-]]></html>
- </example>
<category slug="traversing/miscellaneous-traversal"/>
<category slug="version/1.2"/>
<category slug="deprecated/deprecated-1.8"/>
+ <category slug="removed"/>
</entry>
diff --git a/entries/animate.xml b/entries/animate.xml
index d05f366ee..c4ac9e70f 100644
--- a/entries/animate.xml
+++ b/entries/animate.xml
@@ -22,7 +22,7 @@
<longdesc>
<p>The <code>.animate()</code> method allows us to create animation effects on any numeric CSS property. The only required parameter is a plain object of CSS properties. This object is similar to the one that can be sent to the <code>.css()</code> method, except that the range of properties is more restrictive.</p>
<h4 id="animation-properties">Animation Properties and Values</h4>
- <p>All animated properties should be animated to a <em>single numeric value</em>, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, <code>width</code>, <code>height</code>, or <code>left</code> can be animated but <code>background-color</code> cannot be, unless the <a href="https://github.com/jquery/jquery-color">jQuery.Color()</a> plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units <code>em</code> and <code>%</code> can be specified where applicable.</p>
+ <p>All animated properties should be animated to a <em>single numeric value</em>, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, <code>width</code>, <code>height</code>, or <code>left</code> can be animated but <code>background-color</code> cannot be, unless the <a href="https://github.com/jquery/jquery-color">jQuery.Color</a> plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units <code>em</code> and <code>%</code> can be specified where applicable.</p>
<p>In addition to style properties, some non-style properties such as <code>scrollTop</code> and <code>scrollLeft</code>, as well as custom properties, can be animated.</p>
<p>Shorthand CSS properties (e.g. font, background, border) are not fully supported. For example, if you want to animate the rendered border width, at least a border style and border width other than "auto" must be set in advance. Or, if you want to animate font size, you would use <code>fontSize</code> or the CSS equivalent <code>'font-size'</code> rather than simply <code>'font'</code>. </p>
<p>In addition to numeric values, each property can take the strings <code>'show'</code>, <code>'hide'</code>, and <code>'toggle'</code>. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element. In order to use jQuery's built-in toggle state tracking, the <code>'toggle'</code> keyword must be consistently given as the value of the property being animated.</p>
@@ -32,8 +32,8 @@
</div>
<h4 id="duration">Duration</h4>
<p>Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The default duration is <code>400</code> milliseconds. The strings <code>'fast'</code> and <code>'slow'</code> can be supplied to indicate durations of <code>200</code> and <code>600</code> milliseconds, respectively.</p>
- <h4 id="complete">Complete Function</h4>
- <p>If supplied, the <code>complete</code> callback function is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but <code>this</code> is set to the DOM element being animated. If multiple elements are animated, the callback is executed once per matched element, not once for the animation as a whole.</p>
+ <h4 id="callbacks">Callback Functions</h4>
+ <p>If supplied, the <code>start</code>, <code>step</code>, <code>progress</code>, <code>complete</code>, <code>done</code>, <code>fail</code>, and <code>always</code> callbacks are called on a <em>per-element</em> basis; <code>this</code> is set to the DOM element being animated. If no elements are in the set, no callbacks are called. If multiple elements are animated, the callback is executed once per matched element, not once for the animation as a whole. Use the <code>.promise()</code> method to obtain a promise to which you can attach callbacks that fire once for an animated set of any size, including zero elements.</p>
<h4 id="basic-usage">Basic Usage</h4>
<p>To animate any element, such as a simple image:</p>
<pre><code>
@@ -45,7 +45,7 @@
</code></pre>
<p>To animate the opacity, left offset, and height of the image simultaneously:</p>
<pre><code>
-$( "#clickme" ).click(function() {
+$( "#clickme" ).on( "click", function() {
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
@@ -56,20 +56,26 @@ $( "#clickme" ).click(function() {
});
</code></pre>
<p class="image">
- <img src="/https/github.com/resources/animate-1.jpg" alt=""/>
+ <figure>
+ <img src="/https/github.com/resources/animate-1.jpg" alt=""/>
+ <figcaption>Figure 1 - Illustration of the specified animation effect</figcaption>
+ </figure>
</p>
<p>Note that the target value of the <code>height</code> property is <code>'toggle'</code>. Since the image was visible before, the animation shrinks the height to 0 to hide it. A second click then reverses this transition:
</p>
<p class="image">
- <img src="/https/github.com/resources/animate-2.jpg" alt=""/>
+ <figure>
+ <img src="/https/github.com/resources/animate-2.jpg" alt=""/>
+ <figcaption>Figure 2 - Illustration of the specified animation effect</figcaption>
+ </figure>
</p>
<p>The <code>opacity</code> of the image is already at its target value, so this property is not animated by the second click. Since the target value for <code>left</code> is a relative value, the image moves even farther to the right during this second animation.</p>
<p>Directional properties (<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>) have no discernible effect on elements if their <code>position</code> style property is <code>static</code>, which it is by default.</p>
<div class="warning">
- <p><strong>Note: </strong>The <a href="http://jqueryui.com/">jQuery UI</a> project extends the <code>.animate()</code> method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.</p>
+ <p><strong>Note: </strong>The <a href="https://jqueryui.com/">jQuery UI</a> project extends the <code>.animate()</code> method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.</p>
</div>
<div class="warning">
- <p><strong>Note:</strong> if attempting to animate an element with a height or width of 0px, where contents of the element are visible due to overflow, jQuery may clip this overflow during animation. By fixing the dimensions of the original element being hidden however, it is possible to ensure that the animation runs smoothly. A <a href="http://www.google.com/search?q=clearfix">clearfix</a> can be used to automatically fix the dimensions of your main element without the need to set this manually.</p>
+ <p><strong>Note:</strong> if attempting to animate an element with a height or width of 0px, where contents of the element are visible due to overflow, jQuery may clip this overflow during animation. By fixing the dimensions of the original element being hidden however, it is possible to ensure that the animation runs smoothly. A <a href="https://www.google.com/search?q=clearfix">clearfix</a> can be used to automatically fix the dimensions of your main element without the need to set this manually.</p>
</div>
<h4 id="step">Step Function</h4>
<p>The second version of <code>.animate()</code> provides a <code>step</code> option — a callback function that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the animation as it is occurring. It accepts two arguments (<code>now</code> and <code>fx</code>), and <code>this</code> is set to the DOM element being animated.</p>
@@ -90,12 +96,12 @@ $( "li" ).animate({
});
</code></pre>
<h4 id="easing">Easing</h4>
- <p>The remaining parameter of <code>.animate()</code> is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com/">jQuery UI suite</a>.</p>
+ <p>The remaining parameter of <code>.animate()</code> is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="https://jqueryui.com/">jQuery UI suite</a>.</p>
<h4 id="per-property-easing">Per-property Easing</h4>
<p>As of jQuery version 1.4, you can set per-property easing functions within a single <code>.animate()</code> call. In the first version of <code>.animate()</code>, each property can take an array as its value: The first member of the array is the CSS property and the second member is an easing function. If a per-property easing function is not defined for a particular property, it uses the value of the <code>.animate()</code> method's optional easing argument. If the easing argument is not defined, the default <code>swing</code> function is used.</p>
<p>For example, to simultaneously animate the width and height with the <code>swing</code> easing function and the opacity with the <code>linear</code> easing function:</p>
<pre><code>
-$( "#clickme" ).click(function() {
+$( "#clickme" ).on( "click", function() {
$( "#book" ).animate({
width: [ "toggle", "swing" ],
height: [ "toggle", "swing" ],
@@ -107,7 +113,7 @@ $( "#clickme" ).click(function() {
</code></pre>
<p>In the second version of <code>.animate()</code>, the options object can include the <code>specialEasing</code> property, which is itself an object of CSS properties and their corresponding easing functions. For example, to simultaneously animate the width using the <code>linear</code> easing function and the height using the <code>easeOutBounce</code> easing function:</p>
<pre><code>
-$( "#clickme" ).click(function() {
+$( "#clickme" ).on( "click", function() {
$( "#book" ).animate({
width: "toggle",
height: "toggle"
@@ -131,7 +137,7 @@ $( "#clickme" ).click(function() {
<code><![CDATA[
// Using multiple unit types within one animation.
-$( "#go" ).click(function() {
+$( "#go" ).on( "click", function() {
$( "#block" ).animate({
width: "70%",
opacity: 0.4,
@@ -156,11 +162,11 @@ $( "#go" ).click(function() {
<example>
<desc>Animates a div's left property with a relative value. Click several times on the buttons to see the relative animations queued up.</desc>
<code><![CDATA[
-$( "#right" ).click(function() {
+$( "#right" ).on( "click", function() {
$( ".block" ).animate({ "left": "+=50px" }, "slow" );
});
-$( "#left" ).click(function(){
+$( "#left" ).on( "click", function(){
$( ".block" ).animate({ "left": "-=50px" }, "slow" );
});
]]></code>
@@ -185,7 +191,7 @@ $( "#left" ).click(function(){
The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.</desc>
<code><![CDATA[
-$( "#go1" ).click(function() {
+$( "#go1" ).on( "click", function() {
$( "#block1" )
.animate({
width: "90%"
@@ -197,18 +203,18 @@ $( "#go1" ).click(function() {
.animate({ borderRightWidth: "15px" }, 1500 );
});
-$( "#go2" ).click(function() {
+$( "#go2" ).on( "click", function() {
$( "#block2" )
.animate({ width: "90%" }, 1000 )
.animate({ fontSize: "24px" }, 1000 )
.animate({ borderLeftWidth: "15px" }, 1000 );
});
-$( "#go3" ).click(function() {
- $( "#go1" ).add( "#go2" ).click();
+$( "#go3" ).on( "click", function() {
+ $( "#go1" ).add( "#go2" ).trigger( "click" );
});
-$( "#go4" ).click(function() {
+$( "#go4" ).on( "click", function() {
$( "div" ).css({
width: "",
fontSize: "",
@@ -242,13 +248,13 @@ $( "#go4" ).click(function() {
<example>
<desc>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. </desc>
<code><![CDATA[
-$( "#go" ).click(function() {
- $( ".block:first" ).animate({
+$( "#go" ).on( "click", function() {
+ $( ".block" ).first().animate({
left: 100
}, {
duration: 1000,
step: function( now, fx ){
- $( ".block:gt(0)" ).css( "left", now );
+ $( ".block" ).slice( 1 ).css( "left", now );
}
});
});
diff --git a/entries/animated-selector.xml b/entries/animated-selector.xml
index 819fcff0c..9a68868e3 100644
--- a/entries/animated-selector.xml
+++ b/entries/animated-selector.xml
@@ -13,7 +13,7 @@
<example>
<desc>Change the color of any div that is animated.</desc>
<code><![CDATA[
-$( "#run" ).click(function() {
+$( "#run" ).on( "click", function() {
$( "div:animated" ).toggleClass( "colored" );
});
diff --git a/entries/append.xml b/entries/append.xml
index c1de14200..b45c50eaf 100644
--- a/entries/append.xml
+++ b/entries/append.xml
@@ -4,16 +4,18 @@
<signature>
<added>1.0</added>
<argument name="content">
- <desc>DOM element, array of elements, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.</desc>
+ <desc>DOM element, text node, array of elements and text nodes, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.</desc>
<type name="htmlString"/>
<type name="Element"/>
+ <type name="Text"/>
<type name="Array"/>
<type name="jQuery"/>
</argument>
<argument name="content" optional="true">
- <desc>One or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert at the end of each element in the set of matched elements.</desc>
+ <desc>One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or jQuery objects to insert at the end of each element in the set of matched elements.</desc>
<type name="htmlString"/>
<type name="Element"/>
+ <type name="Text"/>
<type name="Array"/>
<type name="jQuery"/>
</argument>
@@ -21,19 +23,20 @@
<signature>
<added>1.4</added>
<argument name="function" type="Function">
- <desc>A function that returns an HTML string, DOM element(s), or jQuery object to insert at the end of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, <code>this</code> refers to the current element in the set.</desc>
+ <desc>A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert at the end of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, <code>this</code> refers to the current element in the set.</desc>
<argument name="index" type="Integer" />
<argument name="html" type="String" />
<return>
<type name="htmlString"/>
<type name="Element"/>
+ <type name="Text"/>
<type name="jQuery"/>
</return>
</argument>
</signature>
<desc>Insert content, specified by the parameter, to the end of each element in the set of matched elements.</desc>
<longdesc>
- <p>The <code>.append()</code> method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the <em>first</em> child, use <a href="/https/github.com/prepend/"><code>.prepend()</code></a>). </p>
+ <p>The <code>.append()</code> method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the <em>first</em> child, use <a href="/https/github.com/prepend/"><code>.prepend()</code></a>).</p>
<p>The <code>.append()</code> and <code><a href="/https/github.com/appendTo/">.appendTo()</a></code> methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With <code>.append()</code>, the selector expression preceding the method is the container into which the content is inserted. With <code>.appendTo()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.</p>
<p>Consider the following HTML:</p>
<pre><code>
@@ -78,7 +81,7 @@ $( ".container" ).append( $( "h2" ) );
<p>Similar to other content-adding methods such as <code><a href="/https/github.com/prepend/">.prepend()</a></code> and <code><a href="/https/github.com/before/">.before()</a></code>, <code>.append()</code> also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.</p>
<p>For example, the following will insert two new <code><div></code>s and an existing <code><div></code> as the last three child nodes of the body:</p>
<pre><code>
-var $newdiv1 = $( "<div id='object1'/>" ),
+var $newdiv1 = $( "<div id='object1'></div>" ),
newdiv2 = document.createElement( "div" ),
existingdiv1 = document.getElementById( "foo" );
@@ -87,6 +90,7 @@ $( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
<p>Since <code>.append()</code> can accept any number of additional arguments, the same result can be achieved by passing in the three <code><div></code>s as three separate arguments, like so: <code>$('body').append( $newdiv1, newdiv2, existingdiv1 )</code>. The type and number of arguments will largely depend on how you collect the elements in your code.</p>
</longdesc>
<note id="html-code-execution" type="additional"/>
+ <note id="svg-support" type="additional"/>
<example>
<desc>Appends some HTML to all paragraphs.</desc>
<code><![CDATA[
diff --git a/entries/appendTo.xml b/entries/appendTo.xml
index f3e5da643..7221b2e09 100644
--- a/entries/appendTo.xml
+++ b/entries/appendTo.xml
@@ -53,10 +53,11 @@ $( "h2" ).appendTo( $( ".container" ) );
<h2>Greetings</h2>
</div>
</code></pre>
- <p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first, and that new set (the original element plus clones) is returned.</p>
- <p><strong>Before jQuery 1.9,</strong> the append-to-single-element case did not create a new set, but instead returned the original set which made it difficult to use the <code>.end()</code> method reliably when being used with an unknown number of elements.</p>
+ <p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target except the last, and that new set (the original element plus clones) is returned.</p>
+ <p><strong>Before jQuery 1.9,</strong> the append-to-single-element case did not create a new set, but instead returned the original set which made it difficult to use the <code>.end()</code> method reliably when being used with an unknown number of elements.</p>
</longdesc>
<note id="html-code-execution" type="additional"/>
+ <note id="svg-support" type="additional"/>
<example>
<desc>Append all spans to the element with the ID "foo" (Check append() documentation for more examples)</desc>
<code><![CDATA[
diff --git a/entries/attr.xml b/entries/attr.xml
index 3e181e67e..ac3e5a1bb 100644
--- a/entries/attr.xml
+++ b/entries/attr.xml
@@ -20,15 +20,13 @@
<div class="warning">
<p><strong>Note:</strong> Attribute values are strings with the exception of a few attributes such as value and tabindex.</p>
</div>
- <div class="warning">
- <p><strong>Note:</strong> Attempting to change the <code>type</code> attribute (or property) of an <code>input</code> element created via HTML or already in an HTML document will result in an error being thrown by Internet Explorer 6, 7, or 8.</p>
- </div>
<p>As of jQuery 1.6, the <code>.attr()</code> method returns <code>undefined</code> for attributes that have not been set. <strong>To retrieve and change DOM properties such as the <code>checked</code>, <code>selected</code>, or <code>disabled</code> state of form elements, use the <a href="/https/github.com/prop/">.prop()</a> method.</strong></p>
+ <note id="svg-support" type="additional"/>
<h4>Attributes vs. Properties</h4>
<p>The difference between <em>attributes</em> and <em>properties</em> can be important in specific situations. <strong>Before jQuery 1.6</strong>, the <code>.attr()</code> method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. <strong>As of jQuery 1.6</strong>, the <code>.prop()</code> method provides a way to explicitly retrieve property values, while <code>.attr()</code> retrieves attributes.</p>
<p>For example, <code>selectedIndex</code>, <code>tagName</code>, <code>nodeName</code>, <code>nodeType</code>, <code>ownerDocument</code>, <code>defaultChecked</code>, and <code>defaultSelected</code> should be retrieved and set with the <code><a href="/https/github.com/prop/">.prop()</a></code> method. Prior to jQuery 1.6, these properties were retrievable with the <code>.attr()</code> method, but this was not within the scope of <code>attr</code>. These do not have corresponding attributes and are only properties.</p>
- <p>Concerning boolean attributes, consider a DOM element defined by the HTML markup <code><input type="checkbox" checked="checked" /></code>, and assume it is in a JavaScript variable named <code>elem</code>:</p>
+ <p>Concerning boolean attributes, consider a DOM element defined by the HTML markup <code><input type="checkbox" checked="" /></code>, and assume it is in a JavaScript variable named <code>elem</code>:</p>
<table>
<tr>
<th>
@@ -46,21 +44,21 @@
<th>
<code>elem.getAttribute( "checked" )</code>
</th>
- <td><code>"checked"</code> (String) Initial state of the checkbox; does not change</td>
+ <td><code>""</code> (String) Initial state of the checkbox; does not change</td>
</tr>
<tr>
<th>
<code>$( elem ).attr( "checked" )</code>
- <em>(1.6)</em>
+ <em>(4.0+)</em>
</th>
- <td><code>"checked"</code> (String) Initial state of the checkbox; does not change</td>
+ <td><code>""</code> (String) Initial state of the checkbox; does not change</td>
</tr>
<tr>
<th>
<code>$( elem ).attr( "checked" )</code>
- <em>(1.6.1+)</em>
+ <em>(1.6-3.x)</em>
</th>
- <td><code>"checked"</code> (String) Will change with checkbox state</td>
+ <td><code>"checked"</code> (String) Initial state of the checkbox; does not change</td>
</tr>
<tr>
<th>
@@ -71,7 +69,7 @@
</tr>
</table>
<br/>
- <p>According to the <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.4">W3C forms specification</a>, the <code>checked</code> attribute is a <em><a href="http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2">boolean attribute</a></em>, which means the corresponding property is <strong>true</strong> if the attribute is present at all—even if, for example, the attribute has no value or is set to empty string value or even "false". This is true of all boolean attributes.</p>
+ <p>According to the <a href="https://www.w3.org/TR/html401/interact/forms.html#h-17.4">W3C forms specification</a>, the <code>checked</code> attribute is a <em><a href="https://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2">boolean attribute</a></em>, which means the corresponding property is <strong>true</strong> if the attribute is present at all—even if, for example, the attribute has no value or is set to empty string value or even "false". This is true of all boolean attributes.</p>
<p>Nevertheless, the most important concept to remember about the <code>checked</code> attribute is that it does not correspond to the <code>checked</code> property. The attribute actually corresponds to the <code>defaultChecked</code> property and should be used only to set the <em>initial</em> value of the checkbox. The <code>checked</code> attribute value does not change with the state of the checkbox, while the <code>checked</code> property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property:</p>
<ul>
<li>
@@ -91,13 +89,13 @@
<desc>Display the checked attribute and property of a checkbox as it changes.</desc>
<code><![CDATA[
$( "input" )
- .change(function() {
+ .on( "change", function() {
var $input = $( this );
$( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
- })
- .change();
+ } )
+ .trigger( "change" );
]]></code>
<css><![CDATA[
p {
@@ -140,6 +138,7 @@ The title of the emphasis is:<div></div>
<category slug="version/1.0"/>
<category slug="version/1.1"/>
<category slug="version/1.6"/>
+ <category slug="version/4.0"/>
</entry>
<entry type="method" name="attr" return="jQuery">
<signature>
@@ -150,7 +149,9 @@ The title of the emphasis is:<div></div>
<argument name="value">
<type name="String"/>
<type name="Number"/>
- <desc>A value to set for the attribute.</desc>
+ <type name="Null"/>
+ <type name="Boolean"/>
+ <desc>A value to set for the attribute. If <code>null</code>, the specified attribute will be removed (as in <a href="/https/github.com/removeAttr/"><code>.removeAttr()</code></a>). Non-ARIA attributes can also be removed by passing <code>false</code>.</desc>
</argument>
</signature>
<signature>
@@ -170,7 +171,7 @@ The title of the emphasis is:<div></div>
<argument name="attr" type="String" />
<return>
<type name="String"/>
- <type name="Number"/>
+ <type name="Number"/>
</return>
</argument>
</signature>
@@ -196,8 +197,15 @@ $( "#greatphoto" ).attr({
});
</code></pre>
<p>When setting multiple attributes, the quotes around attribute names are optional.</p>
+ <h4 id="removing-attr">Removing an attribute</h4>
+ <p>To remove an attribute, either call <code>.attr( name, null )</code> or use <a href="/https/github.com/removeAttr/"><code>.removeAttr( name )</code></a>. For non-ARIA attributes, in jQuery 4.0+ you can also call <code>.attr( name, false )</code>.</p>
+ <div class="warning">
+ <p><strong>Note:</strong> Because <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">ARIA</a> attributes frequently associate behavior with "false" values that differs from attribute absence, passing <code>false</code> as the value for an attribute whose name starts with <code>"aria-…"</code> will stringify that value to <code>"false"</code> rather than remove the attribute. To guarantee removal of an attribute, use the <code>.removeAttr()</code> method or provide <code>null</code> as the value to the <code>.attr()</code> setter.</p>
+ </div>
<p><strong>WARNING</strong>: When setting the 'class' attribute, you must always use quotes!</p>
- <p><strong>Note</strong>: jQuery prohibits changing the <code>type</code> attribute on an <code><input></code> or <code><button></code> element and will throw an error in all browsers. This is because the <code>type</code> attribute cannot be changed in Internet Explorer.</p>
+ <div class="warning">
+ <p><strong>Note:</strong> Attempting to change the <code>type</code> attribute on an <code>input</code> or <code>button</code> element created via <code>document.createElement()</code> will throw an exception on Internet Explorer 8 or older.</p>
+ </div>
<h4 id="computed-attr-values">Computed attribute values</h4>
<p>By using a function to set attributes, you can compute the value based on other properties of the element. For example, to concatenate a new value with an existing value:</p>
<pre><code>
@@ -206,7 +214,7 @@ $( "#greatphoto" ).attr( "title", function( i, val ) {
});
</code></pre>
<p>This use of a function to compute attribute values can be particularly useful when modifying the attributes of multiple elements at once.</p>
- <p><strong>Note: </strong>If nothing is returned in the setter function (ie. <code>function(index, attr){})</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>Note: </strong>If nothing is returned in the setter function (ie. <code>function(index, attr){}</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>
</longdesc>
<example>
<desc>Set some attributes for all <img>s in the page.</desc>
@@ -279,5 +287,6 @@ $( "img" ).attr( "src", function() {
<category slug="version/1.0"/>
<category slug="version/1.1"/>
<category slug="version/1.6"/>
+ <category slug="version/4.0"/>
</entry>
</entries>
diff --git a/entries/attribute-contains-prefix-selector.xml b/entries/attribute-contains-prefix-selector.xml
index 4b706bc6e..3465e6c29 100644
--- a/entries/attribute-contains-prefix-selector.xml
+++ b/entries/attribute-contains-prefix-selector.xml
@@ -8,7 +8,7 @@
<desc>An attribute name.</desc>
</argument>
<argument name="value" type="String">
- <desc>An attribute value. Can be either an unquoted single word or a quoted string.</desc>
+ <desc>An attribute value. Can be either a <a href="https://www.w3.org/TR/css3-selectors/#attribute-selectors">valid identifier</a> or a quoted string.</desc>
</argument>
</signature>
<desc>Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).</desc>
diff --git a/entries/attribute-contains-selector.xml b/entries/attribute-contains-selector.xml
index 8cb21dfc5..15e7778d4 100644
--- a/entries/attribute-contains-selector.xml
+++ b/entries/attribute-contains-selector.xml
@@ -8,7 +8,7 @@
<desc>An attribute name.</desc>
</argument>
<argument name="value" type="String">
- <desc>An attribute value. Can be either an unquoted single word or a quoted string.</desc>
+ <desc>An attribute value. Can be either a <a href="https://www.w3.org/TR/css3-selectors/#attribute-selectors">valid identifier</a> or a quoted string.</desc>
</argument>
</signature>
<desc>Selects elements that have the specified attribute with a value containing a given substring.</desc>
diff --git a/entries/attribute-contains-word-selector.xml b/entries/attribute-contains-word-selector.xml
index 18df4cbc8..8a71f37b0 100644
--- a/entries/attribute-contains-word-selector.xml
+++ b/entries/attribute-contains-word-selector.xml
@@ -8,7 +8,7 @@
<desc>An attribute name.</desc>
</argument>
<argument name="value" type="String">
- <desc>An attribute value. Can be either an unquoted single word or a quoted string.</desc>
+ <desc>An attribute value. Can be either a <a href="https://www.w3.org/TR/css3-selectors/#attribute-selectors">valid identifier</a> or a quoted string.</desc>
</argument>
</signature>
<desc>Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.</desc>
diff --git a/entries/attribute-ends-with-selector.xml b/entries/attribute-ends-with-selector.xml
index 0febbde71..cbdfe8089 100644
--- a/entries/attribute-ends-with-selector.xml
+++ b/entries/attribute-ends-with-selector.xml
@@ -8,7 +8,7 @@
<desc>An attribute name.</desc>
</argument>
<argument name="value" type="String">
- <desc>An attribute value. Can be either an unquoted single word or a quoted string.</desc>
+ <desc>An attribute value. Can be either a <a href="https://www.w3.org/TR/css3-selectors/#attribute-selectors">valid identifier</a> or a quoted string.</desc>
</argument>
</signature>
<desc>Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.</desc>
diff --git a/entries/attribute-equals-selector.xml b/entries/attribute-equals-selector.xml
index 555cf7c96..faa6e513f 100644
--- a/entries/attribute-equals-selector.xml
+++ b/entries/attribute-equals-selector.xml
@@ -8,7 +8,7 @@
<desc>An attribute name.</desc>
</argument>
<argument name="value" type="String">
- <desc>An attribute value. <strong>Can be either an unquoted single word or a quoted string.</strong></desc>
+ <desc>An attribute value. <strong>Can be either a <a href="https://www.w3.org/TR/css3-selectors/#attribute-selectors">valid identifier</a> or a quoted string.</strong></desc>
</argument>
</signature>
<desc>Selects elements that have the specified attribute with a value exactly equal to a certain value.</desc>
diff --git a/entries/attribute-not-equal-selector.xml b/entries/attribute-not-equal-selector.xml
index fabb6a2e6..38531ffcf 100644
--- a/entries/attribute-not-equal-selector.xml
+++ b/entries/attribute-not-equal-selector.xml
@@ -8,7 +8,7 @@
<desc>An attribute name.</desc>
</argument>
<argument name="value" type="String">
- <desc>An attribute value. Can be either an unquoted single word or a quoted string.</desc>
+ <desc>An attribute value. Can be either a <a href="https://www.w3.org/TR/css3-selectors/#attribute-selectors">valid identifier</a> or a quoted string.</desc>
</argument>
</signature>
<desc>Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value.</desc>
diff --git a/entries/attribute-starts-with-selector.xml b/entries/attribute-starts-with-selector.xml
index 3c2f69125..540676525 100644
--- a/entries/attribute-starts-with-selector.xml
+++ b/entries/attribute-starts-with-selector.xml
@@ -8,7 +8,7 @@
<desc>An attribute name.</desc>
</argument>
<argument name="value" type="String">
- <desc>An attribute value. Can be either an unquoted single word or a quoted string.</desc>
+ <desc>An attribute value. Can be either a <a href="https://www.w3.org/TR/css3-selectors/#attribute-selectors">valid identifier</a> or a quoted string.</desc>
</argument>
</signature>
<desc>Selects elements that have the specified attribute with a value beginning exactly with a given string.</desc>
diff --git a/entries/before.xml b/entries/before.xml
index cba817a9f..577f588b0 100644
--- a/entries/before.xml
+++ b/entries/before.xml
@@ -4,16 +4,18 @@
<signature>
<added>1.0</added>
<argument name="content">
- <desc>HTML string, DOM element, array of elements, or jQuery object to insert before each element in the set of matched elements.</desc>
+ <desc>HTML string, DOM element, text node, array of elements and text nodes, or jQuery object to insert before each element in the set of matched elements.</desc>
<type name="htmlString"/>
<type name="Element"/>
+ <type name="Text"/>
<type name="Array"/>
<type name="jQuery"/>
</argument>
<argument name="content" optional="true">
- <desc>One or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert before each element in the set of matched elements.</desc>
+ <desc>One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or jQuery objects to insert before each element in the set of matched elements.</desc>
<type name="htmlString"/>
<type name="Element"/>
+ <type name="Text"/>
<type name="Array"/>
<type name="jQuery"/>
</argument>
@@ -25,23 +27,25 @@
<return>
<type name="htmlString"/>
<type name="Element"/>
+ <type name="Text"/>
<type name="jQuery"/>
</return>
- <desc>A function that returns an HTML string, DOM element(s), or jQuery object to insert before each element in the set of matched elements. Receives the index position of the element in the set as an argument. Within the function, <code>this</code> refers to the current element in the set.
+ <desc>A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert before each element in the set of matched elements. Receives the index position of the element in the set as an argument. Within the function, <code>this</code> refers to the current element in the set.
</desc>
</argument>
</signature>
<signature>
- <added>1.10</added>
- <argument name="function" type="Function">
+ <added>1.10-and-2.0</added>
+ <argument name="function-html" type="Function">
<argument name="index" type="Integer" />
<argument name="html" type="String" />
<return>
<type name="htmlString"/>
<type name="Element"/>
+ <type name="Text"/>
<type name="jQuery"/>
</return>
- <desc>A function that returns an HTML string, DOM element(s), or jQuery object to insert before each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, <code>this</code> refers to the current element in the set.
+ <desc>A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert before each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, <code>this</code> refers to the current element in the set.
</desc>
</argument>
</signature>
@@ -87,7 +91,7 @@ $( ".container" ).before( $( "h2" ) );
<p>Similar to other content-adding methods such as <code><a href="/https/github.com/prepend/">.prepend()</a></code> and <code><a href="/https/github.com/after/">.after()</a></code>, <code>.before()</code> also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.</p>
<p>For example, the following will insert two new <code><div></code>s and an existing <code><div></code> before the first paragraph:</p>
<pre><code>
-var newdiv1 = $( "<div id='object1'/>" ),
+var newdiv1 = $( "<div id='object1'></div>" ),
newdiv2 = document.createElement( "div" ),
existingdiv1 = document.getElementById( "foo" );
diff --git a/entries/bind.xml b/entries/bind.xml
index a81e46a8d..aa45c4551 100644
--- a/entries/bind.xml
+++ b/entries/bind.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="bind" return="jQuery">
+<entry type="method" name="bind" return="jQuery" deprecated="3.0">
<title>.bind()</title>
<signature>
<added>1.0</added>
@@ -34,10 +34,10 @@
</signature>
<desc>Attach a handler to an event for the elements.</desc>
<longdesc>
- <p>As of jQuery 1.7, the <a href="/https/github.com/on/"><code>.on()</code></a> method is the preferred method for attaching event handlers to a document. For earlier versions, the <code>.bind()</code> method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements <em>must exist</em> at the point the call to <code>.bind()</code> occurs. For more flexible event binding, see the discussion of event delegation in <a href="/https/github.com/on/"><code>.on()</code></a> or <a href="/https/github.com/delegate/"><code>.delegate()</code></a>.</p>
+ <p>As of jQuery 3.0, <code>.bind()</code> has been deprecated. It was superseded by the <a href="/https/github.com/on/"><code>.on()</code></a> method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged. For earlier versions, the <code>.bind()</code> method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements <em>must exist</em> at the point the call to <code>.bind()</code> occurs. For more flexible event binding, see the discussion of event delegation in <a href="/https/github.com/on/"><code>.on()</code></a>.</p>
<p>Any string is legal for <code>eventType</code>; if the string is not the name of a native DOM event, then the handler is bound to a custom event. These events are never called by the browser, but may be triggered manually from other JavaScript code using <code>.trigger()</code> or <code>.triggerHandler()</code>.</p>
<p>If the <code>eventType</code> string contains a period (<code>.</code>) character, then the event is namespaced. The period character separates the event from its namespace. For example, in the call <code>.bind( "click.name", handler )</code>, the string <code>click</code> is the event type, and the string <code>name</code> is the namespace. Namespacing allows us to unbind or trigger some events of a type without affecting others. See the discussion of <code>.unbind()</code> for more information.</p>
- <p>There are shorthand methods for some standard browser events such as <a href="/https/github.com/click/"><code>.click()</code></a> that can be used to attach or trigger event handlers. For a complete list of shorthand methods, see the <a href="/https/github.com/category/events/">events category</a>.</p>
+ <p>Some events have dedicated pages, describing specifics of their usage. For a complete list of those events, see the <a href="/https/github.com/category/events/">events category</a>.</p>
<p>When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound. After all handlers have executed, the event continues along the normal event propagation path.</p>
<p>A basic usage of <code>.bind()</code> is:</p>
<pre><code>
@@ -221,7 +221,7 @@ $( "p" ).bind( "myCustomEvent", function( e, myName, myValue ) {
.fadeIn( 30 )
.fadeOut( 1000 );
});
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
]]></code>
@@ -259,4 +259,5 @@ $( "div.test" ).bind({
<category slug="version/1.0"/>
<category slug="version/1.4"/>
<category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.0"/>
</entry>
diff --git a/entries/blur-shorthand.xml b/entries/blur-shorthand.xml
new file mode 100644
index 000000000..589a1cebb
--- /dev/null
+++ b/entries/blur-shorthand.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0"?>
+<entry type="method" name="blur" return="jQuery" deprecated="3.3">
+ <title>.blur()</title>
+ <desc>Bind an event handler to the "blur" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.blur( handler )</code> or <code>.blur( eventData, handler )</code>, use <a href="/https/github.com/blur/#on1"><code>.on( "blur", handler )</code></a> or <a href="/https/github.com/blur/#on1"><code>.on( "blur", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.blur()</code>, use <a href="/https/github.com/blur/#trigger2"><code>.trigger( "blur" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/form-events"/>
+ <category slug="forms"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/blur.xml b/entries/blur.xml
index 747a7d1e6..68636a0ce 100644
--- a/entries/blur.xml
+++ b/entries/blur.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="blur" return="jQuery">
- <title>.blur()</title>
- <desc>Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.</desc>
+<entries>
+
+<desc>Bind an event handler to the "blur" event, or trigger that event on an element.</desc>
+<entry type="method" name="on" return="jQuery">
+ <title>blur event</title>
+ <desc>Bind an event handler to the "blur" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""blur"" type="string">
+ <desc>The string <code>"blur"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,11 +18,10 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
- <p>This method is a shortcut for <code>.on( "blur", handler )</code> in the first two variations, and <code>.trigger( "blur" )</code> in the third.</p>
+ <div class="warning">
+ <p>This page describes the <code>blur</code> event. For the deprecated <code>.blur()</code> method, see <a href="/https/github.com/blur-shorthand/"><code>.blur()</code></a>.</p>
+ </div>
<p>The <code>blur</code> event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as <code><input></code>. In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.</p>
<p>For example, consider the HTML:</p>
<pre><code>
@@ -34,32 +32,55 @@
<div id="other">
Trigger the handler
</div>
-The event handler can be bound to the first input field:
-$( "#target" ).blur(function() {
- alert( "Handler for .blur() called." );
-});
+ </code></pre>
+ <p>The event handler can be bound to the first input field:</p>
+ <pre><code>
+$( "#target" ).on( "blur", function() {
+ alert( "Handler for `blur` called." );
+} );
</code></pre>
<p>Now if the first field has the focus, clicking elsewhere or tabbing away from it displays the alert:</p>
<p>
- <samp>Handler for .blur() called.</samp>
+ <samp>Handler for `blur` called.</samp>
</p>
- <p>To trigger the event programmatically, apply <code>.blur()</code> without an argument:</p>
+ <p>To trigger the event programmatically, call <code>.trigger( "blur" )</code>:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( "#target" ).blur();
-});
+$( "#other" ).on( "click", function() {
+ $( "#target" ).trigger( "blur" );
+} );
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also alert the message.</p>
- <p>The <code>blur</code> event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the <code>blur</code> event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping <code>blur</code> to the <code>focusout</code> event in its event delegation methods, <a href="/https/github.com/live/"><code>.live()</code></a> and <a href="/https/github.com/delegate/"><code>.delegate()</code></a>.</p>
+ <p>The <code>blur</code> event does not bubble. As of version 1.4.2, jQuery works around this limitation by mapping <code>blur</code> to the <code>focusout</code> event in its event delegation methods.</p>
+ <p>The native <code>blur</code> event is asynchronous in all versions of IE, contrary to other browsers. To avoid issues related to this discrepancy, as of jQuery 3.7.0, jQuery uses <code>focusout</code> as the native backing event for <code>blur</code> in IE.</p>
</longdesc>
<example>
<desc>To trigger the blur event on all paragraphs:</desc>
<code><![CDATA[
-$( "p" ).blur();
+$( "p" ).trigger( "blur" );
]]></code>
</example>
<category slug="events/form-events"/>
<category slug="forms"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
+ <category slug="version/3.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>blur event</title>
+ <desc>Trigger the "blur" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""blur"" type="string">
+ <desc>The string <code>"blur"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "blur", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/form-events"/>
+ <category slug="forms"/>
+ <category slug="version/1.0"/>
</entry>
+
+</entries>
diff --git a/entries/button-selector.xml b/entries/button-selector.xml
index 858522e5c..12c8471cd 100644
--- a/entries/button-selector.xml
+++ b/entries/button-selector.xml
@@ -16,9 +16,9 @@
var input = $( ":button" ).addClass( "marked" );
$( "div" ).text( "For this type jQuery found " + input.length + "." );
// Prevent the form from submitting
-$( "form" ).submit(function( event ) {
+$( "form" ).on( "submit", function( event ) {
event.preventDefault();
-});
+} );
]]></code>
<css><![CDATA[
textarea {
diff --git a/entries/callbacks.fire.xml b/entries/callbacks.fire.xml
index 00ec03f36..daae9b1f2 100644
--- a/entries/callbacks.fire.xml
+++ b/entries/callbacks.fire.xml
@@ -7,7 +7,7 @@
<desc>The argument or list of arguments to pass back to the callback list.</desc>
</argument>
</signature>
- <desc>Call all of the callbacks with the given arguments</desc>
+ <desc>Call all of the callbacks with the given arguments.</desc>
<longdesc>
<p>This method returns the Callbacks object onto which it is attached (<code>this</code>).</p>
</longdesc>
diff --git a/entries/callbacks.fireWith.xml b/entries/callbacks.fireWith.xml
index dfb2adb35..7527e1822 100644
--- a/entries/callbacks.fireWith.xml
+++ b/entries/callbacks.fireWith.xml
@@ -3,11 +3,11 @@
<title>callbacks.fireWith()</title>
<signature>
<added>1.7</added>
- <argument name="context" optional="true">
+ <argument name="context" optional="true" type="Anything">
<desc>A reference to the context in which the callbacks in the list should be fired.</desc>
</argument>
- <argument name="args" optional="true">
- <desc>An argument, or array of arguments, to pass to the callbacks in the list.</desc>
+ <argument name="args" optional="true" type="ArrayLikeObject">
+ <desc>An array or array-like object of arguments to pass to the callbacks in the list. If omitted or undefined, no arguments will be passed.</desc>
</argument>
</signature>
<desc>Call all callbacks in a list with the given context and arguments.</desc>
diff --git a/entries/change-shorthand.xml b/entries/change-shorthand.xml
new file mode 100644
index 000000000..98d9509a2
--- /dev/null
+++ b/entries/change-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="change" return="jQuery" deprecated="3.3">
+ <title>.change()</title>
+ <desc>Bind an event handler to the "change" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.change( handler )</code> or <code>.change( eventData, handler )</code>, use <a href="/https/github.com/change/#on1"><code>.on( "change", handler )</code></a> or <a href="/https/github.com/change/#on1"><code>.on( "change", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.change()</code>, use <a href="/https/github.com/change/#trigger2"><code>.trigger( "change" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/form-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/change.xml b/entries/change.xml
index 4884ff1e2..e179c5061 100644
--- a/entries/change.xml
+++ b/entries/change.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="change" return="jQuery">
- <title>.change()</title>
- <desc>Bind an event handler to the "change" JavaScript event, or trigger that event on an element.</desc>
+<entries>
+<desc>Bind an event handler to the "change" event, or trigger that event on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>change event</title>
+ <desc>Bind an event handler to the "change" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""change"" type="string">
+ <desc>The string <code>"change"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,11 +18,10 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
- <p>This method is a shortcut for <code>.on( "change", handler )</code> in the first two variations, and <code>.trigger( "change" )</code> in the third.</p>
+ <div class="warning">
+ <p>This page describes the <code>change</code> event. For the deprecated <code>.change()</code> method, see <a href="/https/github.com/change-shorthand/"><code>.change()</code></a>.</p>
+ </div>
<p>The <code>change</code> event is sent to an element when its value changes. This event is limited to <code><input></code> elements, <code><textarea></code> boxes and <code><select></code> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.</p>
<p>For example, consider the HTML:</p>
<pre><code>
@@ -40,31 +38,34 @@
</code></pre>
<p>The event handler can be bound to the text input and the select box:</p>
<pre><code>
-$( ".target" ).change(function() {
- alert( "Handler for .change() called." );
-});
+$( ".target" ).on( "change", function() {
+ alert( "Handler for `change` called." );
+} );
</code></pre>
- <p>Now when the second option is selected from the dropdown, the alert is displayed. It is also displayed if you change the text in the field and then click away. If the field loses focus without the contents having changed, though, the event is not triggered. To trigger the event manually, apply <code>.change()</code> without arguments:</p>
+ <p>Now when the second option is selected from the dropdown, the alert is displayed. It is also displayed if you change the text in the field and then click away. If the field loses focus without the contents having changed, though, the event is not triggered. To trigger the event manually, use <code>.trigger( "change" )</code>:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( ".target" ).change();
-});
+$( "#other" ).on( "click", function() {
+ $( ".target" ).trigger( "change" );
+} );
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also alert the message. The message will display twice, because the handler has been bound to the <code>change</code> event on both of the form elements.</p>
<p>As of jQuery 1.4, the <code>change</code> event bubbles in Internet Explorer, behaving consistently with the event in other modern browsers.</p>
+ <div class="warning">
+ <p><strong>Note: </strong>Changing the value of an input element using JavaScript, using <a href="/https/github.com/val"><code>.val()</code></a> for example, won't fire the event.</p>
+ </div>
</longdesc>
<example>
<desc>Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw.</desc>
<code><![CDATA[
$( "select" )
- .change(function () {
+ .on( "change", function() {
var str = "";
- $( "select option:selected" ).each(function() {
+ $( "select option:selected" ).each( function() {
str += $( this ).text() + " ";
- });
+ } );
$( "div" ).text( str );
- })
- .change();
+ } )
+ .trigger( "change" );
]]></code>
<css><![CDATA[
div {
@@ -86,13 +87,31 @@ $( "select" )
<example>
<desc>To add a validity test to all text input elements:</desc>
<code><![CDATA[
-$( "input[type='text']" ).change(function() {
+$( "input[type='text']" ).on( "change", function() {
// Check input( $( this ).val() ) for validity here
-});
+} );
]]></code>
</example>
<category slug="events/form-events"/>
<category slug="forms"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>change event</title>
+ <desc>Trigger the "change" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""change"" type="string">
+ <desc>The string <code>"change"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "change", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/form-events"/>
+ <category slug="version/1.0"/>
</entry>
+
+</entries>
diff --git a/entries/checkbox-selector.xml b/entries/checkbox-selector.xml
index 843cdaf77..ba0fd815d 100644
--- a/entries/checkbox-selector.xml
+++ b/entries/checkbox-selector.xml
@@ -26,9 +26,9 @@ $( "div" )
.css( "color", "red" );
// Prevent the form from submitting
-$( "form" ).submit(function( event ) {
+$( "form" ).on( "submit", function( event ) {
event.preventDefault();
-});
+} );
]]></code>
<css><![CDATA[
textarea {
diff --git a/entries/checked-selector.xml b/entries/checked-selector.xml
index ebf96c2be..5d49ebcd7 100644
--- a/entries/checked-selector.xml
+++ b/entries/checked-selector.xml
@@ -7,7 +7,8 @@
</signature>
<desc>Matches all elements that are checked or selected.</desc>
<longdesc>
- <p>The <code>:checked</code> selector works for checkboxes, radio buttons, and select elements. For select elements only, use the <code>:selected</code> selector.</p>
+ <p>The <code>:checked</code> selector works for checkboxes, radio buttons, and options of <code>select</code> elements.</p>
+ <p>To retrieve only the selected options of <code>select</code> elements, use the <a href="/https/github.com/selected-selector/"><code>:selected</code></a> selector.</p>
</longdesc>
<example>
<desc>Determine how many input elements are checked.</desc>
diff --git a/entries/child-selector.xml b/entries/child-selector.xml
index 5016a1b35..1b1b27c2b 100644
--- a/entries/child-selector.xml
+++ b/entries/child-selector.xml
@@ -13,7 +13,6 @@
</signature>
<desc>Selects all direct child elements specified by "child" of elements specified by "parent".</desc>
<longdesc>
- <p>As a CSS selector, the child combinator is supported by all modern web browsers including Safari, Firefox, Opera, Chrome, and Internet Explorer 7 and above, but notably not by Internet Explorer versions 6 and below. However, in jQuery, this selector (along with all others) works across all supported browsers, including IE6.</p>
<p>The child combinator (E <strong>></strong> F) can be thought of as a more specific form of the descendant combinator (E F) in that it selects only first-level descendants.</p>
</longdesc>
<example>
diff --git a/entries/children.xml b/entries/children.xml
index 8437acc52..5880351b7 100644
--- a/entries/children.xml
+++ b/entries/children.xml
@@ -38,16 +38,16 @@
<example>
<desc>Find all children of the clicked element.</desc>
<code><![CDATA[
-$( "#container" ).click(function ( event ) {
+$( "#container" ).on( "click", function( event ) {
$( "*" ).removeClass( "hilite" );
var kids = $( event.target ).children();
var len = kids.addClass( "hilite" ).length;
- $( "#results span:first" ).text( len );
- $( "#results span:last" ).text( event.target.tagName );
+ $( "#results span" ).first().text( len );
+ $( "#results span" ).last().text( event.target.tagName );
event.preventDefault();
-});
+} );
]]></code>
<css><![CDATA[
body {
diff --git a/entries/clearQueue.xml b/entries/clearQueue.xml
index 85baeeb23..19c2f0088 100644
--- a/entries/clearQueue.xml
+++ b/entries/clearQueue.xml
@@ -14,7 +14,7 @@
<example>
<desc>Empty the queue.</desc>
<code><![CDATA[
-$( "#start" ).click(function() {
+$( "#start" ).on( "click", function() {
var myDiv = $( "div" );
myDiv.show( "slow" );
myDiv.animate({
@@ -38,7 +38,7 @@ $( "#start" ).click(function() {
myDiv.slideUp();
});
-$( "#stop" ).click(function() {
+$( "#stop" ).on( "click", function() {
var myDiv = $( "div" );
myDiv.clearQueue();
myDiv.stop();
diff --git a/entries/click-shorthand.xml b/entries/click-shorthand.xml
new file mode 100644
index 000000000..374e9f74b
--- /dev/null
+++ b/entries/click-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="click" return="jQuery" deprecated="3.3">
+ <title>.click()</title>
+ <desc>Bind an event handler to the "click" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.click( handler )</code> or <code>.click( eventData, handler )</code>, use <a href="/https/github.com/click/#on1"><code>.on( "click", handler )</code></a> or <a href="/https/github.com/click/#on1"><code>.on( "click", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.click()</code>, use <a href="/https/github.com/click/#trigger2"><code>.trigger( "click" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/click.xml b/entries/click.xml
index 9be0e863f..c5f9deb2b 100644
--- a/entries/click.xml
+++ b/entries/click.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="click" return="jQuery">
- <title>.click()</title>
- <desc>Bind an event handler to the "click" JavaScript event, or trigger that event on an element.</desc>
+<entries>
+
+<desc>Bind an event handler to the "click" event, or trigger that event on an element.</desc>
+<entry type="method" name="on" return="jQuery">
+ <title>click event</title>
+ <desc>Bind an event handler to the "click" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""click"" type="string">
+ <desc>The string <code>"click"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,12 +18,11 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
- <p>This method is a shortcut for <code>.on( "click", handler )</code> in the first two variations, and <code>.trigger( "click" )</code> in the third.
- The <code>click</code> event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event.
+ <div class="warning">
+ <p>This page describes the <code>click</code> event. For the deprecated <code>.click()</code> method, see <a href="/https/github.com/click-shorthand/"><code>.click()</code></a>.</p>
+ </div>
+ <p>The <code>click</code> event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event.
For example, consider the HTML:</p>
<pre><code>
<div id="target">
@@ -34,24 +32,25 @@
Trigger the handler
</div>
</code></pre>
- <p class="image">
+ <figure>
<img src="/https/github.com/resources/0042_05_03.png" alt=""/>
- </p>
+ <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
+ </figure>
<p>The event handler can be bound to any <code><div></code>:</p>
<pre><code>
-$( "#target" ).click(function() {
- alert( "Handler for .click() called." );
-});
+$( "#target" ).on( "click", function() {
+ alert( "Handler for `click` called." );
+} );
</code></pre>
<p>Now if we click on this element, the alert is displayed:</p>
<p>
- <samp>Handler for .click() called.</samp>
+ <samp>Handler for `click` called.</samp>
</p>
<p>We can also trigger the event when a different element is clicked:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( "#target" ).click();
-});
+$( "#other" ).on( "click", function() {
+ $( "#target" ).trigger( "click" );
+} );
</code></pre>
<p>After this code executes, clicking on <samp>Trigger the handler</samp> will also alert the message.</p>
<p>The <code>click</code> event is only triggered after this exact series of events:</p>
@@ -64,9 +63,9 @@ $( "#other" ).click(function() {
<example>
<desc>Hide paragraphs on a page when they are clicked:</desc>
<code><![CDATA[
-$( "p" ).click(function() {
+$( "p" ).on( "click", function() {
$( this ).slideUp();
-});
+} );
]]></code>
<css><![CDATA[
p {
@@ -85,12 +84,30 @@ $( "p" ).click(function() {
]]></html>
</example>
<example>
- <desc>Trigger the click event on all of the paragraphs on the page:</desc>
+ <desc>Trigger the click event on all the paragraphs on the page:</desc>
<code><![CDATA[
-$( "p" ).click();
+$( "p" ).trigger( "click" );
]]></code>
</example>
<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>click event</title>
+ <desc>Trigger the "click" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""click"" type="string">
+ <desc>The string <code>"click"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "click", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
</entry>
+
+</entries>
diff --git a/entries/clone.xml b/entries/clone.xml
index 91d7bc291..764b66686 100644
--- a/entries/clone.xml
+++ b/entries/clone.xml
@@ -63,7 +63,7 @@ $( ".hello" ).clone().appendTo( ".goodbye" );
<p>However, objects and arrays within element data are not copied and will continue to be shared between the cloned element and the original element. To deep copy all data, copy each one manually:</p>
<pre><code>
// Original element with attached data
-var $elem = $( "#elem" ).data( "arr": [ 1 ] ),
+var $elem = $( "#elem" ).data( "arr", [ 1 ] ),
$clone = $elem.clone( true )
// Deep copy to prevent data sharing
.data( "arr", $.extend( [], $elem.data( "arr" ) ) );
diff --git a/entries/closest.xml b/entries/closest.xml
index 5f1bb2b41..903ba1a74 100644
--- a/entries/closest.xml
+++ b/entries/closest.xml
@@ -14,7 +14,7 @@
<desc>A string containing a selector expression to match elements against.</desc>
</argument>
<argument name="context" optional="true" type="Element">
- <desc>A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.</desc>
+ <desc>A DOM element within which a matching element may be found.</desc>
</argument>
</signature>
<signature>
@@ -109,7 +109,7 @@ $( "li.item-a" )
<desc>Show how event delegation can be done with closest. The closest list element toggles a yellow background when it or its descendent is clicked.</desc>
<code><![CDATA[
$( document ).on( "click", function( event ) {
- $( event.target ).closest( "li" ).toggleClass( "hilight" );
+ $( event.target ).closest( "li" ).toggleClass( "highlight" );
});
]]></code>
<css><![CDATA[
@@ -118,7 +118,7 @@ $( document ).on( "click", function( event ) {
padding: 3px;
background: #EEEEEE;
}
- li.hilight {
+ li.highlight {
background: yellow;
}
]]></css>
@@ -134,7 +134,7 @@ $( document ).on( "click", function( event ) {
<code><![CDATA[
var listElements = $( "li" ).css( "color", "blue" );
$( document ).on( "click", function( event ) {
- $( event.target ).closest( listElements ).toggleClass( "hilight" );
+ $( event.target ).closest( listElements ).toggleClass( "highlight" );
});
]]></code>
<css><![CDATA[
@@ -143,7 +143,7 @@ $( document ).on( "click", function( event ) {
padding: 3px;
background: #EEEEEE;
}
- li.hilight {
+ li.highlight {
background: yellow;
}
]]></css>
@@ -166,7 +166,7 @@ $( document ).on( "click", function( event ) {
<desc>An array or string containing a selector expression to match elements against (can also be a jQuery object).</desc>
</argument>
<argument name="context" optional="true" type="Element">
- <desc>A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.</desc>
+ <desc>A DOM element within which a matching element may be found.</desc>
</argument>
</signature>
<desc>Get an array of all the elements and selectors matched against the current element up through the DOM tree.</desc>
diff --git a/entries/contains-selector.xml b/entries/contains-selector.xml
index e14882698..c471083f8 100644
--- a/entries/contains-selector.xml
+++ b/entries/contains-selector.xml
@@ -25,5 +25,6 @@ $( "div:contains('John')" ).css( "text-decoration", "underline" );
]]></html>
</example>
<category slug="selectors/content-filter-selector"/>
+ <category slug="selectors/jquery-selector-extensions"/>
<category slug="version/1.1.4"/>
</entry>
diff --git a/entries/contents.xml b/entries/contents.xml
index 833aea251..6cfa73bae 100644
--- a/entries/contents.xml
+++ b/entries/contents.xml
@@ -6,8 +6,9 @@
</signature>
<desc>Get the children of each element in the set of matched elements, including text and comment nodes.</desc>
<longdesc>
- <p>Given a jQuery object that represents a set of DOM elements, the <code>.contents()</code> method allows us to search throughthe 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 as well as HTML elements in the resulting jQuery object.</p>
+ <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><template></code> elements as well.</p>
<p>Consider a simple <code><div></code> with a number of text nodes, each of which is separated by two line break elements (<code><br></code>):</p>
<pre><code>
<div class="container">
@@ -33,7 +34,7 @@ $( ".container" )
.filter( "br" )
.remove();
</code></pre>
- <p>This code first retrieves the contents of <code><div class="container"></code> and then filters it for text nodes, which are wrapped in paragraph tags. This is accomplished by testing the <a href="https://developer.mozilla.org/en/nodeType"><code>.nodeType</code> property</a> of the element. This DOM property holds a numeric code indicating the node's type; text nodes use the code 3. The contents are again filtered, this time for <code><br /></code> elements, and these elements are removed.</p>
+ <p>This code first retrieves the contents of <code><div class="container"></code> and then filters it for text nodes, which are wrapped in paragraph tags. This is accomplished by testing the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType"><code>.nodeType</code> property</a> of the element. This DOM property holds a numeric code indicating the node's type; text nodes use the code 3. The contents are again filtered, this time for <code><br /></code> elements, and these elements are removed.</p>
</longdesc>
<example>
<desc>Find all the text nodes inside a paragraph and wrap them with a bold tag.</desc>
@@ -46,18 +47,19 @@ $( "p" )
.wrap( "<b></b>" );
]]></code>
<html><![CDATA[
-<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
+<p>Hello <a href="https://johnresig.com/">John</a>, how are you doing?</p>
]]></html>
</example>
<example>
- <desc>Change the background colour of links inside of an iframe.</desc>
+ <desc>Change the background color of links inside of an iframe.</desc>
<code><![CDATA[
$( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );
]]></code>
<html><![CDATA[
-<iframe src="//api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe>
+<iframe src="https://api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe>
]]></html>
</example>
<category slug="traversing/miscellaneous-traversal"/>
<category slug="version/1.2"/>
+ <category slug="version/3.2"/>
</entry>
diff --git a/entries/context.xml b/entries/context.xml
index a7377fa1a..cd9c3cc41 100644
--- a/entries/context.xml
+++ b/entries/context.xml
@@ -1,12 +1,14 @@
<?xml version="1.0"?>
-<entry type="property" name="context" return="Element" deprecated="1.10">
+<entry type="property" name="context" return="Element" deprecated="1.10-and-2.0" removed="3.0">
<title>.context</title>
<signature>
<added>1.3</added>
</signature>
<desc>The DOM node context originally passed to <code>jQuery()</code>; if none was passed then context will likely be the document.</desc>
<longdesc>
- <p>The <code>.context</code> property was deprecated in jQuery 1.10 and is only maintained to the extent needed for supporting <code>.live()</code> in the jQuery Migrate plugin. It may be removed without notice in a future version.</p>
+ <div class="warning">
+ <p>Note: This API has been removed in jQuery 3.0.</p>
+ </div>
<p>The <code>.live()</code> method for binding event handlers uses this property to determine the root element to use for its event delegation needs.</p>
<p>The value of this property is typically equal to <code>document</code>, as this is the default context for jQuery objects if none is supplied. The context may differ if, for example, the object was created by searching within an <code><iframe></code> or XML document.</p>
<p>Note that the context property may only apply to the elements originally selected by <code>jQuery()</code>, as it is possible for the user to add elements to the collection via methods such as <code>.add()</code> and these may have a different context.</p>
@@ -18,12 +20,10 @@ $( "ul" )
.append( "<li>" + $( "ul" ).context + "</li>" )
.append( "<li>" + $( "ul", document.body ).context.nodeName + "</li>" );
]]></code>
- <html><![CDATA[
-Context: <ul></ul>
-]]></html>
</example>
<category slug="internals"/>
<category slug="properties/jquery-object-instance-properties"/>
<category slug="version/1.3"/>
- <category slug="deprecated/deprecated-1.10"/>
+ <category slug="deprecated/deprecated-1.10-and-2.0"/>
+ <category slug="removed"/>
</entry>
diff --git a/entries/contextmenu-shorthand.xml b/entries/contextmenu-shorthand.xml
new file mode 100644
index 000000000..9b1f48736
--- /dev/null
+++ b/entries/contextmenu-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="contextmenu" return="jQuery" deprecated="3.3">
+ <title>.contextmenu()</title>
+ <desc>Bind an event handler to the "contextmenu" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.contextmenu( handler )</code> or <code>.contextmenu( eventData, handler )</code>, use <a href="/https/github.com/contextmenu/#on1"><code>.on( "contextmenu", handler )</code></a> or <a href="/https/github.com/contextmenu/#on1"><code>.on( "contextmenu", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.contextmenu()</code>, use <a href="/https/github.com/contextmenu/#trigger2"><code>.trigger( "contextmenu" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/contextmenu.xml b/entries/contextmenu.xml
new file mode 100644
index 000000000..63d9c179c
--- /dev/null
+++ b/entries/contextmenu.xml
@@ -0,0 +1,105 @@
+<?xml version="1.0"?>
+<entries>
+<desc>Bind an event handler to the "contextmenu" event, or trigger that event on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>contextmenu event</title>
+ <desc>Bind an event handler to the "contextmenu" event.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This page describes the <code>contextmenu</code> event. For the deprecated <code>.contextmenu()</code> method, see <a href="/https/github.com/contextmenu-shorthand/"><code>.contextmenu()</code></a>.</p>
+ </div>
+ <p>The <code>contextmenu</code> event is sent to an element when the right button of the mouse is clicked on it, but before the context menu is displayed. In case the context menu key is pressed, the event is triggered on the <code>html</code> element or the currently focused element. Any HTML element can receive this event.
+ For example, consider the HTML:</p>
+ <pre><code>
+<div id="target">
+ Right-click here
+</div>
+ </code></pre>
+ <p>The event handler can be bound to the <code><div></code> as follows:</p>
+ <pre><code>
+$( "#target" ).on( "contextmenu", function() {
+ alert( "Handler for `contextmenu` called." );
+} );
+ </code></pre>
+ <p>Now right-clicking on this element displays the alert:</p>
+ <p>
+ <samp>Handler for `contextmenu` called.</samp>
+ </p>
+ <p>To trigger the event manually, use <code>.trigger( "contextmenu" )</code>:</p>
+ <pre><code>
+$( "#target" ).trigger( "contextmenu" );
+ </code></pre>
+ </longdesc>
+ <example>
+ <desc>To show a "Hello World!" alert box when the contextmenu event is triggered on a paragraph on the page:</desc>
+ <code><![CDATA[
+$( "p" ).on( "contextmenu", function() {
+ alert( "Hello World!" );
+} );
+]]></code>
+ </example>
+ <example>
+ <desc>Right click to toggle background color.</desc>
+ <code><![CDATA[
+var div = $( "div" ).first();
+div.on( "contextmenu", function() {
+ div.toggleClass( "contextmenu" );
+} );
+]]></code>
+ <css><![CDATA[
+ div {
+ background: blue;
+ color: white;
+ height: 100px;
+ width: 150px;
+ }
+ div.contextmenu {
+ background: yellow;
+ color: black;
+ }
+]]></css>
+ <html><![CDATA[
+<div></div>
+<span>Right click the block</span>
+]]></html>
+ </example>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>contextmenu event</title>
+ <desc>Trigger the "contextmenu" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""contextmenu"" type="string">
+ <desc>The string <code>"contextmenu"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "contextmenu", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
+</entry>
+
+</entries>
diff --git a/entries/css.xml b/entries/css.xml
index 178fc326f..85a304e82 100644
--- a/entries/css.xml
+++ b/entries/css.xml
@@ -1,6 +1,6 @@
<?xml version="1.0"?>
<entries>
- <desc>Get the value of a style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.</desc>
+ <desc>Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.</desc>
<entry type="method" name="css" return="String">
<title>.css()</title>
<signature>
@@ -17,16 +17,18 @@
</signature>
<desc>Get the computed style properties for the first element in the set of matched elements.</desc>
<longdesc>
- <p>The <code>.css()</code> method is a convenient way to get a style property from the first matched element, especially in light of the different ways browsers access most of those properties (the <code>getComputedStyle()</code> method in standards-based browsers versus the <code>currentStyle</code> and <code>runtimeStyle</code> properties in Internet Explorer) and the different terms browsers use for certain properties. For example, Internet Explorer's DOM implementation refers to the <code>float</code> property as <code>styleFloat</code>, while W3C standards-compliant browsers refer to it as <code>cssFloat</code>. For consistency, you can simply use <code>"float"</code>, and jQuery will translate it to the correct value for each browser.</p>
- <p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css( "background-color" )</code> and <code>.css( "backgroundColor" )</code>.</p>
- <p>Note that the <em>computed style</em> of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).</p>
+ <p>The <code>.css()</code> method is a convenient way to get a computed style property from the first matched element, especially in light of the different ways browsers access most of those properties (the <code>getComputedStyle()</code> method in standards-based browsers versus the <code>currentStyle</code> and <code>runtimeStyle</code> properties in Internet Explorer prior to version 9) and the different terms browsers use for certain properties. For example, Internet Explorer's DOM implementation refers to the <code>float</code> property as <code>styleFloat</code>, while W3C standards-compliant browsers refer to it as <code>cssFloat</code>. For consistency, you can simply use <code>"float"</code>, and jQuery will translate it to the correct value for each browser.</p>
+ <p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css( "background-color" )</code> and <code>.css( "backgroundColor" )</code>. This means mixed case has a special meaning, <code>.css( "WiDtH" )</code> won't do the same as <code>.css( "width" )</code>, for example.</p>
+ <p>Note that the <em>computed style</em> of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).</p>
<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>
<code><![CDATA[
-$( "div" ).click(function() {
+$( "div" ).on( "click", function() {
var color = $( this ).css( "background-color" );
$( "#result" ).html( "That div is <span style='color:" +
color + ";'>" + color + "</span>." );
@@ -52,7 +54,7 @@ $( "div" ).click(function() {
<example>
<desc>Get the width, height, text color, and background color of a clicked div.</desc>
<code><![CDATA[
-$( "div" ).click(function() {
+$( "div" ).on( "click", function() {
var html = [ "The clicked div has the following styles:" ];
var styleProps = $( this ).css([
@@ -105,6 +107,8 @@ $( "div" ).click(function() {
<category slug="version/1.0"/>
<category slug="version/1.4"/>
<category slug="version/1.9"/>
+ <category slug="version/3.2"/>
+ <category slug="version/4.0"/>
</entry>
<entry type="method" name="css" return="jQuery">
<signature>
@@ -127,7 +131,7 @@ $( "div" ).click(function() {
<desc>A function returning the value to set. <code>this</code> is the current element. Receives the index position of the element in the set and the old value as arguments.</desc>
<argument name="index" type="Integer" />
<argument name="value" type="String" />
- <return>
+ <return>
<type name="String"/>
<type name="Number"/>
</return>
@@ -143,7 +147,18 @@ $( "div" ).click(function() {
<longdesc>
<p>As with the <code>.prop()</code> method, the <code>.css()</code> method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single object of key-value pairs.</p>
<p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" })</code> and <code>.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" })</code>. Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.</p>
- <p>When using <code>.css()</code> as a setter, jQuery modifies the element's <code>style</code> property. For example, <code>$( "#mydiv" ).css( "color", "green" )</code> is equivalent to <code>document.getElementById( "mydiv" ).style.color = "green"</code>. Setting the value of a style property to an empty string — e.g. <code>$( "#mydiv" ).css( "color", "" )</code> — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's <code>.css()</code> method, or through direct DOM manipulation of the <code>style</code> property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <code><style></code> element. <strong>Warning:</strong> one notable exception is that, for IE 8 and below, removing a shorthand property such as <code>border</code> or <code>background</code> will remove that style entirely from the element, regardless of what is set in a stylesheet or <code><style></code> element.</p>
+ <p>In jQuery 3.x or older, when a number is passed as the value, jQuery will convert it to a string and add <code>px</code> to the end of that string. However, there are exceptions. <code>px</code> is not added to keys of <a href="/https/github.com/jQuery.cssNumber/"><code>jQuery.cssNumber</code></a> If the property requires units other than <code>px</code>, convert the value to a string and add the appropriate units before calling the method.</p>
+ <p>In jQuery 4.0 or newer, when a number is passed as the value, jQuery will only convert it to a string and add <code>px</code> to the end of that string for a limited set of properties - mostly related to width, height, border, margin & padding; the full list:</p>
+ <ul>
+ <li>setting the element position: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code></li>
+ <li>setting the element dimensions: <code>width</code>, <code>height</code>, <code>min-width</code>, <code>min-height</code>, <code>max-width</code>, <code>max-height</code></li>
+ <li><code>padding-related</code>: <code>padding</code>, <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code></li>
+ <li><code>margin</code>-related: <code>margin</code>, <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, <code>margin-left</code></li>
+ <li><code>border</code>-related: <code>border</code>, <code>border-width</code>, <code>border-top</code>, <code>border-top-width</code>, <code>border-right</code>, <code>border-right-width</code>, <code>border-bottom</code>, <code>border-bottom-width</code>, <code>border-left</code>, <code>border-left-width</code></li>
+ </ul>
+ <p>When using <code>.css()</code> as a setter, jQuery modifies the element's <code>style</code> property. For example, <code>$( "#mydiv" ).css( "color", "green" )</code> is equivalent to <code>document.getElementById( "mydiv" ).style.color = "green"</code>. Setting the value of a style property to an empty string — e.g. <code>$( "#mydiv" ).css( "color", "" )</code> — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's <code>.css()</code> method, or through direct DOM manipulation of the <code>style</code> property. As a consequence, the element's style for that property will be restored to whatever value was applied. So, this method can be used to cancel any style modification you have previously performed. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <code><style></code> element. <strong>Warning:</strong> one notable exception is that, for IE 8 and below, removing a shorthand property such as <code>border</code> or <code>background</code> will remove that style entirely from the element, regardless of what is set in a stylesheet or <code><style></code> element.</p>
+ <p><strong>Note:</strong> <code>.css()</code> doesn't support <code>!important</code> declarations. So, the statement <code>$( "p" ).css( "color", "red !important" )</code> does not turn the color of all paragraphs in the page to red as of jQuery 3.6.0. Do not depend on that <em>not working</em>, though, as a future version of jQuery may add support for such declarations. It's strongly advised to use classes instead; otherwise use a jQuery plugin.</p>
+ <p>As of jQuery 1.8, the <code>.css()</code> setter will automatically take care of prefixing the property name. For example, take <code>.css( "user-select", "none" )</code> in Chrome/Safari will set it as <code>-webkit-user-select</code>, Firefox will use <code>-moz-user-select</code>, and IE10 will use <code>-ms-user-select</code>.</p>
<p>As of jQuery 1.6, <code>.css()</code> accepts relative values similar to <code>.animate()</code>. Relative values are a string starting with <code>+=</code> or <code>-=</code> to increment or decrement the current value. For example, if an element's padding-left was 10px, <code>.css( "padding-left", "+=15" )</code> would result in a total padding-left of 25px.</p>
<p>As of jQuery 1.4, <code>.css()</code> allows us to pass a function as the property value:</p>
<pre><code>
@@ -153,6 +168,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>
@@ -278,5 +294,7 @@ $( "div" ).on( "click", function() {
<category slug="manipulation/style-properties"/>
<category slug="version/1.0"/>
<category slug="version/1.4"/>
+ <category slug="version/3.2"/>
+ <category slug="version/4.0"/>
</entry>
</entries>
diff --git a/entries/data.xml b/entries/data.xml
index bdd696040..d998d38c7 100644
--- a/entries/data.xml
+++ b/entries/data.xml
@@ -21,16 +21,17 @@
<desc>Store arbitrary data associated with the matched elements.</desc>
<longdesc>
<p>The <code>.data()</code> method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.</p>
- <p> We can set several distinct values for a single element and retrieve them later:</p>
+ <p>We can set several distinct values for a single element and retrieve them later:</p>
<pre><code>
$( "body" ).data( "foo", 52 );
-$( "body" ).data( "bar", { myType: "test", count: 40 } );
+$( "body" ).data( "bar", { isManual: true } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ); // 52
-$( "body" ).data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
+$( "body" ).data(); // { foo: 52, bar: { isManual: true }, baz: [ 1, 2, 3 ] }
</code></pre>
- <p>In jQuery 1.4.3 setting an element's data object with <code>.data(obj)</code> extends the data previously stored with that element. jQuery itself uses the <code>.data()</code> method to save information under the names 'events' and 'handle', and also reserves any data name starting with an underscore ('_') for internal use.</p>
- <p>Prior to jQuery 1.4.3 (starting in jQuery 1.4) the <code>.data()</code> method completely replaced all data, instead of just extending the data object. If you are using third-party plugins it may not be advisable to completely replace the element's data object, since plugins may have also set data.</p>
+ <p>Using the <code>data()</code> method to update data does not affect attributes in the DOM. To set a <code>data-*</code> attribute value, use <code><a href="/https/github.com/attr/">attr</a></code>.</p>
+ <p>Prior to jQuery 1.4.3, <code>.data( obj )</code> completely replaced all data. Since jQuery 1.4.3, data is instead extended by shallow merge.</p>
+ <p>Since <strong>jQuery 3</strong>, every two-character sequence of "-" (U+002D) followed by a lowercase ASCII letter in a key is replaced by the uppercase version of the letter, in alignment with the <a href="https://html.spec.whatwg.org/multipage/dom.html#dom-dataset">HTML dataset API</a>. A statement like <code>$( "body" ).data( { "my-name": "aValue" } ).data();</code> will return <code>{ myName: "aValue" }</code>.</p>
<p>Due to the way browsers interact with plugins and external code, the <code>.data()</code> method cannot be used on <code><object></code> (unless it's a Flash plugin), <code><applet></code> or <code><embed></code> elements.</p>
</longdesc>
<note id="no-data-on-xml" type="additional"/>
@@ -39,8 +40,8 @@ $( "body" ).data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1,
<desc>Store then retrieve a value from the div element.</desc>
<code><![CDATA[
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
-$( "span:first" ).text( $( "div" ).data( "test" ).first );
-$( "span:last" ).text( $( "div" ).data( "test" ).last );
+$( "span" ).first().text( $( "div" ).data( "test" ).first );
+$( "span" ).last().text( $( "div" ).data( "test" ).last );
]]></code>
<css><![CDATA[
div {
@@ -75,51 +76,42 @@ $( "span:last" ).text( $( "div" ).data( "test" ).last );
<signature>
<added>1.4</added>
</signature>
- <desc>Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.</desc>
+ <desc>Return arbitrary data associated with the first element in the jQuery collection, as set by data() or by an HTML5 <code>data-*</code> attribute.</desc>
<longdesc>
- <p>The <code>.data()</code> method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can retrieve several distinct values for a single element one at a time, or as a set:</p>
+ <p>The <code>.data()</code> method allows us to read data previously associated with DOM elements. We can retrieve several distinct values for a single element one at a time, or as a set:</p>
<pre><code>
-alert( $( "body" ).data( "foo" ) );
-alert( $( "body" ).data() );
- </code></pre>
- <p>The above lines alert the data values that were set on the <code>body</code> element. If no data at all was set on that element, <code>undefined</code> is returned.</p>
- <pre><code>
-alert( $( "body" ).data( "foo" ) ); // undefined
-$( "body" ).data( "bar", "foobar" );
-alert( $( "body" ).data( "bar" ) ); // foobar
+var elem = document.createElement( "span" );
+$( elem ).data( "foo" ); // undefined
+$( elem ).data(); // {}
+
+$( elem ).data( "foo", 42 );
+$( elem ).data( "foo" ); // 42
+$( elem ).data(); // { foo: 42 }
</code></pre>
+ <p>Calling <code>.data()</code> with no parameters returns a JavaScript object containing each stored value as a property. The object can be used directly to get data values (but note that property names originally containing dashes will have been modified as described below).</p>
+ <p>Since <strong>jQuery 3</strong>, every two-character sequence of "-" (U+002D) followed by a lowercase ASCII letter in a key is replaced by the uppercase version of the letter, in alignment with the <a href="https://html.spec.whatwg.org/multipage/dom.html#dom-dataset">HTML dataset API</a>. A statement like <code>$( "body" ).data( { "my-name": "aValue" } ).data();</code> will return <code>{ myName: "aValue" }</code>.</p>
<h4 id="data-html5">
- <a href="#data-html5">HTML5 data-* Attributes</a>
+ <a href="#data-html5">HTML5 <code>data-*</code> Attributes</a>
</h4>
- <p>As of jQuery 1.4.3 <a href="http://ejohn.org/blog/html-5-data-attributes/">HTML 5 data- attributes</a> will be automatically pulled in to jQuery's data object. The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the <a href="http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">W3C HTML5 specification</a>.</p>
+ <p>Since jQuery 1.4.3, <a href="https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes"><code>data-*</code> attributes</a> are used to initialize jQuery data. An element's <code>data-*</code> attributes are retrieved the first time the <code>data()</code> method is invoked upon it, and then are no longer accessed or mutated (all values are stored internally by jQuery).</p>
+ <p>Every attempt is made to convert the attribute's string value to a JavaScript value (this includes booleans, numbers, objects, arrays, and null). A string is only converted to a number if doing so doesn't change its representation (for example, the string "100" is converted to the number 100, but "1E02" and "100.000" are left as strings because their numeric value of 100 serializes to "100"). When a string starts with '{' or '[', then <code>jQuery.parseJSON</code> is used to parse it; it must follow <a href="https://en.wikipedia.org/wiki/JSON#Data_types.2C_syntax_and_example">valid JSON syntax</a> <em>including quoted property names</em>. A string not parseable as a JavaScript value is not converted.</p>
+ <p>To retrieve a <code>data-*</code> attribute value as an unconverted string, use the <code><a href="/https/github.com/attr/">attr()</a></code> method.</p>
+ <p>Since jQuery 1.6, dashes in <code>data-*</code> attribute names have been processed in alignment with the <a href="https://html.spec.whatwg.org/multipage/dom.html#dom-dataset">HTML dataset API</a>.</p>
<p>For example, given the following HTML:</p>
<pre><code><div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div></code></pre>
- <p>All of the following jQuery code will work.</p>
+ <p>The following comparisons are all true:</p>
<pre><code>
$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";
</code></pre>
- <p>The second statement of the code above correctly refers to the <code>data-last-value</code> attribute of the element. In case no data is stored with the passed key, jQuery searches among the attributes of the element, converting a camel-cased string into a dashed string and then prepending <code>data-</code> to the result. So, the string <code>lastValue</code> is converted to <code>data-last-value</code>.</p>
- <p>Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null). A value is only converted to a number if doing so doesn't change the value's representation. For example, "1E02" and "100.000" are equivalent as numbers (numeric value 100) but converting them would alter their representation so they are left as strings. The string value "100" is converted to the number 100.</p>
- <p>When the data attribute is an object (starts with '{') or array (starts with '[') then <code>jQuery.parseJSON</code> is used to parse the string; it must follow <a href="http://en.wikipedia.org/wiki/JSON#Data_types.2C_syntax_and_example">valid JSON syntax</a> <em>including quoted property names</em>. If the value isn't parseable as a JavaScript value, it is left as a string.</p>
- <p>To retrieve the value's attribute as a string without any attempt to convert it, use the <code><a href="/https/github.com/attr/">attr()</a></code> method.</p>
- <p>The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).</p>
- <p>Calling <code>.data()</code> with no parameters retrieves all of the values as a JavaScript object. This object can be safely cached in a variable as long as a new object is not set with <code>.data(obj)</code>. Using the object directly to get or set values is faster than making individual calls to <code>.data()</code> to get or set each value:</p>
- <pre><code>
-var mydata = $( "#mydiv" ).data();
-if ( mydata.count < 9 ) {
- mydata.count = 43;
- mydata.status = "embiggened";
-}
- </code></pre>
</longdesc>
<note id="no-data-on-xml" type="additional"/>
<example>
<desc>Get the data named "blah" stored at for an element.</desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
var value;
switch ( $( "button" ).index( this ) ) {
diff --git a/entries/dblclick-shorthand.xml b/entries/dblclick-shorthand.xml
new file mode 100644
index 000000000..ad4c1887b
--- /dev/null
+++ b/entries/dblclick-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="dblclick" return="jQuery" deprecated="3.3">
+ <title>.dblclick()</title>
+ <desc>Bind an event handler to the "dblclick" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.dblclick( handler )</code> or <code>.dblclick( eventData, handler )</code>, use <a href="/https/github.com/dblclick/#on1"><code>.on( "dblclick", handler )</code></a> or <a href="/https/github.com/dblclick/#on1"><code>.on( "dblclick", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.dblclick()</code>, use <a href="/https/github.com/dblclick/#trigger2"><code>.trigger( "dblclick" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/dblclick.xml b/entries/dblclick.xml
index 7db082fe4..9c4cf59a0 100644
--- a/entries/dblclick.xml
+++ b/entries/dblclick.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="dblclick" return="jQuery">
- <title>.dblclick()</title>
- <desc>Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.</desc>
+<entries>
+
+<desc>Bind an event handler to the "dblclick" event, or trigger that event on an element.</desc>
+<entry type="method" name="on" return="jQuery">
+ <title>dblclick event</title>
+ <desc>Bind an event handler to the "dblclick" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""dblclick"" type="string">
+ <desc>The string <code>"dblclick"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,12 +18,11 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
- <p>This method is a shortcut for <code>.on( "dblclick", handler)</code> in the first two variations, and <code>.trigger( "dblclick" )</code> in the third.
- The <code>dblclick</code> event is sent to an element when the element is double-clicked. Any HTML element can receive this event.
+ <div class="warning">
+ <p>This page describes the <code>dblclick</code> event. For the deprecated <code>.dblclick()</code> method, see <a href="/https/github.com/dblclick-shorthand/"><code>.dblclick()</code></a>.</p>
+ </div>
+ <p>The <code>dblclick</code> event is sent to an element when the element is double-clicked. Any HTML element can receive this event.
For example, consider the HTML:</p>
<pre><code>
<div id="target">
@@ -34,24 +32,25 @@
Trigger the handler
</div>
</code></pre>
- <p class="image">
+ <figure>
<img src="/https/github.com/resources/0042_05_04.png" alt=""/>
- </p>
+ <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
+ </figure>
<p>The event handler can be bound to any <code><div></code>:</p>
<pre><code>
-$( "#target" ).dblclick(function() {
- alert( "Handler for .dblclick() called." );
-});
+$( "#target" ).on( "dblclick", function() {
+ alert( "Handler for `dblclick` called." );
+} );
</code></pre>
<p>Now double-clicking on this element displays the alert:</p>
<p>
- <samp>Handler for .dblclick() called.</samp>
+ <samp>Handler for `dblclick` called.</samp>
</p>
- <p>To trigger the event manually, apply <code>.dblclick()</code> without an argument:</p>
+ <p>To trigger the event manually, call <code>.trigger( "dblclick" )</code>:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( "#target" ).dblclick();
-});
+$( "#other" ).on( "click", function() {
+ $( "#target" ).trigger( "dblclick" );
+} );
</code></pre>
<p>After this code executes, (single) clicks on <samp>Trigger the handler</samp> will also alert the message.</p>
<p>The <code>dblclick</code> event is only triggered after this exact series of events:</p>
@@ -65,20 +64,20 @@ $( "#other" ).click(function() {
</p>
</longdesc>
<example>
- <desc>To bind a "Hello World!" alert box the dblclick event on every paragraph on the page:</desc>
+ <desc>To bind a "Hello World!" alert box to the dblclick event on every paragraph on the page:</desc>
<code><![CDATA[
-$( "p" ).dblclick(function() {
+$( "p" ).on( "dblclick", function() {
alert( "Hello World!" );
-});
+} );
]]></code>
</example>
<example>
<desc>Double click to toggle background color.</desc>
<code><![CDATA[
-var divdbl = $( "div:first" );
-divdbl.dblclick(function() {
+var divdbl = $( "div" ).first();
+divdbl.on( "dblclick", function() {
divdbl.toggleClass( "dbl" );
-});
+} );
]]></code>
<css><![CDATA[
div {
@@ -99,5 +98,23 @@ divdbl.dblclick(function() {
</example>
<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>dblclick event</title>
+ <desc>Trigger the "dblclick" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""dblclick"" type="string">
+ <desc>The string <code>"dblclick"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "dblclick", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
</entry>
+
+</entries>
diff --git a/entries/deferred.always.xml b/entries/deferred.always.xml
index 57b3cf7f6..30e921936 100644
--- a/entries/deferred.always.xml
+++ b/entries/deferred.always.xml
@@ -17,6 +17,7 @@
<desc> Add handlers to be called when the Deferred object is either resolved or rejected. </desc>
<longdesc>
<p>The argument can be either a single function or an array of functions. When the Deferred is resolved or rejected, the <code>alwaysCallbacks</code> are called. Since <code>deferred.always()</code> returns the Deferred object, other methods of the Deferred object can be chained to this one, including additional <code>.always()</code> methods. When the Deferred is resolved or rejected, callbacks are executed in the order they were added, using the arguments provided to the <a href="/https/github.com/deferred.resolve/"><code>resolve</code></a>, <a href="/https/github.com/deferred.reject/"><code>reject</code></a>, <a href="/https/github.com/deferred.resolveWith/"><code>resolveWith</code></a> or <a href="/https/github.com/deferred.rejectWith/"><code>rejectWith</code></a> method calls. For more information, see the documentation for <a href="/https/github.com/category/deferred-object/">Deferred object</a>.</p>
+ <p><strong>Note:</strong> The <code>deferred.always()</code> method receives the arguments that were used to <code>.resolve()</code> or <code>.reject()</code> the <code>Deferred</code> object, which are often very different. For this reason, it's best to use it only for actions that do not require inspecting the arguments. In all other cases, use explicit <a href="/https/github.com/deferred.done/"><code>.done()</code></a> or <a href="/https/github.com/deferred.fail/"><code>.fail()</code></a> handlers since the arguments will have well-known orders.</p>
</longdesc>
<example>
<desc>Since the <a href="/https/github.com/jQuery.get/"><code>jQuery.get()</code></a> method returns a <code>jqXHR</code> object, which is derived from a Deferred object, we can attach a callback for both success and error using the <code>deferred.always()</code> method.</desc>
diff --git a/entries/deferred.catch.xml b/entries/deferred.catch.xml
new file mode 100644
index 000000000..e6e3d95aa
--- /dev/null
+++ b/entries/deferred.catch.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<entry name="deferred.catch" type="method" return="Promise">
+ <title>deferred.catch()</title>
+ <signature>
+ <added>3.0</added>
+ <argument name="failFilter" type="Function">
+ <desc>
+ A function that is called when the Deferred is rejected.
+ </desc>
+ </argument>
+ </signature>
+ <desc>Add handlers to be called when the Deferred object is rejected. </desc>
+
+ <longdesc>
+ <p><code>deferred.catch( fn )</code> is an alias to <a href="/https/github.com/deferred.then/"><code>deferred.then( null, fn )</code></a>. Read its page for more information.</p>
+ </longdesc>
+ <example>
+ <desc>Since the <a href="/https/github.com/jQuery.get/"><code>jQuery.get</code></a> method returns a jqXHR object, which is derived from a Deferred object, we can add rejection handlers using the <code>.catch</code> method.</desc>
+ <code><![CDATA[
+$.get( "test.php" )
+ .then( function() {
+ alert( "$.get succeeded" );
+ } )
+ .catch( function() {
+ alert( "$.get failed!" );
+ } );
+]]></code>
+ </example>
+ <category slug="deferred-object"/>
+ <category slug="version/3.0"/>
+</entry>
diff --git a/entries/deferred.isRejected.xml b/entries/deferred.isRejected.xml
index 5fdd1e953..a391f7795 100644
--- a/entries/deferred.isRejected.xml
+++ b/entries/deferred.isRejected.xml
@@ -6,8 +6,10 @@
</signature>
<desc> Determine whether a Deferred object has been rejected. </desc>
<longdesc>
- <p>As of jQuery 1.7 this API has been deprecated; please use <a href="/https/github.com/deferred.state/"><code>deferred.state()</code></a> instead.</p>
- <p>Returns <code>true</code> if the Deferred object is in the rejected state, meaning that either <a href="h/deferred.reject/"><code>deferred.reject()</code></a> or <a href="/https/github.com/deferred.rejectWith/"><code>deferred.rejectWith()</code></a> has been called for the object and the failCallbacks have been called (or are in the process of being called).</p>
+ <div class="warning">
+ <p>Note: This API has been removed in jQuery 1.8; please use <a href="/https/github.com/deferred.state/"><code>deferred.state()</code></a> instead.</p>
+ </div>
+ <p>Returns <code>true</code> if the Deferred object is in the rejected state, meaning that either <a href="/https/github.com/deferred.reject/"><code>deferred.reject()</code></a> or <a href="/https/github.com/deferred.rejectWith/"><code>deferred.rejectWith()</code></a> has been called for the object and the failCallbacks have been called (or are in the process of being called).</p>
<p>Note that a Deferred object can be in one of three states: pending, resolved, or rejected; use <a href="/https/github.com/deferred.isResolved/"><code>deferred.isResolved()</code></a> to determine whether the Deferred object is in the resolved state. These methods are primarily useful for debugging, for example to determine whether a Deferred has already been resolved even though you are inside code that intended to reject it.</p>
</longdesc>
<category slug="deferred-object"/>
diff --git a/entries/deferred.isResolved.xml b/entries/deferred.isResolved.xml
index b59413220..9c046e5ae 100644
--- a/entries/deferred.isResolved.xml
+++ b/entries/deferred.isResolved.xml
@@ -6,7 +6,9 @@
</signature>
<desc> Determine whether a Deferred object has been resolved. </desc>
<longdesc>
- <p>This API is <code>deprecated</code> as of jQuery 1.7 and <code>removed</code> as of jQuery 1.8; please use <a href="/https/github.com/deferred.state/"><code>deferred.state()</code></a> instead.</p>
+ <div class="warning">
+ <p>Note: This API has been removed in jQuery 1.8; please use <a href="/https/github.com/deferred.state/"><code>deferred.state()</code></a> instead.</p>
+ </div>
<p>Returns <code>true</code> if the Deferred object is in the resolved state, meaning that either <a href="/https/github.com/deferred.resolve/"><code>deferred.resolve()</code></a> or <a href="/https/github.com/deferred.resolveWith/"><code>deferred.resolveWith()</code></a> has been called for the object and the doneCallbacks have been called (or are in the process of being called).</p>
<p>Note that a Deferred object can be in one of three states: pending, resolved, or rejected; use <a href="/https/github.com/deferred.isRejected/"><code>deferred.isRejected()</code></a> to determine whether the Deferred object is in the rejected state. These methods are primarily useful for debugging, for example to determine whether a Deferred has already been resolved even though you are inside code that intended to reject it.</p>
</longdesc>
diff --git a/entries/deferred.pipe.xml b/entries/deferred.pipe.xml
index 66eda149d..a74f9dac6 100644
--- a/entries/deferred.pipe.xml
+++ b/entries/deferred.pipe.xml
@@ -34,7 +34,9 @@
</signature>
<desc> Utility method to filter and/or chain Deferreds. </desc>
<longdesc>
- <p><strong>Deprecation Notice:</strong>As of jQuery 1.8, the deferred.pipe() method is deprecated. The <code>deferred.then()</code> method, which replaces it, should be used instead.</p>
+ <div class="warning">
+ <p><strong>Deprecation Notice:</strong>As of jQuery 1.8, the deferred.pipe() method is deprecated. The <code>deferred.then()</code> method, which replaces it, should be used instead.</p>
+ </div>
<p>The <code>deferred.pipe()</code> method returns a new promise that filters the status and values of a deferred through a function. The <code>doneFilter</code> and <code>failFilter</code> functions filter the original deferred's resolved / rejected status and values. <strong>As of jQuery 1.7</strong>, the method also accepts a <code>progressFilter</code> function to filter any calls to the original deferred's <code>notify</code> or <code>notifyWith</code> methods. These filter functions can return a new value to be passed along to the piped promise's <code>done()</code> or <code>fail()</code> callbacks, or they can return another observable object (Deferred, Promise, etc) which will pass its resolved / rejected status and values to the piped promise's callbacks. If the filter function used is <code>null</code>, or not specified, the piped promise will be resolved or rejected with the same values as the original.</p>
</longdesc>
<example>
diff --git a/entries/deferred.progress.xml b/entries/deferred.progress.xml
index fd7635a17..87189af93 100644
--- a/entries/deferred.progress.xml
+++ b/entries/deferred.progress.xml
@@ -10,10 +10,17 @@
A function, or array of functions, to be called when the Deferred generates progress notifications.
</desc>
</argument>
+ <argument name="progressCallbacks" optional="true">
+ <type name="Function"/>
+ <type name="Array"/>
+ <desc>
+ Optional additional functions, or arrays of functions, to be called when the Deferred generates progress notifications.
+ </desc>
+ </argument>
</signature>
<desc> Add handlers to be called when the Deferred object generates progress notifications.</desc>
<longdesc>
- <p>The argument can be either a single function or an array of functions. When the Deferred generates progress notifications by calling <code>notify</code> or <code>notifyWith</code>, the <code>progressCallbacks</code> are called. Since <code>deferred.progress()</code> returns the Deferred object, other methods of the Deferred object can be chained to this one. When the Deferred is resolved or rejected, progress callbacks will no longer be called, with the exception that any <code>progressCallbacks</code> added after the Deferred enters the resolved or rejected state are executed immediately when they are added, using the arguments that were passed to the <code>.notify()</code> or <code>notifyWith()</code> call. For more information, see the documentation for <a href="/https/github.com/jQuery.Deferred/">jQuery.Deferred()</a>.</p>
+ <p>The <code>deferred.progress()</code> method accepts one or more arguments, all of which can be either a single function or an array of functions. When the Deferred generates progress notifications by calling <code>notify</code> or <code>notifyWith</code>, the <code>progressCallbacks</code> are called. Since <code>deferred.progress()</code> returns the Deferred object, other methods of the Deferred object can be chained to this one. When the Deferred is resolved or rejected, progress callbacks will no longer be called, with the exception that any <code>progressCallbacks</code> added after the Deferred enters the resolved or rejected state are executed immediately when they are added, using the arguments that were passed to the <code>.notify()</code> or <code>notifyWith()</code> call. For more information, see the documentation for <a href="/https/github.com/jQuery.Deferred/">jQuery.Deferred()</a>.</p>
</longdesc>
<category slug="deferred-object"/>
<category slug="version/1.7"/>
diff --git a/entries/deferred.promise.xml b/entries/deferred.promise.xml
index bcd188157..db6550bd9 100644
--- a/entries/deferred.promise.xml
+++ b/entries/deferred.promise.xml
@@ -9,7 +9,7 @@
</signature>
<desc> Return a Deferred's Promise object. </desc>
<longdesc>
- <p>The <code>deferred.promise()</code> method allows an asynchronous function to prevent other code from interfering with the progress or status of its internal request. The Promise exposes only the Deferred methods needed to attach additional handlers or determine the state (<code>then</code>, <code>done</code>, <code>fail</code>, <code>always</code>, <code>pipe</code>, <code>progress</code>, and <code>state</code>), but not ones that change the state (<code>resolve</code>, <code>reject</code>, <code>notify</code>, <code>resolveWith</code>, <code>rejectWith</code>, and <code>notifyWith</code>).</p>
+ <p>The <code>deferred.promise()</code> method allows an asynchronous function to prevent other code from interfering with the progress or status of its internal request. The Promise exposes only the Deferred methods needed to attach additional handlers or determine the state (<code>then</code>, <code>done</code>, <code>fail</code>, <code>always</code>, <code>pipe</code>, <code>progress</code>, <code>state</code> and <code>promise</code>), but not ones that change the state (<code>resolve</code>, <code>reject</code>, <code>notify</code>, <code>resolveWith</code>, <code>rejectWith</code>, and <code>notifyWith</code>).</p>
<p>If <code>target</code> is provided, <code>deferred.promise()</code> will attach the methods onto it and then return this object rather than create a new one. This can be useful to attach the Promise behavior to an object that already exists.</p>
<p>If you are creating a Deferred, keep a reference to the Deferred so that it can be resolved or rejected at some point. Return <em>only</em> the Promise object via <code>deferred.promise()</code> so other code can register callbacks or inspect the current state.</p>
<p>For more information, see the documentation for <a href="/https/github.com/category/deferred-object/">Deferred object</a>.</p>
@@ -18,7 +18,7 @@
<desc>Create a Deferred and set two timer-based functions to either resolve or reject the Deferred after a random interval. Whichever one fires first "wins" and will call one of the callbacks. The second timeout has no effect since the Deferred is already complete (in a resolved or rejected state) from the first timeout action. Also set a timer-based progress notification function, and call a progress handler that adds "working..." to the document body.</desc>
<code><![CDATA[
function asyncEvent() {
- var dfd = new jQuery.Deferred();
+ var dfd = jQuery.Deferred();
// Resolve after a random interval
setTimeout(function() {
diff --git a/entries/deferred.resolve.xml b/entries/deferred.resolve.xml
index 8ed346806..3aea35994 100644
--- a/entries/deferred.resolve.xml
+++ b/entries/deferred.resolve.xml
@@ -11,6 +11,7 @@
</signature>
<desc> Resolve a Deferred object and call any doneCallbacks with the given <code>args</code>. </desc>
<longdesc>
+ <p>Normally, only the creator of a Deferred should call this method; you can prevent other code from changing the Deferred's state by returning a restricted Promise object through <a href="/https/github.com/deferred.promise/"><code>deferred.promise()</code></a>.</p>
<p>When the Deferred is resolved, any doneCallbacks added by <a href="/https/github.com/deferred.then/"><code>deferred.then()</code></a> or <a href="/https/github.com/deferred.done/"><code>deferred.done()</code></a> are called. Callbacks are executed in the order they were added. Each callback is passed the <code>args</code> from the <code>deferred.resolve()</code>. Any doneCallbacks added after the Deferred enters the resolved state are executed immediately when they are added, using the arguments that were passed to the <code>deferred.resolve()</code> call. For more information, see the documentation for <a href="/https/github.com/jQuery.Deferred/">jQuery.Deferred()</a>.</p>
</longdesc>
<category slug="deferred-object"/>
diff --git a/entries/delay.xml b/entries/delay.xml
index 94c9d83dd..b2066217d 100644
--- a/entries/delay.xml
+++ b/entries/delay.xml
@@ -21,7 +21,7 @@ $( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
<p>When this statement is executed, the element slides up for 300 milliseconds and then pauses for 800 milliseconds before fading in for 400 milliseconds.</p>
<div class="warning">
<p>
- <strong>The <code>.delay()</code> method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—<code>.delay()</code> is not a replacement for JavaScript's native <a href="https://developer.mozilla.org/en/DOM/window.setTimeout">setTimeout</a> function, which may be more appropriate for certain use cases.</strong>
+ <strong>The <code>.delay()</code> method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—<code>.delay()</code> is not a replacement for JavaScript's native <a href="https://developer.mozilla.org/en-US/docs/Web/API/setTimeout">setTimeout</a> function, which may be more appropriate for certain use cases.</strong>
</p>
</div>
</longdesc>
@@ -44,7 +44,7 @@ $( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
}
]]></css>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
$( "div.second" ).slideUp( 300 ).fadeIn( 400 );
});
diff --git a/entries/delegate.xml b/entries/delegate.xml
index e1670e846..c0c0dac72 100644
--- a/entries/delegate.xml
+++ b/entries/delegate.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="delegate" return="jQuery">
+<entry type="method" name="delegate" return="jQuery" deprecated="3.0">
<title>.delegate()</title>
<desc>Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.</desc>
<signature>
@@ -41,7 +41,7 @@
</argument>
</signature>
<longdesc>
- <p>As of jQuery 1.7, <code>.delegate()</code> has been superseded by the <a href="/https/github.com/on/">.on()</a> method. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the <a href="/https/github.com/on/">.on()</a> method. In general, these are the equivalent templates for the two methods:</p>
+ <p>As of jQuery 3.0, <code>.delegate()</code> has been deprecated. It was superseded by the <a href="/https/github.com/on/"><code>.on()</code></a> method since jQuery 1.7, so its use was already discouraged. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the <a href="/https/github.com/on/"><code>.on()</code></a> method. In general, these are the equivalent templates for the two methods:</p>
<pre><code>
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
@@ -127,7 +127,7 @@ $( "body" ).delegate( "p", "myCustomEvent", function( e, myName, myValue ) {
.fadeIn( 30 )
.fadeOut( 1000 );
});
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( "p" ).trigger( "myCustomEvent" );
});
]]></code>
@@ -148,4 +148,5 @@ $( "button" ).click(function() {
<category slug="events/event-handler-attachment"/>
<category slug="version/1.4.2"/>
<category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.0"/>
</entry>
diff --git a/entries/dequeue.xml b/entries/dequeue.xml
index 7caca4e36..c54401c78 100644
--- a/entries/dequeue.xml
+++ b/entries/dequeue.xml
@@ -14,7 +14,7 @@
<example>
<desc>Use dequeue to end a custom queue function which allows the queue to keep going.</desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( "div" )
.animate({ left:"+=200px" }, 2000 )
.animate({ top:"0px" }, 600 )
diff --git a/entries/detach.xml b/entries/detach.xml
index 2ff7037c7..bc6b32c77 100644
--- a/entries/detach.xml
+++ b/entries/detach.xml
@@ -14,11 +14,11 @@
<example>
<desc>Detach all paragraphs from the DOM</desc>
<code><![CDATA[
-$( "p" ).click(function() {
+$( "p" ).on( "click", function() {
$( this ).toggleClass( "off" );
});
var p;
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
if ( p ) {
p.appendTo( "body" );
p = null;
diff --git a/entries/die.xml b/entries/die.xml
index a3d038ec3..efe2e6145 100644
--- a/entries/die.xml
+++ b/entries/die.xml
@@ -21,6 +21,9 @@
</argument>
</signature>
<longdesc>
+ <div class="warning">
+ <p>Note: This API has been removed in jQuery 1.9; please use <a href="/https/github.com/on/"><code>on()</code></a> instead.</p>
+ </div>
<p>Any handler that has been attached with <code>.live()</code> can be removed with <code>.die()</code>. This method is analogous to calling <code>.off()</code> with no arguments, which is used to remove all handlers attached with <code>.on()</code>.
See the discussions of <code>.live()</code> and <code>.off()</code> for further details.</p>
<p>If used without an argument, .die() removes <em>all</em> event handlers previously attached using <code>.live()</code> from the elements.</p>
diff --git a/entries/disabled-selector.xml b/entries/disabled-selector.xml
index f018318cb..812c8f572 100644
--- a/entries/disabled-selector.xml
+++ b/entries/disabled-selector.xml
@@ -9,9 +9,9 @@
<longdesc>
<p>As with other pseudo-class selectors (those that begin with a ":"), it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare <code>$(':disabled')</code> is equivalent to <code>$('*:disabled')</code>, so <code>$('input:disabled')</code> or similar should be used instead. </p>
- <p>Although their resulting selections are usually the same, the <code>:disabled</code> selector is subtly different from the <code>[disabled]</code> attribute selector; <code>:disabled</code> checks the boolean (true/false) value of the element's disabled property while <code>[disabled]</code> checks for the existence of the disabled attribute.</p>
+ <p>Although their resulting selections are usually the same, the <code>:disabled</code> selector is subtly different from the <code>[disabled]</code> attribute selector;<code>:disabled</code> matches elements that are <a href="https://html.spec.whatwg.org/multipage/scripting.html#disabled-elements">actually disabled</a> while <code>[disabled]</code> only checks for the existence of the disabled attribute.</p>
- <p>The <code>:disabled</code> selector should only be used for selecting HTML elements that support the <code>disabled</code> attribute (<code><button></code>, <code><input></code>, <code><optgroup></code>, <code><option></code>, <code><select></code>, and <code><textarea></code>).</p>
+ <p>The <code>:disabled</code> selector should only be used for selecting HTML elements that support the <code>disabled</code> attribute (<code><button></code>, <code><input></code>, <code><optgroup></code>, <code><option></code>, <code><select></code>, <code><textarea></code>, <code><menuitem></code>, and <code><fieldset></code>).</p>
</longdesc>
<example>
diff --git a/entries/each.xml b/entries/each.xml
index 9a882fb2a..fd2db6483 100644
--- a/entries/each.xml
+++ b/entries/each.xml
@@ -6,7 +6,7 @@
<argument name="function" type="Function">
<desc>A function to execute for each matched element.</desc>
<argument name="index" type="Integer" />
- <argument name="element" type="Element" />
+ <argument name="element" type="Element" />
</argument>
</signature>
<desc>Iterate over a jQuery object, executing a function for each matched element. </desc>
@@ -46,15 +46,15 @@ $( "li" ).addClass( "bar" );
<example>
<desc>Iterate over three divs and sets their color property.</desc>
<code><![CDATA[
-$( document.body ).click(function() {
- $( "div" ).each(function( i ) {
+$( document.body ).on( "click", function() {
+ $( "div" ).each( function( i ) {
if ( this.style.color !== "blue" ) {
this.style.color = "blue";
} else {
this.style.color = "";
}
- });
-});
+ } );
+} );
]]></code>
<css><![CDATA[
div {
@@ -74,7 +74,7 @@ $( document.body ).click(function() {
<example>
<desc>To access a jQuery object instead of the regular DOM element, use <code>$( this )</code>. For example:</desc>
<code><![CDATA[
-$( "span" ).click(function() {
+$( "span" ).on( "click", function() {
$( "li" ).each(function() {
$( this ).toggleClass( "example" );
});
@@ -106,7 +106,7 @@ To do list: <span>(click here to change)</span>
<example>
<desc>Use <code>return false</code> to break out of each() loops early.</desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( "div" ).each(function( index, element ) {
// element == this
$( element ).css( "backgroundColor", "yellow" );
diff --git a/entries/empty-selector.xml b/entries/empty-selector.xml
index 8e06d87ce..165e21121 100644
--- a/entries/empty-selector.xml
+++ b/entries/empty-selector.xml
@@ -9,7 +9,7 @@
<longdesc>
<p>This is the inverse of <code>:parent</code>. </p>
<p>One important thing to note with :empty (and :parent) is that child elements include text nodes.</p>
- <p>The W3C recommends that the <code><p></code> element have at least one child node, even if that child is merely text (see http://www.w3.org/TR/html401/struct/text.html#edef-P). Some other elements, on the other hand, are empty (i.e. have no children) by definition: <input>, <img>, <br>, and <hr>, for example.</p>
+ <p>The W3C recommends that the <code><p></code> element have at least one child node, even if that child is merely text (see https://www.w3.org/TR/html401/struct/text.html#edef-P). Some other elements, on the other hand, are empty (i.e. have no children) by definition: <input>, <img>, <br>, and <hr>, for example.</p>
</longdesc>
<example>
<desc>Finds all elements that are empty - they don't have child elements or text.</desc>
diff --git a/entries/empty.xml b/entries/empty.xml
index 2be809f43..097ad9c66 100644
--- a/entries/empty.xml
+++ b/entries/empty.xml
@@ -31,9 +31,9 @@ $( ".hello" ).empty();
<example>
<desc>Removes all child nodes (including text nodes) from all paragraphs</desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( "p" ).empty();
-});
+} );
]]></code>
<css><![CDATA[
p {
diff --git a/entries/end.xml b/entries/end.xml
index 51b8cf3e7..7f85ea1aa 100644
--- a/entries/end.xml
+++ b/entries/end.xml
@@ -51,7 +51,7 @@ jQuery.fn.showTags = function( n ) {
})
.get()
.join( ", " );
- $( "b:eq( " + n + " )" ).text( tags );
+ $( "b" ).eq( n ).text( tags );
return this;
};
diff --git a/entries/eq-selector.xml b/entries/eq-selector.xml
index 1e48407b5..a191d31be 100644
--- a/entries/eq-selector.xml
+++ b/entries/eq-selector.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="selector" name="eq" return="">
+<entry type="selector" name="eq" return="" deprecated="3.4">
<title>:eq() Selector</title>
<signature>
<sample>:eq(index)</sample>
@@ -17,6 +17,9 @@
</signature>
<desc>Select the element at index <code>n</code> within the matched set.</desc>
<longdesc>
+ <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="/https/github.com/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="/https/github.com/eq/"><code>.eq(index)</code></a> method did).</p>
@@ -92,4 +95,5 @@ $( "li:eq(-2)" ).addClass( "foo" )
<category slug="selectors/jquery-selector-extensions"/>
<category slug="version/1.0"/>
<category slug="version/1.8"/>
+ <category slug="deprecated/deprecated-3.4"/>
</entry>
diff --git a/entries/error-shorthand.xml b/entries/error-shorthand.xml
new file mode 100644
index 000000000..b40d9b755
--- /dev/null
+++ b/entries/error-shorthand.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0"?>
+<entry type="method" name="error" return="jQuery" deprecated="1.8" removed="3.0">
+ <title>.error()</title>
+ <desc>Bind an event handler to the "error" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API has been removed in jQuery 3.0.</p>
+ <p>Instead of <code>.error( handler )</code> or <code>.error( eventData, handler )</code>, use <a href="/https/github.com/error/#on1"><code>.on( "error", handler )</code></a> or <a href="/https/github.com/error/#on1"><code>.on( "error", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.error()</code>, use <a href="/https/github.com/error/#trigger2"><code>.trigger( "error" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/browser-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-1.8"/>
+ <category slug="removed"/>
+</entry>
diff --git a/entries/error.xml b/entries/error.xml
index ff4a0ccfc..d1f9493ea 100644
--- a/entries/error.xml
+++ b/entries/error.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="error" return="jQuery" deprecated="1.8">
- <title>.error()</title>
- <desc>Bind an event handler to the "error" JavaScript event.</desc>
+<entries>
+<desc>Bind an event handler to the "error" event, or trigger that event on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>error event</title>
+ <desc>Bind an event handler to the "error" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute when the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""error"" type="string">
+ <desc>The string <code>"error"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -20,7 +19,9 @@
</argument>
</signature>
<longdesc>
- <p>This method is a shortcut for <code>.on( "error", handler )</code>.</p>
+ <div class="warning">
+ <p>This page describes the <code>error</code> event. For the <code>.error()</code> method removed in jQuery 3.0, see <a href="/https/github.com/error-shorthand/"><code>.error()</code></a>.</p>
+ </div>
<p>The <code>error</code> event is sent to elements, such as images, that are referenced by a document and loaded by the browser. It is called if the element was not loaded correctly.</p>
<p>For example, consider a page with a simple image element:</p>
<pre><code>
@@ -29,32 +30,50 @@
<p>The event handler can be bound to the image:</p>
<pre><code>
$( "#book" )
- .error(function() {
- alert( "Handler for .error() called." )
- })
+ .on( "error", function() {
+ alert( "Handler for `error` called." )
+ } )
.attr( "src", "missing.png" );
</code></pre>
- <p>If the image cannot be loaded (for example, because it is not present at the supplied URL), the alert is displayed:</p>
+ <p>If the image cannot be loaded (for example, because it is not present at the supplied URL), the alert is displayed:</p>
<p>
- <samp>Handler for .error() called.</samp>
+ <samp>Handler for `error` called.</samp>
</p>
<div class="warning">
- <p>The event handler <em>must</em> be attached before the browser fires the error event, which is why the example sets the src attribute after attaching the handler. Also, the error event may not be correctly fired when the page is served locally; <code>error</code> relies on HTTP status codes and will generally not be triggered if the URL uses the <code>file:</code> protocol.</p>
+ <p>The event handler <em>must</em> be attached before the browser fires the <code>error</code> event, which is why the example sets the <code>src</code> attribute after attaching the handler. Also, the <code>error</code> event may not be correctly fired when the page is served locally; <code>error</code> relies on HTTP status codes and will generally not be triggered if the URL uses the <code>file:</code> protocol.</p>
</div>
- <p>Note: A jQuery error event handler should not be attached to the window object. The browser fires the window's error event when a script error occurs. However, the window error event receives different arguments and has different return value requirements than conventional event handlers. Use <code>window.onerror</code> instead.</p>
+ <p>Note: A jQuery <code>error</code> event handler should not be attached to the <code>window</code> object. The browser fires the <code>window</code>'s <code>error</code> event when a script error occurs. However, the window <code>error</code> event receives different arguments and has different return value requirements than conventional event handlers. Use <code>window.onerror</code> instead.</p>
</longdesc>
<example>
- <desc>To hide the "broken image" icons for IE users, you can try:</desc>
+ <desc>To replace all the missing images with another, you can update the <code>src</code> attribute inside the <code>error</code> handler. Be sure that the replacement image exists; otherwise the <code>error</code> event will be triggered indefinitely.</desc>
<code><![CDATA[
+// If missing.png is missing, it is replaced by replacement.png
$( "img" )
- .error(function() {
- $( this ).hide();
- })
+ .on( "error", function() {
+ $( this ).attr( "src", "replacement.png" );
+ } )
.attr( "src", "missing.png" );
]]></code>
</example>
<category slug="events/browser-events"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
- <category slug="deprecated/deprecated-1.8"/>
+ <category slug="version/1.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>error event</title>
+ <desc>Trigger the "error" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""error"" type="string">
+ <desc>The string <code>"error"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "error", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/browser-events"/>
+ <category slug="version/1.0"/>
</entry>
+
+</entries>
diff --git a/entries/even-selector.xml b/entries/even-selector.xml
index f190e0667..bfc8038a3 100644
--- a/entries/even-selector.xml
+++ b/entries/even-selector.xml
@@ -1,12 +1,15 @@
<?xml version="1.0"?>
-<entry type="selector" name="even" return="">
+<entry type="selector" name="even" return="" deprecated="3.4">
<title>:even Selector</title>
<sample>:even</sample>
<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="/https/github.com/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="/https/github.com/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"/>
@@ -33,4 +36,5 @@ $( "tr:even" ).css( "background-color", "#bbf" );
<category slug="selectors/basic-filter-selectors"/>
<category slug="selectors/jquery-selector-extensions"/>
<category slug="version/1.0"/>
+ <category slug="deprecated/deprecated-3.4"/>
</entry>
diff --git a/entries/even.xml b/entries/even.xml
new file mode 100644
index 000000000..cecff9e42
--- /dev/null
+++ 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>
+<ul>
+ <li>list item 1</li>
+ <li>list item 2</li>
+ <li>list item 3</li>
+ <li>list item 4</li>
+ <li>list item 5</li>
+</ul>
+ </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 & 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/event.currentTarget.xml b/entries/event.currentTarget.xml
index f70a8626d..859cb8d41 100644
--- a/entries/event.currentTarget.xml
+++ b/entries/event.currentTarget.xml
@@ -14,11 +14,11 @@
<example>
<desc>Alert that currentTarget matches the `this` keyword.</desc>
<code><![CDATA[
-$( "p" ).click(function( event ) {
+$( "p" ).on( "click", function( event ) {
alert( event.currentTarget === this ); // true
});
]]></code>
</example>
<category slug="events/event-object"/>
<category slug="version/1.3"/>
-</entry>
\ No newline at end of file
+</entry>
diff --git a/entries/event.isDefaultPrevented.xml b/entries/event.isDefaultPrevented.xml
index 676b31f3b..d9ada3149 100644
--- a/entries/event.isDefaultPrevented.xml
+++ b/entries/event.isDefaultPrevented.xml
@@ -9,7 +9,7 @@
<example>
<desc>Checks whether event.preventDefault() was called.</desc>
<code><![CDATA[
-$( "a" ).click(function( event ) {
+$( "a" ).on( "click", function( event ) {
alert( event.isDefaultPrevented() ); // false
event.preventDefault();
alert( event.isDefaultPrevented() ); // true
diff --git a/entries/event.isImmediatePropagationStopped.xml b/entries/event.isImmediatePropagationStopped.xml
index 442355645..433cd4912 100644
--- a/entries/event.isImmediatePropagationStopped.xml
+++ b/entries/event.isImmediatePropagationStopped.xml
@@ -6,7 +6,7 @@
</signature>
<desc> Returns whether event.stopImmediatePropagation() was ever called on this event object. </desc>
<longdesc>
- <p>This property was introduced in <a href="http://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-Event-isImmediatePropagationStopped">DOM level 3</a>.</p>
+ <p>This property was introduced in <a href="https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-Event-isImmediatePropagationStopped">DOM level 3</a>.</p>
</longdesc>
<example>
<desc>Checks whether event.stopImmediatePropagation() was called.</desc>
@@ -21,7 +21,7 @@ function immediatePropStopped( event ) {
$( "#stop-log" ).append( "<div>" + msg + "</div>" );
}
-$( "button" ).click(function( event ) {
+$( "button" ).on( "click", function( event ) {
immediatePropStopped( event );
event.stopImmediatePropagation();
immediatePropStopped( event );
diff --git a/entries/event.isPropagationStopped.xml b/entries/event.isPropagationStopped.xml
index ff7f74511..c6c270b4d 100644
--- a/entries/event.isPropagationStopped.xml
+++ b/entries/event.isPropagationStopped.xml
@@ -6,7 +6,7 @@
</signature>
<desc> Returns whether <a href="/https/github.com/event.stopPropagation/">event.stopPropagation()</a> was ever called on this event object. </desc>
<longdesc>
- <p>This event method is described in the <a href="http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/events.html#Events-Event-isPropagationStopped">W3C DOM Level 3 specification</a>.</p>
+ <p>This event method is described in the <a href="https://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/events.html#Events-Event-isPropagationStopped">W3C DOM Level 3 specification</a>.</p>
</longdesc>
<example>
<desc>Checks whether event.stopPropagation() was called</desc>
@@ -21,11 +21,11 @@ function propStopped( event ) {
$( "#stop-log" ).append( "<div>" + msg + "</div>" );
}
-$( "button" ).click(function(event) {
+$( "button" ).on( "click", function( event ) {
propStopped( event );
event.stopPropagation();
propStopped( event );
-});
+} );
]]></code>
<html><![CDATA[
<button>click me</button>
diff --git a/entries/event.metaKey.xml b/entries/event.metaKey.xml
index bca1b7b2e..0c00d6b9b 100644
--- a/entries/event.metaKey.xml
+++ b/entries/event.metaKey.xml
@@ -8,6 +8,8 @@
<longdesc>
<p>Returns a boolean value (<code>true</code> or <code>false</code>) that indicates whether or not the <kbd>META</kbd> key was pressed at the time the event fired.
This key might map to an alternative key name on some platforms.</p>
+ <p>On Macintosh keyboards, the <kbd>META</kbd> key maps to the <a href="https://en.wikipedia.org/wiki/Command_key">Command key (⌘)</a>.</p>
+ <p>On Windows keyboards, the <kbd>META</kbd> key maps to the <a href="https://en.wikipedia.org/wiki/Windows_key">Windows key</a>.</p>
</longdesc>
<example>
<desc>Determine whether the META key was pressed when the event fired.</desc>
@@ -24,7 +26,7 @@
<div id="display"></div>
]]></html>
<code><![CDATA[
-$( "#checkMetaKey" ).click(function( event ) {
+$( "#checkMetaKey" ).on( "click", function( event ) {
$( "#display" ).text( event.metaKey );
});
]]></code>
diff --git a/entries/event.namespace.xml b/entries/event.namespace.xml
index ed661c920..bbebcda4d 100644
--- a/entries/event.namespace.xml
+++ b/entries/event.namespace.xml
@@ -14,7 +14,7 @@
$( "p" ).on( "test.something", function( event ) {
alert( event.namespace );
});
-$( "button" ).click(function( event ) {
+$( "button" ).on( "click", function( event ) {
$( "p" ).trigger( "test.something" );
});
]]></code>
diff --git a/entries/event.preventDefault.xml b/entries/event.preventDefault.xml
index 68f0a43ac..82b4e1047 100644
--- a/entries/event.preventDefault.xml
+++ b/entries/event.preventDefault.xml
@@ -11,7 +11,7 @@
<example>
<desc>Cancel the default action (navigation) of the click.</desc>
<code><![CDATA[
-$( "a" ).click(function( event ) {
+$( "a" ).on( "click", function( event ) {
event.preventDefault();
$( "<div>" )
.append( "default " + event.type + " prevented" )
@@ -19,7 +19,7 @@ $( "a" ).click(function( event ) {
});
]]></code>
<html><![CDATA[
-<a href="http://jquery.com">default click action is prevented</a>
+<a href="https://jquery.com">default click action is prevented</a>
<div id="log"></div>
]]></html>
</example>
diff --git a/entries/event.relatedTarget.xml b/entries/event.relatedTarget.xml
index 97908df75..e4ee9eafa 100644
--- a/entries/event.relatedTarget.xml
+++ b/entries/event.relatedTarget.xml
@@ -11,9 +11,9 @@
<example>
<desc>On mouseout of anchors, alert the element type being entered.</desc>
<code><![CDATA[
-$( "a" ).mouseout(function( event ) {
+$( "a" ).on( "mouseout", function( event ) {
alert( event.relatedTarget.nodeName ); // "DIV"
-});
+} );
]]></code>
</example>
<category slug="events/event-object"/>
diff --git a/entries/event.result.xml b/entries/event.result.xml
index fa5cd9adc..40bd18724 100644
--- a/entries/event.result.xml
+++ b/entries/event.result.xml
@@ -11,10 +11,10 @@
<example>
<desc>Display previous handler's return value</desc>
<code><![CDATA[
-$( "button" ).click(function( event ) {
+$( "button" ).on( "click", function( event ) {
return "hey";
});
-$( "button" ).click(function( event ) {
+$( "button" ).on( "click", function( event ) {
$( "p" ).html( event.result );
});
]]></code>
diff --git a/entries/event.stopImmediatePropagation.xml b/entries/event.stopImmediatePropagation.xml
index b067e43a9..dd86bd7cc 100644
--- a/entries/event.stopImmediatePropagation.xml
+++ b/entries/event.stopImmediatePropagation.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="event.stopImmediatePropagation" return="">
+<entry type="method" name="event.stopImmediatePropagation" return="undefined">
<title>event.stopImmediatePropagation()</title>
<signature>
<added>1.3</added>
@@ -25,14 +25,14 @@
}
]]></css>
<code><![CDATA[
-$( "p" ).click(function( event ) {
+$( "p" ).on( "click", function( event ) {
event.stopImmediatePropagation();
});
-$( "p" ).click(function( event ) {
+$( "p" ).on( "click", function( event ) {
// This function won't be executed
$( this ).css( "background-color", "#f00" );
});
-$( "div" ).click(function( event ) {
+$( "div" ).on( "click", function( event ) {
// This function will be executed
$( this ).css( "background-color", "#f00" );
});
diff --git a/entries/event.stopPropagation.xml b/entries/event.stopPropagation.xml
index 923b95879..de93b6e68 100644
--- a/entries/event.stopPropagation.xml
+++ b/entries/event.stopPropagation.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="event.stopPropagation" return="">
+<entry type="method" name="event.stopPropagation" return="undefined">
<title>event.stopPropagation()</title>
<signature>
<added>1.0</added>
@@ -7,14 +7,14 @@
<desc>Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.</desc>
<longdesc>
<p>We can use <code><a href="/https/github.com/event.isPropagationStopped/">event.isPropagationStopped()</a></code> to determine if this method was ever called (on that event object). </p>
- <p>This method works for custom events triggered with <a href="/https/github.com/trigger/">trigger()</a>, as well.</p>
+ <p>This method works for custom events triggered with <a href="/https/github.com/trigger/">trigger()</a> as well.</p>
<p>Note that this will not prevent other handlers <em>on the same element</em> from running. </p>
</longdesc>
<note id="propagation-for-live-or-delegate" type="additional"/>
<example>
<desc>Kill the bubbling on the click event.</desc>
<code><![CDATA[
-$( "p" ).click(function( event ) {
+$( "p" ).on( "click", function( event ) {
event.stopPropagation();
// Do something
});
diff --git a/entries/event.target.xml b/entries/event.target.xml
index 7ce3c544b..82c701778 100644
--- a/entries/event.target.xml
+++ b/entries/event.target.xml
@@ -11,7 +11,7 @@
<example>
<desc>Display the tag's name on click</desc>
<code><![CDATA[
-$( "body" ).click(function( event ) {
+$( "body" ).on( "click", function( event ) {
$( "#log" ).html( "clicked: " + event.target.nodeName );
});
]]></code>
@@ -40,7 +40,7 @@ function handler( event ) {
target.children().toggle();
}
}
-$( "ul" ).click( handler ).find( "ul" ).hide();
+$( "ul" ).on( "click", handler ).find( "ul" ).hide();
]]></code>
<html><![CDATA[
<ul>
diff --git a/entries/event.timeStamp.xml b/entries/event.timeStamp.xml
index f63b62cea..089997ba7 100644
--- a/entries/event.timeStamp.xml
+++ b/entries/event.timeStamp.xml
@@ -22,7 +22,7 @@
]]></css>
<code><![CDATA[
var last, diff;
-$( "div" ).click(function( event ) {
+$( "div" ).on( "click", function( event ) {
if ( last ) {
diff = event.timeStamp - last;
$( "div" ).append( "time since last event: " + diff + "<br>" );
diff --git a/entries/event.type.xml b/entries/event.type.xml
index 8bde75591..a51cc1c85 100644
--- a/entries/event.type.xml
+++ b/entries/event.type.xml
@@ -9,7 +9,7 @@
<example>
<desc>On all anchor clicks, alert the event type.</desc>
<code><![CDATA[
-$( "a" ).click(function( event ) {
+$( "a" ).on( "click", function( event ) {
alert( event.type ); // "click"
});
]]></code>
diff --git a/entries/event.which.xml b/entries/event.which.xml
index efa9cddf0..e8e6aa28b 100644
--- a/entries/event.which.xml
+++ b/entries/event.which.xml
@@ -6,7 +6,7 @@
</signature>
<desc>For key or mouse events, this property indicates the specific key or button that was pressed.</desc>
<longdesc>
- <p>The <code>event.which</code> property normalizes <code>event.keyCode</code> and <code>event.charCode</code>. It is recommended to watch <code>event.which</code> for keyboard key input. For more detail, read about <a href="https://developer.mozilla.org/en/DOM/event.charCode#Notes">event.charCode on the MDC</a>. </p>
+ <p>The <code>event.which</code> property normalizes <code>event.keyCode</code> and <code>event.charCode</code>. It is recommended to watch <code>event.which</code> for keyboard key input. For more detail, read about <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/charCode#notes">event.charCode on the MDN</a>. </p>
<p><code>event.which</code> also normalizes button presses (<code>mousedown</code> and <code>mouseup</code>events), reporting <code>1</code> for left button, <code>2</code> for middle, and <code>3</code> for right. Use <code>event.which</code> instead of <code>event.button</code>. </p>
</longdesc>
<example>
diff --git a/entries/fadeIn.xml b/entries/fadeIn.xml
index 819e663ea..1975c039c 100644
--- a/entries/fadeIn.xml
+++ b/entries/fadeIn.xml
@@ -29,20 +29,21 @@
<img id="book" src="book.png" alt="" width="100" height="123">
// With the element initially hidden, we can show it slowly:
-$( "#clickme" ).click(function() {
+$( "#clickme" ).on( "click", function() {
$( "#book" ).fadeIn( "slow", function() {
// Animation complete
});
});
</code></pre>
- <p class="image four-across">
- <img src="/https/github.com/resources/0042_06_33.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_34.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_35.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_36.png" alt=""/>
- </p>
+ <figure>
+ <img class="column three" src="/https/github.com/resources/0042_06_33.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_34.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_35.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_36.png" alt=""/>
+ <figcaption>Figure 1 - Illustration of the <code>fadeIn()</code> effect</figcaption>
+ </figure>
<h4 id="easing">Easing</h4>
- <p><strong>As of jQuery 1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com">jQuery UI suite</a>.</p>
+ <p><strong>As of jQuery 1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="https://jqueryui.com">jQuery UI suite</a>.</p>
<h4 id="callback-function">Callback Function</h4>
<p>If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but <code>this</code> is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole. </p>
<p><strong>As of jQuery 1.6</strong>, the <code><a href="/https/github.com/promise/">.promise()</a></code> method can be used in conjunction with the <code><a href="/https/github.com/deferred.done/">deferred.done()</a></code> method to execute a single callback for the animation as a whole when <em>all</em> matching elements have completed their animations ( See the <a href="/https/github.com/promise/#example-1">example for .promise()</a> ). </p>
@@ -51,9 +52,9 @@ $( "#clickme" ).click(function() {
<example>
<desc>Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.</desc>
<code><![CDATA[
-$( document.body ).click(function() {
- $( "div:hidden:first" ).fadeIn( "slow" );
-});
+$( document.body ).on( "click", function() {
+ $( "div:hidden" ).first().fadeIn( "slow" );
+} );
]]></code>
<css><![CDATA[
span {
@@ -87,7 +88,7 @@ $( document.body ).click(function() {
<example>
<desc>Fades a red block in over the text. Once the animation is done, it quickly fades in more text on top.</desc>
<code><![CDATA[
-$( "a" ).click(function() {
+$( "a" ).on( "click", function() {
$( "div" ).fadeIn( 3000, function() {
$( "span" ).fadeIn( 100 );
});
diff --git a/entries/fadeOut.xml b/entries/fadeOut.xml
index 282289794..5050e1a57 100644
--- a/entries/fadeOut.xml
+++ b/entries/fadeOut.xml
@@ -30,23 +30,24 @@
</code></pre>
<p>With the element initially shown, we can hide it slowly:</p>
<pre><code>
-$( "#clickme" ).click(function() {
+$( "#clickme" ).on( "click", function() {
$( "#book" ).fadeOut( "slow", function() {
// Animation complete.
});
});
</code></pre>
- <p class="image four-across">
- <img src="/https/github.com/resources/0042_06_37.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_38.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_39.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_40.png" alt=""/>
- </p>
+ <figure>
+ <img class="column three" src="/https/github.com/resources/0042_06_37.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_38.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_39.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_40.png" alt=""/>
+ <figcaption>Figure 1 - Illustration of the <code>fadeOut()</code> effect</figcaption>
+ </figure>
<div class="warning">
<p><strong>Note: </strong>To avoid unnecessary DOM manipulation, <code>.fadeOut()</code> will not hide an element that is already considered hidden. For information on which elements jQuery considers hidden, see <a href="/https/github.com/hidden-selector/"> :hidden Selector</a>.</p>
</div>
<h4 id="easing">Easing</h4>
- <p><strong>As of jQuery 1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com">jQuery UI suite</a>.</p>
+ <p><strong>As of jQuery 1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="https://jqueryui.com">jQuery UI suite</a>.</p>
<h4 id="callback-function">Callback Function</h4>
<p>If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but <code>this</code> is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.</p>
<p><strong>As of jQuery 1.6</strong>, the <code><a href="/https/github.com/promise/">.promise()</a></code> method can be used in conjunction with the <code><a href="/https/github.com/deferred.done/">deferred.done()</a></code> method to execute a single callback for the animation as a whole when <em>all</em> matching elements have completed their animations ( See the <a href="/https/github.com/promise/#example-1">example for .promise()</a> ). </p>
@@ -55,7 +56,7 @@ $( "#clickme" ).click(function() {
<example>
<desc>Animates all paragraphs to fade out, completing the animation within 600 milliseconds.</desc>
<code><![CDATA[
-$( "p" ).click(function() {
+$( "p" ).on( "click", function() {
$( "p" ).fadeOut( "slow" );
});
]]></code>
@@ -75,7 +76,7 @@ $( "p" ).click(function() {
<example>
<desc>Fades out spans in one section that you click on.</desc>
<code><![CDATA[
-$( "span" ).click(function() {
+$( "span" ).on( "click", function() {
$( this ).fadeOut( 1000, function() {
$( "div" ).text( "'" + $( this ).text() + "' has faded!" );
$( this ).remove();
@@ -112,7 +113,7 @@ $( "span" ).hover(function() {
<example>
<desc>Fades out two divs, one with a "linear" easing and one with the default, "swing," easing.</desc>
<code><![CDATA[
-$( "#btn1" ).click(function() {
+$( "#btn1" ).on( "click", function() {
function complete() {
$( "<div>" ).text( this.id ).appendTo( "#log" );
}
@@ -120,7 +121,7 @@ $( "#btn1" ).click(function() {
$( "#box2" ).fadeOut( 1600, complete );
});
-$( "#btn2" ).click(function() {
+$( "#btn2" ).on( "click", function() {
$( "div" ).show();
$( "#log" ).empty();
});
diff --git a/entries/fadeTo.xml b/entries/fadeTo.xml
index 5ce984583..c77da0d68 100644
--- a/entries/fadeTo.xml
+++ b/entries/fadeTo.xml
@@ -44,27 +44,28 @@
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
// With the element initially shown, we can dim it slowly:
-$( "#clickme" ).click(function() {
+$( "#clickme" ).on( "click", function() {
$( "#book" ).fadeTo( "slow" , 0.5, function() {
// Animation complete.
});
});
</code></pre>
- <p class="image four-across">
- <img src="/https/github.com/resources/0042_06_41.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_42.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_43.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_44.png" alt=""/>
- </p>
+ <figure>
+ <img class="column three" src="/https/github.com/resources/0042_06_41.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_42.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_43.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_44.png" alt=""/>
+ <figcaption>Figure 1 - Illustration of the <code>fadeTo()</code> effect</figcaption>
+ </figure>
<p>With <code>duration</code> set to <code>0</code>, this method just changes the <code>opacity</code> CSS property, so <code>.fadeTo( 0, opacity )</code> is the same as <code>.css( "opacity", opacity )</code>.</p>
</longdesc>
<note id="jquery.fx.off" type="additional" data-title=".fadeTo()"/>
<example>
<desc>Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.</desc>
<code><![CDATA[
-$( "p:first" ).click(function() {
+$( "p" ).first().on( "click", function() {
$( this ).fadeTo( "slow", 0.33 );
-});
+} );
]]></code>
<html><![CDATA[
<p>
@@ -79,7 +80,7 @@ Compare to this one that won't fade.
<example>
<desc>Fade div to a random opacity on each click, completing the animation within 200 milliseconds.</desc>
<code><![CDATA[
-$( "div" ).click(function() {
+$( "div" ).on( "click", function() {
$( this ).fadeTo( "fast", Math.random() );
});
]]></code>
@@ -127,26 +128,26 @@ 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" )
.each(function( n ) {
$( this ).css( "left", getPos( n ) );
- })
+ } )
.css( "cursor", "pointer" )
- .click( function() {
+ .on( "click", function() {
$( this ).fadeTo( 250, 0.25, function() {
$( this )
.css( "cursor", "" )
.prev()
- .css({
+ .css( {
"font-weight": "bolder",
"font-style": "italic"
- });
- });
- });
+ } );
+ } );
+ } );
]]></code>
<css><![CDATA[
div, p {
diff --git a/entries/fadeToggle.xml b/entries/fadeToggle.xml
index 93bac0848..22e246ee4 100644
--- a/entries/fadeToggle.xml
+++ b/entries/fadeToggle.xml
@@ -17,7 +17,7 @@
<p>The <code>.fadeToggle()</code> method animates the opacity of the matched elements. When called on a visible element, the element's <code>display</code> style property is set to <code>none</code> once the opacity reaches 0, so the element no longer affects the layout of the page.</p>
<p>Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings <code>'fast'</code> and <code>'slow'</code> can be supplied to indicate durations of <code>200</code> and <code>600</code> milliseconds, respectively.</p>
<h4 id="easing">Easing</h4>
- <p>The string representing an easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com">jQuery UI suite</a>.</p>
+ <p>The string representing an easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="https://jqueryui.com">jQuery UI suite</a>.</p>
<h4 id="callback-function">Callback Function</h4>
<p>If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but <code>this</code> is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.</p>
<p><strong>As of jQuery 1.6</strong>, the <code><a href="/https/github.com/promise/">.promise()</a></code> method can be used in conjunction with the <code><a href="/https/github.com/deferred.done/">deferred.done()</a></code> method to execute a single callback for the animation as a whole when <em>all</em> matching elements have completed their animations ( See the <a href="/https/github.com/promise/#example-1">example for .promise()</a> ). </p>
@@ -26,14 +26,14 @@
<example>
<desc>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. </desc>
<code><![CDATA[
-$( "button:first" ).click(function() {
- $( "p:first" ).fadeToggle( "slow", "linear" );
-});
-$( "button:last" ).click(function() {
- $( "p:last" ).fadeToggle( "fast", function() {
+$( "button" ).first().on( "click", function() {
+ $( "p" ).first().fadeToggle( "slow", "linear" );
+} );
+$( "button" ).last().on( "click", function() {
+ $( "p" ).last().fadeToggle( "fast", function() {
$( "#log" ).append( "<div>finished</div>" );
- });
-});
+ } );
+} );
]]></code>
<html><![CDATA[
<button>fadeToggle p1</button>
diff --git a/entries/file-selector.xml b/entries/file-selector.xml
index db9c7b867..c5295eca0 100644
--- a/entries/file-selector.xml
+++ b/entries/file-selector.xml
@@ -13,16 +13,16 @@
<example>
<desc>Finds all file inputs.</desc>
<code><![CDATA[
-var input = $( "input:file" ).css({
+var input = $( "input:file" ).css( {
background: "yellow",
border: "3px red solid"
-});
+} );
$( "div" )
.text( "For this type jQuery found " + input.length + "." )
.css( "color", "red" );
-$( "form" ).submit(function( event ) {
+$( "form" ).on( "submit", function( event ) {
event.preventDefault();
-});
+} );
]]></code>
<css><![CDATA[
textarea {
diff --git a/entries/filter.xml b/entries/filter.xml
index 440b42778..ed92d385c 100644
--- 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>
@@ -76,6 +76,8 @@ $( "li" )
.css( "background-color", "red" );
</code></pre>
<p>This alteration to the code will cause the third and sixth list items to be highlighted, as it uses the modulus operator (<code>%</code>) to select every item with an <code>index</code> value that, when divided by 3, has a remainder of <code>2</code>.</p>
+ <p><strong>Note:</strong> When a CSS selector string is passed to <code>.filter()</code>, text and comment nodes will always be removed from the resulting jQuery object during the filtering process. When a specific node or array of nodes are provided, a text or comment node will be included in the resulting jQuery object only if it matches one of the nodes in the filtering array.</p>
+ <note id="svg-support" type="additional"/>
</longdesc>
<example>
<desc>Change the color of all divs; then add a border to those with a "middle" class.</desc>
diff --git a/entries/find.xml b/entries/find.xml
index b6a826541..fc10241bd 100644
--- a/entries/find.xml
+++ b/entries/find.xml
@@ -18,7 +18,7 @@
<desc>Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.</desc>
<longdesc>
<p>Given a jQuery object that represents a set of DOM elements, the <code>.find()</code> method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The <code>.find()</code> and <code>.children()</code> methods are similar, except that the latter only travels a single level down the DOM tree.</p>
- <p>The first signature for the <code>.find()</code>method accepts a selector expression of the same type that we can pass to the <code>$()</code> function. The elements will be filtered by testing whether they match this selector.</p>
+ <p>The first signature for the <code>.find()</code>method accepts a selector expression of the same type that we can pass to the <code>$()</code> function. The elements will be filtered by testing whether they match this selector; all parts of the selector must lie inside of an element on which .find() is called. The expressions allowed include selectors like <code>> p</code> which will find all the paragraphs that are children of the elements in the jQuery object.</p>
<p>Consider a page with a basic nested list on it:</p>
<pre><code>
<ul class="level-1">
@@ -63,6 +63,7 @@ var item1 = $( "li.item-1" )[ 0 ];
$( "li.item-ii" ).find( item1 ).css( "background-color", "red" );
</code></pre>
<p>The result of this call would be a red background on item 1.</p>
+ <note id="svg-support" type="additional"/>
</longdesc>
<example>
<desc>Starts with all paragraphs and searches for descendant span elements, same as <code>$( "p span" )</code></desc>
diff --git a/entries/finish.xml b/entries/finish.xml
index 969757504..506d53f2b 100644
--- a/entries/finish.xml
+++ b/entries/finish.xml
@@ -4,7 +4,7 @@
<desc>Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.</desc>
<signature>
<added>1.9</added>
- <argument name="queue" type="String" optional="true">
+ <argument name="queue" type="String" optional="true" default="'fx'">
<desc>The name of the queue in which to stop animations.</desc>
</argument>
</signature>
diff --git a/entries/first-child-selector.xml b/entries/first-child-selector.xml
index 4b30b503a..d91a50b8b 100644
--- a/entries/first-child-selector.xml
+++ b/entries/first-child-selector.xml
@@ -7,7 +7,7 @@
</signature>
<desc>Selects all elements that are the first child of their parent.</desc>
<longdesc>
- <p>While <a href="/https/github.com/first-selector/">:first</a> matches only a single element, the <code>:first-child</code> selector can match more than one: one for each parent. This is equivalent to <code>:nth-child(1)</code>.</p>
+ <p>While <a href="/https/github.com/first/">.first()</a> matches only a single element, the <code>:first-child</code> selector can match more than one: one for each parent. This is equivalent to <code>:nth-child(1)</code>.</p>
</longdesc>
<example>
<desc>Finds the first span in each matched div to underline and add a hover state.</desc>
diff --git a/entries/first-selector.xml b/entries/first-selector.xml
index a0371809b..1308ff5ec 100644
--- a/entries/first-selector.xml
+++ b/entries/first-selector.xml
@@ -1,12 +1,15 @@
<?xml version="1.0"?>
-<entry type="selector" name="first" return="">
+<entry type="selector" name="first" return="" deprecated="3.4">
<title>:first Selector</title>
<sample>:first</sample>
<signature>
<added>1.0</added>
</signature>
- <desc>Selects the first matched element.</desc>
+ <desc>Selects the first matched DOM element.</desc>
<longdesc>
+ <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="/https/github.com/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="/https/github.com/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"/>
@@ -33,4 +36,5 @@ $( "tr:first" ).css( "font-style", "italic" );
<category slug="selectors/basic-filter-selectors"/>
<category slug="selectors/jquery-selector-extensions"/>
<category slug="version/1.0"/>
+ <category slug="deprecated/deprecated-3.4"/>
</entry>
diff --git a/entries/first.xml b/entries/first.xml
index f73f8f10b..90ac489c7 100644
--- 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/focus-shorthand.xml b/entries/focus-shorthand.xml
new file mode 100644
index 000000000..a38f4c280
--- /dev/null
+++ b/entries/focus-shorthand.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0"?>
+<entry type="method" name="focus" return="jQuery" deprecated="3.3">
+ <title>.focus()</title>
+ <desc>Bind an event handler to the "focus" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.focus( handler )</code> or <code>.focus( eventData, handler )</code>, use <a href="/https/github.com/focus/#on1"><code>.on( "focus", handler )</code></a> or <a href="/https/github.com/focus/#on1"><code>.on( "focus", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.focus()</code>, use <a href="/https/github.com/focus/#trigger2"><code>.trigger( "focus" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/form-events"/>
+ <category slug="forms"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/focus.xml b/entries/focus.xml
index 969572191..c9736a295 100644
--- a/entries/focus.xml
+++ b/entries/focus.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="focus" return="jQuery">
- <title>.focus()</title>
- <desc>Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.</desc>
+<entries>
+
+<desc>Bind an event handler to the "focus" event, or trigger that event on an element.</desc>
+<entry type="method" name="on" return="jQuery">
+ <title>focus event</title>
+ <desc>Bind an event handler to the "focus" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""focus"" type="string">
+ <desc>The string <code>"focus"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,17 +18,16 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
+ <div class="warning">
+ <p>This page describes the <code>focus</code> event. For the deprecated <code>.focus()</code> method, see <a href="/https/github.com/focus-shorthand/"><code>.focus()</code></a>.</p>
+ </div>
<ul>
- <li>This method is a shortcut for <code>.on( "focus", handler )</code> in the first and second variations, and <code>.trigger( "focus" )</code> in the third.</li>
<li>The <code>focus</code> event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<code><input></code>, <code><select></code>, etc.) and links (<code><a href></code>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's <code>tabindex</code> property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.</li>
<li>Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events.</li>
</ul>
<div class="warning">
- <p>Attempting to set focus to a hidden element causes an error in Internet Explorer. Take care to only use <code>.focus()</code> on elements that are visible. To run an element's focus event handlers without setting focus to the element, use <code>.triggerHandler( "focus" )</code> instead of <code>.focus()</code>.</p>
+ <p>Attempting to set focus to a hidden element causes an error in Internet Explorer. Take care to only use <code>.trigger( "focus" )</code> on elements that are visible. To run an element's focus event handlers without setting focus to the element, use <code>.triggerHandler( "focus" )</code> instead of <code>.trigger( "focus" )</code>.</p>
</div>
<p>For example, consider the HTML:</p>
<pre><code>
@@ -43,22 +41,23 @@
</code></pre>
<p>The event handler can be bound to the first input field:</p>
<pre><code>
-$( "#target" ).focus(function() {
- alert( "Handler for .focus() called." );
-});
+$( "#target" ).on( "focus", function() {
+ alert( "Handler for `focus` called." );
+} );
</code></pre>
<p>Now clicking on the first field, or tabbing to it from another field, displays the alert:</p>
<p>
- <samp>Handler for .focus() called.</samp>
+ <samp>Handler for `focus` called.</samp>
</p>
<p>We can trigger the event when another element is clicked:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( "#target" ).focus();
-});
+$( "#other" ).on( "click", function() {
+ $( "#target" ).trigger( "focus" );
+} );
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also alert the message.</p>
- <p>The <code>focus</code> event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the <code>focus</code> event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping <code>focus</code> to the <code>focusin</code> event in its event delegation methods, <a href="/https/github.com/live/"><code>.live()</code></a> and <a href="/https/github.com/delegate/"><code>.delegate()</code></a>.</p>
+ <p>The <code>focus</code> event does not bubble. As of version 1.4.2, jQuery works around this limitation by mapping <code>focus</code> to the <code>focusin</code> event in its event delegation methods.</p>
+ <p>The native <code>focus</code> event is asynchronous in all versions of IE, contrary to other browsers. To avoid issues related to this discrepancy, as of jQuery 3.7.0, jQuery uses <code>focusin</code> as the native backing event for <code>focus</code> in IE.</p>
</longdesc>
<example>
<desc>Fire focus.</desc>
@@ -68,9 +67,9 @@ $( "#other" ).click(function() {
}
]]></css>
<code><![CDATA[
-$( "input" ).focus(function() {
+$( "input" ).on( "focus", function() {
$( this ).next( "span" ).css( "display", "inline" ).fadeOut( 1000 );
-});
+} );
]]></code>
<html><![CDATA[
<p><input type="text"> <span>focus fire</span></p>
@@ -80,21 +79,41 @@ $( "input" ).focus(function() {
<example>
<desc>To stop people from writing in text input boxes, try:</desc>
<code><![CDATA[
-$( "input[type=text]" ).focus(function() {
- $( this ).blur();
-});
+$( "input[type=text]" ).on( "focus", function() {
+ $( this ).trigger( "blur" );
+} );
]]></code>
</example>
<example>
<desc>To focus on a login input box with id 'login' on page startup, try:</desc>
<code><![CDATA[
-$( document ).ready(function() {
- $( "#login" ).focus();
-});
+$( function() {
+ $( "#login" ).trigger( "focus" );
+} );
]]></code>
</example>
<category slug="events/form-events"/>
<category slug="forms"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
+ <category slug="version/3.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>focus event</title>
+ <desc>Trigger the "focus" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""focus"" type="string">
+ <desc>The string <code>"focus"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "focus", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/form-events"/>
+ <category slug="forms"/>
+ <category slug="version/1.0"/>
</entry>
+
+</entries>
diff --git a/entries/focusin-shorthand.xml b/entries/focusin-shorthand.xml
new file mode 100644
index 000000000..ff8f548ed
--- /dev/null
+++ b/entries/focusin-shorthand.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0"?>
+<entry type="method" name="focusin" return="jQuery" deprecated="3.3">
+ <title>.focusin()</title>
+ <desc>Bind an event handler to the "focusin" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.focusin( handler )</code> or <code>.focusin( eventData, handler )</code>, use <a href="/https/github.com/focusin/#on1"><code>.on( "focusin", handler )</code></a> or <a href="/https/github.com/focusin/#on1"><code>.on( "focusin", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.focusin()</code>, use <a href="/https/github.com/focusin/#trigger2"><code>.trigger( "focusin" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/form-events"/>
+ <category slug="forms"/>
+ <category slug="version/1.4"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/focusin.xml b/entries/focusin.xml
index dd273e670..7b5288f67 100644
--- a/entries/focusin.xml
+++ b/entries/focusin.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="focusin" return="jQuery">
- <title>.focusin()</title>
+<entries>
+
+<desc>Bind an event handler to the "focusin" event, or trigger that event on an element.</desc>
+<entry type="method" name="on" return="jQuery">
+ <title>focusin event</title>
<desc>Bind an event handler to the "focusin" event.</desc>
<signature>
- <added>1.4</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""focusin"" type="string">
+ <desc>The string <code>"focusin"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -20,7 +19,9 @@
</argument>
</signature>
<longdesc>
- <p>This method is a shortcut for <code>.on('focusin', handler)</code>.</p>
+ <div class="warning">
+ <p>This page describes the <code>focusin</code> event. For the deprecated <code>.focusin()</code> method, see <a href="/https/github.com/focusin-shorthand/"><code>.focusin()</code></a>.</p>
+ </div>
<p>The <code>focusin</code> event is sent to an element when it, or any element inside of it, gains focus. This is distinct from the <a href="/https/github.com/focus/">focus</a> event in that it supports detecting the focus event on parent elements (in other words, it supports event bubbling).</p>
<p>This event will likely be used together with the <a href="/https/github.com/focusout/">focusout</a> event.</p>
</longdesc>
@@ -32,9 +33,9 @@
}
]]></css>
<code><![CDATA[
-$( "p" ).focusin(function() {
+$( "p" ).on( "focusin", function() {
$( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );
-});
+} );
]]></code>
<html><![CDATA[
<p><input type="text"> <span>focusin fire</span></p>
@@ -42,6 +43,28 @@ $( "p" ).focusin(function() {
]]></html>
</example>
<category slug="events/form-events"/>
+ <category slug="forms"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4"/>
+ <category slug="version/1.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>focusin event</title>
+ <desc>Trigger the "focusin" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""focusin"" type="string">
+ <desc>The string <code>"focusin"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "focusin", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/form-events"/>
+ <category slug="forms"/>
+ <category slug="version/1.0"/>
<category slug="version/1.4"/>
- <category slug="version/1.4.3"/>
</entry>
+
+</entries>
diff --git a/entries/focusout-shorthand.xml b/entries/focusout-shorthand.xml
new file mode 100644
index 000000000..6114a08be
--- /dev/null
+++ b/entries/focusout-shorthand.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0"?>
+<entry type="method" name="focusout" return="jQuery" deprecated="3.3">
+ <title>.focusout()</title>
+ <desc>Bind an event handler to the "focusout" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.focusout( handler )</code> or <code>.focusout( eventData, handler )</code>, use <a href="/https/github.com/focusout/#on1"><code>.on( "focusout", handler )</code></a> or <a href="/https/github.com/focusout/#on1"><code>.on( "focusout", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.focusout()</code>, use <a href="/https/github.com/focusout/#trigger2"><code>.trigger( "focusout" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/form-events"/>
+ <category slug="forms"/>
+ <category slug="version/1.4"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/focusout.xml b/entries/focusout.xml
index b8ac43732..7b90cb82d 100644
--- a/entries/focusout.xml
+++ b/entries/focusout.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="focusout" return="jQuery">
- <title>.focusout()</title>
- <desc>Bind an event handler to the "focusout" JavaScript event.</desc>
+<entries>
+
+<desc>Bind an event handler to the "focusout" event, or trigger that event on an element.</desc>
+<entry type="method" name="on" return="jQuery">
+ <title>focusout event</title>
+ <desc>Bind an event handler to the "focusout" event.</desc>
<signature>
- <added>1.4</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""focusout"" type="string">
+ <desc>The string <code>"focusout"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -20,7 +19,9 @@
</argument>
</signature>
<longdesc>
- <p>This method is a shortcut for <code>.on( "focusout", handler )</code> when passed arguments, and <code>.trigger( "focusout" )</code> when no arguments are passed.</p>
+ <div class="warning">
+ <p>This page describes the <code>focusout</code> event. For the deprecated <code>.focusout()</code> method, see <a href="/https/github.com/focusout-shorthand/"><code>.focusout()</code></a>.</p>
+ </div>
<p>The <code>focusout</code> event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the <a href="/https/github.com/blur/">blur</a> event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).</p>
<p>This event will likely be used together with the <a href="/https/github.com/focusin/">focusin</a> event.</p>
</longdesc>
@@ -36,17 +37,17 @@
}
]]></css>
<code><![CDATA[
-var focus = 0,
+var focusout = 0,
blur = 0;
$( "p" )
- .focusout(function() {
- focus++;
- $( "#focus-count" ).text( "focusout fired: " + focus + "x" );
- })
- .blur(function() {
+ .on( "focusout", function() {
+ focusout++;
+ $( "#focus-count" ).text( "focusout fired: " + focusout + "x" );
+ } )
+ .on( "blur", function() {
blur++;
$( "#blur-count" ).text( "blur fired: " + blur + "x" );
- });
+ } );
]]></code>
<html><![CDATA[
<div class="inputs">
@@ -62,8 +63,29 @@ $( "p" )
<div id="blur-count">blur fire</div>
]]></html>
</example>
- <category slug="events/keyboard-events"/>
- <category slug="events/mouse-events"/>
+ <category slug="events/form-events"/>
+ <category slug="forms"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4"/>
+ <category slug="version/1.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>focusout event</title>
+ <desc>Trigger the "focuout" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""focusout"" type="string">
+ <desc>The string <code>"focusout"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "focusout", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/form-events"/>
+ <category slug="forms"/>
+ <category slug="version/1.0"/>
<category slug="version/1.4"/>
- <category slug="version/1.4.3"/>
</entry>
+
+</entries>
diff --git a/entries/get.xml b/entries/get.xml
index 64272cf47..cb52eb2d0 100644
--- a/entries/get.xml
+++ b/entries/get.xml
@@ -43,10 +43,10 @@ console.log( $( "li" ).get( -1 ) );
<example>
<desc>Display the tag name of the click element.</desc>
<code><![CDATA[
-$( "*", document.body ).click(function( event ) {
+$( "*", document.body ).on( "click", function( event ) {
event.stopPropagation();
var domElement = $( this ).get( 0 );
- $( "span:first" ).text( "Clicked on - " + domElement.nodeName );
+ $( "span" ).first().text( "Clicked on - " + domElement.nodeName );
});
]]></code>
<css><![CDATA[
diff --git a/entries/gt-selector.xml b/entries/gt-selector.xml
index 303723a9d..1aad2e3d7 100644
--- a/entries/gt-selector.xml
+++ b/entries/gt-selector.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="selector" name="gt" return="">
+<entry type="selector" name="gt" return="" deprecated="3.4">
<title>:gt() Selector</title>
<signature>
<sample>:gt(index)</sample>
@@ -17,6 +17,9 @@
</signature>
<desc>Select all elements at an index greater than <code>index</code> within the matched set.</desc>
<longdesc>
+ <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="/https/github.com/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>
@@ -42,4 +45,5 @@ $( "td:gt(-2)" ).css( "color", "red" );
<category slug="selectors/basic-filter-selectors"/>
<category slug="selectors/jquery-selector-extensions"/>
<category slug="version/1.0"/>
+ <category slug="deprecated/deprecated-3.4"/>
</entry>
diff --git a/entries/hasClass.xml b/entries/hasClass.xml
index 37b52f79c..622570e93 100644
--- a/entries/hasClass.xml
+++ b/entries/hasClass.xml
@@ -25,12 +25,13 @@ $( "#mydiv" ).hasClass( "bar" )
<pre><code>
$( "#mydiv" ).hasClass( "quux" )
</code></pre>
+ <p>As of jQuery 1.12/2.2, this method supports XML documents, including SVG.</p>
</longdesc>
<example>
<desc>Looks for the paragraph that contains 'selected' as a class.</desc>
<code><![CDATA[
-$( "#result1" ).append( $( "p:first" ).hasClass( "selected" ).toString() );
-$( "#result2" ).append( $( "p:last" ).hasClass( "selected" ).toString() );
+$( "#result1" ).append( $( "p" ).first().hasClass( "selected" ).toString() );
+$( "#result2" ).append( $( "p" ).last().hasClass( "selected" ).toString() );
$( "#result3" ).append( $( "p" ).hasClass( "selected" ).toString() ) ;
]]></code>
<css><![CDATA[
diff --git a/entries/height.xml b/entries/height.xml
index 9d4b86bcd..3a57f6039 100644
--- a/entries/height.xml
+++ b/entries/height.xml
@@ -9,9 +9,10 @@
<desc>Get the current computed height for the first element in the set of matched elements.</desc>
<longdesc>
<p>The difference between <code>.css( "height" )</code> and <code>.height()</code> is that the latter returns a unit-less pixel value (for example, <code>400</code>) while the former returns a value with units intact (for example, <code>400px</code>). The <code>.height()</code> method is recommended when an element's height needs to be used in a mathematical calculation.</p>
- <p class="image">
+ <figure>
<img src="/https/github.com/resources/0042_04_01.png"/>
- </p>
+ <figcaption>Figure 1 - Illustration of the measured height</figcaption>
+ </figure>
<p>This method is also able to find the height of the window and document.</p>
<pre><code>
// Returns height of browser viewport
@@ -26,20 +27,20 @@ $( document ).height();
</div>
</longdesc>
<note id="dimensions-number" type="additional" data-title=".height()"/>
- <note id="inaccurate-dimensions-for-hidden-elements" type="additional" data-title=".height()"/>
+ <note id="hidden-element-dimensions" type="additional" data-title=".height()"/>
<example>
<desc>Show various heights. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.</desc>
<code><![CDATA[
function showHeight( element, height ) {
$( "div" ).text( "The height for the " + element + " is " + height + "px." );
}
-$( "#getp" ).click(function() {
+$( "#getp" ).on( "click", function() {
showHeight( "paragraph", $( "p" ).height() );
});
-$( "#getd" ).click(function() {
+$( "#getd" ).on( "click", function() {
showHeight( "document", $( document ).height() );
});
-$( "#getw" ).click(function() {
+$( "#getw" ).on( "click", function() {
showHeight( "window", $( window ).height() );
});
]]></code>
diff --git a/entries/hidden-selector.xml b/entries/hidden-selector.xml
index 2daf20e63..44b8397c6 100644
--- a/entries/hidden-selector.xml
+++ b/entries/hidden-selector.xml
@@ -16,19 +16,22 @@
</ul>
<p>Elements with <code>visibility: hidden</code> or <code>opacity: 0</code> are considered to be visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation.</p>
<p>Elements that are not in a document are not considered to be visible; jQuery does not have a way to know if they will be visible when appended to a document since it depends on the applicable styles.</p>
+ <p>This selector is the opposite of the <a href="/https/github.com/visible-selector/"><code>:visible</code></a> selector. So, every element selected by <code>:hidden</code> isn't selected by <code>:visible</code> and vice versa.</p>
<p>During animations to show an element, the element is considered to be visible at the start of the animation.</p>
- <p>How <code>:hidden</code> is determined was changed in jQuery 1.3.2. An element is assumed to be hidden if it or any of its parents consumes no space in the document. CSS visibility isn't taken into account (therefore <code>$( elem ).css( "visibility", "hidden" ).is( ":hidden" ) == false</code>). The <a href="http://blog.jquery.com/2009/02/20/jquery-1-3-2-released/">release notes</a> outline the changes in more detail.</p>
+ <p>How <code>:hidden</code> is determined was changed in jQuery 1.3.2. An element is assumed to be hidden if it or any of its parents consumes no space in the document. CSS visibility isn't taken into account (therefore <code>$( elem ).css( "visibility", "hidden" ).is( ":hidden" ) == false</code>). The <a href="https://blog.jquery.com/2009/02/20/jquery-1-3-2-released/">release notes</a> outline the changes in more detail.</p>
+ <p>jQuery 3 slightly modifies the meaning of <code>:hidden</code> (and therefore of <a href="/https/github.com/visible-selector/"><code>:visible</code></a>). Starting with this version, elements will be considered <code>:hidden</code> if they don't have any layout boxes. For example, <code>br</code> elements and inline elements with no content will not be selected by the <code>:hidden</code> selector.</p>
</longdesc>
<note id="jquery-selector-extension" type="additional" data-selector=":hidden"/>
+ <note id="hidden-forces-layout" type="additional"/>
<example>
<desc>Shows all hidden divs and counts hidden inputs.</desc>
<code><![CDATA[
// In some browsers :hidden includes head, title, script, etc...
var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );
-$( "span:first" ).text( "Found " + hiddenElements.length + " hidden elements total." );
+$( "span" ).first().text( "Found " + hiddenElements.length + " hidden elements total." );
$( "div:hidden" ).show( 3000 );
-$( "span:last" ).text( "Found " + $( "input:hidden" ).length + " hidden inputs." );
+$( "span" ).last().text( "Found " + $( "input:hidden" ).length + " hidden inputs." );
]]></code>
<css><![CDATA[
div {
diff --git a/entries/hide.xml b/entries/hide.xml
index cfe38a29b..01f88a155 100644
--- a/entries/hide.xml
+++ b/entries/hide.xml
@@ -35,8 +35,11 @@ $( ".target" ).hide();
<p>When a duration, a plain object, or a "complete" function is provided, <code>.hide()</code> becomes an animation method. The <code>.hide()</code> method animates the width, height, and opacity of the matched elements simultaneously. When these properties reach 0, the <code>display</code> style property is set to <code>none</code> to ensure that the element no longer affects the layout of the page.</p>
<p>Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings <code>'fast'</code> and <code>'slow'</code> can be supplied to indicate durations of <code>200</code> and <code>600</code> milliseconds, respectively.</p>
<p>Note that <code>.hide()</code> is fired immediately and will override the animation queue if no duration or a duration of 0 is specified.</p>
- <p>As of jQuery <strong>1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com">jQuery UI suite</a>.</p>
+ <p>As of jQuery <strong>1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="https://jqueryui.com">jQuery UI suite</a>.</p>
<p>If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but <code>this</code> is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.</p>
+ <div class="warning">
+ <p><strong>Note:</strong> This method may cause performance issues, especially when used on many elements. If you're encountering such issues, use performance testing tools to determine whether this method is causing them. Moreover, this method can cause problems with responsive layouts if the display value differs at different viewport sizes.</p>
+ </div>
<p>We can animate any element, such as a simple image:</p>
<pre><code>
<div id="clickme">
@@ -46,25 +49,26 @@ $( ".target" ).hide();
</code></pre>
<pre><code>
// With the element initially shown, we can hide it slowly:
-$( "#clickme" ).click(function() {
+$( "#clickme" ).on( "click", function() {
$( "#book" ).hide( "slow", function() {
alert( "Animation complete." );
});
});
</code></pre>
- <p class="image four-across">
- <img src="/https/github.com/resources/0042_06_05.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_06.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_07.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_08.png" alt=""/>
- </p>
+ <figure>
+ <img class="column three" src="/https/github.com/resources/0042_06_05.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_06.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_07.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_08.png" alt=""/>
+ <figcaption>Figure 1 - Illustration of the <code>hide()</code> effect</figcaption>
+ </figure>
</longdesc>
<note id="jquery.fx.off" type="additional" data-title=".hide()"/>
<example>
<desc>Hides all paragraphs then the link on click.</desc>
<code><![CDATA[
$( "p" ).hide();
-$( "a" ).click(function( event ) {
+$( "a" ).on( "click", function( event ) {
event.preventDefault();
$( this ).hide();
});
@@ -78,7 +82,7 @@ $( "a" ).click(function( event ) {
<example>
<desc>Animates all shown paragraphs to hide slowly, completing the animation within 600 milliseconds.</desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( "p" ).hide( "slow" );
});
]]></code>
@@ -97,13 +101,13 @@ $( "button" ).click(function() {
<example>
<desc>Animates all spans (words in this case) to hide fastly, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.</desc>
<code><![CDATA[
-$( "#hider" ).click(function() {
+$( "#hider" ).on( "click", function() {
$( "span:last-child" ).hide( "fast", function() {
// Use arguments.callee so we don't need a named function
$( this ).prev().hide( "fast", arguments.callee );
});
});
-$( "#shower" ).click(function() {
+$( "#shower" ).on( "click", function() {
$( "span" ).show( 2000 );
});
]]></code>
@@ -130,7 +134,7 @@ $( "#shower" ).click(function() {
for ( var i = 0; i < 5; i++ ) {
$( "<div>" ).appendTo( document.body );
}
-$( "div" ).click(function() {
+$( "div" ).on( "click", function() {
$( this ).hide( 2000, function() {
$( this ).remove();
});
diff --git a/entries/hover.xml b/entries/hover.xml
index 3eb38753b..a924d368f 100644
--- a/entries/hover.xml
+++ b/entries/hover.xml
@@ -1,7 +1,7 @@
<?xml version="1.0"?>
<entries>
<desc>Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.</desc>
- <entry type="method" name="hover" return="jQuery">
+ <entry type="method" name="hover" return="jQuery" deprecated="3.3">
<title>.hover()</title>
<desc>Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.</desc>
<signature>
@@ -16,12 +16,15 @@
</argument>
</signature>
<longdesc>
+ <div class="warning">
+ <p>This API is deprecated. Use <code>.on( "mouseenter", handlerIn ).on( "mouseleave", handlerOut )</code> instead.</p>
+ </div>
<p>The <code>.hover()</code> method binds handlers for both <code>mouseenter</code> and <code>mouseleave</code> events. You can use it to simply apply behavior to an element during the time the mouse is within the element.</p>
<p>Calling <code>$( selector ).hover( handlerIn, handlerOut )</code> is shorthand for:</p>
<pre><code>
-$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
+$( selector ).on( "mouseenter", handlerIn ).on( "mouseleave", handlerOut );
</code></pre>
- <p>See the discussions for <code><a href="/https/github.com/mouseenter/">.mouseenter()</a></code> and <code><a href="/https/github.com/mouseleave/">.mouseleave()</a></code> for more details.</p>
+ <p>See the discussions for <code><a href="/https/github.com/mouseenter/">mouseenter</a></code> and <code><a href="/https/github.com/mouseleave/">mouseleave</a></code> for more details.</p>
</longdesc>
<example>
<desc>To add a special style to list items that are being hovered over, try:</desc>
@@ -30,7 +33,7 @@ $( "li" ).hover(
function() {
$( this ).append( $( "<span> ***</span>" ) );
}, function() {
- $( this ).find( "span:last" ).remove();
+ $( this ).find( "span" ).last().remove();
}
);
@@ -80,8 +83,10 @@ $( "td" ).off( "mouseenter mouseleave" );
</example>
<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
+ <category slug="deprecated/deprecated-3.3"/>
</entry>
- <entry type="method" name="hover" return="jQuery">
+
+ <entry type="method" name="hover" return="jQuery" deprecated="3.3">
<desc>Bind a single handler to the matched elements, to be executed when the mouse pointer enters or leaves the elements.</desc>
<signature>
<added>1.4</added>
@@ -91,21 +96,24 @@ $( "td" ).off( "mouseenter mouseleave" );
</argument>
</signature>
<longdesc>
+ <div class="warning">
+ <p>This API is deprecated. Use <code>.on( "mouseenter mouseleave", handlerInOut )</code> instead.</p>
+ </div>
<p>The <code>.hover()</code> method, when passed a single function, will execute that handler for both <code>mouseenter</code> and <code>mouseleave</code> events. This allows the user to use jQuery's various toggle methods within the handler or to respond differently within the handler depending on the <code>event.type</code>.</p>
<p>Calling <code>$(selector).hover(handlerInOut)</code> is shorthand for:</p>
<pre><code>
$( selector ).on( "mouseenter mouseleave", handlerInOut );
</code></pre>
- <p>See the discussions for <code><a href="/https/github.com/mouseenter/">.mouseenter()</a></code> and <code><a href="/https/github.com/mouseleave/">.mouseleave()</a></code> for more details.</p>
+ <p>See the discussions for <code><a href="/https/github.com/mouseenter/">mouseenter</a></code> and <code><a href="/https/github.com/mouseleave/">mouseleave</a></code> for more details.</p>
</longdesc>
<example>
<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" )
@@ -143,5 +151,6 @@ $( "li" )
</example>
<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
+ <category slug="deprecated/deprecated-3.3"/>
</entry>
</entries>
diff --git a/entries/html.xml b/entries/html.xml
index 0e9f9dcc1..1a29d361a 100644
--- a/entries/html.xml
+++ b/entries/html.xml
@@ -29,7 +29,7 @@ $( "div.demo-container" ).html();
<example>
<desc>Click a paragraph to convert it from html to text.</desc>
<code><![CDATA[
-$( "p" ).click(function() {
+$( "p" ).on( "click", function() {
var htmlString = $( this ).html();
$( this ).text( htmlString );
});
@@ -118,7 +118,8 @@ $( "div.demo-container" ).html(function() {
});
</code></pre>
<p>Given a document with six paragraphs, this example will set the HTML of <code><div class="demo-container"></code> to <code><p>All new content for <em>6 paragraphs!</em></p></code>.</p>
- <p>This method uses the browser's <code>innerHTML</code> property. Some browsers may not generate a DOM that exactly replicates the HTML source provided. For example, Internet Explorer prior to version 8 will convert all <code>href</code> properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate <a href="http://code.google.com/p/html5shiv/">compatibility layer</a>.</p>
+ <p>This method uses the browser's <code>innerHTML</code> property. Some browsers may not generate a DOM that exactly replicates the HTML source provided. For example, Internet Explorer prior to version 8 will convert all <code>href</code> properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate <a href="https://github.com/afarkas/html5shiv">compatibility layer</a>.</p>
+ <p>To set the content of a <code><script></code> element, which does not contain HTML, use the <a href="/https/github.com/text/"><code>.text()</code></a> method and not <code>.html()</code>.</p>
<p><strong>Note:</strong> In Internet Explorer up to and including version 9, setting the text content of an HTML element may corrupt the text nodes of its children that are being removed from the document as a result of the operation. If you are keeping references to these DOM elements and need them to be unchanged, use <code>.empty().html( string )</code> instead of <code>.html(string)</code> so that the elements are removed from the document before the new string is assigned to the element.</p>
</longdesc>
<example>
diff --git a/entries/id-selector.xml b/entries/id-selector.xml
index 0bff7166b..3cc8b926c 100644
--- a/entries/id-selector.xml
+++ b/entries/id-selector.xml
@@ -13,7 +13,7 @@
<p>For id selectors, jQuery uses the JavaScript function <code>document.getElementById()</code>, which is extremely efficient. When another selector is attached to the id selector, such as <code>h2#pageTitle</code>, jQuery performs an additional check before identifying the element as a match.</p>
<p>Calling <code>jQuery()</code> (or <code>$()</code>) with an id selector as its argument will return a jQuery object containing a collection of either zero or one DOM element.</p>
<p>Each <code>id</code> value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.</p>
- <p>If the id contains characters like periods or colons you have to <a href="http://learn.jquery.com/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/">escape those characters with backslashes</a>.</p>
+ <p>If the id contains characters like periods or colons you have to <a href="https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/">escape those characters with backslashes</a>.</p>
</longdesc>
<example>
<desc>Select the element with the id "myDiv" and give it a red border.</desc>
diff --git a/entries/image-selector.xml b/entries/image-selector.xml
index 461c438ca..2b569d3a8 100644
--- a/entries/image-selector.xml
+++ b/entries/image-selector.xml
@@ -13,16 +13,16 @@
<example>
<desc>Finds all image inputs.</desc>
<code><![CDATA[
-var input = $( "input:image" ).css({
+var input = $( "input:image" ).css( {
background:"yellow",
border:"3px red solid"
-});
+} );
$( "div" )
.text( "For this type jQuery found " + input.length + "." )
.css( "color", "red" );
-$( "form" ).submit(function( event ) {
+$( "form" ).on( "submit", function( event ) {
event.preventDefault();
-});
+} );
]]></code>
<css><![CDATA[
textarea {
@@ -42,7 +42,7 @@ $( "form" ).submit(function( event ) {
<input type="submit">
<input type="text">
<select>
- <option>Option<option/>
+ <option>Option</option>
</select>
<textarea></textarea>
<button>Button</button>
diff --git a/entries/index.xml b/entries/index.xml
index ecd46243a..1db070aa0 100644
--- a/entries/index.xml
+++ b/entries/index.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="index" return="Number">
+<entry type="method" name="index" return="Integer">
<title>.index()</title>
<signature>
<added>1.4</added>
@@ -53,7 +53,7 @@ alert( "Index: " + $( "li" ).index( listItem ) );
</p>
<p>Note that if the jQuery collection used as the <code>.index()</code> method's argument contains more than one element, the first element within the matched set of elements will be used.</p>
<pre><code>
-var listItems = $( "li:gt(0)" );
+var listItems = $( "li" ).slice( 1 );
alert( "Index: " + $( "li" ).index( listItems ) );
</code></pre>
<p>We get back the zero-based position of the first list item within the matched set:</p>
@@ -81,7 +81,7 @@ alert( "Index: " + $( "#bar" ).index() );
<example>
<desc>On click, returns the index (zero-based) of that div in the page.</desc>
<code><![CDATA[
-$( "div" ).click(function() {
+$( "div" ).on( "click", function() {
// `this` is the DOM element that was clicked
var index = $( "div" ).index( this );
$( "span" ).text( "That was div index #" + index );
@@ -133,7 +133,7 @@ $( "div" ).html( "Index: " + $( "li" ).index( listItem ) );
}
]]></css>
<code><![CDATA[
-var listItems = $( "li:gt(0)" );
+var listItems = $( "li" ).slice( 1 );
$( "div" ).html( "Index: " + $( "li" ).index( listItems ) );
]]></code>
<html><![CDATA[
diff --git a/entries/innerHeight.xml b/entries/innerHeight.xml
index 6b689d476..2f71ae9f9 100644
--- a/entries/innerHeight.xml
+++ b/entries/innerHeight.xml
@@ -9,19 +9,20 @@
</signature>
<desc>Get the current computed height for the first element in the set of matched elements, including padding but not border.</desc>
<longdesc>
- <p>This method returns the height of the element, including top and bottom padding, in pixels.</p>
+ <p>This method returns the height of the element, including top and bottom padding, in pixels. If called on an empty set of elements, returns <code>undefined</code> (<code>null</code> before jQuery 3.0).</p>
<p>This method is not applicable to <code>window</code> and <code>document</code> objects; for these, use <code><a href="/https/github.com/height/">.height()</a></code> instead.</p>
- <p class="image">
+ <figure>
<img src="/https/github.com/resources/0042_04_02.png"/>
- </p>
+ <figcaption>Figure 1 - Illustration of the measured height</figcaption>
+ </figure>
</longdesc>
- <note id="dimensions-number" type="additional" data-title=".innerHeight()"/>
- <note id="inaccurate-dimensions-for-hidden-elements" type="additional" data-title=".innerHeight()"/>
+ <note id="dimensions-number" type="additional" data-title=".innerHeight()"/>
+ <note id="hidden-element-dimensions" type="additional" data-title=".innerHeight()"/>
<example>
<desc>Get the innerHeight of a paragraph.</desc>
<code><![CDATA[
-var p = $( "p:first" );
-$( "p:last" ).text( "innerHeight:" + p.innerHeight() );
+var p = $( "p" ).first();
+$( "p" ).last().text( "innerHeight:" + p.innerHeight() );
]]></code>
<css><![CDATA[
p {
@@ -43,7 +44,7 @@ $( "p:last" ).text( "innerHeight:" + p.innerHeight() );
<entry type="method" name="innerHeight" return="jQuery">
<signature>
- <added>1.8.0</added>
+ <added>1.8</added>
<argument name="value">
<type name="String"/>
<type name="Number"/>
@@ -51,7 +52,7 @@ $( "p:last" ).text( "innerHeight:" + p.innerHeight() );
</argument>
</signature>
<signature>
- <added>1.8.0</added>
+ <added>1.8</added>
<argument name="function" type="Function">
<argument name="index" type="Integer" />
<argument name="height" type="Number" />
diff --git a/entries/innerWidth.xml b/entries/innerWidth.xml
index 3356884dc..54b6b3588 100644
--- a/entries/innerWidth.xml
+++ b/entries/innerWidth.xml
@@ -1,26 +1,27 @@
<?xml version="1.0"?>
<entries>
<desc>Get the current computed inner width (including padding but not border) for the first element in the set of matched elements or set the inner width of every matched element.</desc>
-<entry type="method" name="innerWidth" return="Integer">
+<entry type="method" name="innerWidth" return="Number">
<title>.innerWidth()</title>
<signature>
<added>1.2.6</added>
</signature>
<desc>Get the current computed inner width for the first element in the set of matched elements, including padding but not border.</desc>
<longdesc>
- <p>This method returns the width of the element, including left and right padding, in pixels.</p>
+ <p>This method returns the width of the element, including left and right padding, in pixels. If called on an empty set of elements, returns <code>undefined</code> (<code>null</code> before jQuery 3.0).</p>
<p>This method is not applicable to <code>window</code> and <code>document</code> objects; for these, use <code><a href="/https/github.com/width/">.width()</a></code> instead.</p>
- <p class="image">
+ <figure>
<img src="/https/github.com/resources/0042_04_05.png"/>
- </p>
+ <figcaption>Figure 1 - Illustration of the measured width</figcaption>
+ </figure>
</longdesc>
- <note id="dimensions-number" type="additional" data-title=".innerWidth()"/>
- <note id="inaccurate-dimensions-for-hidden-elements" type="additional" data-title=".innerWidth()"/>
+ <note id="dimensions-number" type="additional" data-title=".innerWidth()"/>
+ <note id="hidden-element-dimensions" type="additional" data-title=".innerWidth()"/>
<example>
<desc>Get the innerWidth of a paragraph.</desc>
<code><![CDATA[
-var p = $( "p:first" );
-$( "p:last" ).text( "innerWidth:" + p.innerWidth() );
+var p = $( "p" ).first();
+$( "p" ).last().text( "innerWidth:" + p.innerWidth() );
]]></code>
<css><![CDATA[
p {
@@ -42,15 +43,15 @@ $( "p:last" ).text( "innerWidth:" + p.innerWidth() );
<entry type="method" name="innerWidth" return="jQuery">
<signature>
- <added>1.8.0</added>
+ <added>1.8</added>
<argument name="value">
- <type name="String"/>
- <type name="Number"/>
- <desc>A number representing the number of pixels, or a number along with an optional unit of measure appended (as a string).</desc>
+ <type name="String"/>
+ <type name="Number"/>
+ <desc>A number representing the number of pixels, or a number along with an optional unit of measure appended (as a string).</desc>
</argument>
</signature>
<signature>
- <added>1.8.0</added>
+ <added>1.8</added>
<argument name="function" type="Function">
<argument name="index" type="Integer" />
<argument name="width" type="Number" />
diff --git a/entries/input-selector.xml b/entries/input-selector.xml
index 7f5d8fd9a..ec5c6c23d 100644
--- a/entries/input-selector.xml
+++ b/entries/input-selector.xml
@@ -18,9 +18,9 @@ var formChildren = $( "form > *" );
$( "#messages" ).text( "Found " + allInputs.length + " inputs and the form has " +
formChildren.length + " children." );
-$( "form" ).submit(function( event ) {
+$( "form" ).on( "submit", function( event ) {
event.preventDefault();
-});
+} );
]]></code>
<css><![CDATA[
textarea {
diff --git a/entries/insertAfter.xml b/entries/insertAfter.xml
index 7e3435f8f..8c406cfa0 100644
--- a/entries/insertAfter.xml
+++ b/entries/insertAfter.xml
@@ -14,7 +14,7 @@
</signature>
<desc>Insert every element in the set of matched elements after the target.</desc>
<longdesc>
- <p>The <code><a href="/https/github.com/after/">.after()</a></code> and <code>.insertAfter()</code> methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With <code>.after()</code>, the selector expression preceding the method is the container after which the content is inserted. With <code>.insertAfter()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted after the target container.</p>
+ <p>The <code><a href="/https/github.com/after/">.after()</a></code> and <code>.insertAfter()</code> methods perform the same task. The major difference is in the syntax—specifically, in the placement of the content and target. With <code>.after()</code>, the selector expression preceding the method is the container after which the content is inserted. With <code>.insertAfter()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted after the target container.</p>
<p>Consider the following HTML:</p>
<pre><code>
<div class="container">
@@ -53,6 +53,7 @@ $( "h2" ).insertAfter( $( ".container" ) );
<p><strong>Before jQuery 1.9,</strong> the append-to-single-element case did not create a new set, but instead returned the original set which made it difficult to use the <code>.end()</code> method reliably when being used with an unknown number of elements.</p>
</longdesc>
<note id="html-code-execution" type="additional"/>
+ <note id="svg-support" type="additional"/>
<example>
<desc>Insert all paragraphs after an element with id of "foo". Same as $( "#foo" ).after( "p" )</desc>
<code><![CDATA[
diff --git a/entries/insertBefore.xml b/entries/insertBefore.xml
index 3debb5614..21801192d 100644
--- a/entries/insertBefore.xml
+++ b/entries/insertBefore.xml
@@ -53,6 +53,7 @@ $( "h2" ).insertBefore( $( ".container" ) );
<p><strong>Before jQuery 1.9,</strong> the append-to-single-element case did not create a new set, but instead returned the original set which made it difficult to use the <code>.end()</code> method reliably when being used with an unknown number of elements.</p>
</longdesc>
<note id="html-code-execution" type="additional"/>
+ <note id="svg-support" type="additional"/>
<example>
<desc>Insert all paragraphs before an element with id of "foo". Same as $( "#foo" ).before( "p" )</desc>
<code><![CDATA[
diff --git a/entries/is.xml b/entries/is.xml
index 5595d26ac..e6eb2ce55 100644
--- a/entries/is.xml
+++ b/entries/is.xml
@@ -13,7 +13,7 @@
<desc>A function used as a test for every element in the set. It accepts two arguments, <code>index</code>, which is the element's index in the jQuery collection, and <code>element</code>, which is the DOM element. Within the function, <code>this</code> refers to the current DOM element.</desc>
<argument name="index" type="Integer" />
<argument name="element" type="Element" />
- <return type="Boolean" />
+ <return type="Boolean" />
</argument>
</signature>
<signature>
@@ -41,7 +41,7 @@
</code></pre>
<p>You can attach a click handler to the <ul> element, and then limit the code to be triggered only when a list item itself, not one of its children, is clicked:</p>
<pre><code>
-$( "ul" ).click(function( event ) {
+$( "ul" ).on( "click", function( event ) {
var target = $( event.target );
if ( target.is( "li" ) ) {
target.css( "background-color", "red" );
@@ -49,8 +49,6 @@ $( "ul" ).click(function( event ) {
});
</code></pre>
<p>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 <code><strong></code> or <code><span></code>, respectively.</p>
- <p>Prior to jQuery 1.7, in selector strings with positional selectors such as <code>:first</code>, <code>:gt()</code>, or <code>:even</code>, the positional filtering is done against the jQuery object passed to <code>.is()</code>, <em>not</em> against the containing document. So for the HTML shown above, an expression such as <code>$( "li:first" ).is( "li:last" )</code> returns <code>true</code>, but <code>$( "li:first-child" ).is( "li:last-child" )</code> returns <code>false</code>. In addition, a bug in Sizzle prevented many positional selectors from working properly. These two factors made positional selectors almost unusable in filters.</p>
- <p>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 <code>$( "li:first" ).is( "li:last" )</code> returns <code>false</code>. Note that since positional selectors are jQuery additions and not W3C standard, we recommend using the W3C selectors whenever feasible.</p>
<h4>Using a Function</h4>
<p>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 <code>true</code>, <code>.is()</code> returns <code>true</code> as well. For example, given a somewhat more involved HTML snippet:</p>
<pre><code>
@@ -65,7 +63,7 @@ $( "ul" ).click(function( event ) {
</code></pre>
<p>You can attach a click handler to every <code><li></code> that evaluates the number of <code><strong></code> elements within the clicked <code><li></code> at that time like so:</p>
<pre><code>
-$( "li" ).click(function() {
+$( "li" ).on( "click", function() {
var li = $( this ),
isWithTwo = li.is(function() {
return $( "strong", this ).length === 2;
@@ -179,7 +177,7 @@ $( "div" ).text( "isFormParent = " + isFormParent );
<desc>Checks against an existing collection of alternating list elements. Blue, alternating list elements slide up while others turn red.</desc>
<code><![CDATA[
var alt = $( "#browsers li:nth-child(2n)" ).css( "background", "#0ff" );
-$( "li" ).click(function() {
+$( "li" ).on( "click", function() {
var li = $( this );
if ( li.is( alt ) ) {
li.slideUp();
@@ -206,7 +204,7 @@ $( "li" ).click(function() {
<desc>An alternate way to achieve the above example using an element rather than a jQuery object. Checks against an existing collection of alternating list elements. Blue, alternating list elements slide up while others turn red.</desc>
<code><![CDATA[
var alt = $( "#browsers li:nth-child(2n)" ).css( "background", "#0ff" );
-$( "li" ).click(function() {
+$( "li" ).on( "click", function() {
if ( alt.is( this ) ) {
$( this ).slideUp();
} else {
diff --git a/entries/jQuery.Callbacks.xml b/entries/jQuery.Callbacks.xml
index 8443476b7..251bc1110 100644
--- a/entries/jQuery.Callbacks.xml
+++ b/entries/jQuery.Callbacks.xml
@@ -38,7 +38,7 @@ callbacks.fire( "bar!" );
</code></pre>
<p>The result of this is that it becomes simple to construct complex lists of callbacks where input values can be passed through to as many functions as needed with ease.</p>
<p>Two specific methods were being used above: <code>.add()</code> and <code>.fire()</code>. The <code>.add()</code> method supports adding new callbacks to the callback list, while the <code>.fire()</code> method executes the added functions and provides a way to pass arguments to be processed by the callbacks in the same list.</p>
- <p>Another method supported by <code>$.Callbacks</code> is <code>.remove()</code>, which has the ability to remove a particular callback from the callback list. Here"s a practical example of <code>.remove()</code> being used:</p>
+ <p>Another method supported by <code>$.Callbacks</code> is <code>.remove()</code>, which has the ability to remove a particular callback from the callback list. Here's a practical example of <code>.remove()</code> being used:</p>
<pre><code>
var callbacks = $.Callbacks();
callbacks.add( fn1 );
@@ -259,7 +259,7 @@ dfd.done( topic.publish );
// Here the Deferred is being resolved with a message
// that will be passed back to subscribers. It's possible to
// easily integrate this into a more complex routine
-// (eg. waiting on an ajax call to complete) so that
+// (eg. waiting on an Ajax call to complete) so that
// messages are only published once the task has actually
// finished.
dfd.resolve( "it's been published!" );
diff --git a/entries/jQuery.Deferred.xml b/entries/jQuery.Deferred.xml
index fa9455c03..2884ad879 100644
--- a/entries/jQuery.Deferred.xml
+++ b/entries/jQuery.Deferred.xml
@@ -14,10 +14,10 @@
</argument>
</argument>
</signature>
- <desc> A constructor function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.</desc>
+ <desc> A factory function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.</desc>
<longdesc>
- <p>The <code>jQuery.Deferred()</code> constructor creates a new Deferred object. The <code>new</code> operator is optional.</p>
- <p>The <code>jQuery.Deferred</code> method can be passed an optional function, which is called just before the constructor returns and is passed the constructed <code>deferred</code> object as both the <code>this</code> object and as the first argument to the function. The called function can attach callbacks using <a href="/https/github.com/deferred.then/"><code>deferred.then()</code></a>, for example.</p>
+ <p>The <code>jQuery.Deferred()</code> factory creates a new <code>deferred</code> object.</p>
+ <p>The <code>jQuery.Deferred</code> method can be passed an optional function, which is called just before the method returns and is passed the new <code>deferred</code> object as both the <code>this</code> object and as the first argument to the function. The called function can attach callbacks using <a href="/https/github.com/deferred.then/"><code>deferred.then()</code></a>, for example.</p>
<p>A Deferred object starts in the <em>pending</em> state. Any callbacks added to the object with <a href="/https/github.com/deferred.then/"><code>deferred.then()</code></a>, <a href="/https/github.com/deferred.always/"><code>deferred.always()</code></a>, <a href="/https/github.com/deferred.done/"><code>deferred.done()</code></a>, or <a href="/https/github.com/deferred.fail/"><code>deferred.fail()</code></a> are queued to be executed later. Calling <a href="/https/github.com/deferred.resolve/"><code>deferred.resolve()</code></a> or <a href="/https/github.com/deferred.resolveWith/"><code>deferred.resolveWith()</code></a> transitions the Deferred into the <em>resolved</em> state and immediately executes any <code>doneCallbacks</code> that are set. Calling <a href="/https/github.com/deferred.reject/"><code>deferred.reject()</code></a> or <a href="/https/github.com/deferred.rejectWith/"><code>deferred.rejectWith()</code></a> transitions the Deferred into the <em>rejected</em> state and immediately executes any <code>failCallbacks</code> that are set. Once the object has entered the resolved or rejected state, it stays in that state. Callbacks can still be added to the resolved or rejected Deferred — they will execute immediately.</p>
<h4>
Enhanced Callbacks with jQuery Deferred
diff --git a/entries/jQuery.ajax.xml b/entries/jQuery.ajax.xml
index 7f8b7d3b0..9074388b9 100644
--- a/entries/jQuery.ajax.xml
+++ b/entries/jQuery.ajax.xml
@@ -8,18 +8,38 @@
<desc>A string containing the URL to which the request is sent.</desc>
</argument>
<argument name="settings" type="PlainObject" optional="true">
- <desc>A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with <a href="/https/github.com/jQuery.ajaxSetup/">$.ajaxSetup()</a>. See <a href="#jQuery-ajax-settings">jQuery.ajax( settings )</a> below for a complete list of all settings. </desc>
+ <desc>A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with <a href="/https/github.com/jQuery.ajaxSetup/">$.ajaxSetup()</a>. See <a href="#jQuery-ajax-settings">jQuery.ajax( settings )</a> below for a complete list of all settings.</desc>
</argument>
</signature>
<signature>
<added>1.0</added>
<argument name="settings" type="PlainObject" optional="true">
<desc>A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with <a href="/https/github.com/jQuery.ajaxSetup/">$.ajaxSetup()</a>.</desc>
- <property default="depends on DataType" name="accepts" type="PlainObject">
- <desc>The content type sent in the request header that tells the server what kind of response it will accept in return.</desc>
+ <property default="depends on dataType" name="accepts" type="PlainObject">
+ <desc>A set of key/value pairs that map a given <code>dataType</code> to its MIME type, which gets sent in the <code>Accept</code> request header. This header tells the server what kind of response it will accept in return. For example, the following defines a custom type <code>mycustomtype</code> to be sent with the request:
+ <pre><code>
+$.ajax({
+ accepts: {
+ mycustomtype: 'application/x-some-custom-type'
+ },
+
+ // Instructions for how to deserialize a `mycustomtype`
+ converters: {
+ 'text mycustomtype': function(result) {
+ // Do Stuff
+ return newresult;
+ }
+ },
+
+ // Expect a `mycustomtype` back from server
+ dataType: 'mycustomtype'
+});
+ </code></pre>
+ <strong>Note:</strong> You will need to specify a complementary entry for this type in <code>converters</code> for this to work properly.
+ </desc>
</property>
<property default="true" name="async" type="Boolean">
- <desc>By default, all requests are sent asynchronously (i.e. this is set to <code>true</code> by default). If you need synchronous requests, set this option to <code>false</code>. Cross-domain requests and <code>dataType: "jsonp"</code> requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. <strong>As of jQuery 1.8, the use of <code>async: false</code> with jqXHR (<code>$.Deferred</code>) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as <code>jqXHR.done()</code> or the deprecated <code>jqXHR.success()</code>.</strong></desc>
+ <desc>By default, all requests are sent asynchronously (i.e. this is set to <code>true</code> by default). If you need synchronous requests, set this option to <code>false</code>. Cross-domain requests and <code>dataType: "jsonp"</code> requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. <strong>As of jQuery 1.8</strong>, the use of <code>async: false</code> with jqXHR (<code>$.Deferred</code>) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as <code>jqXHR.done()</code>.</desc>
</property>
<property name="beforeSend" type="Function">
<argument name="jqXHR" type="jqXHR"/>
@@ -32,16 +52,18 @@
<property name="complete" type="Function">
<argument name="jqXHR" type="jqXHR"/>
<argument name="textStatus" type="String"/>
- <desc>A function to be called when the request finishes (after <code>success</code> and <code>error</code> callbacks are executed). The function gets passed two arguments: The jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object and a string categorizing the status of the request (<code>"success"</code>, <code>"notmodified"</code>, <code>"error"</code>, <code>"timeout"</code>, <code>"abort"</code>, or <code>"parsererror"</code>). <strong>As of jQuery 1.5</strong>, the <code>complete</code> setting can accept an array of functions. Each function will be called in turn. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
+ <desc>A function to be called when the request finishes (after <code>success</code> and <code>error</code> callbacks are executed). The function gets passed two arguments: The jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object and a string categorizing the status of the request (<code>"success"</code>, <code>"notmodified"</code>, <code>"nocontent"</code>, <code>"error"</code>, <code>"timeout"</code>, <code>"abort"</code>, or <code>"parsererror"</code>). <strong>As of jQuery 1.5</strong>, the <code>complete</code> setting can accept an array of functions. Each function will be called in turn. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
</property>
<property name="contents" type="PlainObject" added="1.5">
<desc>An object of string/regular-expression pairs that determine how jQuery will parse the response, given its content type.</desc>
</property>
- <property default="'application/x-www-form-urlencoded; charset=UTF-8'" name="contentType" type="String">
- <desc>When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to <code>$.ajax()</code>, then it is always sent to the server (even if no data is sent). The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding. <strong>Note:</strong> For cross-domain requests, setting the content type to anything other than <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code>, or <code>text/plain</code> will trigger the browser to send a preflight OPTIONS request to the server.</desc>
+ <property default="'application/x-www-form-urlencoded; charset=UTF-8'" name="contentType">
+ <type name="Boolean"/>
+ <type name="String"/>
+ <desc>When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to <code>$.ajax()</code>, then it is always sent to the server (even if no data is sent). As of jQuery 1.6 you can pass <code>false</code> to tell jQuery to not set any content type header. <strong>Note:</strong> The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding. <strong>Note:</strong> For cross-domain requests, setting the content type to anything other than <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code>, or <code>text/plain</code> will trigger the browser to send a preflight OPTIONS request to the server.</desc>
</property>
<property name="context" type="PlainObject">
- <desc>This object will be made the context of all Ajax-related callbacks. By default, the context is an object that represents the ajax settings used in the call (<code>$.ajaxSettings</code> merged with the settings passed to <code>$.ajax</code>). For example, specifying a DOM element as the context will make that the context for the <code>complete</code> callback of a request, like so:
+ <desc>This object will be the context of all Ajax-related callbacks. By default, the context is an object that represents the Ajax settings used in the call (<code>$.ajaxSettings</code> merged with the settings passed to <code>$.ajax</code>). For example, specifying a DOM element as the context will make that the context for the <code>complete</code> callback of a request, like so:
<pre><code>
$.ajax({
url: "test.html",
@@ -62,7 +84,12 @@ $.ajax({
<type name="PlainObject"/>
<type name="String"/>
<type name="Array"/>
- <desc>Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See <code>processData</code> option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the <code>traditional</code> setting (described below).</desc>
+ <desc>
+ <p>Data to be sent to the server. If the HTTP method is one that cannot have an entity body, such as GET, the <code>data</code> is appended to the URL.</p>
+ <p>When <code>data</code> is an object, jQuery generates the data string from the object's key/value pairs unless the <code>processData</code> option is set to <code>false</code>. For example, <code>{ a: "bc", d: "e,f" }</code> is converted to the string <code>"a=bc&d=e%2Cf"</code>. If the value is an array, jQuery serializes multiple values with same key based on the value of the <code>traditional</code> setting (described below). For example, <code>{ a: [1,2] }</code> becomes the string <code>"a%5B%5D=1&a%5B%5D=2"</code> with the default <code>traditional: false</code> setting.</p>
+ <p>When <code>data</code> is passed as a string it should <strong>already be encoded</strong> using the correct encoding for <code>contentType</code>, which by default is <code>application/x-www-form-urlencoded</code>.</p>
+ <p>In requests with <code>dataType: "json"</code> or <code>dataType: "jsonp"</code>, if the string contains a double question mark (<code>??</code>) anywhere in the URL or a single question mark (<code>?</code>) in the query string, it is replaced with a value generated by jQuery that is unique for each copy of the library on the page (e.g. <code>jQuery21406515378922229067_1479880736745</code>).</p>
+ </desc>
</property>
<property name="dataFilter" type="Function">
<argument name="data" type="String"/>
@@ -72,15 +99,22 @@ $.ajax({
</property>
<property name="dataType" default="Intelligent Guess (xml, json, script, or html)" type="String">
<desc>The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string). The available types (and the result passed as the first argument to your success callback) are:
- <ul><li>"xml": Returns a XML document that can be processed via jQuery.</li><li>"html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.</li><li>"script": Evaluates the response as JavaScript and returns it as plain text. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the <code>cache</code> option is set to <code>true</code>. <strong>Note:</strong> This will turn POSTs into GETs for remote-domain requests. </li><li>"json": Evaluates the response as JSON and returns a JavaScript object. The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected; the server should return a response of <code>null</code> or <code>{}</code> instead. (See <a href="http://json.org/">json.org</a> for more information on proper JSON formatting.)</li><li>"jsonp": Loads in a JSON block using <a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a>. Adds an extra "?callback=?" to the end of your URL to specify the callback. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the <code>cache</code> option is set to <code>true</code>.</li><li>"text": A plain text string.</li><li>multiple, space-separated values: <strong>As of jQuery 1.5</strong>, jQuery can convert a dataType from what it received in the Content-Type header to what you require. For example, if you want a text response to be treated as XML, use "text xml" for the dataType. You can also make a JSONP request, have it received as text, and interpreted by jQuery as XML: "jsonp text xml." Similarly, a shorthand string such as "jsonp xml" will first attempt to convert from jsonp to xml, and, failing that, convert from jsonp to text, and then from text to xml.
- </li></ul>
+ <ul>
+ <li><code>"xml"</code>: Returns a XML document that can be processed via jQuery.</li>
+ <li><code>"html"</code>: Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.</li>
+ <li><code>"script"</code>: Evaluates the response as JavaScript and returns it as plain text. Disables caching by appending a query string parameter, <code>_=[TIMESTAMP]</code>, to the URL unless the <code>cache</code> option is set to <code>true</code>. <strong>Note:</strong> This will turn POSTs into GETs for remote-domain requests. Prior to jQuery 3.5.0, unsuccessful HTTP responses with a script <code>Content-Type</code> were still executed.</li>
+ <li><code>"json"</code>: Evaluates the response as JSON and returns a JavaScript object. Cross-domain <code>"json"</code> requests that have a callback placeholder, e.g. <code>?callback=?</code>, are performed using <a href="https://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/">JSONP</a> unless the request includes <code>jsonp: false</code> in its request options. The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected; the server should return a response of <code>null</code> or <code>{}</code> instead. (See <a href="https://json.org/">json.org</a> for more information on proper JSON formatting.)</li>
+ <li><code>"jsonp"</code>: Loads in a JSON block using <a href="https://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/">JSONP</a>. Adds an extra <code>"?callback=?"</code> to the end of your URL to specify the callback. Disables caching by appending a query string parameter, <code>"_=[TIMESTAMP]"</code>, to the URL unless the <code>cache</code> option is set to <code>true</code>.</li>
+ <li><code>"text"</code>: A plain text string.</li>
+ <li>multiple, space-separated values: <strong>As of jQuery 1.5</strong>, jQuery can convert a dataType from what it received in the Content-Type header to what you require. For example, if you want a text response to be treated as XML, use <code>"text xml"</code> for the dataType. You can also make a JSONP request, have it received as text, and interpreted by jQuery as XML: <code>"jsonp text xml"</code>. Similarly, a shorthand string such as <code>"jsonp xml"</code> will first attempt to convert from jsonp to xml, and, failing that, convert from jsonp to text, and then from text to xml.</li>
+ </ul>
</desc>
</property>
<property name="error" type="Function">
<argument name="jqXHR" type="jqXHR"/>
<argument name="textStatus" type="String"/>
<argument name="errorThrown" type="String"/>
- <desc>A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides <code>null</code>) are <code>"timeout"</code>, <code>"error"</code>, <code>"abort"</code>, and <code>"parsererror"</code>. When an HTTP error occurs, <code>errorThrown</code> receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." <strong>As of jQuery 1.5</strong>, the <code>error</code> setting can accept an array of functions. Each function will be called in turn. <strong>Note:</strong> <em>This handler is not called for cross-domain script and cross-domain JSONP requests.</em> This is an <a href="/Ajax_Events/">Ajax Event</a>. </desc>
+ <desc>A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides <code>null</code>) are <code>"timeout"</code>, <code>"error"</code>, <code>"abort"</code>, and <code>"parsererror"</code>. When an HTTP error occurs, <code>errorThrown</code> receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." (in HTTP/2 it may instead be an empty string) <strong>As of jQuery 1.5</strong>, the <code>error</code> setting can accept an array of functions. Each function will be called in turn. <strong>Note:</strong> <em>This handler is not called for cross-domain scripts and cross-domain JSONP requests.</em> This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
</property>
<property default="true" name="global" type="Boolean">
<desc>Whether to trigger global Ajax event handlers for this request. The default is <code>true</code>. Set to <code>false</code> to prevent the global handlers like <code>ajaxStart</code> or <code>ajaxStop</code> from being triggered. This can be used to control various <a href="/Ajax_Events/">Ajax Events</a>.</desc>
@@ -92,15 +126,20 @@ $.ajax({
<desc>Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is <code>false</code>, ignoring the header. In jQuery 1.4 this technique also checks the 'etag' specified by the server to catch unmodified data.</desc>
</property>
<property default="depends on current location protocol" name="isLocal" type="Boolean" added="1.5.1">
- <desc>Allow the current environment to be recognized as "local," (e.g. the filesystem), even if jQuery does not recognize it as such by default. The following protocols are currently recognized as local: <code>file</code>, <code>*-extension</code>, and <code>widget</code>. If the <code>isLocal</code> setting needs modification, it is recommended to do so once in the <code>$.ajaxSetup()</code> method. </desc>
+ <desc>Allow the current environment to be recognized as "local," (e.g. the filesystem), even if jQuery does not recognize it as such by default. The following protocols are currently recognized as local: <code>file</code>, <code>*-extension</code>, and <code>widget</code>. If the <code>isLocal</code> setting needs modification, it is recommended to do so once in the <code>$.ajaxSetup()</code> method.</desc>
</property>
- <property name="jsonp" type="String">
- <desc>Override the callback function name in a JSONP request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url. So <code>{jsonp:'onJSONPLoad'}</code> would result in <code>'onJSONPLoad=?'</code> passed to the server. <strong>As of jQuery 1.5</strong>, setting the <code>jsonp</code> option to <code>false</code> prevents jQuery from adding the "?callback" string to the URL or attempting to use "=?" for transformation. In this case, you should also explicitly set the <code>jsonpCallback</code> setting. For example, <code>{ jsonp: false, jsonpCallback: "callbackName" }</code></desc>
+ <property name="jsonp">
+ <type name="String"/>
+ <type name="Boolean"/>
+ <desc>Override the callback function name in a JSONP request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url. So <code>{jsonp:'onJSONPLoad'}</code> would result in <code>'onJSONPLoad=?'</code> passed to the server. <strong>As of jQuery 1.5</strong>, setting the <code>jsonp</code> option to <code>false</code> prevents jQuery from adding the "?callback" string to the URL or attempting to use "=?" for transformation. In this case, you should also explicitly set the <code>jsonpCallback</code> setting. For example, <code>{ jsonp: false, jsonpCallback: "callbackName" }</code>. If you don't trust the target of your Ajax requests, consider setting the <code>jsonp</code> property to <code>false</code> for security reasons.</desc>
</property>
<property name="jsonpCallback">
<type name="String"/>
<type name="Function"/>
- <desc>Specify the callback function name for a JSONP request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests. <strong>As of jQuery 1.5</strong>, you can also use a function for this setting, in which case the value of <code>jsonpCallback</code> is set to the return value of that function. </desc>
+ <desc>Specify the callback function name for a JSONP request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests. <strong>As of jQuery 1.5</strong>, you can also use a function for this setting, in which case the value of <code>jsonpCallback</code> is set to the return value of that function.</desc>
+ </property>
+ <property default="'GET'" name="method" type="String" added="1.9">
+ <desc>The HTTP method to use for the request (e.g. <code>"POST"</code>, <code>"GET"</code>, <code>"PUT"</code>).</desc>
</property>
<property name="mimeType" type="String" added="1.5.1">
<desc>A mime type to override the <abbr title="XMLHttpRequest">XHR</abbr> mime type.</desc>
@@ -109,10 +148,13 @@ $.ajax({
<desc>A password to be used with XMLHttpRequest in response to an HTTP access authentication request.</desc>
</property>
<property default="true" name="processData" type="Boolean">
- <desc>By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to <code>false</code>.</desc>
+ <desc>By default, data passed in to the <code>data</code> option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to <code>false</code>.</desc>
+ </property>
+ <property name="scriptAttrs" type="PlainObject" added="3.4">
+ <desc>Defines an object with additional attributes to be used in a "script" or "jsonp" request. The key represents the name of the attribute and the value is the attribute's value. If this object is provided it will force the use of a script-tag transport. For example, this can be used to set <code>nonce</code>, <code>integrity</code>, or <code>crossorigin</code> attributes to satisfy Content Security Policy requirements.</desc>
</property>
<property name="scriptCharset" type="String">
- <desc>Only applies when the "script" transport is used (e.g., cross-domain requests with "jsonp" or "script" dataType and "GET" type). Sets the <code>charset</code> attribute on the script tag used in the request. Used when the character set on the local page is not the same as the one on the remote script.</desc>
+ <desc>Only applies when the "script" transport is used. Sets the <code>charset</code> attribute on the script tag used in the request. Used when the character set on the local page is not the same as the one on the remote script. Alternatively, the <code>charset</code> attribute can be specified in <code>scriptAttrs</code> instead, which will also ensure the use of the "script" transport.</desc>
</property>
<property name="statusCode" type="PlainObject" default="{}" added="1.5">
<desc>
@@ -136,13 +178,13 @@ $.ajax({
<desc>A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the <code>dataType</code> parameter or the <code>dataFilter</code> callback function, if specified; a string describing the status; and the <code>jqXHR</code> (in jQuery 1.4.x, XMLHttpRequest) object. <strong>As of jQuery 1.5</strong>, <em>the success setting can accept an array of functions. Each function will be called in turn.</em> This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
</property>
<property name="timeout" type="Number">
- <desc>Set a timeout (in milliseconds) for the request. This will override any global timeout set with <a href="/https/github.com/jQuery.ajaxSetup/">$.ajaxSetup()</a>. The timeout period starts at the point the <code>$.ajax</code> call is made; if several other requests are in progress and the browser has no connections available, it is possible for a request to time out before it can be sent. <strong>In jQuery 1.4.x and below,</strong> the XMLHttpRequest object will be in an invalid state if the request times out; accessing any object members may throw an exception. <strong>In Firefox 3.0+ only,</strong> script and JSONP requests cannot be cancelled by a timeout; the script will run even if it arrives after the timeout period.</desc>
+ <desc>Set a timeout (in milliseconds) for the request. A value of 0 means there will be no timeout. This will override any global timeout set with <a href="/https/github.com/jQuery.ajaxSetup/">$.ajaxSetup()</a>. The timeout period starts at the point the <code>$.ajax</code> call is made; if several other requests are in progress and the browser has no connections available, it is possible for a request to time out before it can be sent. <strong>In jQuery 1.4.x and below,</strong> the XMLHttpRequest object will be in an invalid state if the request times out; accessing any object members may throw an exception. <strong>In Firefox 3.0+ only,</strong> script and JSONP requests cannot be cancelled by a timeout; the script will run even if it arrives after the timeout period.</desc>
</property>
<property name="traditional" type="Boolean">
<desc>Set this to <code>true</code> if you wish to use the traditional style of <a href="/https/github.com/jQuery.param/">param serialization</a>.</desc>
</property>
<property default="'GET'" name="type" type="String">
- <desc>The type of request to make ("POST" or "GET"), default is "GET". <strong>Note:</strong> Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.</desc>
+ <desc>An alias for <code>method</code>. You should use <code>type</code> if you're using versions of jQuery prior to 1.9.0.</desc>
</property>
<property default="The current page" name="url" type="String">
<desc> A string containing the URL to which the request is sent.</desc>
@@ -183,7 +225,7 @@ $.ajax();
<p><strong>As of jQuery 1.5.1</strong>, the <code>jqXHR</code> object also contains the <code>overrideMimeType()</code> method (it was available in jQuery 1.4.x, as well, but was temporarily removed in jQuery 1.5). The <code>.overrideMimeType()</code> method may be used in the <code>beforeSend()</code> callback function, for example, to modify the response content-type header:</p>
<pre><code>
$.ajax({
- url: "http://fiddle.jshell.net/favicon.png",
+ url: "https://fiddle.jshell.net/favicon.png",
beforeSend: function( xhr ) {
xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
}
@@ -198,7 +240,7 @@ $.ajax({
<ul>
<li>
<strong>jqXHR.done(function( data, textStatus, jqXHR ) {});</strong>
- <p>An alternative construct to the success callback option, the <code>.done()</code> method replaces the deprecated <code>jqXHR.success()</code> method. Refer to <code><a href="/https/github.com/deferred.done/">deferred.done()</a></code> for implementation details.</p>
+ <p>An alternative construct to the success callback option, refer to <code><a href="/https/github.com/deferred.done/">deferred.done()</a></code> for implementation details.</p>
</li>
<li>
<strong>jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});</strong>
@@ -206,7 +248,7 @@ $.ajax({
</p>
</li>
<li>
- <strong>jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });</strong>
+ <strong>jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });</strong> (added in jQuery 1.6)
<p>An alternative construct to the complete callback option, the <code>.always()</code> method replaces the deprecated <code>.complete()</code> method.</p>
<p>In response to a successful request, the function's arguments are the same as those of <code>.done()</code>: data, textStatus, and the jqXHR object. For failed requests the arguments are the same as those of <code>.fail()</code>: the jqXHR object, textStatus, and errorThrown. Refer to <code><a href="/https/github.com/deferred.always/">deferred.always()</a></code> for implementation details.</p>
</li>
@@ -217,7 +259,7 @@ $.ajax({
</li>
</ul>
<div class="warning">
- <p><strong>Deprecation Notice:</strong> The <code>jqXHR.success()</code>, <code>jqXHR.error()</code>, and <code>jqXHR.complete()</code> callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use <code>jqXHR.done()</code>, <code>jqXHR.fail()</code>, and <code>jqXHR.always()</code> instead.</p>
+ <p><strong>Deprecation Notice:</strong> The <code>jqXHR.success()</code>, <code>jqXHR.error()</code>, and <code>jqXHR.complete()</code> callbacks are removed as of jQuery 3.0. You can use <code>jqXHR.done()</code>, <code>jqXHR.fail()</code>, and <code>jqXHR.always()</code> instead.</p>
</div>
<pre><code>
// Assign handlers immediately after making the request,
@@ -246,25 +288,32 @@ jqxhr.always(function() {
<li>
<code>readyState</code>
</li>
+ <li>
+ <code>responseXML</code> and/or <code>responseText</code> when the underlying request responded with xml and/or text, respectively
+ </li>
<li>
<code>status</code>
</li>
<li>
- <code>statusText</code>
+ <code>statusText</code> (may be an empty string in HTTP/2)
+ </li>
+ <li>
+ <code>abort( [ statusText ] )</code>
+ </li>
+ <li>
+ <code>getAllResponseHeaders()</code> as a string
</li>
- <li><code>responseXML</code> and/or <code>responseText</code> when the underlying request responded with xml and/or text, respectively</li>
- <li><code>setRequestHeader(name, value)</code> which departs from the standard by replacing the old value with the new one rather than concatenating the new value to the old one</li>
<li>
- <code>getAllResponseHeaders()</code>
+ <code>getResponseHeader( name )</code>
</li>
<li>
- <code>getResponseHeader()</code>
+ <code>overrideMimeType( mimeType )</code>
</li>
<li>
- <code>statusCode()</code>
+ <code>setRequestHeader( name, value )</code> which departs from the standard by replacing the old value with the new one rather than concatenating the new value to the old one
</li>
<li>
- <code>abort()</code>
+ <code>statusCode( callbacksByStatusCode )</code>
</li>
</ul>
<p>No <code>onreadystatechange</code> mechanism is provided, however, since <code>done</code>, <code>fail</code>, <code>always</code>, and <code>statusCode</code> cover all conceivable requirements.</p>
@@ -285,16 +334,16 @@ jqxhr.always(function() {
<p>Different types of response to <code>$.ajax()</code> call are subjected to different kinds of pre-processing before being passed to the success handler. The type of pre-processing depends by default upon the Content-Type of the response, but can be set explicitly using the <code>dataType</code> option. If the <code>dataType</code> option is provided, the Content-Type header of the response will be disregarded.</p>
<p>The available data types are <code>text</code>, <code>html</code>, <code>xml</code>, <code>json</code>, <code>jsonp</code>, and <code>script</code>.</p>
<p>If <code>text</code> or <code>html</code> is specified, no pre-processing occurs. The data is simply passed on to the success handler, and made available through the <code>responseText</code> property of the <code>jqXHR</code> object.</p>
- <p>If <code>xml</code> is specified, the response is parsed using <a href="/https/github.com/jQuery.parseXML/"><code>jQuery.parseXML</code></a> before being passed, as an <a href="http://api.jquery.com/Types/#XMLDocument"><code>XMLDocument</code></a>, to the success handler. The XML document is made available through the <code>responseXML</code> property of the <code>jqXHR</code> object.</p>
+ <p>If <code>xml</code> is specified, the response is parsed using <a href="/https/github.com/jQuery.parseXML/"><code>jQuery.parseXML</code></a> before being passed, as an <a href="https://api.jquery.com/Types/#XMLDocument"><code>XMLDocument</code></a>, to the success handler. The XML document is made available through the <code>responseXML</code> property of the <code>jqXHR</code> object.</p>
<p>If <code>json</code> is specified, the response is parsed using <a href="/https/github.com/jQuery.parseJSON/"><code>jQuery.parseJSON</code></a> before being passed, as an object, to the success handler. The parsed JSON object is made available through the <code>responseJSON</code> property of the <code>jqXHR</code> object.</p>
<p>If <code>script</code> is specified, <code>$.ajax()</code> will execute the JavaScript that is received from the server before passing it on to the success handler as a string.</p>
<p>If <code>jsonp</code> is specified, <code>$.ajax()</code> will automatically append a query string parameter of (by default) <code>callback=?</code> to the URL. The <code>jsonp</code> and <code>jsonpCallback</code> properties of the settings passed to <code>$.ajax()</code> can be used to specify, respectively, the name of the query string parameter and the name of the JSONP callback function. The server should return valid JavaScript that passes the JSON response into the callback function. <code>$.ajax()</code> will execute the returned JavaScript, calling the JSONP callback function, before passing the JSON object contained in the response to the <code>$.ajax()</code> success handler.</p>
- <p>For more information on JSONP, see the <a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">original post detailing its use</a>.</p>
+ <p>For more information on JSONP, see the <a href="https://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">original post detailing its use</a>.</p>
<h4 id="sending-data-to-server">Sending Data to the Server</h4>
<p>By default, Ajax requests are sent using the GET HTTP method. If the POST method is required, the method can be specified by setting a value for the <code>type</code> option. This option affects how the contents of the <code>data</code> option are sent to the server. POST data will always be transmitted to the server using UTF-8 charset, per the W3C XMLHTTPRequest standard.</p>
<p>The <code>data</code> option can contain either a query string of the form <code>key1=value1&key2=value2</code>, or an object of the form <code>{key1: 'value1', key2: 'value2'}</code>. If the latter form is used, the data is converted into a query string using <code><a href="/https/github.com/jQuery.param/">jQuery.param()</a></code> before it is sent. This processing can be circumvented by setting <code>processData</code> to <code>false</code>. The processing might be undesirable if you wish to send an XML object to the server; in this case, change the <code>contentType</code> option from <code>application/x-www-form-urlencoded</code> to a more appropriate MIME type.</p>
<h4 id="advanced-options">Advanced Options</h4>
- <p>The <code>global</code> option prevents handlers registered using <code><a href="/https/github.com/ajaxSend/">.ajaxSend()</a></code>, <code><a href="/https/github.com/ajaxError/">.ajaxError()</a></code>, and similar methods from firing when this request would trigger them. This can be useful to, for example, suppress a loading indicator that was implemented with <code><a href="/https/github.com/ajaxSend/">.ajaxSend()</a></code> if the requests are frequent and brief. With cross-domain script and JSONP requests, the global option is automatically set to <code>false</code>. See the descriptions of these methods below for more details.</p>
+ <p>The <code>global</code> option prevents handlers registered for the <code><a href="/https/github.com/ajaxSend/">ajaxSend</a></code>, <code><a href="/https/github.com/ajaxError/">ajaxError</a></code>, and similar events from firing when this request would trigger them. This can be useful to, for example, suppress a loading indicator that was implemented with an <code><a href="/https/github.com/ajaxSend/">ajaxSend</a></code> handler if the requests are frequent and brief. With cross-domain script and JSONP requests, the global option is automatically set to <code>false</code>. See the descriptions of these methods below for more details.</p>
<p>If the server performs HTTP authentication before providing a response, the user name and password pair can be sent via the <code>username</code> and <code>password</code> options.</p>
<p>Ajax requests are time-limited, so errors can be caught and handled to provide a better user experience. Request timeouts are usually either left at their default or set as a global default using <code><a href="/https/github.com/jQuery.ajaxSetup/">$.ajaxSetup()</a></code> rather than being overridden for specific requests with the <code>timeout</code> option.</p>
<p>By default, requests are always issued, but the browser may serve results out of its cache. To disallow use of the cached results, set <code>cache</code> to <code>false</code>. To cause the request to report failure if the asset has not been modified since the last request, set <code>ifModified</code> to <code>true</code>.</p>
@@ -306,7 +355,7 @@ jqxhr.always(function() {
<p><strong>As of jQuery 1.5</strong>, jQuery's Ajax implementation includes <a href="/https/github.com/jQuery.ajaxPrefilter/">prefilters</a>, <a href="/https/github.com/jQuery.ajaxTransport/">transports</a>, and converters that allow you to extend Ajax with a great deal of flexibility.</p>
<h4 id="using-converters">Using Converters</h4>
- <p><code>$.ajax()</code> converters support mapping data types to other data types. If, however, you want to map a custom data type to a known type (e.g <code>json</code>), you must add a correspondance between the response Content-Type and the actual data type using the <code>contents</code> option:</p>
+ <p><code>$.ajax()</code> converters support mapping data types to other data types. If, however, you want to map a custom data type to a known type (e.g <code>json</code>), you must add a correspondence between the response Content-Type and the actual data type using the <code>contents</code> option:</p>
<pre><code>
$.ajaxSetup({
contents: {
@@ -320,7 +369,7 @@ $.ajaxSetup({
}
});
</code></pre>
- <p>This extra object is necessary because the response Content-Types and data types never have a strict one-to-one correspondance (hence the regular expression).</p>
+ <p>This extra object is necessary because the response Content-Types and data types never have a strict one-to-one correspondence (hence the regular expression).</p>
<p>To convert from a supported type (e.g <code>text</code>, <code>json</code>) to a custom data type and back again, use another pass-through converter:</p>
<pre><code>
$.ajaxSetup({
@@ -344,7 +393,7 @@ $.ajaxSetup({
<desc>Save some data to the server and notify the user once it's complete.</desc>
<code><![CDATA[
$.ajax({
- type: "POST",
+ method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
@@ -385,7 +434,7 @@ xmlRequest.done( handleResponse );
var menuId = $( "ul.nav" ).first().attr( "id" );
var request = $.ajax({
url: "script.php",
- type: "POST",
+ method: "POST",
data: { id : menuId },
dataType: "html"
});
@@ -403,7 +452,7 @@ request.fail(function( jqXHR, textStatus ) {
<desc>Load and execute a JavaScript file.</desc>
<code><![CDATA[
$.ajax({
- type: "GET",
+ method: "GET",
url: "test.js",
dataType: "script"
});
@@ -413,4 +462,6 @@ $.ajax({
<category slug="version/1.0"/>
<category slug="version/1.5"/>
<category slug="version/1.5.1"/>
+ <category slug="version/3.5"/>
+ <category slug="version/3.6"/>
</entry>
diff --git a/entries/jQuery.ajaxPrefilter.xml b/entries/jQuery.ajaxPrefilter.xml
index eb762dfb2..708ca8290 100644
--- a/entries/jQuery.ajaxPrefilter.xml
+++ b/entries/jQuery.ajaxPrefilter.xml
@@ -24,7 +24,7 @@ $.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
<p>where:</p>
<ul>
<li><code>options</code> are the request options</li>
- <li><code>originalOptions</code> are the options as provided to the ajax method, unmodified and, thus, without defaults from <code>ajaxSettings</code></li>
+ <li><code>originalOptions</code> are the options as provided to the <code>$.ajax()</code> method, unmodified and, thus, without defaults from <code>ajaxSettings</code></li>
<li><code>jqXHR</code> is the jqXHR object of the request</li>
</ul>
<p>Prefilters are a perfect fit when custom options need to be handled. Given the following code, for example, a call to <code>$.ajax()</code> would automatically abort a request to the same URL if the custom <code>abortOnRetry</code> option is set to <code>true</code>:</p>
@@ -40,11 +40,11 @@ $.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
}
});
</code></pre>
- <p>Prefilters can also be used to modify existing options. For example, the following proxies cross-domain requests through http://mydomain.net/proxy/:</p>
+ <p>Prefilters can also be used to modify existing options. For example, the following proxies cross-domain requests through https://mydomain.net/proxy/:</p>
<pre><code>
$.ajaxPrefilter(function( options ) {
if ( options.crossDomain ) {
- options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url );
+ options.url = "https://mydomain.net/proxy/" + encodeURIComponent( options.url );
options.crossDomain = false;
}
});
diff --git a/entries/jQuery.ajaxSetup.xml b/entries/jQuery.ajaxSetup.xml
index d9589e3a6..b0b54447e 100644
--- a/entries/jQuery.ajaxSetup.xml
+++ b/entries/jQuery.ajaxSetup.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="jQuery.ajaxSetup" return="">
+<entry type="method" name="jQuery.ajaxSetup" return="PlainObject">
<title>jQuery.ajaxSetup()</title>
<signature>
<added>1.1</added>
@@ -26,7 +26,7 @@ $.ajax({
});
</code></pre>
<div class="warning">
- <p>Note: Global callback functions should be set with their respective global Ajax event handler methods—<code><a href="/https/github.com/ajaxStart/">.ajaxStart()</a></code>, <code><a href="/https/github.com/ajaxStop/">.ajaxStop()</a></code>, <code><a href="/https/github.com/ajaxComplete/">.ajaxComplete()</a></code>, <code><a href="/https/github.com/ajaxError/">.ajaxError()</a></code>, <code><a href="/https/github.com/ajaxSuccess/">.ajaxSuccess()</a></code>, <code><a href="/https/github.com/ajaxSend/">.ajaxSend()</a></code>—rather than within the <code>options</code> object for <code>$.ajaxSetup()</code>.</p>
+ <p>Note: Global callback functions should be set via <code>.on()</code> with their respective global Ajax events—<code><a href="/https/github.com/ajaxStart/">ajaxStart</a></code>, <code><a href="/https/github.com/ajaxStop/">ajaxStop</a></code>, <code><a href="/https/github.com/ajaxComplete/">ajaxComplete</a></code>, <code><a href="/https/github.com/ajaxError/">ajaxError</a></code>, <code><a href="/https/github.com/ajaxSuccess/">ajaxSuccess</a></code>, <code><a href="/https/github.com/ajaxSend/">ajaxSend</a></code>—rather than within the <code>options</code> object for <code>$.ajaxSetup()</code>.</p>
</div>
</longdesc>
<example>
diff --git a/entries/jQuery.ajaxTransport.xml b/entries/jQuery.ajaxTransport.xml
index ab8e4d9b1..ccc73ce88 100644
--- a/entries/jQuery.ajaxTransport.xml
+++ b/entries/jQuery.ajaxTransport.xml
@@ -35,10 +35,10 @@ $.ajaxTransport( dataType, function( options, originalOptions, jqXHR ) {
<p>where:</p>
<ul>
<li><code>options</code> are the request options</li>
- <li><code>originalOptions</code> are the options as provided to the ajax method, unmodified and, thus, without defaults from ajaxSettings</li>
+ <li><code>originalOptions</code> are the options as provided to the <code>$.ajax()</code> method, unmodified and, thus, without defaults from ajaxSettings</li>
<li><code>jqXHR</code> is the jqXHR object of the request</li>
<li><code>headers</code> is an object of (key-value) request headers that the transport can transmit if it supports it</li>
- <li><code>completeCallback</code> is the callback used to notify ajax of the completion of the request</li>
+ <li><code>completeCallback</code> is the callback used to notify Ajax of the completion of the request</li>
</ul>
<p><code>completeCallback</code> has the following signature:</p>
<pre><code>
@@ -48,7 +48,7 @@ function( status, statusText, responses, headers ) {}
<ul>
<li><code>status</code> is the HTTP status code of the response, like 200 for a typical success, or 404 for when the resource is not found.</li>
<li><code>statusText</code> is the statusText of the response.</li>
- <li><code>responses</code> (Optional) is An object containing dataType/value that contains the response in all the formats the transport could provide (for instance, a native XMLHttpRequest object would set reponses to <code>{ xml: XMLData, text: textData }</code> for a response that is an XML document)</li>
+ <li><code>responses</code> (Optional) is An object containing dataType/value that contains the response in all the formats the transport could provide (for instance, a native XMLHttpRequest object would set responses to <code>{ xml: XMLData, text: textData }</code> for a response that is an XML document)</li>
<li><code>headers</code> (Optional) is a string containing all the response headers if the transport has access to them (akin to what <code>XMLHttpRequest.getAllResponseHeaders()</code> would provide).</li>
</ul>
<p>Just like prefilters, a transport's factory function can be attached to a specific dataType:</p>
diff --git a/entries/jQuery.boxModel.xml b/entries/jQuery.boxModel.xml
index f260538ae..b80abe29a 100644
--- a/entries/jQuery.boxModel.xml
+++ b/entries/jQuery.boxModel.xml
@@ -4,8 +4,12 @@
<signature>
<added>1.0</added>
</signature>
- <desc>States if the current page, in the user's browser, is being rendered using the <a href="http://www.w3.org/TR/REC-CSS2/box.html">W3C CSS Box Model</a>. <strong>This property was removed in jQuery 1.8</strong>. Please try to use feature detection instead.</desc>
- <longdesc/>
+ <desc>States if the current page, in the user's browser, is being rendered using the <a href="https://www.w3.org/TR/REC-CSS2/box.html">W3C CSS Box Model</a>.</desc>
+ <longdesc>
+ <div class="warning">
+ <p>Note: This API has been removed in jQuery 3.0; check if <code>.document.compatMode</code> is equal to <code>"CSS1Compat"</code> instead. Or, even better - always specify a DOCTYPE and avoid using quirks mode which jQuery doesn't support.</p>
+ </div>
+ </longdesc>
<category slug="utilities"/>
<category slug="version/1.0"/>
<category slug="deprecated/deprecated-1.3"/>
diff --git a/entries/jQuery.browser.xml b/entries/jQuery.browser.xml
index e7c690ace..11686eaec 100644
--- a/entries/jQuery.browser.xml
+++ b/entries/jQuery.browser.xml
@@ -7,6 +7,9 @@
</signature>
<desc>Contains flags for the useragent, read from navigator.userAgent. <strong>This property was removed in jQuery 1.9</strong> and is available only through the jQuery.migrate plugin. Please try to use feature detection instead.</desc>
<longdesc>
+ <div class="warning">
+ <p>Note: This API has been removed in jQuery 1.9; please rely on feature detection instead.</p>
+ </div>
<p>The <code>$.browser</code> property provides information about the web browser that is accessing the page, as reported by the browser itself. It contains flags for each of the four most prevalent browser classes (Internet Explorer, Mozilla, Webkit, and Opera) as well as version information.</p>
<p>Available flags are:</p>
<ul>
@@ -18,7 +21,7 @@
</ul>
<p>This property is available immediately. It is therefore safe to use it to determine whether or not to call <code>$(document).ready()</code>.
The <code>$.browser</code> property is deprecated in jQuery 1.3, and its functionality may be moved to a team-supported plugin in a future release of jQuery.</p>
- <p>Because <code>$.browser</code> uses <code>navigator.userAgent</code> to determine the platform, it is vulnerable to spoofing by the user or misrepresentation by the browser itself. It is always best to avoid browser-specific code entirely where possible. Instead of relying on <code>$.browser</code> it's better to use libraries like <a href="http://modernizr.com/">Modernizr</a>.</p>
+ <p>Because <code>$.browser</code> uses <code>navigator.userAgent</code> to determine the platform, it is vulnerable to spoofing by the user or misrepresentation by the browser itself. It is always best to avoid browser-specific code entirely where possible. Instead of relying on <code>$.browser</code> it's better to use libraries like <a href="https://modernizr.com/">Modernizr</a>.</p>
</longdesc>
<example>
<desc>Show the browser info.</desc>
@@ -56,6 +59,9 @@ $.browser.msie;
</signature>
<desc>The version number of the rendering engine for the user's browser. <strong>This property was removed in jQuery 1.9</strong> and is available only through the jQuery.migrate plugin.</desc>
<longdesc>
+ <div class="warning">
+ <p>Note: This API has been removed in jQuery 1.9; please rely on feature detection instead.</p>
+ </div>
<p>Here are some typical results:</p>
<ul>
<li>Internet Explorer: 6.0, 7.0, 8.0</li>
diff --git a/entries/jQuery.cssHooks.xml b/entries/jQuery.cssHooks.xml
index 8252bfa5d..ec36ccfe1 100644
--- a/entries/jQuery.cssHooks.xml
+++ b/entries/jQuery.cssHooks.xml
@@ -45,7 +45,7 @@ function styleSupport( prop ) {
// Capitalize first character of the prop to test vendor prefix
capProp = prop.charAt( 0 ).toUpperCase() + prop.slice( 1 ),
- prefixes = [ "Moz", "Webkit", "O", "ms" ],
+ prefixes = [ "Moz", "Webkit", "ms" ],
div = document.createElement( "div" );
if ( prop in div.style ) {
@@ -89,7 +89,7 @@ if ( !$.cssHooks ) {
function styleSupport( prop ) {
var vendorProp, supportedProp,
capProp = prop.charAt( 0 ).toUpperCase() + prop.slice( 1 ),
- prefixes = [ "Moz", "Webkit", "O", "ms" ],
+ prefixes = [ "Moz", "Webkit", "ms" ],
div = document.createElement( "div" );
if ( prop in div.style ) {
@@ -163,7 +163,7 @@ if ( $.support.someCSSProp && $.support.someCSSProp !== "someCSSProp" )
})( jQuery );
</code></pre>
<h4 id="special-units">Special units</h4>
- <p>By default, jQuery adds a "px" unit to the values passed to the <code>.css()</code> method. This behavior can be prevented by adding the property to the <code>jQuery.cssNumber</code> object</p>
+ <p>By default, jQuery adds a "px" unit to the values passed to the <code>.css()</code> method. This behavior can be prevented by adding the property to the <a href="/https/github.com/jQuery.cssNumber/"><code>jQuery.cssNumber</code></a> object</p>
<pre><code>
$.cssNumber.someCSSProp = true;
</code></pre>
diff --git a/entries/jQuery.cssNumber.xml b/entries/jQuery.cssNumber.xml
new file mode 100644
index 000000000..c49b3c785
--- /dev/null
+++ b/entries/jQuery.cssNumber.xml
@@ -0,0 +1,53 @@
+<?xml version="1.0"?>
+<entry type="property" name="jQuery.cssNumber" return="Object" removed="4.0">
+ <title>jQuery.cssNumber</title>
+ <signature>
+ <added>1.4.3</added>
+ </signature>
+ <desc>An object containing all CSS properties that may be used without a unit. Prior to jQuery 4.0, the <a href="/https/github.com/css/"><code>.css()</code></a> method uses this object to see if it may append <code>px</code> to unitless values.</desc>
+ <longdesc>
+ <div class="warning">
+ <p>Note: This API has been removed in jQuery 4.0; please pass a string value with the desired units instead.</p>
+ </div>
+ <p>You can think about <code>jQuery.cssNumber</code> as a list of all CSS properties you might use without a unit. Prior to jQuery 4.0, it was used by <a href="/https/github.com/css/"><code>.css()</code></a> to determine if it needs to add <code>px</code> to unitless values.</p>
+ <p>The keys of the <code>jQuery.cssNumber</code> object are camel-cased and the values are all set to <code>true</code>. If you want to prevent the <a href="/https/github.com/css/"><code>.css()</code></a> method from automatically adding the <code>px</code> unit for a specific CSS property and that property is not yet a key of the <code>jQuery.cssNumber</code> object, you can add such an extra property:</p>
+ <pre><code>
+if ( jQuery.cssNumber ) {
+ jQuery.cssNumber.someCSSProp = true;
+}
+ </code></pre>
+ <p>By default the object contains the following properties:</p>
+ <ul>
+ <li><code>animationIterationCount</code> (added in 1.12.0/2.2.0)</li>
+ <li><code>aspectRatio</code> (added in 3.7.0)</li>
+ <li><code>borderImageSlice</code> (added in 3.7.0)</li>
+ <li><code>columnCount</code> (added in 1.9.0)</li>
+ <li><code>flexGrow</code> (added in 1.11.1/2.1.1)</li>
+ <li><code>flexShrink</code> (added in 1.11.1/2.1.1)</li>
+ <li><code>fontWeight</code> (added in 1.4.3)</li>
+ <li><code>gridArea</code> (added in 3.4.0)</li>
+ <li><code>gridColumn</code> (added in 3.4.0)</li>
+ <li><code>gridColumnEnd</code> (added in 3.4.0)</li>
+ <li><code>gridColumnStart</code> (added in 3.4.0)</li>
+ <li><code>gridRow</code> (added in 3.4.0)</li>
+ <li><code>gridRowEnd</code> (added in 3.4.0)</li>
+ <li><code>gridRowStart</code> (added in 3.4.0)</li>
+ <li><code>lineHeight</code> (added in 1.4.3)</li>
+ <li><code>opacity</code> (added in 1.4.3)</li>
+ <li><code>order</code> (added in 1.10.2/2.0.3)</li>
+ <li><code>orphans</code> (added in 1.6.0)</li>
+ <li><code>scale</code> (added in 3.7.0)</li>
+ <li><code>widows</code> (added in 1.6.0)</li>
+ <li><code>zIndex</code> (added in 1.4.3)</li>
+ <li><code>zoom</code> (added in 1.4.3)</li>
+ <li><code>fillOpacity</code> (SVG-related, added in 1.6.2)</li>
+ <li><code>floodOpacity</code> (SVG-related, added in 3.7.0)</li>
+ <li><code>stopOpacity</code> (SVG-related, added in 3.7.0)</li>
+ <li><code>strokeMiterlimit</code> (SVG-related, added in 3.7.0)</li>
+ <li><code>strokeOpacity</code> (SVG-related, added in 3.7.0)</li>
+ </ul>
+ </longdesc>
+ <category slug="css"/>
+ <category slug="manipulation/style-properties"/>
+ <category slug="version/1.4.3"/>
+</entry>
diff --git a/entries/jQuery.data.xml b/entries/jQuery.data.xml
index 193cae70a..5207c8b89 100644
--- a/entries/jQuery.data.xml
+++ b/entries/jQuery.data.xml
@@ -25,7 +25,7 @@ jQuery.data( document.body, "bar", "test" );
</code></pre>
</longdesc>
<note id="no-data-on-xml" type="additional"/>
- <note id="data-doesnt-accept-undefined" type="additional" data-title="jQuery.data" data-parameters="el, "name""/>
+ <note id="jquery-data-doesnt-accept-undefined" type="additional" data-title="jQuery.data" data-parameters="el, "name""/>
<example>
<desc>Store then retrieve a value from the div element.</desc>
<code><![CDATA[
@@ -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 );
]]></code>
<css><![CDATA[
div {
@@ -92,7 +92,7 @@ alert( jQuery.data( document.body ) );
<example>
<desc>Get the data named "blah" stored at for an element.</desc>
<code><![CDATA[
-$( "button" ).click( function() {
+$( "button" ).on( "click", function() {
var value,
div = $( "div" )[ 0 ];
switch ( $( "button" ).index( this ) ) {
@@ -113,7 +113,7 @@ $( "button" ).click( function() {
break;
}
$( "span" ).text( "" + value );
-});
+} );
]]></code>
<css><![CDATA[
div {
diff --git a/entries/jQuery.dequeue.xml b/entries/jQuery.dequeue.xml
index 4bf143cb5..c9b6faf29 100644
--- a/entries/jQuery.dequeue.xml
+++ b/entries/jQuery.dequeue.xml
@@ -18,7 +18,7 @@
<example>
<desc>Use jQuery.dequeue() to end a custom queue function which allows the queue to keep going.</desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( "div" )
.animate({ left: '+=200px' }, 2000 )
.animate({ top: '0px' }, 600 )
diff --git a/entries/jQuery.each.xml b/entries/jQuery.each.xml
index 67fe70cc2..188360154 100644
--- a/entries/jQuery.each.xml
+++ b/entries/jQuery.each.xml
@@ -3,13 +3,13 @@
<title>jQuery.each()</title>
<signature>
<added>1.0</added>
- <argument name="array" type="Array">
- <desc>The array to iterate over.</desc>
+ <argument name="array" type="ArrayLikeObject">
+ <desc>The array or array-like object to iterate over.</desc>
</argument>
<argument name="callback" type="Function">
<argument name="indexInArray" type="Integer" />
<argument name="value" type="Object" />
- <desc>The function that will be executed on every object.</desc>
+ <desc>The function that will be executed on every value.</desc>
</argument>
</signature>
<signature>
@@ -20,13 +20,12 @@
<argument name="callback" type="Function">
<argument name="propertyName" type="String" />
<argument name="valueOfProperty" type="Object" />
- <desc>The function that will be executed on every object.</desc>
+ <desc>The function that will be executed on every value.</desc>
</argument>
</signature>
<desc>A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.</desc>
<longdesc>
<p>The <code>$.each()</code> function is not the same as <a href="/https/github.com/each/">$(selector).each()</a>, which is used to iterate, exclusively, over a jQuery object. The <code>$.each()</code> function can be used to iterate over any collection, whether it is an object or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time. (The value can also be accessed through the <code>this</code> keyword, but Javascript will always wrap the <code>this</code> value as an <code>Object</code> even if it is a simple string or number value.) The method returns its first argument, the object that was iterated.</p>
- <p><b>Note:</b> The <code>$.each()</code> function internally retrieves and uses the <code>length</code> property of the passed collection. So, if the collection has a property called <code>length</code> — e.g. <code>{bar: 'foo', length: 10}</code> — the function might not work as expected.</p>
<pre><code>
$.each([ 52, 97 ], function( index, value ) {
alert( index + ": " + value );
diff --git a/entries/jQuery.error.xml b/entries/jQuery.error.xml
index 3ae5110af..54b64d5d9 100644
--- a/entries/jQuery.error.xml
+++ b/entries/jQuery.error.xml
@@ -10,11 +10,15 @@
<desc>Takes a string and throws an exception containing it.</desc>
<longdesc>
<p>This method exists primarily for plugin developers who wish to override it and provide a better display (or more information) for the error messages.</p>
+ <p>If you do override the method, remember to still throw an error at the end to preserve semantics.</p>
</longdesc>
<example>
- <desc>Override jQuery.error for display in Firebug.</desc>
+ <desc>Override <code>jQuery.error</code> to send it to a logging service, assuming the <code>sendErrorLog</code> method is provided by this service.</desc>
<code><![CDATA[
-jQuery.error = console.error;
+jQuery.error = function( message ) {
+ sendErrorLog( "jQuery error: " + message );
+ throw new Error( message );
+};
]]></code>
</example>
<category slug="internals"/>
diff --git a/entries/jQuery.escapeSelector.xml b/entries/jQuery.escapeSelector.xml
new file mode 100644
index 000000000..9e9a91d1e
--- /dev/null
+++ b/entries/jQuery.escapeSelector.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0"?>
+<entry type="method" name="jQuery.escapeSelector" return="Selector">
+ <title>jQuery.escapeSelector()</title>
+ <desc>Escapes any character that has a special meaning in a CSS selector.</desc>
+ <signature>
+ <added>3.0</added>
+ <argument name="selector" type="Selector">
+ <desc>A string containing a selector expression to escape.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>This method is useful for situations where a class name or an ID contains characters that have a special meaning in CSS, such as the dot or the semicolon.</p>
+ <p>The method is essentially a shim for the <a href="https://drafts.csswg.org/cssom/#the-css.escape()-method">CSS Working Group's CSS.escape() method</a>. The main difference is that <code>$.escapeSelector()</code> can be reliably used in all of jQuery's supported browsers.</p>
+ </longdesc>
+ <example>
+ <desc>Escape an ID containing a hash.</desc>
+ <code><![CDATA[
+$.escapeSelector( "#target" ); // "\#target"
+]]></code>
+ </example>
+ <example>
+ <desc>Select all the elements having a class name of <code>.box</code> inside a <code>div</code>.</desc>
+ <code><![CDATA[
+$( "div" ).find( "." + $.escapeSelector( ".box" ) );
+]]></code>
+ </example>
+ <category slug="css"/>
+ <category slug="version/3.0"/>
+</entry>
diff --git a/entries/jQuery.extend.xml b/entries/jQuery.extend.xml
index 958e9d142..472626153 100644
--- a/entries/jQuery.extend.xml
+++ b/entries/jQuery.extend.xml
@@ -4,9 +4,9 @@
<signature>
<added>1.0</added>
<argument name="target" type="Object">
- <desc> An object that will receive the new properties if additional objects are passed in or that will extend the jQuery namespace if it is the sole argument.</desc>
+ <desc> An object that will receive the new properties.</desc>
</argument>
- <argument name="object1" type="Object" optional="true">
+ <argument name="object1" type="Object">
<desc>An object containing additional properties to merge in.</desc>
</argument>
<argument name="objectN" optional="true" type="Object">
@@ -16,7 +16,7 @@
<signature>
<added>1.1.4</added>
<argument name="deep" optional="true" type="Boolean">
- <desc>If true, the merge becomes recursive (aka. deep copy).</desc>
+ <desc>If true, the merge becomes recursive (aka. deep copy). Passing <code>false</code> for this argument is not supported.</desc>
</argument>
<argument name="target" type="Object">
<desc>The object to extend. It will receive the new properties.</desc>
@@ -28,6 +28,12 @@
<desc>Additional objects containing properties to merge in.</desc>
</argument>
</signature>
+ <signature>
+ <added>1.0</added>
+ <argument name="object" type="Object">
+ <desc> An object to merge onto the jQuery namespace.</desc>
+ </argument>
+ </signature>
<desc>Merge the contents of two or more objects together into the first object.</desc>
<longdesc>
<p>When two or more object arguments are supplied to <code>$.extend()</code>, properties from all of the objects are added to the target object. Arguments that are <code>null</code> or <code>undefined</code> are ignored.</p>
@@ -35,10 +41,11 @@
<p>Keep in mind that the target object (first argument) will be modified, and will also be returned from <code>$.extend()</code>. If, however, you want to preserve both of the original objects, you can do so by passing an empty object as the target:</p>
<pre><code>var object = $.extend({}, object1, object2);</code></pre>
<p>The merge performed by <code>$.extend()</code> is not recursive by default; if a property of the first object is itself an object or array, it will be completely overwritten by a property with the same key in the second or subsequent object. The values are not merged. This can be seen in the example below by examining the value of banana. However, by passing <code>true</code> for the first function argument, objects will be recursively merged.</p>
+ <p><strong>Warning</strong>: Versions prior to 3.4 had a security issue where calling <code>jQuery.extend(true, {}, object)</code> on an unsanitized object containing a <code>__proto__</code> property would extend <code>Object.prototype</code>.</p>
<p><strong>Warning</strong>: Passing <code>false</code> for the first argument is not supported.</p>
<p>Undefined properties are not copied. However, properties inherited from the object's prototype <em>will</em> be copied over. Properties that are an object constructed via <code>new MyCustomObject(args)</code>, or built-in JavaScript types such as Date or RegExp, are not re-constructed and will appear as plain Objects in the resulting object or array.</p>
<p>On a <code>deep</code> extend, Object and Array are extended, but object wrappers on primitive types such as String, Boolean, and Number are not. Deep-extending a cyclical data structure will result in an error.</p>
- <p>For needs that fall outside of this behavior, write a custom extend method instead, or use a library like <a href="http://lodash.com">lodash</a>. </p>
+ <p>For needs that fall outside of this behavior, write a custom extend method instead, or use a library like <a href="https://lodash.com">lodash</a>. </p>
</longdesc>
<example>
<desc>Merge two objects, modifying the first.</desc>
@@ -56,17 +63,8 @@ var object2 = {
// Merge object2 into object1
$.extend( object1, object2 );
-var printObj = typeof JSON !== "undefined" ? JSON.stringify : function( obj ) {
- var arr = [];
- $.each( obj, function( key, val ) {
- var next = key + ": ";
- next += $.isPlainObject( val ) ? printObj( val ) : val;
- arr.push( next );
- });
- return "{ " + arr.join( ", " ) + " }";
-};
-
-$( "#log" ).append( printObj( object1 ) );
+// Assuming JSON.stringify - not available in IE<8
+$( "#log" ).append( JSON.stringify( object1 ) );
]]></code>
<html><![CDATA[
<div id="log"></div>
@@ -88,17 +86,8 @@ var object2 = {
// Merge object2 into object1, recursively
$.extend( true, object1, object2 );
-var printObj = typeof JSON !== "undefined" ? JSON.stringify : function( obj ) {
- var arr = [];
- $.each( obj, function( key, val ) {
- var next = key + ": ";
- next += $.isPlainObject( val ) ? printObj( val ) : val;
- arr.push( next );
- });
- return "{ " + arr.join( ", " ) + " }";
-};
-
-$( "#log" ).append( printObj( object1 ) );
+// Assuming JSON.stringify - not available in IE<8
+$( "#log" ).append( JSON.stringify( object1 ) );
]]></code>
<html><![CDATA[
<div id="log"></div>
@@ -113,19 +102,10 @@ var options = { validate: true, name: "bar" };
// Merge defaults and options, without modifying defaults
var settings = $.extend( {}, defaults, options );
-var printObj = typeof JSON !== "undefined" ? JSON.stringify : function( obj ) {
- var arr = [];
- $.each( obj, function( key, val ) {
- var next = key + ": ";
- next += $.isPlainObject( val ) ? printObj( val ) : val;
- arr.push( next );
- });
- return "{ " + arr.join( ", " ) + " }";
-};
-
-$( "#log" ).append( "<div><b>defaults -- </b>" + printObj( defaults ) + "</div>" );
-$( "#log" ).append( "<div><b>options -- </b>" + printObj( options ) + "</div>" );
-$( "#log" ).append( "<div><b>settings -- </b>" + printObj( settings ) + "</div>" );
+// Assuming JSON.stringify - not available in IE<8
+$( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
+$( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
+$( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
]]></code>
<html><![CDATA[
<div id="log"></div>
@@ -133,4 +113,5 @@ $( "#log" ).append( "<div><b>settings -- </b>" + printObj( settings ) + "</div>"
</example>
<category slug="utilities"/>
<category slug="version/1.0"/>
+ <category slug="version/3.4"/>
</entry>
diff --git a/entries/jQuery.fx.interval.xml b/entries/jQuery.fx.interval.xml
index cf67f484e..b86516c3e 100644
--- a/entries/jQuery.fx.interval.xml
+++ b/entries/jQuery.fx.interval.xml
@@ -1,19 +1,22 @@
<?xml version="1.0"?>
-<entry type="property" name="jQuery.fx.interval" return="Number">
+<entry type="property" name="jQuery.fx.interval" return="Number" deprecated="3.0" removed="4.0">
<title>jQuery.fx.interval</title>
<desc>The rate (in milliseconds) at which animations fire.</desc>
<signature>
<added>1.4.3</added>
</signature>
<longdesc>
- <p>This property can be manipulated to adjust the number of frames per second at which animations will run. The default is 13 milliseconds. Making this a lower number could make the animations run smoother in faster browsers (such as Chrome) but there may be performance and CPU implications of doing so.</p>
+ <div class="warning">
+ <p>This property is deprecated as of version 3.0, and has no effect in browsers that support the <a href="https://caniuse.com/#feat=requestanimationframe"><code>requestAnimationFrame</code></a> method.</p>
+ </div>
+ <p>On browsers that do not support <code>requestAnimationFrame</code>, this property can be changed to adjust the interval at which animations will run. The default is 13 milliseconds.</p>
<p>Since jQuery uses one global interval, no animation should be running or all animations should stop for the change of this property to take effect.</p>
</longdesc>
<example>
<desc>Cause all animations to run with less frames.</desc>
<code><![CDATA[
jQuery.fx.interval = 100;
-$( "input" ).click(function() {
+$( "input" ).on( "click", function() {
$( "div" ).toggle( 3000 );
});
]]></code>
@@ -34,4 +37,5 @@ $( "input" ).click(function() {
<category slug="effects/custom-effects"/>
<category slug="properties/global-jquery-object-properties"/>
<category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.0"/>
</entry>
diff --git a/entries/jQuery.fx.off.xml b/entries/jQuery.fx.off.xml
index 74bfd60a3..8464f69f5 100644
--- a/entries/jQuery.fx.off.xml
+++ b/entries/jQuery.fx.off.xml
@@ -20,10 +20,10 @@ var toggleFx = function() {
$.fx.off = !$.fx.off;
};
toggleFx();
-$( "button" ).click( toggleFx );
-$( "input" ).click(function() {
+$( "button" ).on( "click", toggleFx );
+$( "input" ).on( "click", function() {
$( "div" ).toggle( "slow" );
-});
+} );
]]></code>
<css><![CDATA[
div {
diff --git a/entries/jQuery.get.xml b/entries/jQuery.get.xml
index 396e58b0a..575a6f835 100644
--- a/entries/jQuery.get.xml
+++ b/entries/jQuery.get.xml
@@ -15,10 +15,16 @@
<argument name="data" type="PlainObject" />
<argument name="textStatus" type="String"/>
<argument name="jqXHR" type="jqXHR"/>
- <desc>A callback function that is executed if the request succeeds.</desc>
+ <desc>A callback function that is executed if the request succeeds. Required if <code>dataType</code> is provided, but you can use <code>null</code> or <a href="/https/github.com/jQuery.noop/"><code>jQuery.noop</code></a> as a placeholder.</desc>
</argument>
<argument name="dataType" optional="true" type="String">
- <desc>The type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html).</desc>
+ <desc>The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).</desc>
+ </argument>
+ </signature>
+ <signature>
+ <added>1.12-and-2.2</added>
+ <argument name="settings" type="PlainObject" optional="false">
+ <desc>A set of key/value pairs that configure the Ajax request. All properties except for <code>url</code> are optional. A default can be set for any option with <a href="/https/github.com/jQuery.ajaxSetup/">$.ajaxSetup()</a>. See <a href="/https/github.com/jQuery.ajax/#jQuery-ajax-settings">jQuery.ajax( settings )</a> for a complete list of all settings. The type option will automatically be set to <code>GET</code>.</desc>
</argument>
</signature>
<desc>Load data from the server using a HTTP GET request.</desc>
@@ -43,7 +49,7 @@ $.get( "ajax/test.html", function( data ) {
</code></pre>
<p>This example fetches the requested HTML snippet and inserts it on the page.</p>
<h4 id="jqxhr-object">The jqXHR Object</h4>
- <p><strong>As of jQuery 1.5</strong>, all of jQuery's Ajax methods return a superset of the <code>XMLHTTPRequest</code> object. This jQuery XHR object, or "jqXHR," returned by <code>$.get()</code> implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see <a href="/https/github.com/category/deferred-object/">Deferred object</a> for more information). The <code>jqXHR.done()</code> (for success), <code>jqXHR.fail()</code> (for error), and <code>jqXHR.always()</code> (for completion, whether success or error) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the <a href="/https/github.com/jQuery.ajax/#jqXHR">jqXHR Object</a> section of the $.ajax() documentation.</p>
+ <p><strong>As of jQuery 1.5</strong>, all of jQuery's Ajax methods return a superset of the <code>XMLHTTPRequest</code> object. This jQuery XHR object, or "jqXHR," returned by <code>$.get()</code> implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see <a href="/https/github.com/category/deferred-object/">Deferred object</a> for more information). The <code>jqXHR.done()</code> (for success), <code>jqXHR.fail()</code> (for error), and <code>jqXHR.always()</code> (for completion, whether success or error; added in jQuery 1.6) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the <a href="/https/github.com/jQuery.ajax/#jqXHR">jqXHR Object</a> section of the <code>$.ajax()</code> documentation.</p>
<p>The Promise interface also allows jQuery's Ajax methods, including <code>$.get()</code>, to chain multiple <code>.done()</code>, <code>.fail()</code>, and <code>.always()</code> callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.</p>
<pre><code>
// Assign handlers immediately after making the request,
@@ -69,7 +75,7 @@ jqxhr.always(function() {
});
</code></pre>
<h4>Deprecation Notice</h4>
- <p>The <code>jqXHR.success()</code>, <code>jqXHR.error()</code>, and <code>jqXHR.complete()</code> callback methods introduced in jQuery 1.5 are <strong>deprecated as of jQuery 1.8</strong>. To prepare your code for their eventual removal, use <code>jqXHR.done()</code>, <code>jqXHR.fail()</code>, and <code>jqXHR.always()</code> instead.</p>
+ <p>The <code>jqXHR.success()</code>, <code>jqXHR.error()</code>, and <code>jqXHR.complete()</code> callback methods are <strong>removed as of jQuery 3.0</strong>. You can use <code>jqXHR.done()</code>, <code>jqXHR.fail()</code>, and <code>jqXHR.always()</code> instead.</p>
</longdesc>
<note id="same-origin-policy" type="additional"/>
<note id="use-ajaxerror" type="additional" data-title="jQuery.get()"/>
@@ -110,16 +116,28 @@ $.get( "test.cgi", { name: "John", time: "2pm" } )
]]></code>
</example>
<example>
- <desc> Get the test.php page contents, which has been returned in json format (<?php echo json_encode( array( "name"=>"John","time"=>"2pm" ) ); ?>), and add it to the page.</desc>
+ <desc>Get the test.php page contents, which has been returned in json format (<?php echo json_encode( array( "name"=>"John","time"=>"2pm" ) ); ?>), and add it to the page.</desc>
<code><![CDATA[
$.get( "test.php", function( data ) {
$( "body" )
.append( "Name: " + data.name ) // John
.append( "Time: " + data.time ); // 2pm
}, "json" );
+]]></code>
+ </example>
+ <example>
+ <desc>Get another page on the same domain. Outputs to console both the data returned and the type of data returned.</desc>
+ <code><![CDATA[
+// If this was sent on https://api.jquery.com/jQuery.get/ you will
+// get the response result of https://api.jquery.com/jQuery.ajax/
+$.get( "/jQuery.ajax/", function( data ) {
+ console.log( typeof data ); // string
+ console.log( data ); // HTML content of the jQuery.ajax page
+});
]]></code>
</example>
<category slug="ajax/shorthand-methods"/>
<category slug="version/1.0"/>
<category slug="version/1.5"/>
+ <category slug="version/1.12-and-2.2"/>
</entry>
diff --git a/entries/jQuery.getJSON.xml b/entries/jQuery.getJSON.xml
index 1485a2a2c..1449293d2 100644
--- a/entries/jQuery.getJSON.xml
+++ b/entries/jQuery.getJSON.xml
@@ -6,7 +6,9 @@
<argument name="url" type="String">
<desc>A string containing the URL to which the request is sent.</desc>
</argument>
- <argument name="data" optional="true" type="PlainObject">
+ <argument name="data" optional="true">
+ <type name="PlainObject"/>
+ <type name="String"/>
<desc>A plain object or string that is sent to the server with the request.</desc>
</argument>
<argument name="success" optional="true" type="Function">
@@ -54,12 +56,12 @@ $.getJSON( "ajax/test.json", function( data ) {
<p>The <code>success</code> callback is passed the returned data, which is typically a JavaScript object or array as defined by the JSON structure and parsed using the <code><a href="/https/github.com/jQuery.parseJSON/">$.parseJSON()</a></code> method. It is also passed the text status of the response.</p>
<p><strong>As of jQuery 1.5</strong>, the <code>success</code> callback function receives a <a href="/https/github.com/jQuery.get/#jqxhr-object">"jqXHR" object</a> (in <strong>jQuery 1.4</strong>, it received the <code>XMLHttpRequest</code> object). However, since JSONP and cross-domain GET requests do not use <abbr title="XMLHTTPRequest">XHR</abbr>, in those cases the <code>jqXHR</code> and <code>textStatus</code> parameters passed to the success callback are undefined.</p>
<div class="warning">
- <p><strong>Important:</strong> As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently. Avoid frequent hand-editing of JSON data for this reason. JSON is a data-interchange format with syntax rules that are stricter than those of JavaScript's object literal notation. For example, all strings represented in JSON, whether they are properties or values, must be enclosed in double-quotes. For details on the JSON format, see <a href="http://json.org/">http://json.org/</a>.</p>
+ <p><strong>Important:</strong> As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently. Avoid frequent hand-editing of JSON data for this reason. JSON is a data-interchange format with syntax rules that are stricter than those of JavaScript's object literal notation. For example, all strings represented in JSON, whether they are properties or values, must be enclosed in double-quotes. For details on the JSON format, see <a href="https://json.org/">https://json.org/</a>.</p>
</div>
<h4 id="jsonp">JSONP</h4>
<p>If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the <code>jsonp</code> data type in <code><a href="/https/github.com/jQuery.ajax/">$.ajax()</a></code> for more details.</p>
<h4 id="jqxhr-object">The jqXHR Object</h4>
- <p><strong>As of jQuery 1.5</strong>, all of jQuery's Ajax methods return a superset of the <code>XMLHTTPRequest</code> object. This jQuery XHR object, or "jqXHR," returned by <code>$.getJSON()</code> implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see <a href="/https/github.com/category/deferred-object/">Deferred object</a> for more information). The <code>jqXHR.done()</code> (for success), <code>jqXHR.fail()</code> (for error), and <code>jqXHR.always()</code> (for completion, whether success or error) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the <a href="/https/github.com/jQuery.ajax/#jqXHR">jqXHR Object</a> section of the $.ajax() documentation.</p>
+ <p><strong>As of jQuery 1.5</strong>, all of jQuery's Ajax methods return a superset of the <code>XMLHTTPRequest</code> object. This jQuery XHR object, or "jqXHR," returned by <code>$.getJSON()</code> implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see <a href="/https/github.com/category/deferred-object/">Deferred object</a> for more information). The <code>jqXHR.done()</code> (for success), <code>jqXHR.fail()</code> (for error), and <code>jqXHR.always()</code> (for completion, whether success or error; added in jQuery 1.6) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the <a href="/https/github.com/jQuery.ajax/#jqXHR">jqXHR Object</a> section of the <code>$.ajax()</code> documentation.</p>
<p>The Promise interface in jQuery 1.5 also allows jQuery's Ajax methods, including <code>$.getJSON()</code>, to chain multiple <code>.done()</code>, <code>.always()</code>, and <code>.fail()</code> callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.</p>
<pre><code>
// Assign handlers immediately after making the request,
@@ -80,12 +82,12 @@ var jqxhr = $.getJSON( "example.json", function() {
// Perform other work here ...
// Set another completion function for the request above
-jqxhr.complete(function() {
+jqxhr.always(function() {
console.log( "second complete" );
});
</code></pre>
<h4>Deprecation Notice</h4>
- <p>The <code>jqXHR.success()</code>, <code>jqXHR.error()</code>, and <code>jqXHR.complete()</code> callback methods introduced in jQuery 1.5 are <strong>deprecated as of jQuery 1.8</strong>. To prepare your code for their eventual removal, use <code>jqXHR.done()</code>, <code>jqXHR.fail()</code>, and <code>jqXHR.always()</code> instead.</p>
+ <p>The <code>jqXHR.success()</code>, <code>jqXHR.error()</code>, and <code>jqXHR.complete()</code> callback methods are <strong>removed as of jQuery 3.0</strong>. You can use <code>jqXHR.done()</code>, <code>jqXHR.fail()</code>, and <code>jqXHR.always()</code> instead.</p>
</longdesc>
<note id="same-origin-policy" type="additional"/>
<note id="same-origin-policy-exceptions" type="additional"/>
@@ -93,7 +95,7 @@ jqxhr.complete(function() {
<desc>Loads the four most recent pictures of Mount Rainier from the Flickr JSONP API.</desc>
<code><![CDATA[
(function() {
- var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
+ var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON( flickerAPI, {
tags: "mount rainier",
tagmode: "any",
diff --git a/entries/jQuery.getScript.xml b/entries/jQuery.getScript.xml
index e36d021c9..d44d1f3a1 100644
--- a/entries/jQuery.getScript.xml
+++ b/entries/jQuery.getScript.xml
@@ -27,7 +27,7 @@ $.ajax({
<h4 id="success-callback">
Success Callback
</h4>
- <p>The callback is fired once the script has been loaded but not necessarily executed.</p>
+ <p>The callback is fired once the script has been loaded and executed.</p>
<p>Scripts are included and run by referencing the file name:</p>
<pre><code>
$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
@@ -48,14 +48,15 @@ $.getScript( "ajax/test.js" )
$( "div.log" ).text( "Triggered ajaxError handler." );
});
</code></pre>
- <p>Prior to jQuery 1.5, the global <code>.ajaxError()</code> callback event had to be used in order to handle <code>$.getScript()</code> errors:</p>
+ <p>Prior to jQuery 1.5, the global <code>ajaxError</code> callback event had to be used in order to handle <code>$.getScript()</code> errors:</p>
<pre><code>
-$( "div.log" ).ajaxError(function( e, jqxhr, settings, exception ) {
+$( "div.log" ).on( "ajaxError", function( e, jqxhr, settings, exception ) {
if ( settings.dataType == "script" ) {
$( this ).text( "Triggered ajaxError handler." );
}
-});
+} );
</code></pre>
+ <p>Prior to jQuery 3.5.0, unsuccessful HTTP responses with a script <code>Content-Type</code> were still executed.</p>
<h4 id="caching-requests">Caching Responses</h4>
<p>By default, <code>$.getScript()</code> sets the cache setting to <code>false</code>. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested. You can override this feature by setting the cache property globally using <a href="/https/github.com/jquery.ajaxsetup/"><code>$.ajaxSetup()</code></a>: </p>
<pre><code>
@@ -91,9 +92,9 @@ $.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
<example>
<desc>Load the <a href="https://github.com/jquery/jquery-color">official jQuery Color Animation plugin</a> dynamically and bind some color animations to occur once the new functionality is loaded.</desc>
<code><![CDATA[
-var url = "//code.jquery.com/color/jquery.color.js";
+var url = "https://code.jquery.com/color/jquery.color-2.1.2.js";
$.getScript( url, function() {
- $( "#go" ).click(function() {
+ $( "#go" ).on( "click", function() {
$( ".block" )
.animate({
backgroundColor: "rgb(255, 180, 180)"
@@ -125,4 +126,5 @@ $.getScript( url, function() {
<category slug="ajax/shorthand-methods"/>
<category slug="version/1.0"/>
<category slug="version/1.5"/>
+ <category slug="version/3.5"/>
</entry>
diff --git a/entries/jQuery.globalEval.xml b/entries/jQuery.globalEval.xml
index ce510fe3c..f6234efed 100644
--- a/entries/jQuery.globalEval.xml
+++ b/entries/jQuery.globalEval.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="jQuery.globalEval" return="">
+<entry type="method" name="jQuery.globalEval" return="Anything">
<title>jQuery.globalEval()</title>
<signature>
<added>1.0.4</added>
@@ -7,6 +7,31 @@
<desc>The JavaScript code to execute.</desc>
</argument>
</signature>
+ <signature>
+ <added>3.4</added>
+ <argument name="code" type="String">
+ <desc>The JavaScript code to execute.</desc>
+ </argument>
+ <argument name="options" type="PlainObject" optional="true">
+ <property name="nonce" type="string">
+ <desc>The nonce attribute passed to the executed script.</desc>
+ </property>
+ </argument>
+ </signature>
+ <signature>
+ <added>3.5</added>
+ <argument name="code" type="String">
+ <desc>The JavaScript code to execute.</desc>
+ </argument>
+ <argument name="options" type="PlainObject" optional="true">
+ <property name="nonce" type="string">
+ <desc>The nonce attribute passed to the executed script.</desc>
+ </property>
+ </argument>
+ <argument name="doc" type="Document" optional="true">
+ <desc>A document in which context the code will be evaluated.</desc>
+ </argument>
+ </signature>
<desc>Execute some JavaScript code globally.</desc>
<longdesc>
<p>This method behaves differently from using a normal JavaScript <code>eval()</code> in that it's executed within the global context (which is important for loading external scripts dynamically).</p>
@@ -15,7 +40,19 @@
<desc>Execute a script in the global context.</desc>
<code><![CDATA[
function test() {
- jQuery.globalEval( "var newVar = true;" )
+ jQuery.globalEval( "var newVar = true;" );
+}
+test();
+// newVar === true
+]]></code>
+ </example>
+ <example>
+ <desc>Execute a script with a nonce value on a site with Content Security Policy enabled.</desc>
+ <code><![CDATA[
+function test() {
+ jQuery.globalEval( "var newVar = true;", {
+ nonce: "nonce-2726c7f26c"
+ } );
}
test();
// newVar === true
diff --git a/entries/jQuery.grep.xml b/entries/jQuery.grep.xml
index 245a672dc..5195ffdd8 100644
--- a/entries/jQuery.grep.xml
+++ b/entries/jQuery.grep.xml
@@ -4,8 +4,8 @@
<desc>Finds the elements of an array which satisfy a filter function. The original array is not affected.</desc>
<signature>
<added>1.0</added>
- <argument name="array" type="Array">
- <desc>The array to search through.</desc>
+ <argument name="array" type="ArrayLikeObject">
+ <desc>The array-like object to search through.</desc>
</argument>
<argument name="function" type="Function">
<argument name="elementOfArray" type="Object" />
diff --git a/entries/jQuery.hasData.xml b/entries/jQuery.hasData.xml
index af081d414..ece74c751 100644
--- a/entries/jQuery.hasData.xml
+++ b/entries/jQuery.hasData.xml
@@ -9,7 +9,7 @@
</signature>
<desc>Determine whether an element has any jQuery data associated with it.</desc>
<longdesc>
- <p>The <code>jQuery.hasData()</code> method provides a way to determine if an element currently has any values that were set using <code><a href="/https/github.com/jQuery.data/">jQuery.data()</a></code>. If no data is associated with an element (there is no data object at all or the data object is empty), the method returns <code>false</code>; otherwise it returns <code>true</code>.</p>
+ <p>The <code>jQuery.hasData()</code> method provides a way to determine if an element currently has any values that were set using <code><a href="/https/github.com/jQuery.data/">jQuery.data()</a></code>. If there is no data object associated with an element, the method returns <code>false</code>; otherwise it returns <code>true</code>.</p>
<p>The primary advantage of <code>jQuery.hasData(element)</code> is that it does not create and associate a data object with the element if none currently exists. In contrast, <code>jQuery.data(element)</code> always returns a data object to the caller, creating one if no data object previously existed.
</p>
<p>Note that jQuery's event system uses the jQuery data API to store event handlers. Therefore, binding an event to an element using <code>.on()</code>, <code>.bind()</code>, <code>.live()</code>, <code>.delegate()</code>, or one of the shorthand event methods also associates a data object with that element.
diff --git a/entries/jQuery.holdReady.xml b/entries/jQuery.holdReady.xml
index cb795f2fe..0ba8ceb04 100644
--- a/entries/jQuery.holdReady.xml
+++ b/entries/jQuery.holdReady.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="jQuery.holdReady" return="undefined">
+<entry type="method" name="jQuery.holdReady" return="undefined" deprecated="3.2">
<title>jQuery.holdReady()</title>
<desc>Holds or releases the execution of jQuery's ready event.</desc>
<signature>
@@ -9,6 +9,16 @@
</argument>
</signature>
<longdesc>
+ <div class="warning">
+ <p>Note: This API has been deprecated in jQuery 3.2. Instead of relying on this global switch, it's better to put explicitly wait for required code. If you need to wait both for the ready state & for a custom promise, use the following pattern:</p>
+ <code><![CDATA[$.when( $.ready, customPromise )
+ .then( function() {
+ // main code
+ } )
+ .catch( function( error ) {
+ // handle errors
+ } )]]></code>
+ </div>
<p>The <code>$.holdReady()</code> method allows the caller to delay jQuery's ready event. This <em>advanced feature</em> would typically be used by dynamic script loaders that want to load additional JavaScript such as jQuery plugins before allowing the ready event to occur, even though the DOM may be ready. This method must be called early in the document, such as in the <code><head></code> immediately after the jQuery script tag. Calling this method after the ready event has already fired will have no effect. </p>
<p>To delay the ready event, first call <code>$.holdReady( true )</code>. When the ready event should be released to execute, call <code>$.holdReady( false )</code>. Note that multiple holds can be put on the ready event, one for each <code>$.holdReady( true )</code> call. The ready event will not actually fire until all holds have been released with a corresponding number of <code>$.holdReady( false )</code> calls <em>and</em> the normal document ready conditions are met. (See <a href="/https/github.com/ready/"><code>ready</code></a> for more information.)</p>
</longdesc>
@@ -22,5 +32,8 @@ $.getScript( "myplugin.js", function() {
]]></code>
</example>
<category slug="core"/>
+ <category slug="properties/global-jquery-object-properties"/>
+ <category slug="events/document-loading"/>
<category slug="version/1.6"/>
+ <category slug="deprecated/deprecated-3.2"/>
</entry>
diff --git a/entries/jQuery.htmlPrefilter.xml b/entries/jQuery.htmlPrefilter.xml
new file mode 100644
index 000000000..753819039
--- /dev/null
+++ b/entries/jQuery.htmlPrefilter.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<entry type="method" name="jQuery.htmlPrefilter" return="String">
+ <title>jQuery.htmlPrefilter()</title>
+ <desc>Modify and filter HTML strings passed through <a href="/https/github.com/category/manipulation/">jQuery manipulation methods</a>.</desc>
+ <signature>
+ <added>1.12-and-2.2</added>
+ <argument name="html" type="String">
+ <desc>The HTML string on which to operate.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>This method rarely needs to be called directly. Instead, use it as an entry point to modify existing <a href="/https/github.com/category/manipulation/">jQuery manipulation methods</a>. jQuery calls this method on input HTML before processing it further: it accepts an HTML string & should return a HTML string as well.</p>
+ <p>This function can also be overwritten in order to bypass certain edge case issues. The default <code>htmlPrefilter</code> function in jQuery leaves input unmodified since 3.5.0. Older versions would greedily ensure that all tags were XHTML-compliant. This included anything that looked like an HTML tag, but was actually within a string (e.g. <code><a title="<div />"><></code>), leading to potential security issues. For more information, see the <a href="https://jquery.com/upgrade-guide/3.5/">jQuery Core 3.5 Upgrade guide</a>.</p>
+ </longdesc>
+ <category slug="manipulation"/>
+ <category slug="version/3.5"/>
+</entry>
diff --git a/entries/jQuery.isArray.xml b/entries/jQuery.isArray.xml
index 6f040c4ec..9891126ff 100644
--- a/entries/jQuery.isArray.xml
+++ b/entries/jQuery.isArray.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="jQuery.isArray" return="boolean">
+<entry type="method" name="jQuery.isArray" return="boolean" deprecated="3.2" removed="4.0">
<title>jQuery.isArray()</title>
<signature>
<added>1.3</added>
@@ -9,6 +9,9 @@
</signature>
<desc>Determine whether the argument is an array.</desc>
<longdesc>
+ <div class="warning">
+ <p>Note: This API has been deprecated in jQuery 3.2; please use the native <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray"><code>Array.isArray</code></a> method instead.</p>
+ </div>
<p><code>$.isArray()</code> returns a Boolean indicating whether the object is a JavaScript array (not an array-like object, such as a jQuery object).</p>
</longdesc>
<example>
@@ -22,4 +25,5 @@ Is [] an Array? <b></b>
</example>
<category slug="utilities"/>
<category slug="version/1.3"/>
+ <category slug="deprecated/deprecated-3.2"/>
</entry>
diff --git a/entries/jQuery.isFunction.xml b/entries/jQuery.isFunction.xml
index 2ceed224f..5160f0a70 100644
--- a/entries/jQuery.isFunction.xml
+++ b/entries/jQuery.isFunction.xml
@@ -1,14 +1,17 @@
<?xml version="1.0"?>
-<entry type="method" name="jQuery.isFunction" return="boolean">
+<entry type="method" name="jQuery.isFunction" return="boolean" deprecated="3.3" removed="4.0">
<title>jQuery.isFunction()</title>
<signature>
<added>1.2</added>
- <argument name="obj" type="PlainObject">
- <desc>Object to test whether or not it is a function.</desc>
+ <argument name="value" type="Anything">
+ <desc>The value to be tested.</desc>
</argument>
</signature>
- <desc>Determine if the argument passed is a Javascript function object. </desc>
+ <desc>Determines if its argument is callable as a function.</desc>
<longdesc>
+ <div class="warning">
+ <p>As of jQuery 3.3, <code>jQuery.isFunction()</code> has been deprecated. In most cases, its use can be replaced by <code>typeof x === "function"</code>.</p>
+ </div>
<p><strong>Note:</strong> As of jQuery 1.3, functions provided by the browser like <code>alert()</code> and DOM element methods like <code>getAttribute()</code> are not guaranteed to be detected as functions in browsers such as Internet Explorer.</p>
</longdesc>
<example>
@@ -57,4 +60,5 @@ true
</example>
<category slug="utilities"/>
<category slug="version/1.2"/>
+ <category slug="deprecated/deprecated-3.3"/>
</entry>
diff --git a/entries/jQuery.isNumeric.xml b/entries/jQuery.isNumeric.xml
index 80edc02dd..c4fe4a72d 100644
--- a/entries/jQuery.isNumeric.xml
+++ b/entries/jQuery.isNumeric.xml
@@ -1,36 +1,46 @@
<?xml version="1.0"?>
-<entry type="method" name="jQuery.isNumeric" return="Boolean">
+<entry type="method" name="jQuery.isNumeric" return="Boolean" deprecated="3.3" removed="4.0">
<title>jQuery.isNumeric()</title>
- <desc>Determines whether its argument is a number.</desc>
+ <desc>Determines whether its argument represents a JavaScript number.</desc>
<signature>
<added>1.7</added>
- <argument name="value" type="PlainObject">
+ <argument name="value" type="Anything">
<desc>The value to be tested.</desc>
</argument>
</signature>
<longdesc>
+ <div class="warning">
+ <p>Note: This API has been deprecated in jQuery 3.3.</p>
+ </div>
<p>The <code>$.isNumeric()</code> method checks whether its argument represents a numeric value. If so, it returns <code>true</code>. Otherwise it returns <code>false</code>. The argument can be of any type.</p>
+ <p>As of jQuery 3.0 <code>$.isNumeric()</code> returns <code>true</code> only if the argument is of type <a href="/Types/#Number"><code>number</code></a>, or if it's of type <code>string</code> and it can be coerced into finite numbers. In all other cases, it returns <code>false</code>.</p>
</longdesc>
<example>
<desc>Sample return values of $.isNumeric with various inputs.</desc>
<code><![CDATA[
-$.isNumeric( "-10" ); // true
-$.isNumeric( 16 ); // true
-$.isNumeric( 0xFF ); // true
-$.isNumeric( "0xFF" ); // true
-$.isNumeric( "8e5" ); // true (exponential notation string)
-$.isNumeric( 3.1415 ); // true
-$.isNumeric( +10 ); // true
-$.isNumeric( 0144 ); // true (octal integer literal)
-$.isNumeric( "" ); // false
-$.isNumeric({}); // false (empty object)
-$.isNumeric( NaN ); // false
-$.isNumeric( null ); // false
-$.isNumeric( true ); // false
-$.isNumeric( Infinity ); // false
-$.isNumeric( undefined ); // false
+// true (numeric)
+$.isNumeric( "-10" )
+$.isNumeric( "0" )
+$.isNumeric( 0xFF )
+$.isNumeric( "0xFF" )
+$.isNumeric( "8e5" )
+$.isNumeric( "3.1415" )
+$.isNumeric( +10 )
+$.isNumeric( 0144 )
+
+// false (non-numeric)
+$.isNumeric( "-0x42" )
+$.isNumeric( "7.2acdgs" )
+$.isNumeric( "" )
+$.isNumeric( {} )
+$.isNumeric( NaN )
+$.isNumeric( null )
+$.isNumeric( true )
+$.isNumeric( Infinity )
+$.isNumeric( undefined )
]]></code>
</example>
<category slug="utilities"/>
<category slug="version/1.7"/>
+ <category slug="deprecated/deprecated-3.3"/>
</entry>
diff --git a/entries/jQuery.isWindow.xml b/entries/jQuery.isWindow.xml
index 154535995..76a58f176 100644
--- a/entries/jQuery.isWindow.xml
+++ b/entries/jQuery.isWindow.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="jQuery.isWindow" return="boolean">
+<entry type="method" name="jQuery.isWindow" return="boolean" deprecated="3.3" removed="4.0">
<title>jQuery.isWindow()</title>
<signature>
<added>1.4.3</added>
@@ -9,6 +9,12 @@
</signature>
<desc>Determine whether the argument is a window.</desc>
<longdesc>
+ <div class="warning">
+ <p>Note: This API has been deprecated in jQuery 3.3; if you need this function, reimplement it by yourself:</p>
+ <code><![CDATA[function isWindow( obj ) {
+ return obj != null && obj === obj.window;
+}]]></code>
+ </div>
<p>This is used in a number of places in jQuery to determine if we're operating against a browser window (such as the current window or an iframe).</p>
</longdesc>
<example>
@@ -22,4 +28,5 @@ Is 'window' a window? <b></b>
</example>
<category slug="utilities"/>
<category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
</entry>
diff --git a/entries/jQuery.map.xml b/entries/jQuery.map.xml
index 3c499e6c8..2016df876 100644
--- a/entries/jQuery.map.xml
+++ b/entries/jQuery.map.xml
@@ -3,8 +3,8 @@
<title>jQuery.map()</title>
<signature>
<added>1.0</added>
- <argument name="array" type="Array">
- <desc>The Array to translate.</desc>
+ <argument name="array" type="ArrayLikeObject">
+ <desc>The Array or an Array-like object to translate.</desc>
</argument>
<argument name="callback" type="Function">
<argument name="elementOfArray" type="Object" />
@@ -16,7 +16,7 @@
<signature>
<added>1.6</added>
<argument name="object" type="Object">
- <desc>The Object to translate.</desc>
+ <desc>The non-Array-like Object to translate.</desc>
</argument>
<argument name="callback" type="Function">
<argument name="propertyOfObject" type="Object" />
@@ -28,16 +28,13 @@
<desc>Translate all items in an array or object to new array of items.</desc>
<longdesc>
<p>If you wish to process a jQuery object — for example, <code>$('div').map( callback );</code> — use <a href="/https/github.com/map/">.map()</a> instead. </p>
- <p>The <code>$.map()</code> method applies a function to each item in an array or object and maps the results into a new array. <strong>Prior to jQuery 1.6</strong>, <code>$.map()</code> supports traversing <em>arrays only</em>. <strong>As of jQuery 1.6</strong> it also traverses objects.</p>
- <p>Array-like objects — those with a <code>.length</code> property <em>and</em> a value on the <code>.length - 1</code> index — must be converted to actual arrays before being passed to <code>$.map()</code>. The jQuery library provides <a href="/https/github.com/jQuery.makeArray/">$.makeArray()</a> for such conversions.</p>
+ <p>The <code>$.map()</code> method applies a function to each item in an array or object and maps the results into a new array. <strong>Prior to jQuery 1.6</strong>, <code>$.map()</code> supports traversing <em>arrays and array-like objects only</em>. <strong>As of jQuery 1.6</strong> it also traverses objects.</p>
+ <p>Array-like objects — those with a <code>.length</code> property <em>and</em> a value on the <code>.length - 1</code> index — may be passed to <code>$.map()</code>.</p>
<pre><code>
-// The following object masquerades as an array.
+// The following object is array-like.
var fakeArray = { "length": 2, 0: "Addy", 1: "Subtracty" };
-// Therefore, convert it to a real array
-var realArray = $.makeArray( fakeArray )
-
-// Now it can be used reliably with $.map()
+// It can be used reliably with $.map()
$.map( realArray, function( val, i ) {
// Do something
});
diff --git a/entries/jQuery.merge.xml b/entries/jQuery.merge.xml
index ef43c7701..b122635e9 100644
--- a/entries/jQuery.merge.xml
+++ b/entries/jQuery.merge.xml
@@ -4,15 +4,15 @@
<desc>Merge the contents of two arrays together into the first array. </desc>
<signature>
<added>1.0</added>
- <argument name="first" type="Array">
- <desc>The first array to merge, the elements of second added.</desc>
+ <argument name="first" type="ArrayLikeObject">
+ <desc>The first array-like object to merge, the elements of second added.</desc>
</argument>
- <argument name="second" type="Array">
- <desc>The second array to merge into the first, unaltered.</desc>
+ <argument name="second" type="ArrayLikeObject">
+ <desc>The second array-like object to merge into the first, unaltered.</desc>
</argument>
</signature>
<longdesc>
- <p>The <code>$.merge()</code> operation forms an array that contains all elements from the two arrays. The orders of items in the arrays are preserved, with items from the second array appended. The <code>$.merge()</code> function is destructive. It alters the first parameter to add the items from the second. </p>
+ <p>The <code>$.merge()</code> operation forms an array that contains all elements from the two arrays. The orders of items in the arrays are preserved, with items from the second array appended. The <code>$.merge()</code> function is destructive. It alters the <code>length</code> and numeric index properties of the first object to include items from the second.</p>
<p>If you need the original first array, make a copy of it before calling <code>$.merge()</code>. Fortunately, <code>$.merge()</code> itself can be used for this duplication:</p>
<pre><code>
var newArray = $.merge([], oldArray);
diff --git a/entries/jQuery.noConflict.xml b/entries/jQuery.noConflict.xml
index 9808055d3..b72d7de57 100644
--- a/entries/jQuery.noConflict.xml
+++ b/entries/jQuery.noConflict.xml
@@ -92,7 +92,7 @@ jQuery( "div > p" ).hide();
<div id="log">
<h3>Before $.noConflict(true)</h3>
</div>
-<script src="//code.jquery.com/jquery-1.6.2.js"></script>
+<script src="https://code.jquery.com/jquery-1.6.2.js"></script>
]]></html>
<code><![CDATA[
var $log = $( "#log" );
diff --git a/entries/jQuery.now.xml b/entries/jQuery.now.xml
index 6c41af36c..00992aba8 100644
--- a/entries/jQuery.now.xml
+++ b/entries/jQuery.now.xml
@@ -1,13 +1,17 @@
<?xml version="1.0"?>
-<entry type="method" name="jQuery.now" return="Number">
+<entry type="method" name="jQuery.now" return="Number" deprecated="3.3" removed="4.0">
<title>jQuery.now()</title>
<signature>
<added>1.4.3</added>
</signature>
<desc>Return a number representing the current time.</desc>
<longdesc>
- <p>The <code>$.now()</code> method is a shorthand for the number returned by the expression <code>(new Date).getTime()</code>.</p>
+ <div class="warning">
+ <p>Note: This API has been deprecated in jQuery 3.3; please use the native <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now()</code></a> method instead.</p>
+ </div>
+ <p>The <code>$.now()</code> method is an alias for <code>Date.now()</code>.</p>
</longdesc>
<category slug="utilities"/>
<category slug="version/1.4.3"/>
-</entry>
\ No newline at end of file
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/jQuery.param.xml b/entries/jQuery.param.xml
index 56d88fc69..9a80fc2b5 100644
--- a/entries/jQuery.param.xml
+++ b/entries/jQuery.param.xml
@@ -6,7 +6,8 @@
<argument name="obj">
<type name="Array"/>
<type name="PlainObject"/>
- <desc>An array or object to serialize.</desc>
+ <type name="jQuery"/>
+ <desc>An array, a plain object, or a jQuery object to serialize.</desc>
</argument>
</signature>
<signature>
@@ -14,18 +15,19 @@
<argument name="obj">
<type name="Array"/>
<type name="PlainObject"/>
- <desc>An array or object to serialize.</desc>
+ <type name="jQuery"/>
+ <desc>An array, a plain object, or a jQuery object to serialize.</desc>
</argument>
<argument name="traditional" type="Boolean">
<desc>A Boolean indicating whether to perform a traditional "shallow" serialization.</desc>
</argument>
</signature>
- <desc>Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request. </desc>
+ <desc>Create a serialized representation of an array, a plain object, or a jQuery object suitable for use in a URL query string or Ajax request. In case a jQuery object is passed, it should contain input elements with name/value properties.</desc>
<longdesc>
<p>This function is used internally to convert form element values into a serialized string representation (See <a href="/https/github.com/serialize/">.serialize()</a> for more information).</p>
<p>As of jQuery 1.3, the return value of a function is used instead of the function as a String.</p>
<p>As of jQuery 1.4, the <code>$.param()</code> method serializes deep objects recursively to accommodate modern scripting languages and frameworks such as PHP and Ruby on Rails. You can disable this functionality globally by setting <code>jQuery.ajaxSettings.traditional = true;</code>.</p>
- <p>As of jQuery 1.8, the <code>$.param()</code> method no longer uses <code>jQuery.ajaxSettings.traditional</code> as its default setting and will default to <code>false</code>. For best compatibility across versions, call <code>$.param()</code> with an explicit value for the second argument and do not use defaults.</p>
+ <p>As of jQuery 3.0, the <code>$.param()</code> method no longer uses <code>jQuery.ajaxSettings.traditional</code> as its default setting and will default to <code>false</code>. For best compatibility across versions, call <code>$.param()</code> with an explicit value for the second argument and do not use defaults.</p>
<p>If the object passed is in an Array, it must be an array of objects in the format returned by <a href="/https/github.com/serializeArray/">.serializeArray()</a></p>
<pre><code>
[
diff --git a/entries/jQuery.parseHTML.xml b/entries/jQuery.parseHTML.xml
index b0d245e61..5ff74ce77 100644
--- a/entries/jQuery.parseHTML.xml
+++ b/entries/jQuery.parseHTML.xml
@@ -15,13 +15,14 @@
</argument>
</signature>
<longdesc>
- <p><code>jQuery.parseHTML</code> uses a native DOM element creation function to convert the string to a set of DOM elements, which can then be inserted into the document.</p>
+ <p><code>jQuery.parseHTML</code> uses native methods to convert the string to a set of DOM nodes, which can then be inserted into the document. These methods do render all trailing or leading text (even if that's just whitespace). To prevent trailing/leading whitespace from being converted to text nodes you can pass the HTML string through <a href="/https/github.com/jQuery.trim/"><code>jQuery.trim</code></a>.</p>
<p>By default, the <code>context</code> is the current <code>document</code> if not specified or given as <code>null</code> or <code>undefined</code>. If the HTML was to be used in another document such as an iframe, that frame's document could be used.</p>
- <h2>Security Considerations</h2>
- <p>Most jQuery APIs that accept HTML strings will run scripts that are included in the HTML. <code>jQuery.parseHTML</code> does not run script in the parsed HTML unless <code>keepScripts</code> is explicitly <code>true</code>. However, it is still possible in most environments to execute script indirectly, for example via the <code><img onerror></code> attribute. The caller should be aware of this and guard against it by cleaning or escaping any untrusted inputs from sources such as the URL or cookies. For future compatibility, callers should not depend on the ability to run <em>any</em> script content when <code>keepScripts</code> is unspecified or <code>false</code>.</p>
+ <p>As of 3.0 the default behavior is changed. If the <code>context</code> is not specified or given as <code>null</code> or <code>undefined</code>, a new <code>document</code> is used. This can potentially improve security because inline events will not execute when the HTML is parsed. Once the parsed HTML is injected into a document it does execute, but this gives tools a chance to traverse the created DOM and remove anything deemed unsafe. This improvement does not apply to internal uses of <code>jQuery.parseHTML</code> as they usually pass in the current <code>document</code>. Therefore, a statement like <code>$( "#log" ).append( $( htmlString ) )</code> is still subject to the injection of malicious code.</p>
+ <h2>Security Considerations</h2>
+ <p>Most jQuery APIs that accept HTML strings will run scripts that are included in the HTML. <code>jQuery.parseHTML</code> does not run scripts in the parsed HTML unless <code>keepScripts</code> is explicitly <code>true</code>. However, it is still possible in most environments to execute scripts indirectly, for example via the <code><img onerror></code> attribute. The caller should be aware of this and guard against it by cleaning or escaping any untrusted inputs from sources such as the URL or cookies. For future compatibility, callers should not depend on the ability to run <em>any</em> script content when <code>keepScripts</code> is unspecified or <code>false</code>.</p>
</longdesc>
<example>
- <desc>Create an array of Dom nodes using an HTML string and insert it into a div.</desc>
+ <desc>Create an array of DOM nodes using an HTML string and insert it into a div.</desc>
<html><![CDATA[
<div id="log">
<h3>Content:</h3>
diff --git a/entries/jQuery.parseJSON.xml b/entries/jQuery.parseJSON.xml
index bc9dcc784..2023ebc83 100644
--- a/entries/jQuery.parseJSON.xml
+++ b/entries/jQuery.parseJSON.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="jQuery.parseJSON">
+<entry type="method" name="jQuery.parseJSON" deprecated="3.0" removed="4.0">
<return type="String"/>
<return type="Number"/>
<return type="Object"/>
@@ -14,6 +14,9 @@
</signature>
<desc>Takes a well-formed JSON string and returns the resulting JavaScript value.</desc>
<longdesc>
+ <div class="warning">
+ <p>As of jQuery 3.0, <code>$.parseJSON</code> is deprecated. To parse JSON strings use the native <code>JSON.parse</code> method instead.</p>
+ </div>
<p>Passing in a malformed JSON string results in a JavaScript exception being thrown. For example, the following are all invalid JSON strings:</p>
<ul>
<li><code>"{test: 1}"</code> (test does not have double quotes around it).</li>
@@ -24,7 +27,7 @@
<li><code>"NaN"</code> (<code>NaN</code> cannot be represented in a JSON string; direct representation of <code>Infinity</code> is also not permitted).</li>
</ul>
<p>The JSON standard does not permit "control characters" such as a tab or newline. An example like <code>$.parseJSON( '{ "testing":"1\t2\n3" }' )</code> will throw an error in most implementations because the JavaScript parser converts the string's tab and newline escapes into literal tab and newline; doubling the backslashes like <code>"1\\t2\\n3"</code> yields expected results. This problem is often seen when injecting JSON into a JavaScript file from a server-side language such as PHP.</p>
- <p>Where the browser provides a native implementation of <code>JSON.parse</code>, jQuery uses it to parse the string. For details on the JSON format, see <a href="http://json.org/">http://json.org/</a>.</p>
+ <p>Where the browser provides a native implementation of <code>JSON.parse</code>, jQuery uses it to parse the string. For details on the JSON format, see <a href="https://json.org/">https://json.org/</a>.</p>
<p>Prior to jQuery 1.9, <code>$.parseJSON</code> returned <code>null</code> instead of throwing an error if it was passed an empty string, <code>null</code>, or <code>undefined</code>, even though those are not valid JSON.</p>
</longdesc>
<example>
@@ -36,4 +39,5 @@ alert( obj.name === "John" );
</example>
<category slug="utilities"/>
<category slug="version/1.4.1"/>
+ <category slug="deprecated/deprecated-3.0"/>
</entry>
diff --git a/entries/jQuery.post.xml b/entries/jQuery.post.xml
index c066cbf44..e5411bed9 100644
--- a/entries/jQuery.post.xml
+++ b/entries/jQuery.post.xml
@@ -12,16 +12,22 @@
<desc>A plain object or string that is sent to the server with the request.</desc>
</argument>
<argument name="success" optional="true" type="Function">
- <argument name="data" type="Object" />
+ <argument name="data" type="PlainObject" />
<argument name="textStatus" type="String"/>
- <argument name="jqXHR" type="jqXHR"/>
+ <argument name="jqXHR" type="jqXHR"/>
<desc>A callback function that is executed if the request succeeds. Required if <code>dataType</code> is provided, but can be <code>null</code> in that case.</desc>
</argument>
<argument name="dataType" optional="true" type="String">
<desc>The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).</desc>
</argument>
</signature>
- <desc>Load data from the server using a HTTP POST request.</desc>
+ <signature>
+ <added>1.12-and-2.2</added>
+ <argument name="settings" type="PlainObject" optional="false">
+ <desc>A set of key/value pairs that configure the Ajax request. All properties except for <code>url</code> are optional. A default can be set for any option with <a href="/https/github.com/jQuery.ajaxSetup/">$.ajaxSetup()</a>. See <a href="/https/github.com/jQuery.ajax/#jQuery-ajax-settings">jQuery.ajax( settings )</a> for a complete list of all settings. Type will automatically be set to <code>POST</code>.</desc>
+ </argument>
+ </signature>
+ <desc>Send data to the server using a HTTP POST request.</desc>
<longdesc>
<p>This is a shorthand Ajax function, which is equivalent to:</p>
<pre><code>
@@ -44,7 +50,7 @@ $.post( "ajax/test.html", function( data ) {
<p>This example fetches the requested HTML snippet and inserts it on the page.</p>
<p>Pages fetched with <code>POST</code> are never cached, so the <code>cache</code> and <code>ifModified</code> options in <code><a href="/https/github.com/jQuery.ajaxSetup/">jQuery.ajaxSetup()</a></code> have no effect on these requests.</p>
<h4 id="jqxhr-object">The jqXHR Object</h4>
- <p><strong>As of jQuery 1.5</strong>, all of jQuery's Ajax methods return a superset of the <code>XMLHTTPRequest</code> object. This jQuery XHR object, or "jqXHR," returned by <code>$.get()</code> implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see <a href="/https/github.com/category/deferred-object/">Deferred object</a> for more information). The <code>jqXHR.done()</code> (for success), <code>jqXHR.fail()</code> (for error), and <code>jqXHR.always()</code> (for completion, whether success or error) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the <a href="/https/github.com/jQuery.ajax/#jqXHR">jqXHR Object</a> section of the $.ajax() documentation.</p>
+ <p><strong>As of jQuery 1.5</strong>, all of jQuery's Ajax methods return a superset of the <code>XMLHTTPRequest</code> object. This jQuery XHR object, or "jqXHR," returned by <code>$.post()</code> implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see <a href="/https/github.com/category/deferred-object/">Deferred object</a> for more information). The <code>jqXHR.done()</code> (for success), <code>jqXHR.fail()</code> (for error), and <code>jqXHR.always()</code> (for completion, whether success or error; added in jQuery 1.6) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the <a href="/https/github.com/jQuery.ajax/#jqXHR">jqXHR Object</a> section of the <code>$.ajax()</code> documentation.</p>
<p>The Promise interface also allows jQuery's Ajax methods, including <code>$.get()</code>, to chain multiple <code>.done()</code>, <code>.fail()</code>, and <code>.always()</code> callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.</p>
<pre><code>
// Assign handlers immediately after making the request,
@@ -60,7 +66,7 @@ var jqxhr = $.post( "example.php", function() {
})
.always(function() {
alert( "finished" );
-});
+ });
// Perform other work here ...
@@ -71,7 +77,7 @@ jqxhr.always(function() {
</code></pre>
<h4>Deprecation Notice</h4>
- <p>The <code>jqXHR.success()</code>, <code>jqXHR.error()</code>, and <code>jqXHR.complete()</code> callback methods introduced in jQuery 1.5 are <strong>deprecated as of jQuery 1.8</strong>. To prepare your code for their eventual removal, use <code>jqXHR.done()</code>, <code>jqXHR.fail()</code>, and <code>jqXHR.always()</code> instead.</p>
+ <p>The <code>jqXHR.success()</code>, <code>jqXHR.error()</code>, and <code>jqXHR.complete()</code> callback methods are <strong>removed as of jQuery 3.0</strong>. You can use <code>jqXHR.done()</code>, <code>jqXHR.fail()</code>, and <code>jqXHR.always()</code> instead.</p>
</longdesc>
<note id="same-origin-policy" type="additional"/>
<note id="use-ajaxerror" type="additional" data-title="jQuery.post()"/>
@@ -94,7 +100,7 @@ $.post( "test.php", { 'choices[]': [ "Jon", "Susan" ] } );
]]></code>
</example>
<example>
- <desc>Send form data using ajax requests</desc>
+ <desc>Send form data using Ajax requests</desc>
<code><![CDATA[
$.post( "test.php", $( "#testform" ).serialize() );
]]></code>
@@ -126,10 +132,10 @@ $.post( "test.php", { func: "getNameAndTime" }, function( data ) {
]]></code>
</example>
<example>
- <desc>Post a form using ajax and put results in a div</desc>
+ <desc>Post a form using Ajax and put results in a div</desc>
<code><![CDATA[
// Attach a submit handler to the form
-$( "#searchForm" ).submit(function( event ) {
+$( "#searchForm" ).on( "submit", function( event ) {
// Stop form from submitting normally
event.preventDefault();
@@ -146,8 +152,8 @@ $( "#searchForm" ).submit(function( event ) {
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
- });
-});
+ } );
+} );
]]></code>
<html><![CDATA[
<form action="/" id="searchForm">
@@ -161,4 +167,5 @@ $( "#searchForm" ).submit(function( event ) {
<category slug="ajax/shorthand-methods"/>
<category slug="version/1.0"/>
<category slug="version/1.5"/>
+ <category slug="version/1.12-and-2.2"/>
</entry>
diff --git a/entries/jQuery.proxy.xml b/entries/jQuery.proxy.xml
index e7c5f0ff8..d00748b93 100644
--- a/entries/jQuery.proxy.xml
+++ b/entries/jQuery.proxy.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="jQuery.proxy" return="Function">
+<entry type="method" name="jQuery.proxy" return="Function" deprecated="3.3">
<title>jQuery.proxy()</title>
<signature>
<added>1.4</added>
@@ -46,6 +46,9 @@
<desc>Takes a function and returns a new one that will always have a particular context.</desc>
<longdesc>
+ <div class="warning">
+ <p>Note: This API has been deprecated in jQuery 3.3; please use the native <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind"><code>Function.prototype.bind</code></a> method instead.</p>
+ </div>
<p>This method is most useful for attaching event handlers to an element where the context is pointing back to a different object. Additionally, jQuery makes sure that even if you bind the function returned from <code>jQuery.proxy()</code> it will still unbind the correct function if passed the original.</p>
<p>Be aware, however, that jQuery's event binding subsystem assigns a unique id to each event handling function in order to track it when it is used to specify the function to be unbound. The function represented by <code>jQuery.proxy()</code> is seen as a single function by the event subsystem, even when it is used to bind different contexts. To avoid unbinding the wrong handler, use a unique event namespace for binding and unbinding (e.g., <code>"click.myproxy1"</code>) rather than specifying the proxied function during unbinding.</p>
<p><strong>As of jQuery 1.6</strong>, any number of additional arguments may be supplied to <code>$.proxy()</code>, and they will be passed to the function whose context will be changed.</p>
@@ -170,4 +173,5 @@ $( "#test" )
<category slug="utilities"/>
<category slug="version/1.4"/>
<category slug="version/1.6"/>
+ <category slug="deprecated/deprecated-3.3"/>
</entry>
diff --git a/entries/jQuery.queue.xml b/entries/jQuery.queue.xml
index 3921e0206..16fa17531 100644
--- a/entries/jQuery.queue.xml
+++ b/entries/jQuery.queue.xml
@@ -19,7 +19,7 @@
<example>
<desc>Show the length of the queue.</desc>
<code><![CDATA[
-$( "#show" ).click(function() {
+$( "#show" ).on( "click", function() {
var n = jQuery.queue( $( "div" )[ 0 ], "fx" );
$( "span" ).text( "Queue length is: " + n.length );
});
@@ -70,7 +70,7 @@ runIt();
<category slug="utilities"/>
<category slug="version/1.3"/>
</entry>
- <entry type="method" name="jQuery.queue" return="jQuery">
+ <entry type="method" name="jQuery.queue" return="Array">
<signature>
<added>1.3</added>
<argument name="element" type="Element">
@@ -105,21 +105,21 @@ runIt();
<example>
<desc>Queue a custom function.</desc>
<code><![CDATA[
-$( document.body ).click(function() {
+$( document.body ).on( "click", function() {
var divs = $( "div" )
.show( "slow" )
.animate({ left: "+=200" }, 2000 );
jQuery.queue( divs[ 0 ], "fx", function() {
$( this ).addClass( "newcolor" );
jQuery.dequeue( this );
- });
+ } );
divs.animate({ left: "-=200" }, 500 );
jQuery.queue( divs[ 0 ], "fx", function() {
$( this ).removeClass( "newcolor" );
jQuery.dequeue( this );
- });
+ } );
divs.slideUp();
-});
+} );
]]></code>
<css><![CDATA[
div {
@@ -144,7 +144,7 @@ Click here...
<example>
<desc>Set a queue array to delete the queue.</desc>
<code><![CDATA[
-$( "#start" ).click(function() {
+$( "#start" ).on( "click", function() {
var divs = $( "div" )
.show( "slow" )
.animate({ left: "+=200" }, 5000 );
@@ -159,7 +159,7 @@ $( "#start" ).click(function() {
});
divs.slideUp();
});
-$( "#stop" ).click(function() {
+$( "#stop" ).on( "click", function() {
jQuery.queue( $( "div" )[ 0 ], "fx", [] );
$( "div" ).stop();
});
diff --git a/entries/jQuery.ready.xml b/entries/jQuery.ready.xml
new file mode 100644
index 000000000..cc1a98f16
--- /dev/null
+++ b/entries/jQuery.ready.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="property" name="jQuery.ready" return="Thenable">
+ <title>jQuery.ready</title>
+ <desc>A Promise-like object (or "thenable") that resolves when the document is ready.</desc>
+ <signature>
+ <added>1.8</added>
+ </signature>
+ <longdesc>
+ <p>As of jQuery 3.0, use of this object is supported via <code><a href="/https/github.com/jQuery.when/">jQuery.when</a></code> or the native <code>Promise.resolve()</code>. Code should not make assumptions about whether this object is a <code>jQuery.Deferred</code>, native Promise, or some other type of promise object.</p>
+ <p>See also <code><a href="/https/github.com/ready/">ready()</a></code>, which makes use of this.</p>
+ </longdesc>
+ <example>
+ <desc>Listen for document ready using <code><a href="/https/github.com/jQuery.when/">jQuery.when</a></code>.</desc>
+ <code><![CDATA[
+$.when( $.ready ).then(function() {
+ // Document is ready.
+});
+]]></code>
+ </example>
+ <example>
+ <desc>Typical usage involving another promise, using <code><a href="/https/github.com/jQuery.when/">jQuery.when</a></code>.</desc>
+ <code><![CDATA[
+$.when(
+ $.getJSON( "ajax/test.json" ),
+ $.ready
+).done(function( data ) {
+ // Document is ready.
+ // Value of test.json is passed as `data`.
+});
+]]></code>
+ </example>
+ <category slug="core"/>
+ <category slug="properties/global-jquery-object-properties"/>
+ <category slug="events/document-loading"/>
+ <category slug="version/1.8"/>
+</entry>
diff --git a/entries/jQuery.readyException.xml b/entries/jQuery.readyException.xml
new file mode 100644
index 000000000..2c534ea9f
--- /dev/null
+++ b/entries/jQuery.readyException.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<entry type="method" name="jQuery.readyException" return="Selector">
+ <title>jQuery.readyException()</title>
+ <desc>Handles errors thrown synchronously in functions wrapped in <code>jQuery()</code>.</desc>
+ <signature>
+ <added>3.1</added>
+ <argument name="error" type="Error">
+ <desc>An error thrown in the function wrapped in <code>jQuery()</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>This method is fired when an error is thrown synchronously in a function wrapped in <code>jQuery()</code> or <code>jQuery( document ).ready()</code>, or equivalent. By default it re-throws the error in a timeout so that it's logged in the console and passed to <code>window.onerror</code> instead of being swallowed. Overwrite this method if you want to handle such errors differently.</p>
+ </longdesc>
+ <example>
+ <desc>Pass the received error to <code>console.error</code>.</desc>
+ <code><![CDATA[
+jQuery.readyException = function( error ) {
+ console.error( error );
+};
+]]></code>
+ </example>
+ <category slug="core"/>
+ <category slug="version/3.1"/>
+</entry>
diff --git a/entries/jQuery.removeData.xml b/entries/jQuery.removeData.xml
index 8a85933bf..6a92a25f4 100644
--- a/entries/jQuery.removeData.xml
+++ b/entries/jQuery.removeData.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="jQuery.removeData" return="jQuery">
+<entry type="method" name="jQuery.removeData" return="undefined">
<title>jQuery.removeData()</title>
<signature>
<added>1.2.3</added>
@@ -19,13 +19,13 @@
<desc>Set a data store for 2 names then remove one of them.</desc>
<code><![CDATA[
var div = $( "div" )[ 0 ];
-$( "span:eq(0)" ).text( "" + $( "div" ).data( "test1" ) );
+$( "span" ).eq( 0 ).text( "" + $( "div" ).data( "test1" ) );
jQuery.data( div, "test1", "VALUE-1" );
jQuery.data( div, "test2", "VALUE-2" );
-$( "span:eq(1)" ).text( "" + jQuery.data( div, "test1" ) );
+$( "span" ).eq( 1 ).text( "" + jQuery.data( div, "test1" ) );
jQuery.removeData( div, "test1" );
-$( "span:eq(2)" ).text( "" + jQuery.data( div, "test1" ) );
-$( "span:eq(3)" ).text( "" + jQuery.data( div, "test2" ) );
+$( "span" ).eq( 2 ).text( "" + jQuery.data( div, "test1" ) );
+$( "span" ).eq( 3 ).text( "" + jQuery.data( div, "test2" ) );
]]></code>
<css><![CDATA[
div {
diff --git a/entries/jQuery.speed.xml b/entries/jQuery.speed.xml
new file mode 100644
index 000000000..75cd1e685
--- /dev/null
+++ b/entries/jQuery.speed.xml
@@ -0,0 +1,46 @@
+<?xml version="1.0"?>
+<entry type="method" name="jQuery.speed" return="PlainObject">
+ <title>jQuery.speed</title>
+ <desc>Creates an object containing a set of properties ready to be used in the definition of custom animations.</desc>
+ <signature>
+ <added>1.0</added>
+ <xi:include href="../includes/duration-argument.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
+ <argument name="settings" type="PlainObject" optional="true">
+ <property name="easing" type="String" default="swing" optional="true">
+ <desc>A string indicating which easing function to use for the transition.</desc>
+ </property>
+ <property name="complete" type="Function" optional="true">
+ <desc>A function to call once the animation is complete.</desc>
+ </property>
+ </argument>
+ </signature>
+ <signature>
+ <added>1.1</added>
+ <xi:include href="../includes/duration-argument.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
+ <xi:include href="../includes/easing-argument.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
+ <xi:include href="../includes/complete-argument.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
+ </signature>
+ <signature>
+ <added>1.1</added>
+ <argument name="settings" type="PlainObject">
+ <property name="duration" default="400" optional="true">
+ <desc>A string or number determining how long the animation will run.</desc>
+ <type name="Number"/>
+ <type name="String"/>
+ </property>
+ <property name="easing" type="String" default="swing" optional="true">
+ <desc>A string indicating which easing function to use for the transition.</desc>
+ </property>
+ <property name="complete" type="Function" optional="true">
+ <desc>A function to call once the animation is complete.</desc>
+ </property>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>The <code>$.speed()</code> method provides a way to define properties, such as <code>duration</code>, <code>easing</code>, and <code>queue</code>, to use in a custom animation. By using it, you don't have to implement the logic that deals with default values and optional parameters.</p>
+ <p>This method is meant for plugin developers who are creating new animation methods. Letting <code>$.speed()</code> do all the parameter hockey and normalization for you, rather than duplicating the logic yourself, makes your work simpler. An example of use can be found in the animated form of <code>.addClass()</code> of jQuery UI. </p>
+ </longdesc>
+ <category slug="effects/custom-effects"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.1"/>
+</entry>
diff --git a/entries/jQuery.sub.xml b/entries/jQuery.sub.xml
index a52c9ab65..04cdfdb8d 100644
--- a/entries/jQuery.sub.xml
+++ b/entries/jQuery.sub.xml
@@ -6,9 +6,9 @@
</signature>
<desc>Creates a new copy of jQuery whose properties and methods can be modified without affecting the original jQuery object.</desc>
<longdesc>
- <p>
- <strong>This method is deprecated as of jQuery 1.7 and will be moved to a plugin in jQuery 1.8.</strong>
- </p>
+ <div class="warning">
+ <p>Note: This API has been removed in jQuery 1.9.</p>
+ </div>
<p>There are two specific use cases for which jQuery.sub() was created. The first was for providing a painless way of overriding jQuery methods without completely destroying the original methods and another was for helping to do encapsulation and basic namespacing for jQuery plugins.</p>
<p>Note that jQuery.sub() doesn't attempt to do any sort of isolation - that's not its intention. All the methods on the sub'd version of jQuery will still point to the original jQuery (events bound and triggered will still be through the main jQuery, data will be bound to elements through the main jQuery, Ajax queries and events will run through the main jQuery, etc.).</p>
<p>Note that if you're looking to use this for plugin development you should first <i>strongly</i> consider using something like the jQuery UI widget factory which manages both state and plugin sub-methods. <a href="http://blog.nemikor.com/2010/05/15/building-stateful-jquery-plugins/">Some examples of using the jQuery UI widget factory</a> to build a plugin.</p>
@@ -47,7 +47,7 @@ typeof jQuery( "body" ).myCustomMethod // undefined
};
myjQuery(function( $ ) {
- $( ".menu" ).click(function() {
+ $( ".menu" ).on( "click", function() {
$( this ).find( ".submenu" ).remove();
});
diff --git a/entries/jQuery.support.xml b/entries/jQuery.support.xml
index c44b2b424..3252fd6ea 100644
--- a/entries/jQuery.support.xml
+++ b/entries/jQuery.support.xml
@@ -4,10 +4,15 @@
<signature>
<added>1.3</added>
</signature>
- <desc>A collection of properties that represent the presence of different browser features or bugs. Intended for jQuery's internal use; specific properties may be removed when they are no longer needed internally to improve page startup performance. For your own project's feature-detection needs, we strongly recommend the use of an external library such as <a href="http://modernizr.com">Modernizr</a> instead of dependency on properties in <code>jQuery.support</code>.</desc>
+ <desc>A collection of properties that represent the presence of different browser features or bugs; intended for jQuery's internal use.</desc>
+ <longdesc>
+ <p>A collection of properties that represent the presence of different browser features or bugs. Intended for jQuery's internal use; specific properties may be removed when they are no longer needed internally to improve page startup performance. For your own project's feature-detection needs, we strongly recommend the use of an external library such as <a href="https://modernizr.com">Modernizr</a> instead of dependency on properties in <code>jQuery.support</code>.</p>
+ <p>As of jQuery 1.11 or 1.12, <code>jQuery.support</code> is no longer JSON-serializable; some properties point to functions that return the support test result when called. This was necessary to support lazy execution of support tests.</p>
+ </longdesc>
<category slug="properties/global-jquery-object-properties"/>
<category slug="utilities"/>
<category slug="version/1.3"/>
<category slug="version/1.5.1"/>
+ <category slug="version/1.11-and-2.1"/>
<category slug="deprecated/deprecated-1.9"/>
</entry>
diff --git a/entries/jQuery.trim.xml b/entries/jQuery.trim.xml
index d0dcfa68e..cfc537b63 100644
--- a/entries/jQuery.trim.xml
+++ b/entries/jQuery.trim.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="jQuery.trim" return="String">
+<entry type="method" name="jQuery.trim" return="String" deprecated="3.5" removed="4.0">
<title>jQuery.trim()</title>
<signature>
<added>1.0</added>
@@ -9,6 +9,9 @@
</signature>
<desc>Remove the whitespace from the beginning and end of a string.</desc>
<longdesc>
+ <div class="warning">
+ <p>Note: This API has been deprecated in jQuery 3.5; please use the native <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim"><code>String.prototype.trim</code></a> method instead. Unlike <code>jQuery.trim</code>, <code>String.prototype.trim</code> does not work with types other than strings (<code>null</code>, <code>undefined</code>, <code>Number</code>). Make sure that your code is compatible when migrating.</p>
+ </div>
<p>The <code>$.trim()</code> function removes all newlines, spaces (including non-breaking spaces), and tabs from the beginning and end of the supplied string. If these whitespace characters occur in the middle of the string, they are preserved.</p>
</longdesc>
<example>
@@ -34,4 +37,5 @@ $.trim(" hello, how are you? ");
</example>
<category slug="utilities"/>
<category slug="version/1.0"/>
+ <category slug="deprecated/deprecated-3.5"/>
</entry>
diff --git a/entries/jQuery.type.xml b/entries/jQuery.type.xml
index f77b31393..4dd56897e 100644
--- a/entries/jQuery.type.xml
+++ b/entries/jQuery.type.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="jQuery.type" return="String">
+<entry type="method" name="jQuery.type" return="String" deprecated="3.3" removed="4.0">
<title>jQuery.type()</title>
<signature>
<added>1.4.3</added>
@@ -9,6 +9,9 @@
</signature>
<desc>Determine the internal JavaScript [[Class]] of an object.</desc>
<longdesc>
+ <div class="warning">
+ <p>Note: This API has been deprecated in jQuery 3.3.</p>
+ </div>
<p>A number of techniques are used to determine the exact return value for an object. The [[Class]] is determined as follows:</p>
<ul>
<li>If the object is undefined or null, then "undefined" or "null" is returned accordingly.
@@ -24,14 +27,16 @@
<li>jQuery.type( true ) === "boolean"</li>
<li>jQuery.type( new Boolean() ) === "boolean"</li>
<li>jQuery.type( 3 ) === "number"</li>
- <li>jQuery.type( new Number(3) ) === "number"</li>
+ <li>jQuery.type( new Number( 3 ) ) === "number"</li>
<li>jQuery.type( "test" ) === "string"</li>
- <li>jQuery.type( new String("test") ) === "string"</li>
- <li>jQuery.type( function(){} ) === "function"</li>
+ <li>jQuery.type( new String( "test" ) ) === "string"</li>
+ <li>jQuery.type( function() {} ) === "function"</li>
<li>jQuery.type( [] ) === "array"</li>
<li>jQuery.type( new Array() ) === "array"</li>
<li>jQuery.type( new Date() ) === "date"</li>
<li>jQuery.type( new Error() ) === "error" // <strong>as of jQuery 1.9</strong></li>
+ <li>jQuery.type( Symbol() ) === "symbol" // <strong>as of jQuery 1.9</strong></li>
+ <li>jQuery.type( Object( Symbol() ) ) === "symbol" // <strong>as of jQuery 1.12</strong></li>
<li>jQuery.type( /test/ ) === "regexp"</li>
</ul>
</li>
@@ -49,4 +54,5 @@ Is it a RegExp? <b></b>
</example>
<category slug="utilities"/>
<category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
</entry>
diff --git a/entries/jQuery.unique.xml b/entries/jQuery.unique.xml
index 0546cfa7c..bac613345 100644
--- a/entries/jQuery.unique.xml
+++ b/entries/jQuery.unique.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="jQuery.unique" return="Array">
+<entry type="method" name="jQuery.unique" return="Array" deprecated="3.0">
<title>jQuery.unique()</title>
<signature>
<added>1.1.3</added>
@@ -9,6 +9,9 @@
</signature>
<desc>Sorts an array of DOM elements, in place, with the duplicates removed. Note that this only works on arrays of DOM elements, not strings or numbers.</desc>
<longdesc>
+ <div class="warning">
+ <p>As of jQuery 3.0, this method is deprecated and just an alias of <code><a href="/https/github.com/jQuery.uniqueSort/">jQuery.uniqueSort()</a></code>. Please use that method instead.</p>
+ </div>
<p>The <code>$.unique()</code> function searches through an array of objects, sorting the array, and removing any duplicate nodes. A node is considered a duplicate if it is the <em>exact same</em> node as one already in the array; two different nodes with identical attributes are not considered to be duplicates. This function only works on plain JavaScript arrays of DOM elements, and is chiefly used internally by jQuery. You probably will never need to use it.</p>
<p>As of jQuery 1.4 the results will always be returned in document order.</p>
</longdesc>
@@ -20,10 +23,10 @@ var divs = $( "div" ).get();
// Add 3 elements of class dup too (they are divs)
divs = divs.concat( $( ".dup" ).get() );
-$( "div:eq(1)" ).text( "Pre-unique there are " + divs.length + " elements." );
+$( "div" ).eq( 1 ).text( "Pre-unique there are " + divs.length + " elements." );
divs = jQuery.unique( divs );
-$( "div:eq(2)" ).text( "Post-unique there are " + divs.length + " elements." )
+$( "div" ).eq( 2 ).text( "Post-unique there are " + divs.length + " elements." )
.css( "color", "red" );
]]></code>
<css><![CDATA[
@@ -42,4 +45,5 @@ $( "div:eq(2)" ).text( "Post-unique there are " + divs.length + " elements." )
</example>
<category slug="utilities"/>
<category slug="version/1.1.3"/>
+ <category slug="deprecated/deprecated-3.0"/>
</entry>
diff --git a/entries/jQuery.uniqueSort.xml b/entries/jQuery.uniqueSort.xml
new file mode 100644
index 000000000..4cc086645
--- /dev/null
+++ b/entries/jQuery.uniqueSort.xml
@@ -0,0 +1,46 @@
+<?xml version="1.0"?>
+<entry type="method" name="jQuery.uniqueSort" return="Array">
+ <title>jQuery.uniqueSort()</title>
+ <signature>
+ <added>1.12-and-2.2</added>
+ <argument name="array" type="ArrayLikeObject">
+ <desc>The Array or an Array-like object of DOM elements.</desc>
+ </argument>
+ </signature>
+ <desc>Sorts an array or an array-like object of DOM elements, in place, with the duplicates removed. Note that this only works on arrays/array-likes of DOM elements, not strings or numbers.</desc>
+ <longdesc>
+ <p>The <code>$.uniqueSort()</code> function searches through an array or an array-like object of DOM elements, sorting the array/array-like, and removing any duplicate nodes. A node is considered a duplicate if it is the <em>exact same</em> node as one already in the input; two different nodes with identical attributes are not considered to be duplicates. This function only works on plain JavaScript arrays/array-like objects of DOM elements, and is chiefly used internally by jQuery. You probably will never need to use it.</p>
+ <p>Prior to jQuery 3.0, this method was called <code><a href="/https/github.com/jQuery.unique/">jQuery.unique()</a></code>.</p>
+ <p>As of jQuery 1.4 the results will always be returned in document order.</p>
+ </longdesc>
+ <example>
+ <desc>Removes any duplicate elements from the array of divs.</desc>
+ <code><![CDATA[
+// uniqueSort() must take a native array
+var divs = $( "div" ).get();
+
+// Add 3 elements of class dup too (they are divs)
+divs = divs.concat( $( ".dup" ).get() );
+$( "div" ).eq( 1 ).text( "Pre-uniqueSort there are " + divs.length + " elements." );
+
+divs = jQuery.uniqueSort( divs );
+$( "div" ).eq( 2 ).text( "Post-uniqueSort there are " + divs.length + " elements." )
+ .css( "color", "red" );
+]]></code>
+ <css><![CDATA[
+ div {
+ color: blue;
+ }
+]]></css>
+ <html><![CDATA[
+<div>There are 6 divs in this document.</div>
+<div></div>
+<div class="dup"></div>
+<div class="dup"></div>
+<div class="dup"></div>
+<div></div>
+]]></html>
+ </example>
+ <category slug="utilities"/>
+ <category slug="version/1.12-and-2.2"/>
+</entry>
diff --git a/entries/jQuery.when.xml b/entries/jQuery.when.xml
index e28819e30..a27f2adc7 100644
--- a/entries/jQuery.when.xml
+++ b/entries/jQuery.when.xml
@@ -3,13 +3,17 @@
<title>jQuery.when()</title>
<signature>
<added>1.5</added>
- <argument name="deferreds" type="Deferred">
- <desc>One or more Deferred objects, or plain JavaScript objects.</desc>
+ <argument name="deferreds">
+ <desc>Zero or more Thenable objects.</desc>
+ <type name="Deferred"/>
+ <type name="Promise"/>
+ <type name="Thenable"/>
</argument>
</signature>
- <desc>Provides a way to execute callback functions based on one or more objects, usually <a href="/https/github.com/category/deferred-object/">Deferred</a> objects that represent asynchronous events.</desc>
+ <desc>Provides a way to execute callback functions based on zero or more Thenable objects, usually <a href="/https/github.com/category/deferred-object/">Deferred</a> objects that represent asynchronous events.</desc>
<longdesc>
- <p>If a single Deferred is passed to <code>jQuery.when()</code>, its Promise object (a subset of the Deferred methods) is returned by the method. Additional methods of the Promise object can be called to attach callbacks, such as <a href="/https/github.com/deferred.then/"><code>deferred.then</code></a>. When the Deferred is resolved or rejected, usually by the code that created the Deferred originally, the appropriate callbacks will be called. For example, the jqXHR object returned by <code>jQuery.ajax()</code> is a Promise and can be used this way:</p>
+ <p>If no arguments are passed to <code>jQuery.when()</code>, it will return a resolved Promise.</p>
+ <p>If a single Deferred is passed to <code>jQuery.when()</code>, its Promise object (a subset of the Deferred methods) is returned by the method. Additional methods of the Promise object can be called to attach callbacks, such as <a href="/https/github.com/deferred.then/"><code>deferred.then</code></a>. When the Deferred is resolved or rejected, usually by the code that created the Deferred originally, the appropriate callbacks will be called. For example, the jqXHR object returned by <code>jQuery.ajax()</code> is a Promise-compatible object and can be used this way:</p>
<pre><code>
$.when( $.ajax( "test.aspx" ) ).then(function( data, textStatus, jqXHR ) {
alert( jqXHR.status ); // Alerts 200
@@ -19,12 +23,18 @@ $.when( $.ajax( "test.aspx" ) ).then(function( data, textStatus, jqXHR ) {
<pre><code>
$.when( { testing: 123 } ).done(function( x ) {
alert( x.testing ); // Alerts "123"
+});
+ </code></pre>
+ <p>If you don't pass it any arguments at all, <code>jQuery.when()</code> will return a resolved promise.</p>
+ <pre><code>
+$.when().then(function( x ) {
+ alert( "I fired immediately" );
});
</code></pre>
<p>In the case where multiple Deferred objects are passed to <code>jQuery.when()</code>, the method returns the Promise from a new "master" Deferred object that tracks the aggregate state of all the Deferreds it has been passed. The method will resolve its master Deferred as soon as all the Deferreds resolve, or reject the master Deferred as soon as one of the Deferreds is rejected. If the master Deferred is resolved, the doneCallbacks for the master Deferred are executed. The arguments passed to the doneCallbacks provide the resolved values for each of the Deferreds, and matches the order the Deferreds were passed to <code>jQuery.when()</code>. For example:</p>
<pre><code>
-var d1 = new $.Deferred();
-var d2 = new $.Deferred();
+var d1 = $.Deferred();
+var d2 = $.Deferred();
$.when( d1, d2 ).done(function ( v1, v2 ) {
console.log( v1 ); // "Fish"
@@ -36,9 +46,9 @@ d2.resolve( "Pizza" );
</code></pre>
<p>In the event a Deferred was resolved with no value, the corresponding doneCallback argument will be undefined. If a Deferred resolved to a single value, the corresponding argument will hold that value. In the case where a Deferred resolved to multiple values, the corresponding argument will be an array of those values. For example:</p>
<pre><code>
-var d1 = new $.Deferred();
-var d2 = new $.Deferred();
-var d3 = new $.Deferred();
+var d1 = $.Deferred();
+var d2 = $.Deferred();
+var d3 = $.Deferred();
$.when( d1, d2, d3 ).done(function ( v1, v2, v3 ) {
console.log( v1 ); // v1 is undefined
@@ -50,10 +60,10 @@ d1.resolve();
d2.resolve( "abc" );
d3.resolve( 1, 2, 3, 4, 5 );
</code></pre>
- <p>In the multiple-Deferreds case where one of the Deferreds is rejected, <code>jQuery.when()</code> immediately fires the failCallbacks for its master Deferred. Note that some of the Deferreds may still be unresolved at that point. The arguments passed to the failCallbacks match the signature of the failCallback for the Deferred that was rejected. If you need to perform additional processing for this case, such as canceling any unfinished ajax requests, you can keep references to the underlying jqXHR objects in a closure and inspect/cancel them in the failCallback.</p>
+ <p>In the multiple-Deferreds case where one of the Deferreds is rejected, <code>jQuery.when()</code> immediately fires the failCallbacks for its master Deferred. Note that some of the Deferreds may still be unresolved at that point. The arguments passed to the failCallbacks match the signature of the failCallback for the Deferred that was rejected. If you need to perform additional processing for this case, such as canceling any unfinished Ajax requests, you can keep references to the underlying jqXHR objects in a closure and inspect/cancel them in the failCallback.</p>
</longdesc>
<example>
- <desc>Execute a function after two ajax requests are successful. (See the jQuery.ajax() documentation for a complete description of success and error cases for an ajax request).</desc>
+ <desc>Execute a function after two Ajax requests are successful. (See the jQuery.ajax() documentation for a complete description of success and error cases for an ajax request).</desc>
<code><![CDATA[
$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).done(function( a1, a2 ) {
// a1 and a2 are arguments resolved for the page1 and page2 ajax requests, respectively.
diff --git a/entries/jQuery.xml b/entries/jQuery.xml
index fc13219da..8df77906f 100644
--- a/entries/jQuery.xml
+++ b/entries/jQuery.xml
@@ -11,7 +11,8 @@
<argument name="context" optional="true">
<type name="Element"/>
<type name="jQuery"/>
- <desc>A DOM Element, Document, or jQuery to use as context</desc>
+ <type name="Selector"/>
+ <desc>A DOM Element, Document, jQuery or selector to use as context</desc>
</argument>
</signature>
<signature>
@@ -49,7 +50,7 @@
<h4 id="selector-context">Selector Context</h4>
<p>By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the <code>$()</code> function. For example, to do a search within an event handler, the search can be restricted like so:</p>
<pre><code>
-$( "div.foo" ).click(function() {
+$( "div.foo" ).on( "click", function() {
$( "span", this ).addClass( "bar" );
});
</code></pre>
@@ -57,10 +58,11 @@ $( "div.foo" ).click(function() {
<p>Internally, selector context is implemented with the <code>.find()</code> method, so <code>$( "span", this )</code> is equivalent to <code>$( this ).find( "span" )</code>.</p>
<h4 id="using-dom-elements">Using DOM elements</h4>
- <p>The second and third formulations of this function create a jQuery object using one or more DOM elements that were already selected in some other way. When passing an array, each element <em>must</em> be a DOM element; mixed data is not supported. A jQuery object is created from the array elements in the order they appeared in the array; unlike most other multi-element jQuery operations, the elements are not sorted in DOM order.</p>
+ <p>The second and third formulations of this function create a jQuery object using one or more DOM elements that were already selected in some other way. A jQuery object is created from the array elements in the order they appeared in the array; unlike most other multi-element jQuery operations, the elements are not sorted in DOM order. Elements will be copied from the array as-is and won't be unwrapped if they're already jQuery collections.</p>
+ <p>Please note that although you can pass text nodes and comment nodes into a jQuery collection this way, most operations don't support them. The few that do will have an explicit note on their API documentation page.</p>
<p>A common use of single-DOM-element construction is to call jQuery methods on an element that has been passed to a callback function through the keyword <code>this</code>:</p>
<pre><code>
-$( "div.foo" ).click(function() {
+$( "div.foo" ).on( "click", function() {
$( this ).slideUp();
});
</code></pre>
@@ -76,7 +78,7 @@ $.post( "url.xml", function( data ) {
<p>When a jQuery object is passed to the <code>$()</code> function, a clone of the object is created. This new jQuery object references the same DOM elements as the initial one.</p>
<h4 id="returning-empty-set">Returning an Empty Set</h4>
- <p>As of jQuery 1.4, calling the <code>jQuery()</code> method with <em>no arguments</em> returns an empty jQuery set (with a <code><a href="/https/github.com/length/">.length</a></code> property of 0). In previous versions of jQuery, this would return a set containing the document node.</p>
+ <p>Calling the <code>jQuery()</code> method with <em>no arguments</em> returns an empty jQuery set (with a <code><a href="/https/github.com/length/">.length</a></code> property of 0). Similarly, if an argument of <code>null</code>, <code>undefined</code>, an empty array (<code>[]</code>), or an empty string (<code>""</code>) is passed, the set contains no elements.</p>
<h4 id="working-with-plain-objects">Working With Plain Objects</h4>
<p>At present, the only operations supported on plain JavaScript objects wrapped in jQuery are: <code>.data()</code>,<code>.prop()</code>,<code>.on()</code>, <code>.off()</code>, <code>.trigger()</code> and <code>.triggerHandler()</code>. The use of <code>.data()</code> (or any method requiring <code>.data()</code>) on a plain object will result in a new property on the object called jQuery{randomNumber} (eg. jQuery123456789).</p>
<pre><code>
@@ -154,7 +156,7 @@ $( myForm.elements ).hide();
<argument name="html" type="htmlString">
<desc>A string of HTML to create on the fly. Note that this parses HTML, <strong>not</strong> XML.</desc>
</argument>
- <argument name="ownerDocument" optional="true" type="document">
+ <argument name="ownerDocument" optional="true" type="Document">
<desc>A document in which the new elements will be created.</desc>
</argument>
</signature>
@@ -174,14 +176,14 @@ $( myForm.elements ).hide();
<pre><code>$( "<p id='test'>My <em>new</em> text</p>" ).appendTo( "body" );</code></pre>
<p>For explicit parsing of a string to HTML, use the <a href="/https/github.com/jQuery.parseHTML/">$.parseHTML()</a> method.</p>
<p>By default, elements are created with an <code>.ownerDocument</code> matching the document into which the jQuery library was loaded. Elements being injected into a different document should be created using that document, e.g., <code>$("<p>hello iframe</p>", $("#myiframe").prop("contentWindow").document)</code>.</p>
- <p>If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's <code>.innerHTML</code> mechanism. In most cases, jQuery creates a new <div> element and sets the innerHTML property of the element to the HTML snippet that was passed in. When the parameter has a single tag (with optional closing tag or quick-closing) — <code>$( "<img />" )</code> or <code>$( "<img>" )</code>, <code>$( "<a></a>" )</code> or <code>$( "<a>" )</code> — jQuery creates the element using the native JavaScript <code>.createElement()</code> function.</p>
+ <p>If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's <code>.innerHTML</code> mechanism. In most cases, jQuery creates a new <code><div></code> element and sets the <code>innerHTML</code> property of the element to the HTML snippet that was passed in. When the parameter has a single tag (with optional closing tag or quick-closing) — <code>$( "<img />" )</code> or <code>$( "<img>" )</code>, <code>$( "<a></a>" )</code> or <code>$( "<a>" )</code> — jQuery creates the element using the native JavaScript <code>.createElement()</code> function.</p>
<p>When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, jQuery uses the browser's <code>.innerHTML</code> property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as <code><html></code>, <code><title></code>, or <code><head></code> elements. As a result, the elements inserted may not be representative of the original string passed.</p>
- <p>Filtering isn't, however, limited to these tags. For example, Internet Explorer prior to version 8 will also convert all <code>href</code> properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate <a href="http://code.google.com/p/html5shiv/">compatibility layer</a>.</p>
+ <p>Filtering isn't, however, limited to these tags. For example, Internet Explorer prior to version 8 will also convert all <code>href</code> properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate <a href="https://github.com/afarkas/html5shiv">compatibility layer</a>.</p>
<p>To ensure cross-platform compatibility, the snippet must be well-formed. Tags that can contain other elements should be paired with a closing tag:</p>
- <pre><code>$( "<a href='http://jquery.com'></a>" );</code></pre>
+ <pre><code>$( "<a href='https://jquery.com'></a>" );</code></pre>
<p>Tags that cannot contain elements may be quick-closed or not:</p>
<pre><code>
-$( "<img>" );
+$( "<img />" );
$( "<input>" );
</code></pre>
<p>When passing HTML to <code>jQuery()</code>, note that text nodes are not treated as DOM elements. With the exception of a few methods (such as <code>.content()</code>), they are generally ignored or removed. E.g:</p>
diff --git a/entries/keydown-shorthand.xml b/entries/keydown-shorthand.xml
new file mode 100644
index 000000000..98b125b34
--- /dev/null
+++ b/entries/keydown-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="keydown" return="jQuery" deprecated="3.3">
+ <title>.keydown()</title>
+ <desc>Bind an event handler to the "keydown" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.keydown( handler )</code> or <code>.keydown( eventData, handler )</code>, use <a href="/https/github.com/keydown/#on1"><code>.on( "keydown", handler )</code></a> or <a href="/https/github.com/keydown/#on1"><code>.on( "keydown", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.keydown()</code>, use <a href="/https/github.com/keydown/#trigger2"><code>.trigger( "keydown" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/keyboard-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/keydown.xml b/entries/keydown.xml
index d18b6011c..576a1ad0c 100644
--- a/entries/keydown.xml
+++ b/entries/keydown.xml
@@ -1,15 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="keydown" return="jQuery">
- <title>.keydown()</title>
+<entries>
+<desc>Bind an event handler to the "keydown" event, or trigger that event on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>keydown event</title>
+ <desc>Bind an event handler to the "keydown" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""keydown"" type="string">
+ <desc>The string <code>"keydown"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -18,13 +18,11 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
- <desc>Bind an event handler to the "keydown" JavaScript event, or trigger that event on an element.</desc>
<longdesc>
- <p>This method is a shortcut for <code>.on( "keydown", handler )</code> in the first and second variations, and <code>.trigger( "keydown" )</code> in the third.</p>
- <p>The <code>keydown</code> event is sent to an element when the user first presses a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.</p>
+ <div class="warning">
+ <p>This page describes the <code>keydown</code> event. For the deprecated <code>.keydown()</code> method, see <a href="/https/github.com/keydown-shorthand/"><code>.keydown()</code></a>.</p>
+ </div>
+ <p>The <code>keydown</code> event is sent to an element when the user presses a key on the keyboard. If the key is kept pressed, the event is sent every time the operating system repeats the key. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.</p>
<p>For example, consider the HTML:</p>
<pre><code>
<form>
@@ -36,19 +34,19 @@
</code></pre>
<p>The event handler can be bound to the input field:</p>
<pre><code>
-$( "#target" ).keydown(function() {
- alert( "Handler for .keydown() called." );
-});
+$( "#target" ).on( "keydown", function() {
+ alert( "Handler for `keydown` called." );
+} );
</code></pre>
<p>Now when the insertion point is inside the field, pressing a key displays the alert:</p>
<p>
- <samp>Handler for .keydown() called.</samp>
+ <samp>Handler for `keydown` called.</samp>
</p>
- <p>To trigger the event manually, apply <code>.keydown()</code> without an argument:</p>
+ <p>To trigger the event manually, use <code>.trigger( "keydown" )</code>:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( "#target" ).keydown();
-});
+$( "#other" ).on( "click", function() {
+ $( "#target" ).trigger( "keydown" );
+} );
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also alert the message.</p>
<p>If key presses anywhere need to be caught (for example, to implement global shortcut keys on a page), it is useful to attach this behavior to the <code>document</code> object. Because of event bubbling, all key presses will make their way up the DOM to the <code>document</code> object unless explicitly stopped.</p>
@@ -58,19 +56,19 @@ $( "#other" ).click(function() {
<desc>Show the event object for the keydown handler when a key is pressed in the input.</desc>
<code><![CDATA[
var xTriggered = 0;
-$( "#target" ).keydown(function( event ) {
+$( "#target" ).on( "keydown", function( event ) {
if ( event.which == 13 ) {
event.preventDefault();
}
xTriggered++;
- var msg = "Handler for .keydown() called " + xTriggered + " time(s).";
+ var msg = "Handler for `keydown` called " + xTriggered + " time(s).";
$.print( msg, "html" );
$.print( event );
-});
+} );
-$( "#other" ).click(function() {
- $( "#target" ).keydown();
-});
+$( "#other" ).on( "click", function() {
+ $( "#target" ).trigger( "keydown" );
+} );
]]></code>
<css><![CDATA[
fieldset {
@@ -106,5 +104,23 @@ $( "#other" ).click(function() {
</example>
<category slug="events/keyboard-events"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>keydown event</title>
+ <desc>Trigger the "keydown" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""keydown"" type="string">
+ <desc>The string <code>"keydown"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "keydown", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/keyboard-events"/>
+ <category slug="version/1.0"/>
+</entry>
+
+</entries>
diff --git a/entries/keypress-shorthand.xml b/entries/keypress-shorthand.xml
new file mode 100644
index 000000000..56a0d1d85
--- /dev/null
+++ b/entries/keypress-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="keypress" return="jQuery" deprecated="3.3">
+ <title>.keypress()</title>
+ <desc>Bind an event handler to the "keypress" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.keypress( handler )</code> or <code>.keypress( eventData, handler )</code>, use <a href="/https/github.com/keypress/#on1"><code>.on( "keypress", handler )</code></a> or <a href="/https/github.com/keypress/#on1"><code>.on( "keypress", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.keypress()</code>, use <a href="/https/github.com/keypress/#trigger2"><code>.trigger( "keypress" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/keyboard-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/keypress.xml b/entries/keypress.xml
index bd4fcbf2a..089765bfa 100644
--- a/entries/keypress.xml
+++ b/entries/keypress.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="keypress" return="jQuery">
- <title>.keypress()</title>
- <desc>Bind an event handler to the "keypress" JavaScript event, or trigger that event on an element.</desc>
+<entries>
+<desc>Bind an event handler to the "keypress" event, or trigger that event on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>keypress event</title>
+ <desc>Bind an event handler to the "keypress" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""keypress"" type="string">
+ <desc>The string <code>"keypress"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,12 +18,11 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
+ <div class="warning">
+ <p>This page describes the <code>keypress</code> event. For the deprecated <code>.keypress()</code> method, see <a href="/https/github.com/keypress-shorthand/"><code>.keypress()</code></a>.</p>
+ </div>
<p><strong>Note:</strong> as the <code>keypress</code> event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.</p>
- <p>This method is a shortcut for <code>.on( "keypress", handler )</code> in the first two variations, and <code>.trigger( "keypress" )</code> in the third.</p>
<p>The <code>keypress</code> event is sent to an element when the browser registers keyboard input. This is similar to the <code>keydown</code> event, except that modifier and non-printing keys such as <kbd>Shift</kbd>, <kbd>Esc</kbd>, and <kbd>delete</kbd> trigger <code>keydown</code> events but not <code>keypress</code> events. Other differences between the two events may arise depending on platform and browser.</p>
<p>A <code>keypress</code> event handler can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form controls can always get focus so are reasonable candidates for this event type.</p>
<p>For example, consider the HTML:</p>
@@ -40,19 +38,19 @@
</code></pre>
<p>The event handler can be bound to the input field:</p>
<pre><code>
-$( "#target" ).keypress(function() {
- console.log( "Handler for .keypress() called." );
-});
+$( "#target" ).on( "keypress", function() {
+ console.log( "Handler for `keypress` called." );
+} );
</code></pre>
<p>Now when the insertion point is inside the field, pressing a key displays the log:</p>
<p>
- <samp>Handler for .keypress() called.</samp>
+ <samp>Handler for `keypress` called.</samp>
</p>
- <p>To trigger the event manually, apply <code>.keypress()</code> without an argument:</p>
+ <p>To trigger the event manually, use <code>.trigger( "keypress" )</code>:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( "#target" ).keypress();
-});
+$( "#other" ).on( "click", function() {
+ $( "#target" ).trigger( "keypress" );
+} );
</code></pre>
<p>After this code executes, clicks on the <samp>Trigger the handler</samp> div will also log the message.</p>
<p>If key presses anywhere need to be caught (for example, to implement global shortcut keys on a page), it is useful to attach this behavior to the <code>document</code> object. Because of event bubbling, all key presses will make their way up the DOM to the <code>document</code> object unless explicitly stopped.</p>
@@ -60,22 +58,22 @@ $( "#other" ).click(function() {
<p>Note that <code>keydown</code> and <code>keyup</code> provide a code indicating which key is pressed, while <code>keypress</code> indicates which character was entered. For example, a lowercase "a" will be reported as 65 by <code>keydown</code> and <code>keyup</code>, but as 97 by <code>keypress</code>. An uppercase "A" is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, <code>.keydown()</code> or <code>.keyup()</code> is a better choice.</p>
</longdesc>
<example>
- <desc>Show the event object when a key is pressed in the input. Note: This demo relies on a simple $.print() plugin (http://api.jquery.com/resources/events.js) for the event object's output.</desc>
+ <desc>Show the event object when a key is pressed in the input. Note: This demo relies on a simple $.print() plugin (https://api.jquery.com/resources/events.js) for the event object's output.</desc>
<code><![CDATA[
var xTriggered = 0;
-$( "#target" ).keypress(function( event ) {
+$( "#target" ).on( "keypress", function( event ) {
if ( event.which == 13 ) {
event.preventDefault();
}
xTriggered++;
- var msg = "Handler for .keypress() called " + xTriggered + " time(s).";
+ var msg = "Handler for `keypress` called " + xTriggered + " time(s).";
$.print( msg, "html" );
$.print( event );
-});
+} );
-$( "#other" ).click(function() {
- $( "#target" ).keypress();
-});
+$( "#other" ).on( "click", function() {
+ $( "#target" ).trigger( "keypress" );
+} );
]]></code>
<css><![CDATA[
fieldset {
@@ -111,5 +109,23 @@ $( "#other" ).click(function() {
</example>
<category slug="events/keyboard-events"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>keypress event</title>
+ <desc>Trigger the "keypress" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""keypress"" type="string">
+ <desc>The string <code>"keypress"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "keypress", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/keyboard-events"/>
+ <category slug="version/1.0"/>
+</entry>
+
+</entries>
diff --git a/entries/keyup-shorthand.xml b/entries/keyup-shorthand.xml
new file mode 100644
index 000000000..965dbeb84
--- /dev/null
+++ b/entries/keyup-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="keyup" return="jQuery" deprecated="3.3">
+ <title>.keyup()</title>
+ <desc>Bind an event handler to the "keyup" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.keyup( handler )</code> or <code>.keyup( eventData, handler )</code>, use <a href="/https/github.com/keyup/#on1"><code>.on( "keyup", handler )</code></a> or <a href="/https/github.com/keyup/#on1"><code>.on( "keyup", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.keyup()</code>, use <a href="/https/github.com/keyup/#trigger2"><code>.trigger( "keyup" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/keyboard-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/keyup.xml b/entries/keyup.xml
index 2d523041c..b0d6399f4 100644
--- a/entries/keyup.xml
+++ b/entries/keyup.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="keyup" return="jQuery">
- <title>.keyup()</title>
- <desc>Bind an event handler to the "keyup" JavaScript event, or trigger that event on an element.</desc>
+<entries>
+<desc>Bind an event handler to the "keyup" event, or trigger that event on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>keyup event</title>
+ <desc>Bind an event handler to the "keyup" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""keyup"" type="string">
+ <desc>The string <code>"keyup"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,11 +18,10 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
- <p>This method is a shortcut for <code>.on( "keyup", handler )</code> in the first two variations, and <code>.trigger( "keyup" )</code> in the third.</p>
+ <div class="warning">
+ <p>This page describes the <code>keyup</code> event. For the deprecated <code>.keyup()</code> method, see <a href="/https/github.com/keyup-shorthand/"><code>.keyup()</code></a>.</p>
+ </div>
<p>The <code>keyup</code> event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.</p>
<p>For example, consider the HTML:</p>
<pre><code>
@@ -36,19 +34,19 @@
</code></pre>
<p>The event handler can be bound to the input field:</p>
<pre><code>
-$( "#target" ).keyup(function() {
- alert( "Handler for .keyup() called." );
-});
+$( "#target" ).on( "keyup", function() {
+ alert( "Handler for `keyup` called." );
+} );
</code></pre>
<p>Now when the insertion point is inside the field and a key is pressed and released, the alert is displayed:</p>
<p>
- <samp>Handler for .keyup() called.</samp>
+ <samp>Handler for `keyup` called.</samp>
</p>
- <p>To trigger the event manually, apply <code>.keyup()</code> without arguments:</p>
+ <p>To trigger the event manually, use <code>.trigger( "keyup" )</code>:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( "#target" ).keyup();
-});
+$( "#other" ).on( "click", function() {
+ $( "#target" ).trigger( "keyup" );
+} );
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also alert the message.</p>
<p>If key presses anywhere need to be caught (for example, to implement global shortcut keys on a page), it is useful to attach this behavior to the <code>document</code> object. Because of event bubbling, all key presses will make their way up the DOM to the <code>document</code> object unless explicitly stopped.</p>
@@ -58,20 +56,20 @@ $( "#other" ).click(function() {
<desc>Show the event object for the keyup handler (using a simple $.print plugin) when a key is released in the input.</desc>
<code><![CDATA[
var xTriggered = 0;
-$( "#target" ).keyup(function( event ) {
+$( "#target" ).on( "keyup", function( event ) {
xTriggered++;
- var msg = "Handler for .keyup() called " + xTriggered + " time(s).";
+ var msg = "Handler for `keyup` called " + xTriggered + " time(s).";
$.print( msg, "html" );
$.print( event );
-}).keydown(function( event ) {
+} ).on( "keydown", function( event ) {
if ( event.which == 13 ) {
event.preventDefault();
}
-});
+} );
-$( "#other").click(function() {
- $( "#target" ).keyup();
-});
+$( "#other").on( "click", function() {
+ $( "#target" ).trigger( "keyup" );
+} );
]]></code>
<css><![CDATA[
fieldset {
@@ -107,5 +105,23 @@ $( "#other").click(function() {
</example>
<category slug="events/keyboard-events"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>keyup event</title>
+ <desc>Trigger the "keyup" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""keyup"" type="string">
+ <desc>The string <code>"keyup"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "keyup", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/keyboard-events"/>
+ <category slug="version/1.0"/>
+</entry>
+
+</entries>
diff --git a/entries/lang-selector.xml b/entries/lang-selector.xml
index 9ec3b3e4c..fedf3c4ce 100644
--- a/entries/lang-selector.xml
+++ b/entries/lang-selector.xml
@@ -12,7 +12,7 @@
<longdesc>
<p>The <code>:lang()</code> selector matches elements that have a language value equal to the supplied language code or that start with the supplied language code immediately followed by "-". For example, the selector <code>$("div:lang(en)")</code>will match <code><div lang="en"></code> and <code><div lang="en-us"></code> (and any of their descendant <code><div></code>s), but not <code><div lang="fr"></code></p>
<p>For HTML elements, the language value is determined by the <code>lang</code> attribute and possibly information from <code>meta</code> elements or HTTP headers.</p>
- <p>Further discussion of this usage can be found in the <a href="http://www.w3.org/TR/css3-selectors/#lang-pseudo">W3C CSS specification</a>.</p>
+ <p>Further discussion of this usage can be found in the <a href="https://www.w3.org/TR/css3-selectors/#lang-pseudo">W3C CSS specification</a>.</p>
</longdesc>
<example>
<desc>Color div elements according to their language.</desc>
diff --git a/entries/last-child-selector.xml b/entries/last-child-selector.xml
index 8e5d81e35..06d8e61b1 100644
--- a/entries/last-child-selector.xml
+++ b/entries/last-child-selector.xml
@@ -7,7 +7,7 @@
</signature>
<desc>Selects all elements that are the last child of their parent.</desc>
<longdesc>
- <p>While <a href="/https/github.com/last-selector/">:last</a> matches only a single element, <code>:last-child</code> can match more than one: one for each parent.</p>
+ <p>While <a href="/https/github.com/last/"><code>.last()</code></a> matches only a single element, <code>:last-child</code> can match more than one: one for each parent.</p>
</longdesc>
<example>
<desc>Find the last span in each matched div and add some css plus a hover state.</desc>
diff --git a/entries/last-selector.xml b/entries/last-selector.xml
index 2cbd886f5..128eec49c 100644
--- a/entries/last-selector.xml
+++ b/entries/last-selector.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="selector" name="last" return="">
+<entry type="selector" name="last" return="" deprecated="3.4">
<title>:last Selector</title>
<sample>:last</sample>
<signature>
@@ -7,13 +7,16 @@
</signature>
<desc>Selects the last matched element.</desc>
<longdesc>
+ <div class="warning">
+ <p><strong>As of jQuery 3.4</strong>, the <code>:last</code> pseudo-class is deprecated. Remove it from your selectors and filter the results later using <a href="/https/github.com/last/"><code>.last()</code></a>.</p>
+ </div>
<p>Note that <code>:last</code> selects a single element by filtering the current jQuery collection and matching the last element within it.</p>
</longdesc>
<note id="jquery-selector-extension" type="additional" data-selector=":last"/>
<example>
<desc>Finds the last table row.</desc>
<code><![CDATA[
-$( "tr:last" ).css({ backgroundColor: "yellow", fontWeight: "bolder" });
+$( "tr" ).last().css({ backgroundColor: "yellow", fontWeight: "bolder" });
]]></code>
<html><![CDATA[
<table>
@@ -26,4 +29,5 @@ $( "tr:last" ).css({ backgroundColor: "yellow", fontWeight: "bolder" });
<category slug="selectors/basic-filter-selectors"/>
<category slug="selectors/jquery-selector-extensions"/>
<category slug="version/1.0"/>
+ <category slug="deprecated/deprecated-3.4"/>
</entry>
diff --git a/entries/last.xml b/entries/last.xml
index 4f9b59df4..73ddafa5d 100644
--- a/entries/last.xml
+++ b/entries/last.xml
@@ -24,17 +24,22 @@ $( "li" ).last().css( "background-color", "red" );
<p>The result of this call is a red background for the final item.</p>
</longdesc>
<example>
- <desc>Highlight the last span in a paragraph.</desc>
+ <desc>Highlight the last item in a list.</desc>
<css><![CDATA[
.highlight {
background-color: yellow;
}
]]></css>
<code><![CDATA[
-$( "p span" ).last().addClass( "highlight" );
+$( "ul li" ).last().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/length.xml b/entries/length.xml
index 105f23d84..37a2d54cf 100644
--- a/entries/length.xml
+++ b/entries/length.xml
@@ -12,12 +12,12 @@
<desc>Count the divs. Click to add more.</desc>
<code><![CDATA[
$( document.body )
- .click(function() {
+ .on( "click", function() {
$( document.body ).append( $( "<div>" ) );
var n = $( "div" ).length;
$( "span" ).text( "There are " + n + " divs." +
"Click to add more.");
- })
+ } )
// Trigger the click to start
.trigger( "click" );
]]></code>
diff --git a/entries/live.xml b/entries/live.xml
index 95f9d5d8c..0943af956 100644
--- a/entries/live.xml
+++ b/entries/live.xml
@@ -17,7 +17,7 @@
<argument name="events" type="String">
<desc>A string containing a JavaScript event type, such as "click" or "keydown." As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names.</desc>
</argument>
- <argument name="data" type="PlainObject">
+ <argument name="data" type="PlainObject" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
<argument name="handler" type="Function">
@@ -32,7 +32,9 @@
</argument>
</signature>
<longdesc>
- <p><strong>As of jQuery 1.7</strong>, the <code>.live()</code> method is deprecated. Use <a href="/https/github.com/on/"><code>.on()</code></a> to attach event handlers. Users of older versions of jQuery should use <a href="/https/github.com/delegate/"><code>.delegate()</code></a> in preference to <code>.live()</code>.</p>
+ <div class="warning">
+ <p>Note: This API has been removed in jQuery 1.9; please use <a href="/https/github.com/on/"><code>on()</code></a> instead.</p>
+ </div>
<p>This method provides a means to attach delegated event handlers to the <code>document</code> element of a page, which simplifies the use of event handlers when content is dynamically added to a page. See the discussion of direct versus delegated events in the <a href="/https/github.com/on/"><code>.on()</code></a> method for more information. </p>
<p>Rewriting the <code>.live()</code> method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:</p>
<pre><code>
@@ -102,7 +104,7 @@ $( "p" ).live( "myCustomEvent", function( event, myName, myValue ) {
.fadeIn( 30 )
.fadeOut( 1000 );
});
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( "p" ).trigger( "myCustomEvent" );
});
]]></code>
diff --git a/entries/load-event.xml b/entries/load-event.xml
index d95f81bc8..f7dbc65a7 100644
--- a/entries/load-event.xml
+++ b/entries/load-event.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="load" return="jQuery" deprecated="1.8">
- <title>.load()</title>
- <desc>Bind an event handler to the "load" JavaScript event.</desc>
+<entries>
+<desc>Bind an event handler to the "load" event, or trigger that event on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>load event</title>
+ <desc>Bind an event handler to the "load" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute when the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""load"" type="string">
+ <desc>The string <code>"load"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -20,7 +19,9 @@
</argument>
</signature>
<longdesc>
- <p>This method is a shortcut for <code>.on( "load", handler )</code>.</p>
+ <div class="warning">
+ <p>This page describes the <code>load</code> event. For the <code>.load()</code> method removed in jQuery 3.0, see <a href="/https/github.com/load-shorthand/"><code>.load()</code></a>.</p>
+ </div>
<p>The <code>load</code> event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the <code>window</code> object.</p>
<p>For example, consider a page with a simple image:</p>
<pre><code>
@@ -28,20 +29,17 @@
</code></pre>
<p>The event handler can be bound to the image:</p>
<pre><code>
-$( "#book" ).load(function() {
- // Handler for .load() called.
-});
+$( "#book" ).on( "load", function() {
+ // Handler for `load` called.
+} );
</code></pre>
<p>As soon as the image has been loaded, the handler is called.</p>
<p>In general, it is not necessary to wait for all images to be fully loaded. If code can be executed earlier, it is usually best to place it in a handler sent to the <code>.ready()</code> method.
</p>
- <div class="warning">
- <p>The Ajax module also has a method named <code><a href="/https/github.com/load/">.load()</a></code>. Which one is fired depends on the set of arguments passed.</p>
- </div>
<div class="warning">
<p>
<b>Caveats of the <code>load</code> event when used with images</b>
- <p>A common challenge developers attempt to solve using the <code>.load()</code> shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:</p>
+ <p>A common challenge developers attempt to solve using the <code>load</code> shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:</p>
<ul>
<li>It doesn't work consistently nor reliably cross-browser</li>
<li>It doesn't fire correctly in WebKit if the image src is set to the same src as before</li>
@@ -57,23 +55,40 @@ $( "#book" ).load(function() {
<example>
<desc>Run a function when the page is fully loaded including graphics.</desc>
<code><![CDATA[
-$( window ).load(function() {
+$( window ).on( "load", function() {
// Run code
-});
+} );
]]></code>
</example>
<example>
<desc>Add the class bigImg to all images with height greater than 100 upon each image load.</desc>
<code><![CDATA[
-$( "img.userIcon" ).load(function() {
+$( "img.userIcon" ).on( "load", function() {
if ( $( this ).height() > 100) {
$( this ).addClass( "bigImg" );
}
-});
+} );
]]></code>
</example>
<category slug="events/document-loading"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
- <category slug="deprecated/deprecated-1.8"/>
+ <category slug="version/1.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>load event</title>
+ <desc>Trigger the "load" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""load"" type="string">
+ <desc>The string <code>"load"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "load", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/document-loading"/>
+ <category slug="version/1.0"/>
</entry>
+
+</entries>
diff --git a/entries/load-shorthand.xml b/entries/load-shorthand.xml
new file mode 100644
index 000000000..1c5873cb0
--- /dev/null
+++ b/entries/load-shorthand.xml
@@ -0,0 +1,40 @@
+<?xml version="1.0"?>
+<entry type="method" name="load" return="jQuery" deprecated="1.8" removed="3.0">
+ <title>.load()</title>
+ <desc>Bind an event handler to the "load" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API has been removed in jQuery 3.0.</p>
+ <p>Instead of <code>.load( handler )</code> or <code>.load( eventData, handler )</code>, use <a href="/https/github.com/load-event/#on1"><code>.on( "load", handler )</code></a> or <a href="/https/github.com/load-event/#on1"><code>.on( "load", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.load()</code>, use <a href="/https/github.com/load-event/#trigger2"><code>.trigger( "load" )</code></a>.</p>
+ </div>
+ <div class="warning">
+ <p>The Ajax module also has a method named <code><a href="/https/github.com/load/">.load()</a></code>. Which one is fired depends on the set of arguments passed.</p>
+ </div>
+ </longdesc>
+ <category slug="events/document-loading"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-1.8"/>
+ <category slug="removed"/>
+</entry>
diff --git a/entries/load.xml b/entries/load.xml
index 951c43f68..c0f6a46fc 100644
--- a/entries/load.xml
+++ b/entries/load.xml
@@ -18,12 +18,12 @@
<desc>A callback function that is executed when the request completes.</desc>
</argument>
</signature>
- <desc>Load data from the server and place the returned HTML into the matched element.</desc>
+ <desc>Load data from the server and place the returned HTML into the matched elements.</desc>
<longdesc>
<div class="warning">
- <p>Note: The event handling suite also has a method named <code><a href="/https/github.com/load-event/">.load()</a></code>. jQuery determines which method to fire based on the set of arguments passed to it.</p>
+ <p>Note: Prior to jQuery 3.0, the event handling suite also had a method named <code><a href="/https/github.com/load-event/">.load()</a></code>. Older versions of jQuery determined which method to fire based on the set of arguments passed to it.</p>
</div>
- <p>This method is the simplest way to fetch data from the server. It is roughly equivalent to <code>$.get(url, data, success)</code> except that it is a method rather than global function and it has an implicit callback function. When a successful response is detected (i.e. when <code>textStatus</code> is "success" or "notmodified"), <code>.load()</code> sets the HTML contents of the matched element to the returned data. This means that most uses of the method can be quite simple:</p>
+ <p>This method is the simplest way to fetch data from the server. It is roughly equivalent to <code>$.get(url, data, success)</code> except that it is a method rather than global function and it has an implicit callback function. When a successful response is detected (i.e. when <code>textStatus</code> is "success" or "notmodified"), <code>.load()</code> sets the HTML contents of the matched elements to the returned data. This means that most uses of the method can be quite simple:</p>
<pre><code>
$( "#result" ).load( "ajax/test.html" );
</code></pre>
diff --git a/entries/lt-selector.xml b/entries/lt-selector.xml
index b85b5f777..703c427f1 100644
--- a/entries/lt-selector.xml
+++ b/entries/lt-selector.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="selector" name="lt" return="">
+<entry type="selector" name="lt" return="" deprecated="3.4">
<title>:lt() Selector</title>
<signature>
<sample>:lt(index)</sample>
@@ -17,6 +17,9 @@
</signature>
<desc>Select all elements at an index less than <code>index</code> within the matched set.</desc>
<longdesc>
+ <div class="warning">
+ <p><strong>As of jQuery 3.4</strong>, the <code>:lt</code> pseudo-class is deprecated. Remove it from your selectors and filter the results later using <a href="/https/github.com/slice/"><code>.slice()</code></a>. For example, <code>:lt(3)</code> can be replaced with a call to <code>.slice( 0, 3 )</code>.</p>
+ </div>
<p>
<strong>index-related selectors</strong>
</p>
@@ -42,4 +45,5 @@ $( "td:lt(-2)" ).css( "color", "red" );
<category slug="selectors/basic-filter-selectors"/>
<category slug="selectors/jquery-selector-extensions"/>
<category slug="version/1.0"/>
+ <category slug="deprecated/deprecated-3.4"/>
</entry>
diff --git a/entries/map.xml b/entries/map.xml
index 55a87d83c..101fa001b 100644
--- a/entries/map.xml
+++ b/entries/map.xml
@@ -69,7 +69,7 @@ $( "p" )
<form>
<input type="text" name="name" value="John">
<input type="text" name="password" value="password">
- <input type="text" name="url" value="http://ejohn.org/">
+ <input type="text" name="url" value="https://johnresig.com/">
</form>
]]></html>
</example>
@@ -135,9 +135,9 @@ $.fn.equalizeHeights = function() {
return this.height( Math.max.apply( this, maxHeight ) );
};
-$( "input" ).click(function() {
+$( "input" ).on( "click", function() {
$( "div" ).equalizeHeights();
-});
+} );
]]></code>
<css><![CDATA[
div {
diff --git a/entries/mousedown-shorthand.xml b/entries/mousedown-shorthand.xml
new file mode 100644
index 000000000..d5de95b1b
--- /dev/null
+++ b/entries/mousedown-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="mousedown" return="jQuery" deprecated="3.3">
+ <title>.mousedown()</title>
+ <desc>Bind an event handler to the "mousedown" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.mousedown( handler )</code> or <code>.mousedown( eventData, handler )</code>, use <a href="/https/github.com/mousedown/#on1"><code>.on( "mousedown", handler )</code></a> or <a href="/https/github.com/mousedown/#on1"><code>.on( "mousedown", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.mousedown()</code>, use <a href="/https/github.com/mousedown/#trigger2"><code>.trigger( "mousedown" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/mousedown.xml b/entries/mousedown.xml
index 98f03d338..5ce0e273d 100644
--- a/entries/mousedown.xml
+++ b/entries/mousedown.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="mousedown" return="jQuery">
- <title>.mousedown()</title>
- <desc>Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element.</desc>
+<entries>
+<desc>Bind an event handler to the "mousedown" event, or trigger that event on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>mousedown event</title>
+ <desc>Bind an event handler to the "mousedown" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""mousedown"" type="string">
+ <desc>The string <code>"mousedown"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,11 +18,10 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
- <p>This method is a shortcut for <code>.on( "mousedown", handler)</code> in the first variation, and <code>.trigger( "mousedown" )</code> in the second.</p>
+ <div class="warning">
+ <p>This page describes the <code>mousedown</code> event. For the deprecated <code>.mousedown()</code> method, see <a href="/https/github.com/mousedown-shorthand/"><code>.mousedown()</code></a>.</p>
+ </div>
<p>The <code>mousedown</code> event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed. Any HTML element can receive this event.</p>
<p>For example, consider the HTML:</p>
<pre><code><div id="target">
@@ -33,27 +31,28 @@
Trigger the handler
</div>
</code></pre>
- <p class="image">
+ <figure>
<img src="/https/github.com/resources/0042_05_01.png" alt=""/>
- </p>
+ <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
+ </figure>
<p>The event handler can be bound to any <code><div></code>:</p>
<pre><code>
-$( "#target" ).mousedown(function() {
- alert( "Handler for .mousedown() called." );
-});
+$( "#target" ).on( "mousedown", function() {
+ alert( "Handler for `mousedown` called." );
+} );
</code></pre>
<p>Now if we click on this element, the alert is displayed:</p>
<p>
- <samp>Handler for .mousedown() called.</samp>
+ <samp>Handler for `mousedown` called.</samp>
</p>
<p>We can also trigger the event when a different element is clicked:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( "#target" ).mousedown();
-});
+$( "#other" ).on( "click", function() {
+ $( "#target" ).trigger( "mousedown" );
+} );
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also alert the message.</p>
- <p>The <code>mousedown</code> event is sent when any mouse button is clicked. To act only on specific buttons, we can use the event object's <code>which </code>property. Not all browsers support this property (Internet Explorer uses button instead), but jQuery normalizes the property so that it is safe to use in any browser. The value of <code>which</code> will be 1 for the left button, 2 for the middle button, or 3 for the right button.</p>
+ <p>The <code>mousedown</code> event is sent when any mouse button is clicked. To act only on specific buttons, we can use the event object's <code>which</code> property. Not all browsers support this property (Internet Explorer uses button instead), but jQuery normalizes the property so that it is safe to use in any browser. The value of <code>which</code> will be 1 for the left button, 2 for the middle button, or 3 for the right button.</p>
<p>This event is primarily useful for ensuring that the primary button was used to begin a drag operation; if ignored, strange results can occur when the user attempts to use a context menu. While the middle and right buttons can be detected with these properties, this is not reliable. In Opera and Safari, for example, right mouse button clicks are not detectable by default.</p>
<p>If the user clicks on an element, drags away from it, and releases the button, this is still counted as a <code>mousedown</code> event. This sequence of actions is treated as a "canceling" of the button press in most user interfaces, so it is usually better to use the <code>click</code> event unless we know that the <code>mousedown</code> event is preferable for a particular situation.</p>
</longdesc>
@@ -61,12 +60,12 @@ $( "#other" ).click(function() {
<desc>Show texts when mouseup and mousedown event triggering.</desc>
<code><![CDATA[
$( "p" )
- .mouseup(function() {
+ .on( "mouseup", function() {
$( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
- })
- .mousedown(function() {
+ } )
+ .on( "mousedown", function() {
$( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
- });
+ } );
]]></code>
<html><![CDATA[
<p>Press mouse and release here.</p>
@@ -74,5 +73,23 @@ $( "p" )
</example>
<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>mousedown event</title>
+ <desc>Trigger the "mousedown" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""mousedown"" type="string">
+ <desc>The string <code>"mousedown"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "mousedown", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
</entry>
+
+</entries>
diff --git a/entries/mouseenter-shorthand.xml b/entries/mouseenter-shorthand.xml
new file mode 100644
index 000000000..49b2285a3
--- /dev/null
+++ b/entries/mouseenter-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="mouseenter" return="jQuery" deprecated="3.3">
+ <title>.mouseenter()</title>
+ <desc>Bind an event handler to the "mouseenter" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.mouseenter( handler )</code> or <code>.mouseenter( eventData, handler )</code>, use <a href="/https/github.com/mouseenter/#on1"><code>.on( "mouseenter", handler )</code></a> or <a href="/https/github.com/mouseenter/#on1"><code>.on( "mouseenter", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.mouseenter()</code>, use <a href="/https/github.com/mouseenter/#trigger2"><code>.trigger( "mouseenter" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/mouseenter.xml b/entries/mouseenter.xml
index ae59e888a..d22329266 100644
--- a/entries/mouseenter.xml
+++ b/entries/mouseenter.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="mouseenter" return="jQuery">
- <title>.mouseenter()</title>
- <desc>Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.</desc>
+<entries>
+<desc>Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>mouseenter event</title>
+ <desc>Bind an event handler to be fired when the mouse enters an element.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""mouseenter"" type="string">
+ <desc>The string <code>"mouseenter"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,11 +18,10 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
- <p>This method is a shortcut for <code>.on( "mouseenter", handler )</code> in the first two variations, and <code>.trigger( "mouseenter" )</code> in the third.</p>
+ <div class="warning">
+ <p>This page describes the <code>mouseenter</code> event. For the deprecated <code>.mouseenter()</code> method, see <a href="/https/github.com/mouseenter-shorthand/"><code>.mouseenter()</code></a>.</p>
+ </div>
<p>The <code>mouseenter</code> JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.</p>
<p>For example, consider the HTML:</p>
<pre><code>
@@ -37,20 +35,21 @@
Trigger the handler
</div>
<div id="log"></div></code></pre>
- <p class="image">
+ <figure>
<img src="/https/github.com/resources/0042_05_08.png" alt=""/>
- </p>
+ <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
+ </figure>
<p>The event handler can be bound to any element:</p>
<pre><code>
-$( "#outer" ).mouseenter(function() {
- $( "#log" ).append( "<div>Handler for .mouseenter() called.</div>" );
-});
+$( "#outer" ).on( "mouseenter", function() {
+ $( "#log" ).append( "<div>Handler for `mouseenter` called.</div>" );
+} );
</code></pre>
<p>Now when the mouse pointer moves over the <samp>Outer</samp> <code><div></code>, the message is appended to <code><div id="log"></code>. You can also trigger the event when another element is clicked:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( "#outer" ).mouseenter();
-});
+$( "#other" ).on( "click", function() {
+ $( "#outer" ).trigger( "mouseenter" );
+} );
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also append the message.</p>
<p>The <code>mouseenter</code> event differs from <code>mouseover</code> in the way it handles event bubbling. If <code>mouseover</code> were used in this example, then when the mouse pointer moved over the <samp>Inner</samp> element, the handler would be triggered. This is usually undesirable behavior. The <code>mouseenter</code> event, on the other hand, only triggers its handler when the mouse enters the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse enters the <samp>Outer</samp> element, but not the <samp>Inner</samp> element.</p>
@@ -81,23 +80,23 @@ $( "#other" ).click(function() {
<code><![CDATA[
var i = 0;
$( "div.overout" )
- .mouseover(function() {
- $( "p:first", this ).text( "mouse over" );
- $( "p:last", this ).text( ++i );
- })
- .mouseout(function() {
- $( "p:first", this ).text( "mouse out" );
- });
+ .on( "mouseover", function() {
+ $( "p", this ).first().text( "mouse over" );
+ $( "p", this ).last().text( ++i );
+ } )
+ .on( "mouseout", function() {
+ $( "p", this ).first().text( "mouse out" );
+ } );
var n = 0;
$( "div.enterleave" )
- .mouseenter(function() {
- $( "p:first", this ).text( "mouse enter" );
- $( "p:last", this ).text( ++n );
- })
- .mouseleave(function() {
- $( "p:first", this ).text( "mouse leave" );
- });
+ .on( "mouseenter", function() {
+ $( "p", this ).first().text( "mouse enter" );
+ $( "p", this ).last().text( ++n );
+ } )
+ .on( "mouseleave", function() {
+ $( "p", this ).first().text( "mouse leave" );
+ } );
]]></code>
<html><![CDATA[
<div class="out overout">
@@ -115,5 +114,23 @@ $( "div.enterleave" )
</example>
<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>mouseenter event</title>
+ <desc>Trigger the "mouseenter" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""mouseenter"" type="string">
+ <desc>The string <code>"mouseenter"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "mouseenter", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
+</entry>
+
+</entries>
diff --git a/entries/mouseleave-shorthand.xml b/entries/mouseleave-shorthand.xml
new file mode 100644
index 000000000..9ff235eb8
--- /dev/null
+++ b/entries/mouseleave-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="mouseleave" return="jQuery" deprecated="3.3">
+ <title>.mouseleave()</title>
+ <desc>Bind an event handler to the "mouseleave" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.mouseleave( handler )</code> or <code>.mouseleave( eventData, handler )</code>, use <a href="/https/github.com/mouseleave/#on1"><code>.on( "mouseleave", handler )</code></a> or <a href="/https/github.com/mouseleave/#on1"><code>.on( "mouseleave", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.mouseleave()</code>, use <a href="/https/github.com/mouseleave/#trigger2"><code>.trigger( "mouseleave" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/mouseleave.xml b/entries/mouseleave.xml
index 25ed2dc71..98c1ff971 100644
--- a/entries/mouseleave.xml
+++ b/entries/mouseleave.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="mouseleave" return="jQuery">
- <title>.mouseleave()</title>
- <desc>Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.</desc>
+<entries>
+<desc>Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>mouseleave event</title>
+ <desc>Bind an event handler to be fired when the mouse leaves an element.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""mouseleave"" type="string">
+ <desc>The string <code>"mouseleave"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,11 +18,10 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
- <p>This method is a shortcut for <code>.on('mouseleave', handler)</code> in the first two variations, and <code>.trigger('mouseleave')</code> in the third.</p>
+ <div class="warning">
+ <p>This page describes the <code>mouseleave</code> event. For the deprecated <code>.mouseleave()</code> method, see <a href="/https/github.com/mouseleave-shorthand/"><code>.mouseleave()</code></a>.</p>
+ </div>
<p>The <code>mouseleave</code> JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.</p>
<p>For example, consider the HTML:</p>
<pre><code>
@@ -37,20 +35,21 @@
Trigger the handler
</div>
<div id="log"></div></code></pre>
- <p class="image">
+ <figure>
<img src="/https/github.com/resources/0042_05_09.png" alt=""/>
- </p>
+ <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
+ </figure>
<p>The event handler can be bound to any element:</p>
<pre><code>
-$( "#outer" ).mouseleave(function() {
- $( "#log" ).append( "<div>Handler for .mouseleave() called.</div>" );
-});
+$( "#outer" ).on( "mouseleave", function() {
+ $( "#log" ).append( "<div>Handler for `mouseleave` called.</div>" );
+} );
</code></pre>
<p>Now when the mouse pointer moves out of the <samp>Outer</samp> <code><div></code>, the message is appended to <code><div id="log"></code>. You can also trigger the event when another element is clicked:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( "#outer" ).mouseleave();
-});
+$( "#other" ).on( "click", function() {
+ $( "#outer" ).trigger( "mouseleave" );
+} );
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also append the message.</p>
<p>The <code>mouseleave</code> event differs from <code>mouseout</code> in the way it handles event bubbling. If <code>mouseout</code> were used in this example, then when the mouse pointer moved out of the <samp>Inner</samp> element, the handler would be triggered. This is usually undesirable behavior. The <code>mouseleave</code> event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the <samp>Outer</samp> element, but not the <samp>Inner</samp> element.</p>
@@ -80,23 +79,23 @@ $( "#other" ).click(function() {
<code><![CDATA[
var i = 0;
$( "div.overout" )
- .mouseover(function() {
- $( "p:first", this ).text( "mouse over" );
- })
- .mouseout(function() {
- $( "p:first", this ).text( "mouse out" );
- $( "p:last", this ).text( ++i );
- });
+ .on( "mouseover", function() {
+ $( "p", this ).first().text( "mouse over" );
+ } )
+ .on( "mouseout", function() {
+ $( "p", this ).first().text( "mouse out" );
+ $( "p", this ).last().text( ++i );
+ } );
var n = 0;
$( "div.enterleave" )
- .mouseenter(function() {
- $( "p:first", this ).text( "mouse enter" );
- })
- .mouseleave(function() {
- $( "p:first", this ).text( "mouse leave" );
- $( "p:last", this ).text( ++n );
- });
+ .on( "mouseenter", function() {
+ $( "p", this ).first().text( "mouse enter" );
+ } )
+ .on( "mouseleave", function() {
+ $( "p", this ).first().text( "mouse leave" );
+ $( "p", this ).last().text( ++n );
+ } );
]]></code>
<html><![CDATA[
<div class="out overout">
@@ -113,5 +112,23 @@ $( "div.enterleave" )
</example>
<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>mouseleave event</title>
+ <desc>Trigger the "mouseleave" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""mouseleave"" type="string">
+ <desc>The string <code>"mouseleave"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "mouseleave", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
+</entry>
+
+</entries>
diff --git a/entries/mousemove-shorthand.xml b/entries/mousemove-shorthand.xml
new file mode 100644
index 000000000..7b5e5c314
--- /dev/null
+++ b/entries/mousemove-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="mousemove" return="jQuery" deprecated="3.3">
+ <title>.mousemove()</title>
+ <desc>Bind an event handler to the "mousemove" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.mousemove( handler )</code> or <code>.mousemove( eventData, handler )</code>, use <a href="/https/github.com/mousemove/#on1"><code>.on( "mousemove", handler )</code></a> or <a href="/https/github.com/mousemove/#on1"><code>.on( "mousemove", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.mousemove()</code>, use <a href="/https/github.com/mousemove/#trigger2"><code>.trigger( "mousemove" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/mousemove.xml b/entries/mousemove.xml
index 240f92c31..5aaeef0b6 100644
--- a/entries/mousemove.xml
+++ b/entries/mousemove.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="mousemove" return="jQuery">
- <title>.mousemove()</title>
- <desc>Bind an event handler to the "mousemove" JavaScript event, or trigger that event on an element.</desc>
+<entries>
+<desc>Bind an event handler to the "mousemove" event, or trigger that event on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>mousemove event</title>
+ <desc>Bind an event handler to the "mousemove" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""mousemove"" type="string">
+ <desc>The string <code>"mousemove"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,11 +18,10 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
- <p>This method is a shortcut for <code>.on( "mousemove", handler )</code> in the first two variations, and <code>.trigger( "mousemove" )</code> in the third.</p>
+ <div class="warning">
+ <p>This page describes the <code>mousemove</code> event. For the deprecated <code>.mousemove()</code> method, see <a href="/https/github.com/mousemove-shorthand/"><code>.mousemove()</code></a>.</p>
+ </div>
<p>The <code>mousemove</code> event is sent to an element when the mouse pointer moves inside the element. Any HTML element can receive this event.</p>
<p>For example, consider the HTML:</p>
<pre><code>
@@ -37,46 +35,46 @@
</code></pre>
<p>The event handler can be bound to the target:</p>
<pre><code>
-$( "#target" ).mousemove(function( event ) {
- var msg = "Handler for .mousemove() called at ";
+$( "#target" ).on( "mousemove", function( event ) {
+ var msg = "Handler for `mousemove` called at ";
msg += event.pageX + ", " + event.pageY;
$( "#log" ).append( "<div>" + msg + "</div>" );
-});
+} );
</code></pre>
<p>Now when the mouse pointer moves within the target button, the messages are appended to <div id="log">:</p>
<p>
- <samp>Handler for .mousemove() called at (399, 48)</samp>
+ <samp>Handler for `mousemove` called at (399, 48)</samp>
<br/>
- <samp>Handler for .mousemove() called at (398, 46)</samp>
+ <samp>Handler for `mousemove` called at (398, 46)</samp>
<br/>
- <samp>Handler for .mousemove() called at (397, 44)</samp>
+ <samp>Handler for `mousemove` called at (397, 44)</samp>
<br/>
- <samp>Handler for .mousemove() called at (396, 42)</samp>
+ <samp>Handler for `mousemove` called at (396, 42)</samp>
<br/>
</p>
- <p>To trigger the event manually, apply <code>.mousemove()</code> without an argument:</p>
+ <p>To trigger the event manually, use <code>.trigger( "mousemove" )</code>:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( "#target" ).mousemove();
-});
+$( "#other" ).on( "click", function() {
+ $( "#target" ).trigger( "mousemove" );
+} );
</code></pre>
<p>After this code executes, clicks on the Trigger button will also append the message:</p>
<p>
- <samp>Handler for .mousemove() called at (undefined, undefined)</samp>
+ <samp>Handler for `mousemove` called at (undefined, undefined)</samp>
</p>
<p>When tracking mouse movement, you usually need to know the actual position of the mouse pointer. The event object that is passed to the handler contains some information about the mouse coordinates. Properties such as <code>.clientX</code>, <code>.offsetX</code>, and <code>.pageX</code> are available, but support for them differs between browsers. Fortunately, jQuery normalizes the <code>.pageX</code> and <code>.pageY</code> properties so that they can be used in all browsers. These properties provide the X and Y coordinates of the mouse pointer relative to the top-left corner of the document, as illustrated in the example output above.</p>
<p>Keep in mind that the <code>mousemove</code> event is triggered whenever the mouse pointer moves, even for a pixel. This means that hundreds of events can be generated over a very small amount of time. If the handler has to do any significant processing, or if multiple handlers for the event exist, this can be a serious performance drain on the browser. It is important, therefore, to optimize <code>mousemove </code>handlers as much as possible, and to unbind them as soon as they are no longer needed.</p>
- <p>A common pattern is to bind the <code>mousemove</code> handler from within a <code>mousedown</code> hander, and to unbind it from a corresponding <code>mouseup</code> handler. If implementing this sequence of events, remember that the <code>mouseup</code> event might be sent to a different HTML element than the <code>mousemove</code> event was. To account for this, the <code>mouseup</code> handler should typically be bound to an element high up in the DOM tree, such as <code><body></code>.</p>
+ <p>A common pattern is to bind the <code>mousemove</code> handler from within a <code>mousedown</code> handler, and to unbind it from a corresponding <code>mouseup</code> handler. If implementing this sequence of events, remember that the <code>mouseup</code> event might be sent to a different HTML element than the <code>mousemove</code> event was. To account for this, the <code>mouseup</code> handler should typically be bound to an element high up in the DOM tree, such as <code><body></code>.</p>
</longdesc>
<example>
<desc>Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window, which in this case is the iframe.</desc>
<code><![CDATA[
-$( "div" ).mousemove(function( event ) {
+$( "div" ).on( "mousemove", function( event ) {
var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
- $( "span:first" ).text( "( event.pageX, event.pageY ) : " + pageCoords );
- $( "span:last" ).text( "( event.clientX, event.clientY ) : " + clientCoords );
-});
+ $( "span" ).first().text( "( event.pageX, event.pageY ) : " + pageCoords );
+ $( "span" ).last().text( "( event.clientX, event.clientY ) : " + clientCoords );
+} );
]]></code>
<height>300</height>
<css><![CDATA[
@@ -112,5 +110,23 @@ $( "div" ).mousemove(function( event ) {
</example>
<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>mousemove event</title>
+ <desc>Trigger the "mousemove" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""mousemove"" type="string">
+ <desc>The string <code>"mousemove"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "mousemove", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
</entry>
+
+</entries>
diff --git a/entries/mouseout-shorthand.xml b/entries/mouseout-shorthand.xml
new file mode 100644
index 000000000..25761ce44
--- /dev/null
+++ b/entries/mouseout-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="mouseout" return="jQuery" deprecated="3.3">
+ <title>.mouseout()</title>
+ <desc>Bind an event handler to the "mouseout" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.mouseout( handler )</code> or <code>.mouseout( eventData, handler )</code>, use <a href="/https/github.com/mouseout/#on1"><code>.on( "mouseout", handler )</code></a> or <a href="/https/github.com/mouseout/#on1"><code>.on( "mouseout", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.mouseout()</code>, use <a href="/https/github.com/mouseout/#trigger2"><code>.trigger( "mouseout" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/mouseout.xml b/entries/mouseout.xml
index 664e2164b..3b0148287 100644
--- a/entries/mouseout.xml
+++ b/entries/mouseout.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="mouseout" return="jQuery">
- <title>.mouseout()</title>
- <desc>Bind an event handler to the "mouseout" JavaScript event, or trigger that event on an element.</desc>
+<entries>
+<desc>Bind an event handler to the "mouseout" event, or trigger that event on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>mouseout event</title>
+ <desc>Bind an event handler to the "mouseout" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""mouseout"" type="string">
+ <desc>The string <code>"mouseout"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,11 +18,10 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
- <p>This method is a shortcut for <code>.on( "mouseout", handler )</code> in the first two variation, and <code>.trigger( "mouseout" )</code> in the third.</p>
+ <div class="warning">
+ <p>This page describes the <code>mouseout</code> event. For the deprecated <code>.mouseout()</code> method, see <a href="/https/github.com/mouseout-shorthand/"><code>.mouseout()</code></a>.</p>
+ </div>
<p>The <code>mouseout</code> event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.</p>
<p>For example, consider the HTML:</p>
<pre><code>
@@ -38,20 +36,21 @@
</div>
<div id="log"></div>
</code></pre>
- <p class="image">
+ <figure>
<img src="/https/github.com/resources/0042_05_07.png" alt=""/>
- </p>
+ <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
+ </figure>
<p>The event handler can be bound to any element:</p>
<pre><code>
-$( "#outer" ).mouseout(function() {
- $( "#log" ).append( "Handler for .mouseout() called." );
-});
+$( "#outer" ).on( "mouseout", function() {
+ $( "#log" ).append( "Handler for `mouseout` called." );
+} );
</code></pre>
- <p>Now when the mouse pointer moves out of the <samp>Outer</samp> <code><div></code>, the message is appended to <code><div id="log"></code>. To trigger the event manually, apply <code>.mouseout()</code> without an argument::</p>
+ <p>Now when the mouse pointer moves out of the <samp>Outer</samp> <code><div></code>, the message is appended to <code><div id="log"></code>. To trigger the event manually, use <code>.trigger( "mouseout" )</code>:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( "#outer" ).mouseout();
-});
+$( "#other" ).on( "click", function() {
+ $( "#outer" ).trigger( "mouseout" );
+} );
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also append the message.</p>
<p>This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the <samp>Inner</samp> element in this example, a <code>mouseout</code> event will be sent to that, then trickle up to <samp>Outer</samp>. This can trigger the bound <code>mouseout</code> handler at inopportune times. See the discussion for <code>.<a href="/https/github.com/mouseleave/">mouseleave</a>()</code> for a useful alternative.</p>
@@ -82,23 +81,23 @@ $( "#other" ).click(function() {
<code><![CDATA[
var i = 0;
$( "div.overout" )
- .mouseout(function() {
- $( "p:first", this ).text( "mouse out" );
- $( "p:last", this ).text( ++i );
- })
- .mouseover(function() {
- $( "p:first", this ).text( "mouse over" );
- });
+ .on( "mouseout", function() {
+ $( "p", this ).first().text( "mouse out" );
+ $( "p", this ).last().text( ++i );
+ } )
+ .on( "mouseover", function() {
+ $( "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 );
+ } );
]]></code>
<html><![CDATA[
<div class="out overout">
@@ -116,5 +115,23 @@ $( "div.enterleave" )
</example>
<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>mouseout event</title>
+ <desc>Trigger the "mouseout" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""mouseout"" type="string">
+ <desc>The string <code>"mouseout"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "mouseout", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
+</entry>
+
+</entries>
diff --git a/entries/mouseover-shorthand.xml b/entries/mouseover-shorthand.xml
new file mode 100644
index 000000000..25bc4c013
--- /dev/null
+++ b/entries/mouseover-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="mouseover" return="jQuery" deprecated="3.3">
+ <title>.mouseover()</title>
+ <desc>Bind an event handler to the "mouseover" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.mouseover( handler )</code> or <code>.mouseover( eventData, handler )</code>, use <a href="/https/github.com/mouseover/#on1"><code>.on( "mouseover", handler )</code></a> or <a href="/https/github.com/mouseover/#on1"><code>.on( "mouseover", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.mouseover()</code>, use <a href="/https/github.com/mouseover/#trigger2"><code>.trigger( "mouseover" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/mouseover.xml b/entries/mouseover.xml
index d8e8b0b09..6897db069 100644
--- a/entries/mouseover.xml
+++ b/entries/mouseover.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="mouseover" return="jQuery">
- <title>.mouseover()</title>
- <desc>Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element.</desc>
+<entries>
+<desc>Bind an event handler to the "mouseover" event, or trigger that event on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>mouseover event</title>
+ <desc>Bind an event handler to the "mouseover" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""mouseover"" type="string">
+ <desc>The string <code>"mouseover"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,11 +18,10 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
- <p>This method is a shortcut for <code>.on( "mouseover", handler )</code> in the first two variations, and <code>.trigger( "mouseover" )</code> in the third.</p>
+ <div class="warning">
+ <p>This page describes the <code>mouseover</code> event. For the deprecated <code>.mouseover()</code> method, see <a href="/https/github.com/mouseover-shorthand/"><code>.mouseover()</code></a>.</p>
+ </div>
<p>The <code>mouseover</code> event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.</p>
<p>For example, consider the HTML:</p>
<pre><code>
@@ -38,20 +36,21 @@
</div>
<div id="log"></div>
</code></pre>
- <p class="image">
+ <figure>
<img src="/https/github.com/resources/0042_05_06.png" alt=""/>
- </p>
+ <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
+ </figure>
<p>The event handler can be bound to any element:</p>
<pre><code>
-$( "#outer" ).mouseover(function() {
- $( "#log" ).append( "<div>Handler for .mouseover() called.</div>" );
-});
+$( "#outer" ).on( "mouseover", function() {
+ $( "#log" ).append( "<div>Handler for `mouseover` called.</div>" );
+} );
</code></pre>
<p>Now when the mouse pointer moves over the <samp>Outer</samp> <code><div></code>, the message is appended to <code><div id="log"></code>. We can also trigger the event when another element is clicked:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( "#outer" ).mouseover();
-});
+$( "#other" ).on( "click", function() {
+ $( "#outer" ).trigger( "mouseover" );
+} );
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also append the message.</p>
<p>This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the <samp>Inner</samp> element in this example, a <code>mouseover</code> event will be sent to that, then trickle up to <samp>Outer</samp>. This can trigger our bound <code>mouseover</code> handler at inopportune times. See the discussion for <code>.mouseenter()</code> for a useful alternative.</p>
@@ -82,23 +81,23 @@ $( "#other" ).click(function() {
<code><![CDATA[
var i = 0;
$( "div.overout" )
- .mouseover(function() {
+ .on( "mouseover", function() {
i += 1;
$( this ).find( "span" ).text( "mouse over x " + i );
- })
- .mouseout(function() {
+ } )
+ .on( "mouseout", function() {
$( this ).find( "span" ).text( "mouse out " );
- });
+ } );
var n = 0;
$( "div.enterleave" )
- .mouseenter(function() {
+ .on( "mouseenter", function() {
n += 1;
$( this ).find( "span" ).text( "mouse enter x " + n );
- })
- .mouseleave(function() {
+ } )
+ .on( "mouseleave", function() {
$( this ).find( "span" ).text( "mouse leave" );
- });
+ } );
]]></code>
<html><![CDATA[
<div class="out overout">
@@ -116,5 +115,23 @@ $( "div.enterleave" )
</example>
<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>mouseover event</title>
+ <desc>Trigger the "mouseover" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""mouseover"" type="string">
+ <desc>The string <code>"mouseover"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "mouseover", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
</entry>
+
+</entries>
diff --git a/entries/mouseup-shorthand.xml b/entries/mouseup-shorthand.xml
new file mode 100644
index 000000000..edbf836c5
--- /dev/null
+++ b/entries/mouseup-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="mouseup" return="jQuery" deprecated="3.3">
+ <title>.mouseup()</title>
+ <desc>Bind an event handler to the "mouseup" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.mouseup( handler )</code> or <code>.mouseup( eventData, handler )</code>, use <a href="/https/github.com/mouseup/#on1"><code>.on( "mouseup", handler )</code></a> or <a href="/https/github.com/mouseup/#on1"><code>.on( "mouseup", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.mouseup()</code>, use <a href="/https/github.com/mouseup/#trigger2"><code>.trigger( "mouseup" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/mouseup.xml b/entries/mouseup.xml
index 80d0f6195..205c0794e 100644
--- a/entries/mouseup.xml
+++ b/entries/mouseup.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="mouseup" return="jQuery">
- <title>.mouseup()</title>
- <desc>Bind an event handler to the "mouseup" JavaScript event, or trigger that event on an element.</desc>
+<entries>
+<desc>Bind an event handler to the "mouseup" event, or trigger that event on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>mouseup event</title>
+ <desc>Bind an event handler to the "mouseup" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""mouseup"" type="string">
+ <desc>The string <code>"mouseup"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,11 +18,10 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
- <p>This method is a shortcut for <code>.on('mouseup', handler)</code> in the first variation, and <code>.trigger('mouseup')</code> in the second.</p>
+ <div class="warning">
+ <p>This page describes the <code>mouseup</code> event. For the deprecated <code>.mouseup()</code> method, see <a href="/https/github.com/mouseup-shorthand/"><code>.mouseup()</code></a>.</p>
+ </div>
<p>The <code>mouseup</code> event is sent to an element when the mouse pointer is over the element, and the mouse button is released. Any HTML element can receive this event.</p>
<p>For example, consider the HTML:</p>
<pre><code>
@@ -34,24 +32,25 @@
Trigger the handler
</div>
</code></pre>
- <p class="image">
+ <figure>
<img src="/https/github.com/resources/0042_05_02.png" alt=""/>
- </p>
+ <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
+ </figure>
<p>The event handler can be bound to any <code><div></code>:</p>
<pre><code>
-$( "#target" ).mouseup(function() {
- alert( "Handler for .mouseup() called." );
-});
+$( "#target" ).on( "mouseup", function() {
+ alert( "Handler for `mouseup` called." );
+} );
</code></pre>
<p>Now if we click on this element, the alert is displayed:</p>
<p>
- <samp>Handler for .mouseup() called.</samp>
+ <samp>Handler for `mouseup` called.</samp>
</p>
<p>We can also trigger the event when a different element is clicked:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( "#target" ).mouseup();
-});
+$( "#other" ).on( "click", function() {
+ $( "#target" ).trigger( "mouseup" );
+} );
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also alert the message.</p>
<p>If the user clicks outside an element, drags onto it, and releases the button, this is still counted as a <code>mouseup</code> event. This sequence of actions is not treated as a button press in most user interfaces, so it is usually better to use the <code>click</code> event unless we know that the <code>mouseup</code> event is preferable for a particular situation.</p>
@@ -60,12 +59,12 @@ $( "#other" ).click(function() {
<desc>Show texts when mouseup and mousedown event triggering.</desc>
<code><![CDATA[
$( "p" )
- .mouseup(function() {
+ .on( "mouseup", function() {
$( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
- })
- .mousedown(function() {
+ } )
+ .on( "mousedown", function() {
$( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
- });
+ } );
]]></code>
<html><![CDATA[
<p>Press mouse and release here.</p>
@@ -73,5 +72,23 @@ $( "p" )
</example>
<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>mouseup event</title>
+ <desc>Trigger the "mouseup" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""mouseup"" type="string">
+ <desc>The string <code>"mouseup"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "mouseup", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/mouse-events"/>
+ <category slug="version/1.0"/>
</entry>
+
+</entries>
diff --git a/entries/next-adjacent-Selector.xml b/entries/next-adjacent-selector.xml
similarity index 100%
rename from entries/next-adjacent-Selector.xml
rename to entries/next-adjacent-selector.xml
diff --git a/entries/nextAll.xml b/entries/nextAll.xml
index 8965aab67..e60220934 100644
--- a/entries/nextAll.xml
+++ b/entries/nextAll.xml
@@ -30,7 +30,7 @@ $( "li.third-item" ).nextAll().css( "background-color", "red" );
<example>
<desc>Locate all the divs after the first and give them a class.</desc>
<code><![CDATA[
-$( "div:first" ).nextAll().addClass( "after" );
+$( "div" ).first().nextAll().addClass( "after" );
]]></code>
<css><![CDATA[
div {
diff --git a/entries/not.xml b/entries/not.xml
index 059e5e290..8a41ddf1c 100644
--- a/entries/not.xml
+++ b/entries/not.xml
@@ -40,9 +40,9 @@
</code></pre>
<p>We can apply this method to the set of list items:</p>
<pre><code>
-$( "li" ).not( ":even" ).css( "background-color", "red" );
+$( "li" ).not( ":nth-child(2n)" ).css( "background-color", "red" );
</code></pre>
- <p>The result of this call is a red background for items 2 and 4, as they do not match the selector (recall that :even and :odd use 0-based indexing).</p>
+ <p>The result of this call is a red background for items 1, 3 and 5, as they do not match the selector.</p>
<h4>Removing Specific Elements</h4>
<p>The second version of the <code>.not()</code> method allows us to remove elements from the matched set, assuming we have found those elements previously by some other means. For example, suppose our list had an id applied to one of its items:</p>
<pre><code>
@@ -61,6 +61,7 @@ $( "li" ).not( document.getElementById( "notli" ) )
</code></pre>
<p>This statement changes the color of items 1, 2, 4, and 5. We could have accomplished the same thing with a simpler jQuery expression, but this technique can be useful when, for example, other libraries provide references to plain DOM nodes.</p>
<p>As of jQuery 1.4, the <code>.not()</code> method can take a function as its argument in the same way that <code>.filter()</code> does. Elements for which the function returns <code>true</code> are excluded from the filtered set; all other elements are included.</p>
+ <p><strong>Note:</strong> When a CSS selector string is passed to <code>.not()</code>, text and comment nodes will always be removed from the resulting jQuery object during the filtering process. When a specific node or array of nodes are provided, text or comment nodes will only be removed from the jQuery object if they match one of the nodes in the filtering array.</p>
</longdesc>
<example>
<desc>Adds a border to divs that are not green or blue.</desc>
diff --git a/entries/nth-child-selector.xml b/entries/nth-child-selector.xml
index 40d467874..8a5efc4c0 100644
--- a/entries/nth-child-selector.xml
+++ b/entries/nth-child-selector.xml
@@ -10,9 +10,9 @@
</signature>
<desc>Selects all elements that are the nth-child of their parent.</desc>
<longdesc>
- <p>Because jQuery's implementation of <code>:nth-</code> selectors is strictly derived from the CSS specification, the value of <code>n</code> is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as <code>:eq()</code> or <code>:even</code> jQuery follows JavaScript's "0-indexed" counting. Given a single <code><ul></code> containing two <code><li></code>s, <code>$( "li:nth-child(1)" )</code> selects the first <code><li></code> while <code>$( "li:eq(1)" )</code> selects the second.</p>
- <p>The <code>:nth-child(n)</code> pseudo-class is easily confused with <code>:eq(n)</code>, even though the two can result in dramatically different matched elements. With <code>:nth-child(n)</code>, 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 <code>:eq(n)</code> 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.</p>
- <p>Further discussion of this unusual usage can be found in the <a href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">W3C CSS specification</a>.</p>
+ <p>Because jQuery's implementation of <code>:nth-</code> selectors is strictly derived from the CSS specification, the value of <code>n</code> is "1-indexed", meaning that the counting starts at 1. jQuery methods like <a href="/https/github.com/first/"><code>.first()</code></a> or <a href="/https/github.com/eq/"><code>.eq()</code></a> jQuery follows JavaScript's "0-indexed" counting. Given a single <code><ul></code> containing two <code><li></code>s, <code>$( "li:nth-child(1)" )</code> selects the first <code><li></code> while <code>$( "li" ).eq( 1 )</code> selects the second.</p>
+ <p>The <code>:nth-child(n)</code> pseudo-class is easily confused with the <code>.eq( n )</code> call, even though the two can result in dramatically different matched elements. With <code>:nth-child(n)</code>, 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 <code>.eq( n )</code> 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.</p>
+ <p>Further discussion of this unusual usage can be found in the <a href="https://www.w3.org/TR/css3-selectors/#nth-child-pseudo">W3C CSS specification</a>.</p>
</longdesc>
<example>
<desc>Find the second li in each matched ul and note it.</desc>
@@ -51,12 +51,17 @@ $( "ul li:nth-child(2)" ).append( "<span> - 2nd!</span>" );
]]></html>
</example>
<example>
- <desc>This is a playground to see how the selector works with different strings. Notice that this is different from the :even and :odd which have no regard for parent and just filter the list of elements to every other one. The :nth-child, however, counts the index of the child to its particular parent. In any case, it's easier to see than explain so...</desc>
+ <desc>This is a playground to see how the selector works with different strings. Notice that this is different from the <a href="/https/github.com/even/"><code>even</code></a> and <a href="/https/github.com/odd/"><code>odd</code></a> which have no regard for parent and just filter the list of elements to every other one. The :nth-child, however, counts the index of the child to its particular parent. In any case, it's easier to see than explain so...</desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
var str = $( this ).text();
+ var method = $( this ).attr( "data-method" );
$( "tr" ).css( "background", "white" );
- $( "tr" + str ).css( "background", "#ff0000" );
+ if ( method ) {
+ $( "tr" )[ method ]().css( "background", "#ff0000" );
+ } else {
+ $( "tr" + str ).css( "background", "#ff0000" );
+ }
$( "#inner" ).text( str );
});
]]></code>
@@ -94,8 +99,8 @@ $( "button" ).click(function() {
<div>
<button>:nth-child(3n+1)</button>
<button>:nth-child(3n+2)</button>
- <button>:even</button>
- <button>:odd</button>
+ <button data-method="even">.even()</button>
+ <button data-method="odd">.odd()</button>
</div>
<div>
diff --git a/entries/nth-last-child-selector.xml b/entries/nth-last-child-selector.xml
index ce21de1fc..def39a3bd 100644
--- a/entries/nth-last-child-selector.xml
+++ b/entries/nth-last-child-selector.xml
@@ -10,8 +10,8 @@
</signature>
<desc>Selects all elements that are the nth-child of their parent, counting from the last element to the first.</desc>
<longdesc>
- <p>Because jQuery's implementation of <code>:nth-</code> selectors is strictly derived from the CSS specification, the value of <code>n</code> is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as <code>:eq()</code> or <code>:even</code> jQuery follows JavaScript's "0-indexed" counting. Given a single <code><ul></code> containing three <code><li></code>s, <code>$( "li:nth-last-child(1)" )</code> selects the third, last, <code><li></code>.</p>
- <p>Further discussion of this usage can be found in the <a href="http://www.w3.org/TR/css3-selectors/#nth-last-child-pseudo">W3C CSS specification</a>.</p>
+ <p>Because jQuery's implementation of <code>:nth-</code> selectors is strictly derived from the CSS specification, the value of <code>n</code> is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as <a href="/https/github.com/first/"><code>.first()</code></a> or <a href="/https/github.com/eq/"><code>.eq()</code></a> jQuery follows JavaScript's "0-indexed" counting. Given a single <code><ul></code> containing three <code><li></code>s, <code>$( "li:nth-last-child(1)" )</code> selects the third, last, <code><li></code>.</p>
+ <p>Further discussion of this usage can be found in the <a href="https://www.w3.org/TR/css3-selectors/#nth-last-child-pseudo">W3C CSS specification</a>.</p>
</longdesc>
<example>
<desc>Find the second to last li in each matched ul and note it.</desc>
@@ -51,7 +51,7 @@ $( "ul li:nth-last-child(2)" ).append( "<span> - 2nd to last!</span>" );
<example>
<desc>This is a playground to see how the selector works with different strings. </desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
var str = $( this ).text();
$( "tr" ).css( "background", "white" );
$( "tr" + str ).css( "background", "#ff0000" );
diff --git a/entries/nth-last-of-type-selector.xml b/entries/nth-last-of-type-selector.xml
index 91b3db025..8b517e5e7 100644
--- a/entries/nth-last-of-type-selector.xml
+++ b/entries/nth-last-of-type-selector.xml
@@ -8,10 +8,10 @@
<desc>The index of each child to match, starting with the last one (<code>1</code>), the string <code>even</code> or <code>odd</code>, or an equation ( eg. <code>:nth-last-of-type(even)</code>, <code>:nth-last-of-type(4n)</code> )</desc>
</argument>
</signature>
- <desc>Selects all elements that are the nth-child of their parent, counting from the last element to the first.</desc>
+ <desc>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.</desc>
<longdesc>
- <p>Because jQuery's implementation of <code>:nth-</code> selectors is strictly derived from the CSS specification, the value of <code>n</code> is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as <code>:eq()</code> or <code>:even</code> jQuery follows JavaScript's "0-indexed" counting. Given a single <code><ul></code> containing three <code><li></code>s, <code>$('li:nth-last-of-type(1)')</code> selects the third, last, <code><li></code>.</p>
- <p>Further discussion of this usage can be found in the <a href="http://www.w3.org/TR/css3-selectors/#nth-last-of-type-pseudo">W3C CSS specification</a>.</p>
+ <p>Because jQuery's implementation of <code>:nth-</code> selectors is strictly derived from the CSS specification, the value of <code>n</code> is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as <a href="/https/github.com/first/"><code>.first()</code></a> or <a href="/https/github.com/eq/"><code>.eq()</code></a> jQuery follows JavaScript's "0-indexed" counting. Given a single <code><ul></code> containing three <code><li></code>s, <code>$('li:nth-last-of-type(1)')</code> selects the third, last, <code><li></code>.</p>
+ <p>Further discussion of this usage can be found in the <a href="https://www.w3.org/TR/css3-selectors/#nth-last-of-type-pseudo">W3C CSS specification</a>.</p>
</longdesc>
<example>
<desc>Find the second to last li in each matched ul and note it.</desc>
@@ -52,7 +52,7 @@ $( "ul li:nth-last-of-type(2)" ).append( "<span> - 2nd to last!</span>" );
<example>
<desc>This is a playground to see how the selector works with different strings. </desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
var str = $( this ).text();
$( "tr" ).css( "background", "white" );
$( "tr" + str ).css( "background", "#ff0000" );
diff --git a/entries/nth-of-type-selector.xml b/entries/nth-of-type-selector.xml
index 839cb8f0b..0d93ab8cc 100644
--- a/entries/nth-of-type-selector.xml
+++ b/entries/nth-of-type-selector.xml
@@ -10,8 +10,8 @@
</signature>
<desc>Selects all elements that are the nth child of their parent in relation to siblings with the same element name.</desc>
<longdesc>
- <p>Because jQuery's implementation of <code>:nth-</code> selectors is strictly derived from the CSS specification, the value of <code>n</code> is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as <code>:eq()</code> or <code>:even</code> jQuery follows JavaScript's "0-indexed" counting. </p>
- <p>Further discussion of this usage can be found in the <a href="http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo">W3C CSS specification</a>.</p>
+ <p>Because jQuery's implementation of <code>:nth-</code> selectors is strictly derived from the CSS specification, the value of <code>n</code> is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as <a href="/https/github.com/first/"><code>.first()</code></a> or <a href="/https/github.com/eq/"><code>.eq()</code></a> jQuery follows JavaScript's "0-indexed" counting. </p>
+ <p>Further discussion of this usage can be found in the <a href="https://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo">W3C CSS specification</a>.</p>
</longdesc>
<example>
<desc>Find each span that is second in relation to its sibling spans.</desc>
diff --git a/entries/odd-selector.xml b/entries/odd-selector.xml
index a2520812f..8b907e15d 100644
--- a/entries/odd-selector.xml
+++ b/entries/odd-selector.xml
@@ -1,12 +1,15 @@
<?xml version="1.0"?>
-<entry type="selector" name="odd" return="">
+<entry type="selector" name="odd" return="" deprecated="3.4">
<title>:odd Selector</title>
<sample>:odd</sample>
<signature>
<added>1.0</added>
</signature>
- <desc>Selects odd elements, zero-indexed. See also <a href="/Selectors/even/">even</a>.</desc>
+ <desc>Selects odd elements, zero-indexed. See also <a href="/https/github.com/even-selector/"><code>:even</code></a>.</desc>
<longdesc>
+ <div class="warning">
+ <p><strong>As of jQuery 3.4</strong>, the <code>:odd</code> pseudo-class is deprecated. Remove it from your selectors and filter the results later using <a href="/https/github.com/odd/"><code>.odd()</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>:odd</code> selects the second element, fourth element, and so on within the matched set.</p>
</longdesc>
<note id="jquery-selector-extension" type="additional" data-selector=":odd"/>
@@ -33,4 +36,5 @@ $( "tr:odd" ).css( "background-color", "#bbbbff" );
<category slug="selectors/basic-filter-selectors"/>
<category slug="selectors/jquery-selector-extensions"/>
<category slug="version/1.0"/>
+ <category slug="deprecated/deprecated-3.4"/>
</entry>
diff --git a/entries/odd.xml b/entries/odd.xml
new file mode 100644
index 000000000..52fe3baf6
--- /dev/null
+++ b/entries/odd.xml
@@ -0,0 +1,47 @@
+<?xml version="1.0"?>
+<entry type="method" name="odd" return="jQuery">
+ <title>.odd()</title>
+ <signature>
+ <added>3.5</added>
+ </signature>
+ <desc>Reduce the set of matched elements to the odd ones in the set, numbered from zero.</desc>
+ <longdesc>
+ <p>Given a jQuery object that represents a set of DOM elements, the <code>.odd()</code> method constructs a new jQuery object from the odd elements in that set. Counting starts from zero!</p>
+ <p>Consider a page with a simple list on it:</p>
+ <pre><code>
+<ul>
+ <li>list item 1</li>
+ <li>list item 2</li>
+ <li>list item 3</li>
+ <li>list item 4</li>
+ <li>list item 5</li>
+</ul>
+ </code></pre>
+ <p>We can apply this method to the set of list items:</p>
+ <pre><code>
+$( "li" ).odd().css( "background-color", "red" );
+ </code></pre>
+ <p>The result of this call is a red background for the second & 4th items.</p>
+ </longdesc>
+ <example>
+ <desc>Highlight the odd items in a list.</desc>
+ <css><![CDATA[
+ .highlight {
+ background-color: yellow;
+ }
+]]></css>
+ <code><![CDATA[
+$( "ul li" ).odd().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/off.xml b/entries/off.xml
index b83e38686..fba3925c0 100644
--- a/entries/off.xml
+++ b/entries/off.xml
@@ -24,6 +24,12 @@
<desc>A selector which should match the one originally passed to <code>.on()</code> when attaching event handlers.</desc>
</argument>
</signature>
+ <signature>
+ <added>1.7</added>
+ <argument name="event" type="Event">
+ <desc>A <a href="/https/github.com/category/events/event-object/"><code>jQuery.Event</code></a> object.</desc>
+ </argument>
+ </signature>
<signature>
<added>1.7</added>
</signature>
@@ -40,13 +46,13 @@
function flash() {
$( "div" ).show().fadeOut( "slow" );
}
-$( "#bind" ).click(function() {
+$( "#bind" ).on( "click", function() {
$( "body" )
.on( "click", "#theone", flash )
.find( "#theone" )
.text( "Can Click!" );
});
-$( "#unbind" ).click(function() {
+$( "#unbind" ).on( "click", function() {
$( "body" )
.off( "click", "#theone", flash )
.find( "#theone" )
diff --git a/entries/offset.xml b/entries/offset.xml
index 9b1a0093d..819232879 100644
--- a/entries/offset.xml
+++ b/entries/offset.xml
@@ -8,18 +8,18 @@
</signature>
<desc>Get the current coordinates of the first element in the set of matched elements, relative to the document.</desc>
<longdesc>
- <p>The <code>.offset()</code> method allows us to retrieve the current position of an element <em>relative to the document</em>. Contrast this with <code>.position()</code>, which retrieves the current position <em>relative to the offset parent</em>. When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), <code>.offset()</code> is more useful.</p>
+ <p>The <code>.offset()</code> method allows us to retrieve the current position of an element (specifically its border box, which excludes margins) <em>relative to the document</em>. Contrast this with <code><a href="/https/github.com/position/">.position()</a></code>, which retrieves the current position <em>relative to the offset parent</em>. When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), <code>.offset()</code> is more useful.</p>
<p><code>.offset()</code> returns an object containing the properties <code>top</code> and <code>left</code>.</p>
<div class="warning">
- <p><strong>Note:</strong> jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.</p>
+ <p><strong>Note:</strong> jQuery does not support getting the offset coordinates of hidden elements or accounting for margins set on the <code><html></code> document element.</p>
<p>While it is possible to get the coordinates of elements with <code>visibility:hidden</code> set, <code>display:none</code> is excluded from the rendering tree and thus has a position that is undefined.</p>
</div>
</longdesc>
- <note id="dimensions-number" type="additional" data-title=".offset()"/>
+ <note id="dimensions-number" type="additional" data-title=".offset()"/>
<example>
<desc>Access the offset of the second paragraph:</desc>
<code><![CDATA[
-var p = $( "p:last" );
+var p = $( "p" ).last();
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
]]></code>
@@ -35,7 +35,7 @@ p.html( "left: " + offset.left + ", top: " + offset.top );
<example>
<desc>Click to see the offset.</desc>
<code><![CDATA[
-$( "*", document.body ).click(function( event ) {
+$( "*", document.body ).on( "click", function( event ) {
var offset = $( this ).offset();
event.stopPropagation();
$( "#result" ).text( this.tagName +
@@ -90,18 +90,18 @@ $( "*", document.body ).click(function( event ) {
<argument name="function" type="Function">
<argument name="index" type="Integer" />
<argument name="coords" type="PlainObject" />
- <return type="PlainObject" />
+ <return type="PlainObject" />
<desc>A function to return the coordinates to set. Receives the index of the element in the collection as the first argument and the current coordinates as the second argument. The function should return an object with the new <code>top</code> and <code>left</code> properties.</desc>
</argument>
</signature>
<desc>Set the current coordinates of every element in the set of matched elements, relative to the document.</desc>
<longdesc>
- <p>The <code>.offset()</code> setter method allows us to reposition an element. The element's position is specified <em>relative to the document</em>. If the element's <code>position</code> style property is currently <code>static</code>, it will be set to <code>relative</code> to allow for this repositioning.</p>
+ <p>The <code>.offset()</code> setter method allows us to reposition an element. The element's border-box position is specified <em>relative to the document</em>. If the element's <code>position</code> style property is currently <code>static</code>, it will be set to <code>relative</code> to allow for this repositioning.</p>
</longdesc>
<example>
<desc>Set the offset of the second paragraph:</desc>
<code><![CDATA[
-$( "p:last" ).offset({ top: 10, left: 30 });
+$( "p" ).last().offset({ top: 10, left: 30 });
]]></code>
<css><![CDATA[
p {
diff --git a/entries/offsetParent.xml b/entries/offsetParent.xml
index 363c32084..c49a7044c 100644
--- a/entries/offsetParent.xml
+++ b/entries/offsetParent.xml
@@ -59,4 +59,5 @@ $( "li.item-a" ).offsetParent().css( "background-color", "red" );
</example>
<category slug="offset"/>
<category slug="traversing/tree-traversal"/>
+ <category slug="version/1.2.6"/>
</entry>
diff --git a/entries/on.xml b/entries/on.xml
index eeab0009d..c874c4b68 100644
--- a/entries/on.xml
+++ b/entries/on.xml
@@ -34,28 +34,28 @@
<longdesc>
<p>The <code>.on()</code> method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the <code>.on()</code> method provides all functionality required for attaching event handlers. For help in converting from older jQuery event methods, see <a href="/https/github.com/bind/"><code>.bind()</code></a>, <a href="/https/github.com/delegate/"><code>.delegate()</code></a>, and <a href="/https/github.com/live/"><code>.live()</code></a>. To remove events bound with <code>.on()</code>, see <a href="/https/github.com/off/"><code>.off()</code></a>. To attach an event that runs only once and then removes itself, see <a href="/https/github.com/one/"><code>.one()</code></a></p>
<h2 id="event-names">Event names and namespaces</h2>
- <p>Any event names can be used for the <code>events</code> argument. jQuery will pass through the browser's standard JavaScript event types, calling the <code>handler</code> function when the browser generates events due to user actions such as <code>click</code>. In addition, the <a href="/https/github.com/trigger/"><code>.trigger()</code></a> method can trigger both standard browser event names and custom event names to call attached handlers. Event names should only contain alphanumerics, underscore, and colon chraracters.</p>
- <p>An event name can be qualified by <em>event namespaces</em> that simplify removing or triggering the event. For example, <code>"click.myPlugin.simple"</code> defines both the myPlugin and simple namespaces for this particular click event. A click event handler attached via that string could be removed with <code>.off("click.myPlugin")</code> or <code>.off("click.simple")</code> without disturbing other click handlers attached to the elements. Namespaces are similar to CSS classes in that they are not hierarchical; only one name needs to match. Namespaces beginning with an underscore are reserved for jQuery's use.</p>
+ <p>Any event names can be used for the <code>events</code> argument. jQuery will pass through the browser's standard JavaScript event types, calling the <code>handler</code> function when the browser generates events due to user actions such as <code>click</code>. In addition, the <a href="/https/github.com/trigger/"><code>.trigger()</code></a> method can trigger both standard browser event names and custom event names to call attached handlers. Event names should only contain alphanumerics, underscore, and colon characters.</p>
+ <p>An event name can be qualified by <em>event namespaces</em> that simplify removing or triggering the event. For example, <code>"click.myPlugin.simple"</code> defines both the myPlugin and simple namespaces for this particular click event. A click event handler attached via that string could be removed with <code>.off("click.myPlugin")</code> or <code>.off("click.simple")</code> without disturbing other click handlers attached to the elements. Namespaces are similar to CSS classes in that they are not hierarchical; only one name needs to match. Namespaces should contain upper/lowercase letters and digits only.</p>
<p>In the second form of <code>.on()</code>, the <code>events</code> argument is a plain object. The keys are strings in the same form as the <code>events</code> argument with space-separated event type names and optional namespaces. The value for each key is a function (or <code>false</code> value) that is used as the <code>handler</code> instead of the final argument to the method. In other respects, the two forms are identical in their behavior as described below.</p>
- <h2 id="direct-and-delegated-events">Direct and delegated events</h2>
+ <h2 id="direct-and-delegated-events">Direct and delegated event handlers</h2>
<p>The majority of browser events <em>bubble</em>, or <em>propagate</em>, from the deepest, innermost element (the <strong>event target</strong>) in the document where they occur all the way up to the body and the <code>document</code> element. In Internet Explorer 8 and lower, a few events such as <code>change</code> and <code>submit</code> do not natively bubble but jQuery patches these to bubble and create consistent cross-browser behavior.</p>
<p>If <code>selector</code> is omitted or is null, the event handler is referred to as <em>direct</em> or <em>directly-bound</em>. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.</p>
<p>When a <code>selector</code> is provided, the event handler is referred to as <em>delegated</em>. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.</p>
- <p><strong>Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to <code>.on()</code>.</strong> To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers <em>after</em> the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.</p>
- <p>Delegated events have the advantage that they can process events from <em>descendant elements</em> that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or <code>document</code> if the event handler wants to monitor all bubbling events in the document. The <code>document</code> element is available in the <code>head</code> of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.</p>
- <p>In addition to their ability to handle events on descendant elements not yet created, another advantage of delegated events is their potential for much lower overhead when many elements must be monitored. On a data table with 1,000 rows in its <code>tbody</code>, this example attaches a handler to 1,000 elements:</p>
+ <p><strong>Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to <code>.on()</code></strong>. To ensure the elements are present and can be selected, place scripts after the elements in the HTML markup or perform event binding inside a document ready handler. Alternatively, use delegated event handlers to attach event handlers.</p>
+ <p><strong>Delegated event handlers</strong> have the advantage that they can process events from <em>descendant elements</em> that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated event handlers to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or <code>document</code> if the event handler wants to monitor all bubbling events in the document. The <code>document</code> element is available in the <code>head</code> of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.</p>
+ <p>In addition to their ability to handle events on descendant elements not yet created, another advantage of delegated event handlers is their potential for much lower overhead when many elements must be monitored. On a data table with 1,000 rows in its <code>tbody</code>, this example attaches a handler to 1,000 elements:</p>
<pre><code>
$( "#dataTable tbody tr" ).on( "click", function() {
- alert( $( this ).text() );
+ console.log( $( this ).text() );
});
</code></pre>
- <p>A delegated-events approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked <code>tr</code> to <code>tbody</code>):</p>
+ <p>An event-delegation approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked <code>tr</code> to <code>tbody</code>):</p>
<pre><code>
$( "#dataTable tbody" ).on( "click", "tr", function() {
- alert( $( this ).text() );
+ console.log( $( this ).text() );
});
</code></pre>
- <p><strong>Note:</strong> Delegated events do not work for SVG.</p>
+ <p><strong>Note:</strong> Delegated event handlers do not work for SVG.</p>
<h2 id="event-handler">The event handler and its environment</h2>
<p>The <code>handler</code> argument is a function (or the value <code>false</code>, see below), and is required unless you pass an object for the <code>events</code> argument. You can provide an anonymous handler function at the point of the <code>.on()</code> call, as the examples have done above, or declare a named function and pass its name:</p>
<pre><code>
@@ -66,7 +66,7 @@ $( "button" ).on( "click", notify );
</code></pre>
<p>When the browser triggers an event or other JavaScript calls jQuery's <code>.trigger()</code> method, jQuery passes the handler an <a href="/https/github.com/category/events/event-object/"><code>Event</code></a> object it can use to analyze and change the status of the event. This object is a <em>normalized subset</em> of data provided by the browser; the browser's unmodified native event object is available in <code>event.originalEvent</code>. For example, <a href="/https/github.com/event.type/"><code>event.type</code></a> contains the event name (e.g., "resize") and <a href="/https/github.com/event.target/"><code>event.target</code></a> indicates the deepest (innermost) element where the event occurred.</p>
<p>By default, most events bubble up from the original event target to the <code>document</code> element. At each element along the way, jQuery calls any matching event handlers that have been attached. A handler can prevent the event from bubbling further up the document tree (and thus prevent handlers on those elements from running) by calling <code>event.stopPropagation()</code>. Any other handlers attached on the current element <em>will</em> run however. To prevent that, call <code>event.stopImmediatePropagation()</code>. (Event handlers bound to an element are called in the same order that they were bound.)</p>
- <p>Similarly, a handler can call <code>event.preventDefault()</code> to cancel any default action that the browser may have for this event; for example, the default action on a <code>click</code> event is to follow the link. Not all browser events have default actions, and not all default actions can be canceled. See the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-types-list">W3C Events Specification</a> for details.</p>
+ <p>Similarly, a handler can call <code>event.preventDefault()</code> to cancel any default action that the browser may have for this event; for example, the default action on a <code>click</code> event is to follow the link. Not all browser events have default actions, and not all default actions can be canceled. See the <a href="https://www.w3.org/TR/DOM-Level-3-Events/#event-types-list">W3C Events Specification</a> for details.</p>
<p>Returning <code>false</code> from an event handler will automatically call <code>event.stopPropagation()</code> and <code>event.preventDefault()</code>. A <code>false</code> value can also be passed for the <code>handler</code> as a shorthand for <code>function(){ return false; }</code>. So, <code>$( "a.disabled" ).on( "click", false );</code> attaches an event handler to all links with class "disabled" that prevents them from being followed when they are clicked and also stops the event from bubbling. </p>
<p>When jQuery calls a handler, the <code>this</code> keyword is a reference to the element where the event is being delivered; for directly bound events this is the element where the event was attached and for delegated events this is an element matching <code>selector</code>. (Note that <code>this</code> may not be equal to <code>event.target</code> if the event has bubbled from a descendant element.) To create a jQuery object from the element so that it can be used with jQuery methods, use <code>$( this )</code>.</p>
<h2 id="passing-data">Passing data to the handler</h2>
@@ -90,12 +90,27 @@ $( "button" ).on( "click", {
<p>Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of <code>document</code> or <code>document.body</code> for delegated events on large documents.</p>
<p>jQuery can process simple selectors of the form <code>tag#id.class</code> very quickly when they are used to filter delegated events. So, <code>"#myForm"</code>, <code>"a.external"</code>, and <code>"button"</code> are all fast selectors. Delegated events that use more complex selectors, particularly hierarchical ones, can be several times slower--although they are still fast enough for most applications. Hierarchical selectors can often be avoided simply by attaching the handler to a more appropriate point in the document. For example, instead of <code>$( "body" ).on( "click", "#commentForm .addNew", addComment )</code> use <code>$( "#commentForm" ).on( "click", ".addNew", addComment )</code>.</p>
<h2 id="additional-notes">Additional notes</h2>
- <p>There are shorthand methods for some events such as <a href="/https/github.com/click/"><code>.click()</code></a> that can be used to attach or trigger event handlers. For a complete list of shorthand methods, see the <a href="/https/github.com/category/events/">events category</a>.</p>
+ <p>Some events have dedicated pages, describing specifics of their usage. For a complete list of those events, see the <a href="/https/github.com/category/events/">events category</a>.</p>
<p><em>Deprecated in jQuery 1.8, removed in 1.9:</em> The name <code>"hover"</code> used as a shorthand for the string <code>"mouseenter mouseleave"</code>. It attaches a <em>single event handler</em> for those two events, and the handler must examine <code>event.type</code> to determine whether the event is <code>mouseenter</code> or <code>mouseleave</code>. Do not confuse the "hover" pseudo-event-name with the <a href="/https/github.com/hover/"><code>.hover()</code></a> method, which accepts <em>one or two</em> functions.</p>
<p>jQuery's event system requires that a DOM element allow attaching data via a property on the element, so that events can be tracked and delivered. The <code>object</code>, <code>embed</code>, and <code>applet</code> elements cannot attach data, and therefore cannot have jQuery events bound to them.</p>
<p>The <code>focus</code> and <code>blur</code> events are specified by the W3C to not bubble, but jQuery defines cross-browser <code>focusin</code> and <code>focusout</code> events that do bubble. When <code>focus</code> and <code>blur</code> are used to attach delegated event handlers, jQuery maps the names and delivers them as <code>focusin</code> and <code>focusout</code> respectively. For consistency and clarity, use the bubbling event type names.</p>
<p>In all browsers, the <code>load</code>, <code>scroll</code>, and <code>error</code> events (e.g., on an <code><img></code> element) do not bubble. In Internet Explorer 8 and lower, the <code>paste</code> and <code>reset</code> events do not bubble. Such events are not supported for use with delegation, but they <em>can</em> be used when the event handler is directly attached to the element generating the event.</p>
<p>The <code>error</code> event on the <code>window</code> object uses nonstandard arguments and return value conventions, so it is not supported by jQuery. Instead, assign a handler function directly to the <code>window.onerror</code> property.</p>
+ <p>The handler list for an element is set when the event is first delivered. Adding or removing event handlers on the current element won't take effect until the next time the event is handled. To prevent any further event handlers from executing on an element within an event handler, call <code>event.stopImmediatePropagation()</code>. This behavior goes against the <a href="https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-removeEventListener">W3C events specification</a>. To better understand this case, consider the following code:</p>
+ <pre><code>var $test = $( "#test" );
+
+function handler1() {
+ console.log( "handler1" );
+ $test.off( "click", handler2 );
+}
+
+function handler2() {
+ console.log( "handler2" );
+}
+
+$test.on( "click", handler1 );
+$test.on( "click", handler2 );</code></pre>
+ <p>In the code above, <code>handler2</code> will be executed anyway the first time even if it's removed using <a href="/https/github.com/off/"><code>.off()</code></a>. However, the handler will not be executed the following times the <code>click</code> event is triggered.</p>
</longdesc>
<example>
<desc>Display a paragraph's text in an alert when it is clicked:</desc>
@@ -146,7 +161,7 @@ $( "div" ).trigger( "click", { name: "Jim" } );
]]></code>
</example>
<example>
- <desc>Use the the second argument of <code>.trigger()</code> to pass an array of data to the event handler</desc>
+ <desc>Use the second argument of <code>.trigger()</code> to pass an array of data to the event handler</desc>
<code><![CDATA[
$( "div" ).on( "click", function( event, salutation, name ) {
alert( salutation + ", " + name );
@@ -250,11 +265,19 @@ $( "body" ).on( "click", "p", function() {
]]></code>
</example>
<example>
- <desc>Cancel a link's default action using the <code>.preventDefault()</code> method.</desc>
+ <desc>Cancel a link's default action using the <code>.preventDefault()</code> method:</desc>
<code><![CDATA[
$( "body" ).on( "click", "a", function( event ) {
event.preventDefault();
});
+]]></code>
+ </example>
+ <example>
+ <desc>Attach multiple events—one on <code>mouseenter</code> and one on <code>mouseleave</code> to the same element:</desc>
+ <code><![CDATA[
+$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
+ $( this ).toggleClass( "active" );
+});
]]></code>
</example>
<category slug="events/event-handler-attachment"/>
diff --git a/entries/one.xml b/entries/one.xml
index 1327dbf06..4b98e5f91 100644
--- a/entries/one.xml
+++ b/entries/one.xml
@@ -8,7 +8,7 @@
<desc>A string containing one or more JavaScript event types, such as "click" or "submit," or custom event names.</desc>
</argument>
<argument name="data" type="PlainObject" optional="true">
- <desc>An object containing data that will be passed to the event handler.</desc>
+ <desc>Data to be passed to the handler in <a href="/https/github.com/event.data/"><code>event.data</code></a> when an event is triggered.</desc>
</argument>
<argument name="handler" type="Function">
<desc>A function to execute at the time the event is triggered.</desc>
@@ -44,7 +44,7 @@
</argument>
</signature>
<longdesc>
- <p>The <code>.one()</code> method is identical to <code>.on()</code>, except that the handler is unbound after its first invocation. For example:</p>
+ <p>The <code>.one()</code> method is identical to <code>.on()</code>, except that the handler for a given element and event type is unbound after its first invocation. For example:</p>
<pre><code>
$( "#foo" ).one( "click", function() {
alert( "This will be displayed only once." );
@@ -59,6 +59,12 @@ $( "#foo" ).on( "click", function( event ) {
</code></pre>
<p>In other words, explicitly calling <code>.off()</code> from within a regularly-bound handler has exactly the same effect.</p>
<p>If the first argument contains more than one space-separated event types, the event handler is called <em>once for each event type</em>.</p>
+ <pre><code>
+$( "#foo" ).one( "click mouseover", function( event ) {
+ alert( "The " + event.type + " event happened!" );
+});
+ </code></pre>
+ <p>In the example above the alert could be displayed twice due to the <em>two</em> event types (<code>click</code> and <code>mouseover</code>).</p>
</longdesc>
<example>
<desc>Tie a one-time click to each div.</desc>
diff --git a/entries/outerHeight.xml b/entries/outerHeight.xml
index 302de40d5..dc53bcb38 100644
--- a/entries/outerHeight.xml
+++ b/entries/outerHeight.xml
@@ -1,27 +1,30 @@
<?xml version="1.0"?>
+<entries>
+ <desc>Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element.</desc>
<entry type="method" name="outerHeight" return="Number">
<title>.outerHeight()</title>
<signature>
<added>1.2.6</added>
- <argument name="includeMargin" optional="true" type="Boolean">
+ <argument name="includeMargin" optional="true" type="Boolean" default="false">
<desc>A Boolean indicating whether to include the element's margin in the calculation.</desc>
</argument>
</signature>
- <desc>Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns a number (without "px") representation of the value or null if called on an empty set of elements.</desc>
+ <desc>Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements.</desc>
<longdesc>
- <p>The top and bottom padding and border are always included in the <code>.outerHeight()</code> calculation; if the <code>includeMargin</code> argument is set to <code>true</code>, the margin (top and bottom) is also included.</p>
- <p>This method is not applicable to <code>window</code> and <code>document</code> objects; for these, use <code><a href="/https/github.com/height/">.height()</a></code> instead.</p>
- <p class="image">
+ <p>Returns the height of the element, including top and bottom padding, border, and optionally margin, in pixels. If called on an empty set of elements, returns <code>undefined</code> (<code>null</code> before jQuery 3.0).</p>
+ <p>This method is not applicable to <code>window</code> and <code>document</code> objects; for these, use <code><a href="/https/github.com/height/">.height()</a></code> instead. Although <code>.outerHeight()</code> can be used on table elements, it may give unexpected results on tables using the <code>border-collapse: collapse</code> CSS property.</p>
+ <figure>
<img src="/https/github.com/resources/0042_04_03.png"/>
- </p>
+ <figcaption>Figure 1 - Illustration of the measured height</figcaption>
+ </figure>
</longdesc>
- <note id="dimensions-number" type="additional" data-title=".outerHeight()"/>
- <note id="inaccurate-dimensions-for-hidden-elements" type="additional" data-title=".outerHeight()"/>
+ <note id="dimensions-number" type="additional" data-title=".outerHeight()"/>
+ <note id="hidden-element-dimensions" type="additional" data-title=".outerHeight()"/>
<example>
<desc>Get the outerHeight of a paragraph.</desc>
<code><![CDATA[
-var p = $( "p:first" );
-$( "p:last" ).text(
+var p = $( "p" ).first();
+$( "p" ).last().text(
"outerHeight:" + p.outerHeight() +
" , outerHeight( true ):" + p.outerHeight( true ) );
]]></code>
@@ -41,3 +44,72 @@ $( "p:last" ).text(
<category slug="manipulation/style-properties"/>
<category slug="version/1.2.6"/>
</entry>
+
+<entry type="method" name="outerHeight" return="jQuery">
+ <signature>
+ <added>1.8</added>
+ <argument name="value">
+ <type name="String"/>
+ <type name="Number"/>
+ <desc>A number representing the number of pixels, or a number along with an optional unit of measure appended (as a string).</desc>
+ </argument>
+ <argument name="includeMargin" optional="true" type="Boolean" default="false">
+ <desc>A Boolean indicating whether to new value should account for the element's margin.</desc>
+ </argument>
+ </signature>
+ <signature>
+ <added>1.8</added>
+ <argument name="function" type="Function">
+ <argument name="index" type="Integer" />
+ <argument name="height" type="Number" />
+ <return>
+ <type name="String"/>
+ <type name="Number"/>
+ </return>
+ <desc>A function returning the outer height to set. Receives the index position of the element in the set and the old outer height as arguments. Within the function, <code>this</code> refers to the current element in the set.</desc>
+ </argument>
+ </signature>
+ <desc>Set the CSS outer height of each element in the set of matched elements.</desc>
+ <longdesc>
+ <p>When calling <code>.outerHeight(value)</code>, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used (such as <code>100px</code>, <code>50%</code>, or <code>auto</code>).</p>
+ </longdesc>
+
+ <example>
+ <desc>Change the outer height of each div the first time it is clicked (and change its color).</desc>
+ <code><![CDATA[
+var modHeight = 60;
+$( "div" ).one( "click", function() {
+ $( this ).outerHeight( modHeight ).addClass( "mod" );
+ modHeight -= 8;
+});
+]]></code>
+ <css><![CDATA[
+ div {
+ width: 50px;
+ padding: 10px;
+ height: 60px;
+ float: left;
+ margin: 5px;
+ background: red;
+ cursor: pointer;
+ }
+ .mod {
+ background: blue;
+ cursor: default;
+ }
+]]></css>
+ <html><![CDATA[
+<div>d</div>
+<div>d</div>
+<div>d</div>
+<div>d</div>
+<div>d</div>
+]]></html>
+ </example>
+
+ <category slug="css"/>
+ <category slug="dimensions"/>
+ <category slug="manipulation/style-properties"/>
+ <category slug="version/1.8"/>
+</entry>
+</entries>
diff --git a/entries/outerWidth.xml b/entries/outerWidth.xml
index d9cda5a71..2c5856bea 100644
--- a/entries/outerWidth.xml
+++ b/entries/outerWidth.xml
@@ -1,28 +1,30 @@
<?xml version="1.0"?>
+<entries>
+ <desc>Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer width of every matched element.</desc>
<entry type="method" name="outerWidth" return="Number">
<title>.outerWidth()</title>
<signature>
<added>1.2.6</added>
- <argument name="includeMargin" optional="true" type="Boolean">
+ <argument name="includeMargin" optional="true" type="Boolean" default="false">
<desc>A Boolean indicating whether to include the element's margin in the calculation.</desc>
</argument>
</signature>
- <desc>Get the current computed width for the first element in the set of matched elements, including padding and border.</desc>
+ <desc>Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements.</desc>
<longdesc>
- <p>Returns the width of the element, along with left and right padding, border, and optionally margin, in pixels.</p>
- <p>If <code>includeMargin</code> is omitted or <code>false</code>, the padding and border are included in the calculation; if <code>true</code>, the margin is also included.</p>
+ <p>Returns the width of the element, including left and right padding, border, and optionally margin, in pixels. If called on an empty set of elements, returns <code>undefined</code> (<code>null</code> before jQuery 3.0).</p>
<p>This method is not applicable to <code>window</code> and <code>document</code> objects; for these, use <code><a href="/https/github.com/width/">.width()</a></code> instead. Although <code>.outerWidth()</code> can be used on table elements, it may give unexpected results on tables using the <code>border-collapse: collapse</code> CSS property.</p>
- <p class="image">
+ <figure>
<img src="/https/github.com/resources/0042_04_06.png"/>
- </p>
+ <figcaption>Figure 1 - Illustration of the measured width</figcaption>
+ </figure>
</longdesc>
- <note id="dimensions-number" type="additional" data-title=".outerWidth()"/>
- <note id="inaccurate-dimensions-for-hidden-elements" type="additional" data-title=".outerWidth()"/>
+ <note id="dimensions-number" type="additional" data-title=".outerWidth()"/>
+ <note id="hidden-element-dimensions" type="additional" data-title=".outerWidth()"/>
<example>
<desc>Get the outerWidth of a paragraph.</desc>
<code><![CDATA[
-var p = $( "p:first" );
-$( "p:last" ).text(
+var p = $( "p" ).first();
+$( "p" ).last().text(
"outerWidth:" + p.outerWidth() +
" , outerWidth( true ):" + p.outerWidth( true ) );
]]></code>
@@ -42,3 +44,72 @@ $( "p:last" ).text(
<category slug="manipulation/style-properties"/>
<category slug="version/1.2.6"/>
</entry>
+
+<entry type="method" name="outerWidth" return="jQuery">
+ <signature>
+ <added>1.8</added>
+ <argument name="value">
+ <type name="String"/>
+ <type name="Number"/>
+ <desc>A number representing the number of pixels, or a number along with an optional unit of measure appended (as a string).</desc>
+ </argument>
+ <argument name="includeMargin" optional="true" type="Boolean" default="false">
+ <desc>A Boolean indicating whether to new value should account for the element's margin.</desc>
+ </argument>
+ </signature>
+ <signature>
+ <added>1.8</added>
+ <argument name="function" type="Function">
+ <argument name="index" type="Integer" />
+ <argument name="width" type="Number" />
+ <return>
+ <type name="String"/>
+ <type name="Number"/>
+ </return>
+ <desc>A function returning the outer width to set. Receives the index position of the element in the set and the old outer width as arguments. Within the function, <code>this</code> refers to the current element in the set.</desc>
+ </argument>
+ </signature>
+ <desc>Set the CSS outer width of each element in the set of matched elements.</desc>
+ <longdesc>
+ <p>When calling <code>.outerWidth(value)</code>, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used (such as <code>100px</code>, <code>50%</code>, or <code>auto</code>).</p>
+ </longdesc>
+
+ <example>
+ <desc>Change the outer width of each div the first time it is clicked (and change its color).</desc>
+ <code><![CDATA[
+var modWidth = 60;
+$( "div" ).one( "click", function() {
+ $( this ).outerWidth( modWidth ).addClass( "mod" );
+ modWidth -= 8;
+});
+]]></code>
+ <css><![CDATA[
+ div {
+ width: 60px;
+ padding: 10px;
+ height: 50px;
+ float: left;
+ margin: 5px;
+ background: red;
+ cursor: pointer;
+ }
+ .mod {
+ background: blue;
+ cursor: default;
+ }
+]]></css>
+ <html><![CDATA[
+<div>d</div>
+<div>d</div>
+<div>d</div>
+<div>d</div>
+<div>d</div>
+]]></html>
+ </example>
+
+ <category slug="css"/>
+ <category slug="dimensions"/>
+ <category slug="manipulation/style-properties"/>
+ <category slug="version/1.8"/>
+</entry>
+</entries>
diff --git a/entries/parent-selector.xml b/entries/parent-selector.xml
index 424cd36ea..bd3fd7436 100644
--- a/entries/parent-selector.xml
+++ b/entries/parent-selector.xml
@@ -9,7 +9,7 @@
<longdesc>
<p>This is the inverse of <code>:empty</code>. </p>
<p>One important thing to note regarding the use of <code>:parent</code> (and <code>:empty</code>) is that child nodes include text nodes.</p>
- <p>The W3C recommends that the <code><p></code> element have at least one child node, even if that child is merely text (see <a href="http://www.w3.org/TR/html401/struct/text.html#edef-P">http://www.w3.org/TR/html401/struct/text.html#edef-P</a>). Some other elements, on the other hand, are empty (i.e. have no children) by definition:<code> <input></code>, <code><img></code>, <code><br></code>, and <code><hr></code>, for example.</p>
+ <p>The W3C recommends that the <code><p></code> element have at least one child node, even if that child is merely text (see <a href="https://www.w3.org/TR/html401/struct/text.html#edef-P">https://www.w3.org/TR/html401/struct/text.html#edef-P</a>). Some other elements, on the other hand, are empty (i.e. have no children) by definition:<code> <input></code>, <code><img></code>, <code><br></code>, and <code><hr></code>, for example.</p>
<p>To obtain the parents or ancestors of an existing jQuery set, see the <code><a href="/https/github.com/parent/">.parent()</a></code> and <code><a href="/https/github.com/parents/">.parents()</a></code> methods.</p>
</longdesc>
<note id="jquery-selector-extension" type="additional" data-selector=":parent"/>
diff --git a/entries/parent.xml b/entries/parent.xml
index 0fdf5b73c..4c375255d 100644
--- a/entries/parent.xml
+++ b/entries/parent.xml
@@ -9,8 +9,8 @@
</signature>
<desc>Get the parent of each element in the current set of matched elements, optionally filtered by a selector.</desc>
<longdesc>
- <p>Given a jQuery object that represents a set of DOM elements, the <code>.parent()</code> method allows us to search through the parents of these elements in the DOM tree and construct a new jQuery object from the matching elements.</p>
- <p>The <code><a href="/https/github.com/parents/">.parents()</a></code> and <code>.parent()</code> methods are similar, except that the latter only travels a single level up the DOM tree. Also, <code>$( "html" ).parent()</code> method returns a set containing <code>document</code> whereas <code>$( "html" ).parents()</code> returns an empty set.</p>
+ <p>Given a jQuery object that represents a set of DOM elements, the <code>parent()</code> method traverses to the immediate parent of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.</p>
+ <p>This method is similar to <a href="/https/github.com/parents/"><code>.parents()</code></a>, except <code>.parent()</code> only travels a single level up the DOM tree. Also, <code>$( "html" ).parent()</code> method returns a set containing <code>document</code> whereas <code>$( "html" ).parents()</code> returns an empty set.</p>
<p>The method optionally accepts a selector expression of the same type that we can pass to the <code>$()</code> function. If the selector is supplied, the elements will be filtered by testing whether they match it.</p>
<p>Consider a page with a basic nested list on it:</p>
<pre><code>
diff --git a/entries/parents.xml b/entries/parents.xml
index 403b23936..ab51cde99 100644
--- a/entries/parents.xml
+++ b/entries/parents.xml
@@ -82,7 +82,7 @@ function showParents() {
.length;
$( "b" ).text( "Unique div parents: " + len );
}
-$( "span" ).click(function() {
+$( "span" ).on( "click", function() {
$( this ).toggleClass( "selected" );
showParents();
});
diff --git a/entries/password-selector.xml b/entries/password-selector.xml
index 8d632b8f6..053e0dc29 100644
--- a/entries/password-selector.xml
+++ b/entries/password-selector.xml
@@ -13,18 +13,18 @@
<example>
<desc>Finds all password inputs.</desc>
<code><![CDATA[
-var input = $( "input:password" ).css({
+var input = $( "input:password" ).css( {
background: "yellow",
border: "3px red solid"
-});
+} );
$( "div" )
.text( "For this type jQuery found " + input.length + "." )
.css( "color", "red" );
// Prevent form submission
-$( "form" ).submit(function() {
+$( "form" ).on( "submit", function() {
return false;
-});
+} );
]]></code>
<css><![CDATA[
textarea {
diff --git a/entries/position.xml b/entries/position.xml
index 41bd0fb74..565f64afe 100644
--- a/entries/position.xml
+++ b/entries/position.xml
@@ -6,19 +6,19 @@
</signature>
<desc>Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.</desc>
<longdesc>
- <p>The <code>.position()</code> method allows us to retrieve the current position of an element <em>relative to the offset parent</em>. Contrast this with <code><a href="/https/github.com/offset/">.offset()</a></code>, which retrieves the current position <em>relative to the document</em>. When positioning a new element near another one and within the same containing DOM element, <code>.position()</code> is the more useful.</p>
+ <p>The <code>.position()</code> method allows us to retrieve the current position of an element (specifically its margin box) <em>relative to the offset parent</em> (specifically its padding box, which excludes margins and borders). Contrast this with <code><a href="/https/github.com/offset/">.offset()</a></code>, which retrieves the current position <em>relative to the document</em>. When positioning a new element near another one and within the same containing DOM element, <code>.position()</code> is the more useful.</p>
<p>Returns an object containing the properties <code>top</code> and <code>left</code>.</p>
<div class="warning">
- <p><strong>Note:</strong> jQuery does not support getting the position coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.</p>
+ <p><strong>Note:</strong> jQuery does not support getting the position coordinates of hidden elements or accounting for margins set on the <code><html></code> document element.</p>
</div>
</longdesc>
- <note id="dimensions-number" type="additional" data-title=".position()"/>
+ <note id="dimensions-number" type="additional" data-title=".position()"/>
<example>
<desc>Access the position of the second paragraph:</desc>
<code><![CDATA[
-var p = $( "p:first" );
+var p = $( "p" ).first();
var position = p.position();
-$( "p:last" ).text( "left: " + position.left + ", top: " + position.top );
+$( "p" ).last().text( "left: " + position.left + ", top: " + position.top );
]]></code>
<css><![CDATA[
div {
diff --git a/entries/prepend.xml b/entries/prepend.xml
index e1a2b5489..0b7edd46c 100644
--- a/entries/prepend.xml
+++ b/entries/prepend.xml
@@ -4,18 +4,20 @@
<signature>
<added>1.0</added>
<argument name="content">
- <desc>DOM element, array of elements, HTML string, or jQuery object to insert at the beginning of each element in the set of matched elements.</desc>
+ <desc>DOM element, text node, array of elements and text nodes, HTML string, or jQuery object to insert at the beginning of each element in the set of matched elements.</desc>
<type name="htmlString"/>
<type name="Element"/>
+ <type name="Text"/>
<type name="Array"/>
<type name="jQuery"/>
</argument>
<argument name="content" optional="true">
<type name="htmlString"/>
<type name="Element"/>
+ <type name="Text"/>
<type name="Array"/>
<type name="jQuery"/>
- <desc>One or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert at the beginning of each element in the set of matched elements.</desc>
+ <desc>One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or jQuery objects to insert at the beginning of each element in the set of matched elements.</desc>
</argument>
</signature>
<signature>
@@ -26,9 +28,10 @@
<return>
<type name="htmlString"/>
<type name="Element"/>
+ <type name="Text"/>
<type name="jQuery"/>
</return>
- <desc>A function that returns an HTML string, DOM element(s), or jQuery object to insert at the beginning of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, <code>this</code> refers to the current element in the set.</desc>
+ <desc>A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert at the beginning of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, <code>this</code> refers to the current element in the set.</desc>
</argument>
</signature>
<desc>Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.</desc>
@@ -78,7 +81,7 @@ $( ".container" ).prepend( $( "h2" ) );
<p>Similar to other content-adding methods such as <code><a href="/https/github.com/append/">.append()</a></code> and <code><a href="/https/github.com/before/">.before()</a></code>, <code>.prepend()</code> also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.</p>
<p>For example, the following will insert two new <code><div></code>s and an existing <code><div></code> as the first three child nodes of the body:</p>
<pre><code>
-var $newdiv1 = $( "<div id='object1'/>"),
+var $newdiv1 = $( "<div id='object1'></div>"),
newdiv2 = document.createElement( "div" ),
existingdiv1 = document.getElementById( "foo" );
@@ -87,6 +90,7 @@ $( "body" ).prepend( $newdiv1, [ newdiv2, existingdiv1 ] );
<p>Since <code>.prepend()</code> can accept any number of additional arguments, the same result can be achieved by passing in the three <code><div></code>s as three separate arguments, like so: <code>$( "body" ).prepend( $newdiv1, newdiv2, existingdiv1 )</code>. The type and number of arguments will largely depend on how you collect the elements in your code.</p>
</longdesc>
<note id="html-code-execution" type="additional"/>
+ <note id="svg-support" type="additional"/>
<example>
<desc>Prepends some HTML to all paragraphs.</desc>
<code><![CDATA[
diff --git a/entries/prependTo.xml b/entries/prependTo.xml
index f51db2489..d7a086446 100644
--- a/entries/prependTo.xml
+++ b/entries/prependTo.xml
@@ -53,9 +53,10 @@ $( "h2" ).prependTo( $( ".container" ) );
<div class="inner">Goodbye</div>
</div>
</code></pre>
- <p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.</p>
+ <p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target except the last.</p>
</longdesc>
<note id="html-code-execution" type="additional"/>
+ <note id="svg-support" type="additional"/>
<example>
<desc>Prepend all spans to the element with the ID "foo" (Check .prepend() documentation for more examples)</desc>
<css><![CDATA[
diff --git a/entries/prev.xml b/entries/prev.xml
index bfa4fa2f3..11a03f94e 100644
--- a/entries/prev.xml
+++ b/entries/prev.xml
@@ -7,7 +7,7 @@
<desc>A string containing a selector expression to match elements against.</desc>
</argument>
</signature>
- <desc>Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.</desc>
+ <desc>Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.</desc>
<longdesc>
<p>Given a jQuery object that represents a set of DOM elements, the <code>.prev()</code> method searches for the predecessor of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.</p>
<p>The method optionally accepts a selector expression of the same type that can be passed to the <code>$()</code> function. If the selector is supplied, the preceding element will be filtered by testing whether it match the selector.</p>
@@ -34,7 +34,7 @@ $( "li.third-item" ).prev().css( "background-color", "red" );
<code><![CDATA[
var $curr = $( "#start" );
$curr.css( "background", "#f99" );
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$curr = $curr.prev();
$( "div" ).css( "background", "" );
$curr.css( "background", "#f99" );
diff --git a/entries/prevAll.xml b/entries/prevAll.xml
index e54530806..d3eeca031 100644
--- a/entries/prevAll.xml
+++ b/entries/prevAll.xml
@@ -7,7 +7,7 @@
<desc>A string containing a selector expression to match elements against.</desc>
</argument>
</signature>
- <desc>Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.</desc>
+ <desc>Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector, in the reverse document order.</desc>
<longdesc>
<p>Given a jQuery object that represents a set of DOM elements, the <code>.prevAll()</code> method searches through the predecessors of these elements in the DOM tree and construct a new jQuery object from the matching elements; the elements are returned in order beginning with the closest sibling.</p>
<p>The method optionally accepts a selector expression of the same type that we can pass to the <code>$()</code> function. If the selector is supplied, the elements will be filtered by testing whether they match it.</p>
@@ -26,11 +26,48 @@
$( "li.third-item" ).prevAll().css( "background-color", "red" );
</code></pre>
<p>The result of this call is a red background behind items 1 and 2. Since we do not supply a selector expression, these preceding elements are unequivocally included as part of the object. If we had supplied one, the elements would be tested for a match before they were included.</p>
+ <p><strong>Note:</strong> Many APIs, like <code><a href="/https/github.com/append/">append</a></code> or <code><a href="/https/github.com/wrapAll/">wrapAll</a></code> process node in the order in which they appear in the jQuery object. This can pose issues with APIs like <code>.prevAll()</code> in which the reverse document order is used. Consider the following example:</p>
+ <pre><code>
+<div>
+ <div>First</div>
+ <div>Second</div>
+ <div class="last-item">Last</div>
+</div>
+ </code></pre>
+ <p>The following call:</p>
+ <pre><code>
+$( ".last-item" )
+ .prevAll()
+ .wrapAll( "<div class='wrapper'></div>" );
+ </code></pre>
+ <p>would result in the following HTML:</p>
+ <pre><code>
+<div>
+ <div class="wrapper">
+ <div>Second</div>
+ <div>First</div>
+ </div>
+ <div class="last-item">Last</div>
+</div>
+ </code></pre>
+ <p>because "Item 2" gets appended to the wrapper div first. To work around the issue, you may use <code><a href="/https/github.com/uniqueSort/">.uniqueSort()</a></code> on the <code>.prevAll()</code> output first:</p>
+ <pre><code>
+$( ".last-item" )
+ .prevAll()
+ .uniqueSort()
+ .wrapAll( "<div class='wrapper'></div>" );
+ </code></pre>
+ <p>Note that the <code><a href="/https/github.com/uniqueSort/">.uniqueSort()</a></code> method is only available in jQuery 3.7.0 or newer. In older versions, you will need to use <code><a href="/https/github.com/jQuery.uniqueSort/">$.uniqueSort()</a></code> to achieve a similar effect:</p>
+ <pre><code>
+var prevSiblings = $( ".last-item" ).prevAll();
+$.uniqueSort( prevSiblings );
+prevSiblings.wrapAll( "<div class='wrapper'></div>" );
+ </code></pre>
</longdesc>
<example>
<desc>Locate all the divs preceding the last div and give them a class.</desc>
<code><![CDATA[
-$( "div:last" ).prevAll().addClass( "before" );
+$( "div" ).last().prevAll().addClass( "before" );
]]></code>
<css><![CDATA[
div {
@@ -50,6 +87,69 @@ $( "div:last" ).prevAll().addClass( "before" );
<div></div>
<div></div>
<div></div>
+]]></html>
+ </example>
+ <example>
+ <desc>Locate all the divs preceding the last item and wrap them with a div with class <code>wrapper</code> - with or without <code><a href="/https/github.com/uniqueSort/">.uniqueSort()</a></code>.</desc>
+ <code><![CDATA[
+$( "#container-1" )
+ .find( ".item" )
+ .last()
+ .prevAll()
+ .wrapAll( "<div class='wrapper' data-content='No uniqueSort'></div>" );
+
+$( "#container-2" )
+ .find( ".item" )
+ .last()
+ .prevAll()
+ .uniqueSort()
+ .wrapAll( "<div class='wrapper' data-content='With uniqueSort'></div>" );
+]]></code>
+ <css><![CDATA[
+ body {
+ display: flex;
+ }
+ .container {
+ display: flex;
+ margin: 10px 50px 10px 10px;
+ }
+ .wrapper {
+ position: relative;
+ display: flex;
+ padding: 30px 10px 10px 10px;
+ background: #def;
+ border: 2px solid black;
+ }
+ .wrapper::before {
+ content: attr(data-content);
+ position: absolute;
+ top: 15px;
+ left: 15px;
+ }
+ .item {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 70px;
+ height: 70px;
+ background: #abc;
+ border: 2px solid black;
+ margin: 10px;
+ font-size: 50px;
+ }
+]]></css>
+ <html><![CDATA[
+<div class="container" id="container-1">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+</div>
+
+<div class="container" id="container-2">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+</div>
]]></html>
</example>
<category slug="traversing/tree-traversal"/>
diff --git a/entries/prop.xml b/entries/prop.xml
index adccbc85c..5506d40b9 100644
--- a/entries/prop.xml
+++ b/entries/prop.xml
@@ -42,17 +42,10 @@
<tr>
<th>
<code>$( elem ).attr( "checked" )</code>
- <em>(1.6)</em>
+ <em>(1.6+)</em>
</th>
<td><code>"checked"</code> (String) Initial state of the checkbox; does not change</td>
</tr>
- <tr>
- <th>
- <code>$( elem ).attr( "checked" )</code>
- <em>(1.6.1+)</em>
- </th>
- <td><code>"checked"</code> (String) Will change with checkbox state</td>
- </tr>
<tr>
<th>
<code>$( elem ).attr( "checked" )</code>
@@ -62,7 +55,7 @@
</tr>
</table>
<br/>
- <p>According to the <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.4">W3C forms specification</a>, the <code>checked</code> attribute is a <em><a href="http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2">boolean attribute</a></em>, which means the corresponding property is <strong>true</strong> if the attribute is present at all—even if, for example, the attribute has no value or is set to empty string value or even "false". This is true of all boolean attributes.</p>
+ <p>According to the <a href="https://www.w3.org/TR/html401/interact/forms.html#h-17.4">W3C forms specification</a>, the <code>checked</code> attribute is a <em><a href="https://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2">boolean attribute</a></em>, which means the corresponding property is <strong>true</strong> if the attribute is present at all—even if, for example, the attribute has no value or is set to empty string value or even "false". This is true of all boolean attributes.</p>
<p>Nevertheless, the most important concept to remember about the <code>checked</code> attribute is that it does not correspond to the <code>checked</code> property. The attribute actually corresponds to the <code>defaultChecked</code> property and should be used only to set the <em>initial</em> value of the checkbox. The <code>checked</code> attribute value does not change with the state of the checkbox, while the <code>checked</code> property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property:</p>
<ul>
<li>
@@ -81,13 +74,13 @@
<example>
<desc>Display the checked property and attribute of a checkbox as it changes.</desc>
<code><![CDATA[
-$( "input" ).change(function() {
+$( "input" ).on( "change", function() {
var $input = $( this );
$( "p" ).html(
".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
- ".is( \":checked\" ): <b>" + $input.is( ":checked" ) ) + "</b>";
-}).change();
+ ".is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
+} ).trigger( "change" );
]]></code>
<css><![CDATA[
p {
@@ -144,7 +137,7 @@ $( "input" ).prop( "disabled", false );
$( "input" ).prop( "checked", true );
$( "input" ).val( "someValue" );
</code></pre>
- <p><strong>Important:</strong> the <code><a href="/https/github.com/removeProp/">.removeProp()</a></code> method should not be used to set these properties to false. Once a native property is removed, it cannot be added again. See <code><a href="/https/github.com/removeProp/">.removeProp()</a></code> for more information.</p>
+ <p><strong>Important:</strong> the <code><a href="/https/github.com/removeProp/">.removeProp()</a></code> method should not be used to remove native properties. This will lead to unexpected behavior. See <code><a href="/https/github.com/removeProp/">.removeProp()</a></code> for more information.</p>
<h4 id="computed-prop-values">Computed property values</h4>
<p>By using a function to set properties, you can compute the value based on other properties of the element. For example, to toggle all checkboxes based off their individual values:</p>
<pre><code>
diff --git a/entries/queue.xml b/entries/queue.xml
index 08c5f09aa..ec66c39fd 100644
--- a/entries/queue.xml
+++ b/entries/queue.xml
@@ -119,19 +119,19 @@ $( "#test" ).queue(function( next ) {
<example>
<desc>Queue a custom function.</desc>
<code><![CDATA[
-$( document.body ).click(function() {
+$( document.body ).on( "click", function() {
$( "div" )
.show( "slow" )
- .animate({ left: "+=200" }, 2000 )
+ .animate( { left: "+=200" }, 2000 )
.queue(function() {
$( this ).addClass( "newcolor" ).dequeue();
})
- .animate({ left: "-=200" }, 500 )
+ .animate( { left: "-=200" }, 500 )
.queue(function() {
$( this ).removeClass( "newcolor" ).dequeue();
- })
+ } )
.slideUp();
-});
+} );
]]></code>
<css><![CDATA[
div {
@@ -156,7 +156,7 @@ Click here...
<example>
<desc>Set a queue array to delete the queue.</desc>
<code><![CDATA[
-$( "#start" ).click(function() {
+$( "#start" ).on( "click", function() {
$( "div" )
.show( "slow" )
.animate({ left: "+=200" }, 5000 )
@@ -169,7 +169,7 @@ $( "#start" ).click(function() {
})
.slideUp();
});
-$( "#stop" ).click(function() {
+$( "#stop" ).on( "click", function() {
$( "div" )
.queue( "fx", [] )
.stop();
diff --git a/entries/radio-selector.xml b/entries/radio-selector.xml
index dc1944369..6b508d86e 100644
--- a/entries/radio-selector.xml
+++ b/entries/radio-selector.xml
@@ -17,19 +17,19 @@
var input = $( "form input:radio" )
.wrap( "<span></span>" )
.parent()
- .css({
+ .css( {
background: "yellow",
border: "3px red solid"
- });
+ } );
$( "div" )
.text( "For this type jQuery found " + input.length + "." )
.css( "color", "red" );
// Prevent form submission
-$( "form" ).submit(function( event ) {
+$( "form" ).on( "submit", function( event ) {
event.preventDefault();
-});
+} );
]]></code>
<css><![CDATA[
textarea {
diff --git a/entries/ready.xml b/entries/ready.xml
index 09e1993fa..20cdafa60 100644
--- a/entries/ready.xml
+++ b/entries/ready.xml
@@ -9,49 +9,53 @@
</argument>
</signature>
<longdesc>
- <p>While JavaScript provides the <code>load</code> event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to <code>.ready()</code> is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.</p>
- <p>In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the <code>load</code> event instead.</p>
- <div class="warning">
- <p>The <code>.ready()</code> method is generally incompatible with the <code><body onload=""></code> attribute. If <code>load</code> must be used, either do not use <code>.ready()</code> or use jQuery's <code>.load()</code> method to attach <code>load</code> event handlers to the window or to more specific items, like images.
- </p>
- </div>
- <p>All three of the following syntaxes are equivalent:</p>
+ <p>The <code>.ready()</code> method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate. This will often be a good time to perform tasks that are needed before the user views or interacts with the page, for example to add event handlers and initialize plugins. When multiple functions are added via successive calls to this method, they run when the DOM is ready in the order in which they are added. As of jQuery 3.0, jQuery ensures that an exception occuring in one handler does not prevent subsequently added handlers from executing.</p>
+
+ <p>Most browsers <a href="https://caniuse.com/#search=DOMContentLoaded">provide similar functionality</a> in the form of a <code>DOMContentLoaded</code> event. However, jQuery's <code>.ready()</code> method differs in an important and useful way: If the DOM becomes ready and the browser fires <code>DOMContentLoaded</code> before the code calls <code>.ready( handler )</code>, the function <code>handler</code> will still be executed. In contrast, a <code>DOMContentLoaded</code> event listener added after the event fires is never executed.</p>
+
+ <p>Browsers also provide the <code>load</code> event on the <code>window</code> object. When this event fires it indicates that all assets on the page have loaded, including images. This event can be watched in jQuery using <code>$( window ).on( "load", handler )</code>. In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the <code>load</code> event instead.</p>
+
+ <p>Note that although the DOM always becomes ready before the page is fully loaded, it is <em>usually not safe</em> to attach a <code>load</code> event listener in code executed during a <code>.ready()</code> handler. For example, scripts can be loaded dynamically long after the page has loaded using methods such as <code>$.getScript()</code>. Although handlers added by <code>.ready()</code> will always be executed in a dynamically loaded script, the <code>window</code>'s <code>load</code> event has already occurred and those listeners will never run.</p>
+
+ <p>jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:</p>
+
<ul>
- <li>
- <code>$( document ).ready( handler )</code>
- </li>
- <li><code>$().ready( handler )</code> (this is not recommended)</li>
- <li>
- <code>$( handler )</code>
- </li>
+ <li><code>$( handler )</code></li>
+ <li><code>$( document ).ready( handler )</code></li>
+ <li><code>$( "document" ).ready( handler )</code></li>
+ <li><code>$( "img" ).ready( handler )</code></li>
+ <li><code>$().ready( handler )</code></li>
</ul>
- <p>There is also <code>$(document).on( "ready", handler )</code>, <em>deprecated as of jQuery 1.8</em>. This behaves similarly to the ready method but if the ready event has already fired and you try to <code>.on( "ready" )</code> the bound handler will not be executed. Ready handlers bound this way are executed <em>after</em> any bound by the other three methods above.</p>
- <p>The <code>.ready()</code> method can only be called on a jQuery object matching the current document, so the selector can be omitted.</p>
+
+ <p>As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated. This is because the selection has no bearing on the behavior of the <code>.ready()</code> method, which is inefficient and can lead to incorrect assumptions about the method's behavior. For example, the third syntax works with <code>"document"</code> which selects nothing. The fourth syntax waits for the document to be ready but implies (incorrectly) that it waits for images to become ready. </p>
+
+ <p>There is also <code>$(document).on( "ready", handler )</code>, <em>deprecated as of jQuery 1.8 and removed in jQuery 3.0</em>. Note that if the DOM becomes ready before this event is attached, the handler <em>will not be executed</em>.</p>
+
<p>The <code>.ready()</code> method is typically used with an anonymous function:</p>
<pre><code>
$( document ).ready(function() {
// Handler for .ready() called.
});
</code></pre>
- <p>Which is equivalent to calling:</p>
+ <p>Which is equivalent to the recommended way of calling:</p>
<pre><code>
$(function() {
// Handler for .ready() called.
});
</code></pre>
- <p>If <code>.ready()</code> is called after the DOM has been initialized, the new handler passed in will be executed immediately.</p>
- <h4>Aliasing the jQuery Namespace</h4>
- <p>When using another JavaScript library, we may wish to call <code><a href="/https/github.com/jQuery.noConflict/">$.noConflict()</a></code> to avoid namespace difficulties. When this function is called, the <code>$</code> shortcut is no longer available, forcing us to write <code>jQuery</code> each time we would normally write <code>$</code>. However, the handler passed to the <code>.ready()</code> method can take an argument, which is passed the global <code>jQuery</code> object. This means we can rename the object within the context of our <code>.ready()</code> handler without affecting other code:</p>
+ <h4>Aliasing the jQuery Object</h4>
+ <p>When <code><a href="/https/github.com/jQuery.noConflict/">$.noConflict()</a></code> is used to avoid namespace conflicts, the <code>$</code> shortcut is no longer available. However, the <code>.ready()</code> handler is passed a reference to the <code>jQuery</code> object that called the method. This allows the handler to use a jQuery object, for example as <code>$</code>, without knowing its aliased name:</p>
<pre><code>
-jQuery( document ).ready(function( $ ) {
- // Code using $ as usual goes here.
+jq2 = jQuery.noConflict();
+jq2(function( $ ) {
+ // Code using $ as usual goes here; the actual jQuery object is jq2
});
</code></pre>
</longdesc>
<example>
<desc>Display a message when the DOM is loaded.</desc>
<code location="head"><![CDATA[
- $( document ).ready(function() {
+ $(function() {
$( "p" ).text( "The DOM is now loaded and can be manipulated." );
});
]]></code>
diff --git a/entries/remove.xml b/entries/remove.xml
index 6c85e9b4e..4a7ab41cb 100644
--- a/entries/remove.xml
+++ b/entries/remove.xml
@@ -42,9 +42,9 @@ $( "div" ).remove( ".hello" );
<example>
<desc>Removes all paragraphs from the DOM</desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( "p" ).remove();
-});
+} );
]]></code>
<css><![CDATA[
p {
@@ -62,7 +62,7 @@ how are
<example>
<desc>Removes all paragraphs that contain "Hello" from the DOM. Analogous to doing <code>$("p").filter(":contains('Hello')").remove()</code>.</desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( "p" ).remove( ":contains('Hello')" );
});
]]></code>
diff --git a/entries/removeAttr.xml b/entries/removeAttr.xml
index 0dd1abea1..6df348209 100644
--- a/entries/removeAttr.xml
+++ b/entries/removeAttr.xml
@@ -10,18 +10,19 @@
<desc>Remove an attribute from each element in the set of matched elements.</desc>
<longdesc>
<p>The <code>.removeAttr()</code> method uses the JavaScript <code>removeAttribute()</code> function, but it has the advantage of being able to be called directly on a jQuery object and it accounts for different attribute naming across browsers.</p>
- <p><strong>Note:</strong> Removing an inline <code>onclick</code> event handler using <code>.removeAttr()</code> doesn't achieve the desired effect in Internet Explorer 6, 7, or 8. To avoid potential problems, use <code>.prop()</code> instead:</p>
+ <p><strong>Note:</strong> Removing an inline <code>onclick</code> event handler using <code>.removeAttr()</code> doesn't achieve the desired effect in Internet Explorer 8, 9 and 11. To avoid potential problems, use <code>.prop()</code> instead:</p>
<pre><code>
$element.prop( "onclick", null );
console.log( "onclick property: ", $element[ 0 ].onclick );
</code></pre>
+ <note id="svg-support" type="additional"/>
</longdesc>
<example>
<desc>Clicking the button changes the title of the input next to it. Move the mouse pointer over the text input to see the effect of adding and removing the title attribute.</desc>
<code><![CDATA[
(function() {
var inputTitle = $( "input" ).attr( "title" );
- $( "button" ).click(function() {
+ $( "button" ).on( "click", function() {
var input = $( this ).next();
if ( input.attr( "title" ) === inputTitle ) {
diff --git a/entries/removeClass.xml b/entries/removeClass.xml
index 8bb111961..d66b98919 100644
--- a/entries/removeClass.xml
+++ b/entries/removeClass.xml
@@ -1,129 +1,195 @@
<?xml version="1.0"?>
-<entry type="method" name="removeClass" return="jQuery">
- <title>.removeClass()</title>
- <signature>
- <added>1.0</added>
- <argument name="className" optional="true" type="String">
- <desc>One or more space-separated classes to be removed from the class attribute of each matched element.</desc>
- </argument>
- </signature>
- <signature>
- <added>1.4</added>
- <argument name="function" type="Function">
- <argument name="index" type="Integer" />
- <argument name="className" type="String" />
- <return type="String" />
- <desc>A function returning one or more space-separated class names to be removed. Receives the index position of the element in the set and the old class value as arguments.</desc>
- </argument>
- </signature>
+<entries>
<desc>Remove a single class, multiple classes, or all classes from each element in the set of matched elements.</desc>
- <longdesc>
- <p>If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed.</p>
- <p>More than one class may be removed at a time, separated by a space, from the set of matched elements, like so:</p>
- <pre><code>
-$( "p" ).removeClass( "myClass yourClass" )
- </code></pre>
- <p>This method is often used with <code>.addClass()</code> to switch elements' classes from one to another, like so:</p>
- <pre><code>
-$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
- </code></pre>
- <p>Here, the <code>myClass</code> and <code>noClass</code> classes are removed from all paragraphs, while <code>yourClass</code> is added.</p>
- <p>To replace all existing classes with another class, we can use <code>.attr( "class", "newClass" )</code> instead.</p>
- <p>As of jQuery 1.4, the <code>.removeClass()</code> method allows us to indicate the class to be removed by passing in a function.</p>
- <pre><code>
-$( "li:last" ).removeClass(function() {
- return $( this ).prev().attr( "class" );
-});
- </code></pre>
- <p>This example removes the class name of the penultimate <code><li></code> from the last <code><li></code>.</p>
- </longdesc>
- <example>
- <desc>Remove the class 'blue' from the matched elements.</desc>
- <code><![CDATA[
-$( "p:even" ).removeClass( "blue" );
-]]></code>
- <css><![CDATA[
- p {
- margin: 4px;
- font-size: 16px;
- font-weight: bolder;
- }
- .blue {
- color: blue;
- }
- .under {
- text-decoration: underline;
- }
- .highlight {
- background: yellow;
- }
-]]></css>
- <html><![CDATA[
-<p class="blue under">Hello</p>
-<p class="blue under highlight">and</p>
-<p class="blue under">then</p>
-<p class="blue under">Goodbye</p>
-]]></html>
- </example>
- <example>
- <desc>Remove the class 'blue' and 'under' from the matched elements.</desc>
- <code><![CDATA[
-$( "p:odd" ).removeClass( "blue under" );
-]]></code>
- <css><![CDATA[
- p {
- margin: 4px;
- font-size: 16px;
- font-weight: bolder;
- }
- .blue {
- color: blue;
- }
- .under {
- text-decoration: underline;
- }
- .highlight {
- background: yellow;
- }
-]]></css>
- <html><![CDATA[
-<p class="blue under">Hello</p>
-<p class="blue under highlight">and</p>
-<p class="blue under">then</p>
-<p class="blue under">Goodbye</p>
-]]></html>
- </example>
- <example>
- <desc>Remove all the classes from the matched elements.</desc>
- <code><![CDATA[
-$( "p:eq(1)" ).removeClass();
-]]></code>
- <css><![CDATA[
- p {
- margin: 4px;
- font-size: 16px;
- font-weight: bolder;
- }
- .blue {
- color: blue;
- }
- .under {
- text-decoration: underline;
- }
- .highlight {
- background: yellow;
- }
-]]></css>
- <html><![CDATA[
-<p class="blue under">Hello</p>
-<p class="blue under highlight">and</p>
-<p class="blue under">then</p>
-<p class="blue under">Goodbye</p>
-]]></html>
- </example>
- <category slug="attributes"/>
- <category slug="manipulation/class-attribute"/>
- <category slug="css"/>
- <category slug="version/1.0"/>
- <category slug="version/1.4"/>
-</entry>
+ <entry type="method" name="removeClass" return="jQuery">
+ <title>.removeClass()</title>
+ <signature>
+ <added>1.0</added>
+ <argument name="className" type="String">
+ <desc>One or more space-separated classes to be removed from 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 removed from the class attribute of each matched element.</desc>
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4</added>
+ <argument name="function" type="Function">
+ <argument name="index" type="Integer" />
+ <argument name="className" type="String" />
+ <return type="String" />
+ <desc>A function returning one or more space-separated class names to be removed. Receives the index position of the element in the set and the old class value as arguments.</desc>
+ </argument>
+ </signature>
+ <signature>
+ <added>3.3</added>
+ <argument name="function" type="Function">
+ <argument name="index" type="Integer" />
+ <argument name="className" type="String" />
+ <return type="String" />
+ <return type="Array" />
+ <desc>A function returning one or more space-separated class names or an array of class names to be removed. Receives the index position of the element in the set and the old class value as arguments.</desc>
+ </argument>
+ </signature>
+ <desc>Remove a single class or multiple classes from each element in the set of matched elements.</desc>
+ <longdesc>
+ <p>Before jQuery version 1.12/2.2, the <code>.removeClass()</code> method manipulated the <code>className</code> <em>property</em> of the selected elements, not the <code>class</code> <em>attribute</em>. Once the property was changed, it was the browser that updated the attribute accordingly. This means that when the <code>class</code> attribute was updated and the last class name was removed, the browser might have set the attribute's value to an empty string instead of removing the attribute completely. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).</p>
+ <p>As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the <code>class</code> <em>attribute</em> is used instead. So, <code>.removeClass()</code> can be used on XML or SVG documents.</p>
+ <p>More than one class may be removed at a time, separated by a space, from the set of matched elements, like so:</p>
+ <pre><code>
+ $( "p" ).removeClass( "myClass yourClass" )
+ </code></pre>
+ <p>This method is often used with <code>.addClass()</code> to switch elements' classes from one to another, like so:</p>
+ <pre><code>
+ $( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
+ </code></pre>
+ <p>Here, the <code>myClass</code> and <code>noClass</code> classes are removed from all paragraphs, while <code>yourClass</code> is added.</p>
+ <p>To replace all existing classes with another class, we can use <code>.attr( "class", "newClass" )</code> instead.</p>
+ <p>As of jQuery 1.4, the <code>.removeClass()</code> method allows us to indicate the class to be removed by passing in a function.</p>
+ <pre><code>
+ $( "li" ).last().removeClass(function() {
+ return $( this ).prev().attr( "class" );
+ });
+ </code></pre>
+ <p>This example removes the class name of the penultimate <code><li></code> from the last <code><li></code>.</p>
+ </longdesc>
+ <example>
+ <desc>Remove the class 'blue' from the matched elements.</desc>
+ <code><![CDATA[
+ $( "p" ).even().removeClass( "blue" );
+ ]]></code>
+ <css><![CDATA[
+ p {
+ margin: 4px;
+ font-size: 16px;
+ font-weight: bolder;
+ }
+ .blue {
+ color: blue;
+ }
+ .under {
+ text-decoration: underline;
+ }
+ .highlight {
+ background: yellow;
+ }
+ ]]></css>
+ <html><![CDATA[
+ <p class="blue under">Hello</p>
+ <p class="blue under highlight">and</p>
+ <p class="blue under">then</p>
+ <p class="blue under">Goodbye</p>
+ ]]></html>
+ </example>
+ <example>
+ <desc>Remove the class 'blue' and 'under' from the matched elements.</desc>
+ <code><![CDATA[
+ $( "p" ).odd().removeClass( "blue under" );
+ ]]></code>
+ <css><![CDATA[
+ p {
+ margin: 4px;
+ font-size: 16px;
+ font-weight: bolder;
+ }
+ .blue {
+ color: blue;
+ }
+ .under {
+ text-decoration: underline;
+ }
+ .highlight {
+ background: yellow;
+ }
+ ]]></css>
+ <html><![CDATA[
+ <p class="blue under">Hello</p>
+ <p class="blue under highlight">and</p>
+ <p class="blue under">then</p>
+ <p class="blue under">Goodbye</p>
+ ]]></html>
+ </example>
+ <example>
+ <desc>Remove the class 'blue' and 'under' from the matched elements (3.3+ syntax).</desc>
+ <code><![CDATA[
+ $( "p" ).odd().removeClass( [ "blue", "under" ] );
+ ]]></code>
+ <css><![CDATA[
+ p {
+ margin: 4px;
+ font-size: 16px;
+ font-weight: bolder;
+ }
+ .blue {
+ color: blue;
+ }
+ .under {
+ text-decoration: underline;
+ }
+ .highlight {
+ background: yellow;
+ }
+ ]]></css>
+ <html><![CDATA[
+ <p class="blue under">Hello</p>
+ <p class="blue under highlight">and</p>
+ <p class="blue under">then</p>
+ <p class="blue under">Goodbye</p>
+ ]]></html>
+ </example>
+ <category slug="attributes"/>
+ <category slug="manipulation/class-attribute"/>
+ <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>
+
+ <entry type="method" name="removeClass" return="jQuery">
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <desc>Remove all classes from each matched element.</desc>
+ <longdesc>
+ <p>Before jQuery version 1.12/2.2, the <code>.removeClass()</code> method manipulated the <code>className</code> <em>property</em> of the selected elements, not the <code>class</code> <em>attribute</em>. Once the property was changed, it was the browser that updated the attribute accordingly. This means that when the <code>class</code> attribute was updated and the last class name was removed, the browser might have set the attribute's value to an empty string instead of removing the attribute completely. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).</p>
+ <p>As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the <code>class</code> <em>attribute</em> is used instead. So, <code>.removeClass()</code> can be used on XML or SVG documents.</p>
+ </longdesc>
+ <example>
+ <desc>Remove all the classes from the matched elements.</desc>
+ <code><![CDATA[
+ $( "p" ).eq( 1 ).removeClass();
+ ]]></code>
+ <css><![CDATA[
+ p {
+ margin: 4px;
+ font-size: 16px;
+ font-weight: bolder;
+ }
+ .blue {
+ color: blue;
+ }
+ .under {
+ text-decoration: underline;
+ }
+ .highlight {
+ background: yellow;
+ }
+ ]]></css>
+ <html><![CDATA[
+ <p class="blue under">Hello</p>
+ <p class="blue under highlight">and</p>
+ <p class="blue under">then</p>
+ <p class="blue under">Goodbye</p>
+ ]]></html>
+ </example>
+ <category slug="attributes"/>
+ <category slug="manipulation/class-attribute"/>
+ <category slug="css"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.12-and-2.2"/>
+ </entry>
+</entries>
diff --git a/entries/removeData.xml b/entries/removeData.xml
index 3c2cf8ff4..e4dd08b1f 100644
--- a/entries/removeData.xml
+++ b/entries/removeData.xml
@@ -28,13 +28,13 @@
<example>
<desc>Set a data store for 2 names then remove one of them.</desc>
<code><![CDATA[
-$( "span:eq(0)" ).text( "" + $( "div" ).data( "test1" ) );
+$( "span" ).eq( 0 ).text( "" + $( "div" ).data( "test1" ) );
$( "div" ).data( "test1", "VALUE-1" );
$( "div" ).data( "test2", "VALUE-2" );
-$( "span:eq(1)" ).text( "" + $( "div").data( "test1" ) );
+$( "span" ).eq( 1 ).text( "" + $( "div").data( "test1" ) );
$( "div" ).removeData( "test1" );
-$( "span:eq(2)" ).text( "" + $( "div" ).data( "test1" ) );
-$( "span:eq(3)" ).text( "" + $( "div" ).data( "test2" ) );
+$( "span" ).eq( 2 ).text( "" + $( "div" ).data( "test1" ) );
+$( "span" ).eq( 3 ).text( "" + $( "div" ).data( "test2" ) );
]]></code>
<css><![CDATA[
div {
diff --git a/entries/removeProp.xml b/entries/removeProp.xml
index 0f4b77905..cc918d297 100644
--- a/entries/removeProp.xml
+++ b/entries/removeProp.xml
@@ -10,18 +10,19 @@
<desc>Remove a property for the set of matched elements.</desc>
<longdesc>
<p>The <code>.removeProp()</code> method removes properties set by the <code><a href="/https/github.com/prop/">.prop()</a></code> method.</p>
- <p>With some built-in properties of a DOM element or <code>window</code> object, browsers may generate an error if an attempt is made to remove the property. jQuery first assigns the value <code>undefined</code> to the property and ignores any error the browser generates. In general, it is only necessary to remove custom properties that have been set on an object, and not built-in (native) properties.</p>
- <p><strong>Note:</strong> Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use <code><a href="/https/github.com/prop/">.prop()</a></code> to set these properties to <code>false</code> instead.</p>
+ <p><strong>Note:</strong>This method should not be used to remove built-in (native) properties such as "checked", "disabled", "selected", or others. This can lead to unexpected behavior.</p>
+ <p>It's almost always better to use <code><a href="/https/github.com/prop/">.prop()</a></code> to set native properties to <code>false</code> instead of removing them.</p>
</longdesc>
<note id="prop-memory-leaks" type="additional"/>
<example>
<desc>Set a numeric property on a paragraph and then remove it. </desc>
<code><![CDATA[
-$( "p" )
+para = $( "p" );
+para
.prop( "luggageCode", 1234 )
- .append( "The secret luggage code is: ", String( $para.prop( "luggageCode" ) ), ". " )
- .removeProp( "luggageCode" );
- .append( "Now the secret luggage code is: ", String( $para.prop( "luggageCode" ) ), ". " );
+ .append( "The secret luggage code is: ", String( para.prop( "luggageCode" ) ), ". " )
+ .removeProp( "luggageCode" )
+ .append( "Now the secret luggage code is: ", String( para.prop( "luggageCode" ) ), ". " );
]]></code>
<css><![CDATA[
img {
diff --git a/entries/replaceWith.xml b/entries/replaceWith.xml
index dfdd39a79..219e3e640 100644
--- a/entries/replaceWith.xml
+++ b/entries/replaceWith.xml
@@ -69,7 +69,7 @@ $( "div.third" ).replaceWith( $( ".first" ) );
<example>
<desc>On click, replace the button with a div containing the same word.</desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( this ).replaceWith( "<div>" + $( this ).text() + "</div>" );
});
]]></code>
@@ -108,7 +108,7 @@ $( "p" ).replaceWith( "<b>Paragraph. </b>" );
<example>
<desc>On click, replace each paragraph with a div that is already in the DOM and selected with the <code>$()</code> function. Notice it doesn't clone the object but rather moves it to replace the paragraph.</desc>
<code><![CDATA[
-$( "p" ).click(function() {
+$( "p" ).on( "click", function() {
$( this ).replaceWith( $( "div" ) );
});
]]></code>
diff --git a/entries/reset-selector.xml b/entries/reset-selector.xml
index 301b0e5e2..db5586086 100644
--- a/entries/reset-selector.xml
+++ b/entries/reset-selector.xml
@@ -13,18 +13,18 @@
<example>
<desc>Finds all reset inputs.</desc>
<code><![CDATA[
-var input = $( "input:reset" ).css({
+var input = $( "input:reset" ).css( {
background: "yellow",
border: "3px red solid"
-});
+} );
$( "div" )
.text( "For this type jQuery found " + input.length + "." )
.css( "color", "red" );
// Prevent form submission
-$( "form" ).submit(function( event ) {
+$( "form" ).on( "submit", function( event ) {
event.preventDefault();
-});
+} );
]]></code>
<css><![CDATA[
textarea {
diff --git a/entries/resize-shorthand.xml b/entries/resize-shorthand.xml
new file mode 100644
index 000000000..31f69a5d0
--- /dev/null
+++ b/entries/resize-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="resize" return="jQuery" deprecated="3.3">
+ <title>.resize()</title>
+ <desc>Bind an event handler to the "resize" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.resize( handler )</code> or <code>.resize( eventData, handler )</code>, use <a href="/https/github.com/resize/#on1"><code>.on( "resize", handler )</code></a> or <a href="/https/github.com/resize/#on1"><code>.on( "resize", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.resize()</code>, use <a href="/https/github.com/resize/#trigger2"><code>.trigger( "resize" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/browser-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/resize.xml b/entries/resize.xml
index 53b2a4cf8..74cc61fe8 100644
--- a/entries/resize.xml
+++ b/entries/resize.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="resize" return="jQuery">
- <title>.resize()</title>
- <desc>Bind an event handler to the "resize" JavaScript event, or trigger that event on an element.</desc>
+<entries>
+
+<desc>Bind an event handler to the "resize" event, or trigger that event on an element.</desc>
+<entry type="method" name="on" return="jQuery">
+ <title>resize event</title>
+ <desc>Bind an event handler to the "resize" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""resize"" type="string">
+ <desc>The string <code>"resize"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,16 +18,15 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
- <p>This method is a shortcut for <code>.on('resize', handler)</code> in the first and second variations, and <code>.trigger( "resize" )</code> in the third.</p>
+ <div class="warning">
+ <p>This page describes the <code>resize</code> event. For the deprecated <code>.resize()</code> method, see <a href="/https/github.com/resize-shorthand/"><code>.resize()</code></a>.</p>
+ </div>
<p>The <code>resize</code> event is sent to the <code>window</code> element when the size of the browser window changes:</p>
<pre><code>
-$( window ).resize(function() {
- $( "#log" ).append( "<div>Handler for .resize() called.</div>" );
-});
+$( window ).on( "resize", function() {
+ $( "#log" ).append( "<div>Handler for `resize` called.</div>" );
+} );
</code></pre>
<p>Now whenever the browser window's size is changed, the message is appended to <div id="log"> one or more times, depending on the browser.</p>
<p>Code in a <code>resize</code> handler should never rely on the number of times the handler is called. Depending on implementation, <code>resize</code> events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera).</p>
@@ -36,12 +34,30 @@ $( window ).resize(function() {
<example>
<desc>To see the window width while (or after) it is resized, try:</desc>
<code><![CDATA[
-$( window ).resize(function() {
+$( window ).on( "resize", function() {
$( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
-});
+} );
]]></code>
</example>
<category slug="events/browser-events"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>resize event</title>
+ <desc>Trigger the "resize" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""resize"" type="string">
+ <desc>The string <code>"resize"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "resize", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/browser-events"/>
+ <category slug="version/1.0"/>
</entry>
+
+</entries>
diff --git a/entries/scroll-shorthand.xml b/entries/scroll-shorthand.xml
new file mode 100644
index 000000000..67b7997ed
--- /dev/null
+++ b/entries/scroll-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="scroll" return="jQuery" deprecated="3.3">
+ <title>.scroll()</title>
+ <desc>Bind an event handler to the "scroll" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.scroll( handler )</code> or <code>.scroll( eventData, handler )</code>, use <a href="/https/github.com/scroll/#on1"><code>.on( "scroll", handler )</code></a> or <a href="/https/github.com/scroll/#on1"><code>.on( "scroll", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.scroll()</code>, use <a href="/https/github.com/scroll/#trigger2"><code>.trigger( "scroll" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/browser-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/scroll.xml b/entries/scroll.xml
index 372d6c647..5f46ddfe0 100644
--- a/entries/scroll.xml
+++ b/entries/scroll.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="scroll" return="jQuery">
- <title>.scroll()</title>
- <desc>Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element.</desc>
+<entries>
+
+<desc>Bind an event handler to the "scroll" event, or trigger that event on an element.</desc>
+<entry type="method" name="on" return="jQuery">
+ <title>scroll event</title>
+ <desc>Bind an event handler to the "scroll" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""scroll"" type="string">
+ <desc>The string <code>"scroll"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,11 +18,10 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
- <p>This method is a shortcut for <code>.on( "scroll", handler )</code> in the first and second variations, and <code>.trigger( "scroll" )</code> in the third.</p>
+ <div class="warning">
+ <p>This page describes the <code>scroll</code> event. For the deprecated <code>.scroll()</code> method, see <a href="/https/github.com/scroll-shorthand/"><code>.scroll()</code></a>.</p>
+ </div>
<p>The <code>scroll</code> event is sent to an element when the user scrolls to a different place in the element. It applies to <code>window</code> objects, but also to scrollable frames and elements with the <code>overflow </code>CSS property set to <code>scroll</code> (or <code>auto</code> when the element's explicit height or width is less than the height or width of its contents).</p>
<p>For example, consider the HTML:</p>
<pre><code>
@@ -41,26 +39,27 @@
Trigger the handler
</div>
<div id="log"></div>
-</code></pre>
+ </code></pre>
<p>The style definition is present to make the target element small enough to be scrollable:</p>
- <p class="image">
+ <figure>
<img src="/https/github.com/resources/0042_05_11.png" alt=""/>
- </p>
+ <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
+ </figure>
<p>The <code>scroll</code> event handler can be bound to this element:</p>
<pre><code>
-$( "#target" ).scroll(function() {
- $( "#log" ).append( "<div>Handler for .scroll() called.</div>" );
-});
+$( "#target" ).on( "scroll", function() {
+ $( "#log" ).append( "<div>Handler for `scroll` called.</div>" );
+} );
</code></pre>
<p>Now when the user scrolls the text up or down, one or more messages are appended to <code><div id="log"></div></code>:</p>
<p>
- <samp>Handler for .scroll() called.</samp>
+ <samp>Handler for `scroll` called.</samp>
</p>
- <p>To trigger the event manually, apply <code>.scroll()</code> without an argument:</p>
+ <p>To trigger the event manually, use <code>.trigger( "scroll" )</code>:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( "#target" ).scroll();
-});
+$( "#other" ).on( "click", function() {
+ $( "#target" ).trigger( "scroll" );
+} );
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also append the message.</p>
<p>A <code>scroll</code> event is sent whenever the element's scroll position changes, regardless of the cause. A mouse click or drag on the scroll bar, dragging inside the element, pressing the arrow keys, or using the mouse's scroll wheel could cause this event.</p>
@@ -71,9 +70,9 @@ $( "#other" ).click(function() {
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
-$( window ).scroll(function() {
+$( window ).on( "scroll", function() {
$( "span" ).css( "display", "inline" ).fadeOut( "slow" );
-});
+} );
]]></code>
<css><![CDATA[
div {
@@ -94,5 +93,23 @@ $( window ).scroll(function() {
</example>
<category slug="events/browser-events"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>scroll event</title>
+ <desc>Trigger the "scroll" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""scroll"" type="string">
+ <desc>The string <code>"scroll"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "scroll", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/browser-events"/>
+ <category slug="version/1.0"/>
</entry>
+
+</entries>
diff --git a/entries/scrollLeft.xml b/entries/scrollLeft.xml
index 2b53896bd..7fe21491a 100644
--- a/entries/scrollLeft.xml
+++ b/entries/scrollLeft.xml
@@ -16,8 +16,8 @@
<example>
<desc>Get the scrollLeft of a paragraph.</desc>
<code><![CDATA[
-var p = $( "p:first" );
-$( "p:last" ).text( "scrollLeft:" + p.scrollLeft() );
+var p = $( "p" ).first();
+$( "p" ).last().text( "scrollLeft:" + p.scrollLeft() );
]]></code>
<css><![CDATA[
p {
diff --git a/entries/scrollTop.xml b/entries/scrollTop.xml
index 027d3db0b..18250efae 100644
--- a/entries/scrollTop.xml
+++ b/entries/scrollTop.xml
@@ -1,6 +1,6 @@
<?xml version="1.0"?>
<entries>
- <entry type="method" name="scrollTop" return="Integer">
+ <entry type="method" name="scrollTop" return="Number">
<title>.scrollTop()</title>
<signature>
<added>1.2.6</added>
@@ -12,8 +12,8 @@
<example>
<desc>Get the scrollTop of a paragraph.</desc>
<code><![CDATA[
-var p = $( "p:first" );
-$( "p:last" ).text( "scrollTop:" + p.scrollTop() );
+var p = $( "p" ).first();
+$( "p" ).last().text( "scrollTop:" + p.scrollTop() );
]]></code>
<css><![CDATA[
p {
@@ -35,7 +35,7 @@ $( "p:last" ).text( "scrollTop:" + p.scrollTop() );
<signature>
<added>1.2.6</added>
<argument name="value" type="Number">
- <desc>An integer indicating the new position to set the scroll bar to.</desc>
+ <desc>A number indicating the new position to set the scroll bar to.</desc>
</argument>
</signature>
<desc>Set the current vertical position of the scroll bar for each of the set of matched elements.</desc>
diff --git a/entries/select-shorthand.xml b/entries/select-shorthand.xml
new file mode 100644
index 000000000..e3fb02279
--- /dev/null
+++ b/entries/select-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="select" return="jQuery" deprecated="3.3">
+ <title>.select()</title>
+ <desc>Bind an event handler to the "select" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.select( handler )</code> or <code>.select( eventData, handler )</code>, use <a href="/https/github.com/select/#on1"><code>.on( "select", handler )</code></a> or <a href="/https/github.com/select/#on1"><code>.on( "select", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.select()</code>, use <a href="/https/github.com/select/#trigger2"><code>.trigger( "select" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/form-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/select.xml b/entries/select.xml
index 597c0f1d3..605738810 100644
--- a/entries/select.xml
+++ b/entries/select.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="select" return="jQuery">
- <title>.select()</title>
- <desc>Bind an event handler to the "select" JavaScript event, or trigger that event on an element.</desc>
+<entries>
+<desc>Bind an event handler to the "select" event, or trigger that event on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>select event</title>
+ <desc>Bind an event handler to the "select" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""select"" type="string">
+ <desc>The string <code>"select"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,11 +18,10 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
- <p>This method is a shortcut for <code>.on( "select", handler )</code> in the first two variations, and <code>.trigger( "select" )</code> in the third.</p>
+ <div class="warning">
+ <p>This page describes the <code>select</code> event. For the deprecated <code>.select()</code> method, see <a href="/https/github.com/select-shorthand/"><code>.select()</code></a>.</p>
+ </div>
<p>The <code>select</code> event is sent to an element when the user makes a text selection inside it. This event is limited to <code><input type="text"></code> fields and <code><textarea></code> boxes.</p>
<p>For example, consider the HTML:</p>
<pre><code>
@@ -35,19 +33,19 @@
</div></code></pre>
<p>The event handler can be bound to the text input:</p>
<pre><code>
-$( "#target" ).select(function() {
- alert( "Handler for .select() called." );
-});
+$( "#target" ).on( "select", function() {
+ alert( "Handler for `select` called." );
+} );
</code></pre>
- <p>Now when any portion of the text is selected, the alert is displayed. Merely setting the location of the insertion point will not trigger the event. To trigger the event manually, apply <code>.select()</code> without an argument:</p>
+ <p>Now when any portion of the text is selected, the alert is displayed. Merely setting the location of the insertion point will not trigger the event. To trigger the event manually, use <code>.trigger( "select" )</code>:</p>
<pre><code>
-$( "#other").click(function() {
- $( "#target" ).select();
-});
+$( "#other").on( "click", function() {
+ $( "#target" ).trigger( "select" );
+} );
</code></pre>
<p>After this code executes, clicks on the Trigger button will also alert the message:</p>
<p>
- <samp>Handler for .select() called.</samp>
+ <samp>Handler for `select` called.</samp>
</p>
<p>In addition, the default <code>select</code> action on the field will be fired, so the entire text field will be selected.</p>
<div class="warning">
@@ -57,9 +55,9 @@ $( "#other").click(function() {
<example>
<desc>To do something when text in input boxes is selected:</desc>
<code><![CDATA[
-$( ":input" ).select(function() {
+$( ":input" ).on( "select", function() {
$( "div" ).text( "Something was selected" ).show().fadeOut( 1000 );
-});
+} );
]]></code>
<css><![CDATA[
p {
@@ -79,11 +77,29 @@ $( ":input" ).select(function() {
<example>
<desc>To trigger the select event on all input elements, try:</desc>
<code><![CDATA[
-$( "input" ).select();
+$( "input" ).trigger( "select" );
]]></code>
</example>
<category slug="events/form-events"/>
<category slug="forms"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>select event</title>
+ <desc>Trigger the "select" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""select"" type="string">
+ <desc>The string <code>"select"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "select", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/form-events"/>
+ <category slug="version/1.0"/>
</entry>
+
+</entries>
diff --git a/entries/selected-selector.xml b/entries/selected-selector.xml
index c96bf422f..5eb6cef8d 100644
--- a/entries/selected-selector.xml
+++ b/entries/selected-selector.xml
@@ -14,13 +14,13 @@
<desc>Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw.</desc>
<code><![CDATA[
$( "select" )
- .change(function() {
+ .on( "change", function() {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
- });
+ } );
$( "div" ).text( str );
- })
+ } )
.trigger( "change" );
]]></code>
<css><![CDATA[
diff --git a/entries/selector.xml b/entries/selector.xml
index 971a2535c..229e674b9 100644
--- a/entries/selector.xml
+++ b/entries/selector.xml
@@ -1,15 +1,17 @@
<?xml version="1.0"?>
-<entry type="property" name="selector" return="String" deprecated="1.7" removed="1.9">
+<entry type="property" name="selector" return="String" deprecated="1.7" removed="3.0">
<title>.selector</title>
<signature>
<added>1.3</added>
</signature>
<desc>A selector representing selector passed to jQuery(), if any, when creating the original set.</desc>
<longdesc>
- <p>The <code>.selector</code> property was deprecated in jQuery 1.7 and is only maintained to the extent needed for supporting <code>.live()</code> in the jQuery Migrate plugin. It may be removed without notice in a future version. The property was never a reliable indicator of the selector that could be used to obtain the set of elements currently contained in the jQuery set where it was a property, since subsequent traversal methods may have changed the set. Plugins that need to use a selector string within their plugin can require it as a parameter of the method. For example, a "foo" plugin could be written as <code>$.fn.foo = function( selector, options ) { /* plugin code goes here */ };</code>, and the person using the plugin would write <code>$( "div.bar" ).foo( "div.bar", {dog: "bark"} );</code> with the <code>"div.bar"</code> selector repeated as the first argument of <code>.foo()</code>.</p>
+ <div class="warning">
+ <p>Note: This API has been removed in jQuery 3.0. The property was never a reliable indicator of the selector that could be used to obtain the set of elements currently contained in the jQuery set where it was a property, since subsequent traversal methods may have changed the set. Plugins that need to use a selector string within their plugin can require it as a parameter of the method. For example, a "foo" plugin could be written as <code>$.fn.foo = function( selector, options ) { /* plugin code goes here */ };</code>, and the person using the plugin would write <code>$( "div.bar" ).foo( "div.bar", {dog: "bark"} );</code> with the <code>"div.bar"</code> selector repeated as the first argument of <code>.foo()</code>.</p>
+ </div>
</longdesc>
<category slug="internals"/>
- <category slug="properties/global-jquery-object-properties"/>
+ <category slug="properties/jquery-object-instance-properties"/>
<category slug="version/1.3"/>
<category slug="deprecated/deprecated-1.7"/>
<category slug="removed"/>
diff --git a/entries/serialize.xml b/entries/serialize.xml
index c5c99ccbb..55dd099ff 100644
--- a/entries/serialize.xml
+++ b/entries/serialize.xml
@@ -15,7 +15,7 @@ $( "form" ).on( "submit", function( event ) {
});
</code></pre>
<p>In this case, jQuery serializes the successful controls within the form. Only <code>form</code> elements are examined for inputs they contain, in all other cases the input elements to be serialized should be part of the set passed to the <code>.serialize()</code> method. Selecting both the form and its children in a set will cause duplicates in the serialized string.</p>
- <p>Note: Only <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2">"successful controls"</a> are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a <code>name</code> attribute. Values from checkboxes and radio buttons (<code>input</code>s of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.</p>
+ <p>Note: Only <a href="https://www.w3.org/TR/html401/interact/forms.html#h-17.13.2">"successful controls"</a> are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a <code>name</code> attribute. Values from checkboxes and radio buttons (<code>input</code>s of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.</p>
</longdesc>
<example>
<desc>Serialize a form to a query string that could be sent to a server in an Ajax request.</desc>
diff --git a/entries/serializeArray.xml b/entries/serializeArray.xml
index bc46e920f..09125d062 100644
--- a/entries/serializeArray.xml
+++ b/entries/serializeArray.xml
@@ -28,13 +28,13 @@
</div>
</form>
</code></pre>
- <p>The <code>.serializeArray()</code> method uses the standard W3C rules for <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2">successful controls</a> to determine which elements it should include; in particular the element cannot be disabled and must contain a <code>name</code> attribute. No submit button value is serialized since the form was not submitted using a button. Data from file select elements is not serialized.</p>
+ <p>The <code>.serializeArray()</code> method uses the standard W3C rules for <a href="https://www.w3.org/TR/html401/interact/forms.html#h-17.13.2">successful controls</a> to determine which elements it should include; in particular the element cannot be disabled and must contain a <code>name</code> attribute. No submit button value is serialized since the form was not submitted using a button. Data from file select elements is not serialized. Elements that do not contain a <code>value</code> attribute are represented with the empty string value.</p>
<p>This method can act on a jQuery object that has selected individual form controls, such as <code><input></code>, <code><textarea></code>, and <code><select></code>. However, it is typically easier to select the <code><form></code> element itself for serialization:</p>
<pre><code>
-$( "form" ).submit(function( event ) {
+$( "form" ).on( "submit", function( event ) {
console.log( $( this ).serializeArray() );
event.preventDefault();
-});
+} );
</code></pre>
<p>This produces the following data structure (provided that the browser supports <code>console.log</code>):</p>
<pre><code>
@@ -70,11 +70,11 @@ $( "form" ).submit(function( event ) {
$( "#results" ).empty();
jQuery.each( fields, function( i, field ) {
$( "#results" ).append( field.value + " " );
- });
+ } );
}
- $( ":checkbox, :radio" ).click( showValues );
- $( "select" ).change( showValues );
+ $( ":checkbox, :radio" ).on( "click", showValues );
+ $( "select" ).on( "change", showValues );
showValues();
]]></code>
<css><![CDATA[
diff --git a/entries/show.xml b/entries/show.xml
index f0745958e..2ce1c4a4c 100644
--- a/entries/show.xml
+++ b/entries/show.xml
@@ -32,14 +32,16 @@
<pre><code>
$( ".target" ).show();
</code></pre>
- <p>The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling <code>.css( "display", "block")</code>, except that the <code>display</code> property is restored to whatever it was initially. If an element has a <code>display</code> value of <code>inline</code>, then is hidden and shown, it will once again be displayed <code>inline</code>.</p>
- <p><strong>Note: </strong> If using !important in your styles, such as
- <code>display: none !important</code>,
- it is necessary to override the style using <code>.css( "display", "block !important")</code> should you wish for <code>.show()</code> to function correctly.</p>
+ <p>The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling <code>.css( "display", "block" )</code>, except that the <code>display</code> property is restored to whatever it was initially. If an element has a <code>display</code> value of <code>inline</code>, then is hidden and shown, it will once again be displayed <code>inline</code>.</p>
+ <p><strong>Note: </strong> If using !important in your styles, such as <code>display: none !important</code>, <code>.show()</code> will not override <code>!important</code>.
+ It is recommended to use different classes with <code>.addClass()</code>, <code>.removeClass()</code> or <code>.toggleClass()</code>. Another approach is using <code>.attr( "style", "display: block !important;" )</code>; be careful, though, as it overwrites the style attribute of the element.</p>
<p>When a duration, a plain object, or a "complete" function is provided, <code>.show()</code> becomes an animation method. The <code>.show()</code> method animates the width, height, and opacity of the matched elements simultaneously.</p>
<p>Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings <code>'fast'</code> and <code>'slow'</code> can be supplied to indicate durations of <code>200</code> and <code>600</code> milliseconds, respectively.</p>
- <p>As of jQuery 1.4.3, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com">jQuery UI suite</a>.</p>
+ <p>As of jQuery 1.4.3, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="https://jqueryui.com">jQuery UI suite</a>.</p>
<p>If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but <code>this</code> is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.</p>
+ <div class="warning">
+ <p><strong>Note:</strong> This method may cause performance issues, especially when used on many elements. If you're encountering such issues, use performance testing tools to determine whether this method is causing them. Moreover, this method can cause problems with responsive layouts if the display value differs at different viewport sizes.</p>
+ </div>
<p>We can animate any element, such as a simple image:</p>
<pre><code>
<div id="clickme">
@@ -47,24 +49,25 @@ $( ".target" ).show();
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
With the element initially hidden, we can show it slowly:
-$( "#clickme" ).click(function() {
+$( "#clickme" ).on( "click", function() {
$( "#book" ).show( "slow", function() {
// Animation complete.
});
});
</code></pre>
- <p class="image four-across">
- <img src="/https/github.com/resources/0042_06_01.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_02.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_03.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_04.png" alt=""/>
- </p>
+ <figure>
+ <img class="column three" src="/https/github.com/resources/0042_06_01.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_02.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_03.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_04.png" alt=""/>
+ <figcaption>Figure 1 - Illustration of the <code>show()</code> effect</figcaption>
+ </figure>
</longdesc>
<note id="jquery.fx.off" type="additional" data-title=".show()"/>
<example>
<desc>Animates all hidden paragraphs to show slowly, completing the animation within 600 milliseconds.</desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( "p" ).show( "slow" );
});
]]></code>
@@ -81,13 +84,13 @@ $( "button" ).click(function() {
<example>
<desc>Show the first div, followed by each next adjacent sibling div in order, with a 200ms animation. Each animation starts when the previous sibling div's animation ends.</desc>
<code><![CDATA[
-$( "#showr" ).click(function() {
+$( "#showr" ).on( "click", function() {
$( "div" ).first().show( "fast", function showNext() {
$( this ).next( "div" ).show( "fast", showNext );
});
});
-$( "#hidr" ).click(function() {
+$( "#hidr" ).on( "click", function() {
$( "div" ).hide( 1000 );
});
]]></code>
@@ -117,19 +120,19 @@ function doIt() {
$( "span,div" ).show( "slow" );
}
// Can pass in function name
-$( "button" ).click( doIt );
+$( "button" ).on( "click", doIt );
-$( "form" ).submit(function( event ) {
+$( "form" ).on( "submit", function( event ) {
if ( $( "input" ).val() === "yes" ) {
$( "p" ).show( 4000, function() {
$( this ).text( "Ok, DONE! (now showing)" );
- });
+ } );
}
$( "span,div" ).hide( "fast" );
// Prevent form submission
event.preventDefault();
-});
+} );
]]></code>
<css><![CDATA[
span {
diff --git a/entries/siblings.xml b/entries/siblings.xml
index d6b1be021..cb9e6e0b4 100644
--- a/entries/siblings.xml
+++ b/entries/siblings.xml
@@ -26,7 +26,7 @@
$( "li.third-item" ).siblings().css( "background-color", "red" );
</code></pre>
<p>The result of this call is a red background behind items 1, 2, 4, and 5. Since we do not supply a selector expression, all of the siblings are part of the object. If we had supplied one, only the matching items among these four would be included.</p>
- <p>The original element is not included among the siblings, which is important to remember when we wish to find all elements at a particular level of the DOM tree.</p>
+ <p>The original element is not included among the siblings, which is important to remember when we wish to find all elements at a particular level of the DOM tree. However, if the original collection contains more than one element, they might be mutual siblings and will both be found. If you need an exclusive list of siblings, use <code>$collection.siblings().not($collection)</code>.</p>
</longdesc>
<example>
<desc>Find the unique siblings of all yellow li elements in the 3 lists (including other yellow li elements if appropriate).</desc>
diff --git a/entries/size.xml b/entries/size.xml
index 2d092a37b..a6e03e46f 100644
--- a/entries/size.xml
+++ b/entries/size.xml
@@ -1,12 +1,14 @@
<?xml version="1.0"?>
-<entry type="method" name="size" return="Integer" deprecated="1.8">
+<entry type="method" name="size" return="Integer" deprecated="1.8" removed="3.0">
<title>.size()</title>
<signature>
<added>1.0</added>
</signature>
<desc>Return the number of elements in the jQuery object.</desc>
<longdesc>
- <p>The <code>.size()</code> method is deprecated as of jQuery 1.8. Use the <code><a href="/https/github.com/length/">.length</a></code> property instead.</p>
+ <div class="warning">
+ <p>Note: This method has been removed in jQuery 3.0. Use the <code><a href="/https/github.com/length/">.length</a></code> property instead.</p>
+ </div>
<p>The <code>.size()</code> method is functionally equivalent to the <code><a href="/https/github.com/length/">.length</a></code> property; however, <strong>the <code>.length</code> property is preferred</strong> because it does not have the overhead of a function call.</p>
<p>Given a simple unordered list on the page:</p>
@@ -30,40 +32,21 @@ alert( "Size: " + $( "li" ).length );
</p>
</longdesc>
<example>
- <desc>Count the divs. Click to add more.</desc>
+ <desc>Count the divs.</desc>
<code><![CDATA[
$( document.body )
- .click(function() {
+ .on( "click", function() {
$( this ).append( $( "<div>" ) );
var n = $( "div" ).size();
$( "span" ).text( "There are " + n + " divs. Click to add more." );
- })
+ } )
// Trigger the click to start
- .click();
+ .trigger( "click" );
]]></code>
- <css><![CDATA[
- body {
- cursor: pointer;
- min-height: 100px;
- }
- div {
- width: 50px;
- height: 30px;
- margin: 5px;
- float: left;
- background: blue;
- }
- span {
- color: red;
- }
-]]></css>
- <html><![CDATA[
-<span></span>
-<div></div>
-]]></html>
</example>
<category slug="miscellaneous/dom-element-methods"/>
<category slug="version/1.0"/>
<category slug="deprecated/deprecated-1.8"/>
+ <category slug="removed"/>
</entry>
diff --git a/entries/slice.xml b/entries/slice.xml
index 81d76c989..8f94ce16a 100644
--- a/entries/slice.xml
+++ b/entries/slice.xml
@@ -62,7 +62,7 @@ function colorEm() {
").css( 'background', 'yellow' );" );
}
-$( "button" ).click( colorEm );
+$( "button" ).on( "click", colorEm );
]]></code>
<css><![CDATA[
div {
diff --git a/entries/slideDown.xml b/entries/slideDown.xml
index 01a14e038..e70c81f79 100644
--- a/entries/slideDown.xml
+++ b/entries/slideDown.xml
@@ -30,20 +30,21 @@
</code></pre>
<p>With the element initially hidden, we can show it slowly:</p>
<pre><code>
-$( "#clickme" ).click(function() {
+$( "#clickme" ).on( "click", function() {
$( "#book" ).slideDown( "slow", function() {
// Animation complete.
});
});
</code></pre>
- <p class="image four-across">
- <img src="/https/github.com/resources/0042_06_17.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_18.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_19.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_20.png" alt=""/>
- </p>
+ <figure>
+ <img class="column three" src="/https/github.com/resources/0042_06_17.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_18.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_19.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_20.png" alt=""/>
+ <figcaption>Figure 1 - Illustration of the <code>slideDown()</code> effect</figcaption>
+ </figure>
<h4 id="easing">Easing</h4>
- <p><strong>As of jQuery 1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com">jQuery UI suite</a>.</p>
+ <p><strong>As of jQuery 1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="https://jqueryui.com">jQuery UI suite</a>.</p>
<h4 id="callback-function">Callback Function</h4>
<p>If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but <code>this</code> is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.</p>
<p><strong>As of jQuery 1.6</strong>, the <code><a href="/https/github.com/promise/">.promise()</a></code> method can be used in conjunction with the <code><a href="/https/github.com/deferred.done/">deferred.done()</a></code> method to execute a single callback for the animation as a whole when <em>all</em> matching elements have completed their animations ( See the <a href="/https/github.com/promise/#example-1">example for .promise()</a> ). </p>
@@ -53,13 +54,13 @@ $( "#clickme" ).click(function() {
<example>
<desc>Animates all divs to slide down and show themselves over 600 milliseconds.</desc>
<code><![CDATA[
-$( document.body ).click(function () {
- if ( $( "div:first" ).is( ":hidden" ) ) {
+$( document.body ).on( "click", function () {
+ if ( $( "div" ).first().is( ":hidden" ) ) {
$( "div" ).slideDown( "slow" );
} else {
$( "div" ).hide();
}
-});
+} );
]]></code>
<css><![CDATA[
div {
@@ -81,20 +82,20 @@ Click me!
<example>
<desc>Animates all inputs to slide down, completing the animation within 1000 milliseconds. Once the animation is done, the input look is changed especially if it is the middle input which gets the focus.</desc>
<code><![CDATA[
-$( "div" ).click(function() {
- $( this ).css({
+$( "div" ).on( "click", function() {
+ $( this ).css( {
borderStyle: "inset",
cursor: "wait"
- });
+ } );
$( "input" ).slideDown( 1000, function() {
$( this )
.css( "border", "2px red inset" )
.filter( ".middle" )
.css( "background", "yellow" )
- .focus();
+ .trigger( "focus" );
$( "div" ).css( "visibility", "hidden" );
- });
-});
+ } );
+} );
]]></code>
<css><![CDATA[
diff --git a/entries/slideToggle.xml b/entries/slideToggle.xml
index e3c3d4744..9a91bed87 100644
--- a/entries/slideToggle.xml
+++ b/entries/slideToggle.xml
@@ -30,28 +30,30 @@
</code></pre>
<p>We will cause <code>.slideToggle()</code> to be called when another element is clicked:</p>
<pre><code>
-$( "#clickme" ).click(function() {
+$( "#clickme" ).on( "click", function() {
$( "#book" ).slideToggle( "slow", function() {
// Animation complete.
});
});
</code></pre>
<p>With the element initially shown, we can hide it slowly with the first click:</p>
- <p class="image four-across">
- <img src="/https/github.com/resources/0042_06_25.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_26.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_27.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_28.png" alt=""/>
- </p>
+ <figure>
+ <img class="column three" src="/https/github.com/resources/0042_06_25.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_26.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_27.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_28.png" alt=""/>
+ <figcaption>Figure 1 - Illustration of the <code>slideToggle()</code> effect when hiding the image</figcaption>
+ </figure>
<p>A second click will show the element once again:</p>
- <p class="image four-across">
- <img src="/https/github.com/resources/0042_06_29.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_30.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_31.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_32.png" alt=""/>
- </p>
+ <figure>
+ <img class="column three" src="/https/github.com/resources/0042_06_29.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_30.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_31.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_32.png" alt=""/>
+ <figcaption>Figure 2 - Illustration of the <code>slideToggle()</code> effect when showing the image</figcaption>
+ </figure>
<h4 id="easing">Easing</h4>
- <p><strong>As of jQuery 1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com">jQuery UI suite</a>.</p>
+ <p><strong>As of jQuery 1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="https://jqueryui.com">jQuery UI suite</a>.</p>
<h4 id="callback-function">Callback Function</h4>
<p>If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but <code>this</code> is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.</p>
<p><strong>As of jQuery 1.6</strong>, the <code><a href="/https/github.com/promise/">.promise()</a></code> method can be used in conjunction with the <code><a href="/https/github.com/deferred.done/">deferred.done()</a></code> method to execute a single callback for the animation as a whole when <em>all</em> matching elements have completed their animations ( See the <a href="/https/github.com/promise/#example-1">example for .promise()</a> ). </p>
@@ -61,7 +63,7 @@ $( "#clickme" ).click(function() {
<example>
<desc>Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.</desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( "p" ).slideToggle( "slow" );
});
]]></code>
@@ -82,7 +84,7 @@ $( "button" ).click(function() {
<example>
<desc>Animates divs between dividers with a toggle that makes some appear and some disappear.</desc>
<code><![CDATA[
-$( "#aa" ).click(function() {
+$( "#aa" ).on( "click", function() {
$( "div:not(.still)" ).slideToggle( "slow", function() {
var n = parseInt( $( "span" ).text(), 10 );
$( "span" ).text( n + 1 );
diff --git a/entries/slideUp.xml b/entries/slideUp.xml
index 345d3c4f5..c0d5f8ebf 100644
--- a/entries/slideUp.xml
+++ b/entries/slideUp.xml
@@ -30,20 +30,21 @@
</code></pre>
<p>With the element initially shown, we can hide it slowly:</p>
<pre><code>
-$( "#clickme" ).click(function() {
+$( "#clickme" ).on( "click", function() {
$( "#book" ).slideUp( "slow", function() {
// Animation complete.
});
});
</code></pre>
- <p class="image four-across">
- <img src="/https/github.com/resources/0042_06_21.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_22.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_23.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_24.png" alt=""/>
- </p>
+ <figure>
+ <img class="column three" src="/https/github.com/resources/0042_06_21.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_22.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_23.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_24.png" alt=""/>
+ <figcaption>Figure 1 - Illustration of the <code>slideUp()</code> effect</figcaption>
+ </figure>
<h4 id="easing">Easing</h4>
- <p><strong>As of jQuery 1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com">jQuery UI suite</a>.</p>
+ <p><strong>As of jQuery 1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="https://jqueryui.com">jQuery UI suite</a>.</p>
<h4 id="callback-function">Callback Function</h4>
<p>If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but <code>this</code> is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.</p>
<p><strong>As of jQuery 1.6</strong>, the <code><a href="/https/github.com/promise/">.promise()</a></code> method can be used in conjunction with the <code><a href="/https/github.com/deferred.done/">deferred.done()</a></code> method to execute a single callback for the animation as a whole when <em>all</em> matching elements have completed their animations ( See the <a href="/https/github.com/promise/#example-1">example for .promise()</a> ). </p>
@@ -53,13 +54,13 @@ $( "#clickme" ).click(function() {
<example>
<desc>Animates all divs to slide up, completing the animation within 400 milliseconds.</desc>
<code><![CDATA[
-$( document.body ).click(function() {
- if ( $( "div:first" ).is( ":hidden" ) ) {
+$( document.body ).on( "click", function() {
+ if ( $( "div" ).first().is( ":hidden" ) ) {
$( "div" ).show( "slow" );
} else {
$( "div" ).slideUp();
}
-});
+} );
]]></code>
<css><![CDATA[
div {
@@ -82,7 +83,7 @@ Click me!
<example>
<desc>Animates the parent paragraph to slide up, completing the animation within 200 milliseconds. Once the animation is done, it displays an alert.</desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( this ).parent().slideUp( "slow", function() {
$( "#msg" ).text( $( "button", this ).text() + " has completed." );
});
diff --git a/entries/stop.xml b/entries/stop.xml
index ce38bd010..60062614a 100644
--- a/entries/stop.xml
+++ b/entries/stop.xml
@@ -4,10 +4,10 @@
<desc>Stop the currently-running animation on the matched elements.</desc>
<signature>
<added>1.2</added>
- <argument name="clearQueue" type="Boolean" optional="true">
+ <argument name="clearQueue" type="Boolean" optional="true" default="false">
<desc>A Boolean indicating whether to remove queued animation as well. Defaults to <code>false</code>.</desc>
</argument>
- <argument name="jumpToEnd" type="Boolean" optional="true">
+ <argument name="jumpToEnd" type="Boolean" optional="true" default="false">
<desc>A Boolean indicating whether to complete the current animation immediately. Defaults to <code>false</code>.</desc>
</argument>
</signature>
@@ -16,10 +16,10 @@
<argument name="queue" type="String" optional="true">
<desc>The name of the queue in which to stop animations.</desc>
</argument>
- <argument name="clearQueue" type="Boolean" optional="true">
+ <argument name="clearQueue" type="Boolean" optional="true" default="false">
<desc>A Boolean indicating whether to remove queued animation as well. Defaults to <code>false</code>.</desc>
</argument>
- <argument name="jumpToEnd" type="Boolean" optional="true">
+ <argument name="jumpToEnd" type="Boolean" optional="true" default="false">
<desc>A Boolean indicating whether to complete the current animation immediately. Defaults to <code>false</code>.</desc>
</argument>
</signature>
@@ -53,17 +53,17 @@ $( "#hoverme-stop-2" ).hover(function() {
<desc>Click the Go button once to start the animation, then click the STOP button to stop it where it's currently positioned. Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.</desc>
<code><![CDATA[
// Start animation
-$( "#go" ).click(function() {
+$( "#go" ).on( "click", function() {
$( ".block" ).animate({ left: "+=100px" }, 2000 );
});
// Stop animation when button is clicked
-$( "#stop" ).click(function() {
+$( "#stop" ).on( "click", function() {
$( ".block" ).stop();
});
// Start animation in the opposite direction
-$( "#back" ).click(function() {
+$( "#back" ).on( "click", function() {
$( ".block" ).animate({ left: "-=100px" }, 2000 );
});
]]></code>
diff --git a/entries/submit-selector.xml b/entries/submit-selector.xml
index dfb9ca72d..f6c48b8ff 100644
--- a/entries/submit-selector.xml
+++ b/entries/submit-selector.xml
@@ -15,31 +15,31 @@
<code><![CDATA[
var submitEl = $( "td :submit" )
.parent( "td" )
- .css({
+ .css( {
background: "yellow",
border: "3px red solid"
- })
+ } )
.end();
$( "#result" ).text( "jQuery matched " + submitEl.length + " elements." );
// Prevent form submission
-$( "form" ).submit(function( event ) {
+$( "form" ).on( "submit", function( event ) {
event.preventDefault();
-});
+} );
// Extra JS to make the HTML easier to edit (None of this is relevant to the ':submit' selector)
$( "#exampleTable" ).find( "td" ).each(function( i, el ) {
var inputEl = $( el ).children(),
inputType = inputEl.attr( "type" ) ? " type='" + inputEl.attr( "type" ) + "'" : "" ;
$( el ).before( "<td>" + inputEl[ 0 ].nodeName + inputType + "</td>" );
-})
+} );
]]></code>
<css><![CDATA[
textarea {
height: 45px;
}
- ]]></css>
+]]></css>
<html><![CDATA[
<form>
<table id="exampleTable" border="1" cellpadding="10" align="center">
diff --git a/entries/submit-shorthand.xml b/entries/submit-shorthand.xml
new file mode 100644
index 000000000..20d9a0788
--- /dev/null
+++ b/entries/submit-shorthand.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<entry type="method" name="submit" return="jQuery" deprecated="3.3">
+ <title>.submit()</title>
+ <desc>Bind an event handler to the "submit" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API is deprecated.</p>
+ <p>Instead of <code>.submit( handler )</code> or <code>.submit( eventData, handler )</code>, use <a href="/https/github.com/submit/#on1"><code>.on( "submit", handler )</code></a> or <a href="/https/github.com/submit/#on1"><code>.on( "submit", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.submit()</code>, use <a href="/https/github.com/submit/#trigger2"><code>.trigger( "submit" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/form-events"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.3"/>
+</entry>
diff --git a/entries/submit.xml b/entries/submit.xml
index 286664201..42a32ea11 100644
--- a/entries/submit.xml
+++ b/entries/submit.xml
@@ -1,16 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="submit" return="jQuery">
- <title>.submit()</title>
- <desc>Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.</desc>
+<entries>
+<desc>Bind an event handler to the "submit" event, or trigger that event on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>submit event</title>
+ <desc>Bind an event handler to the "submit" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute each time the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""submit"" type="string">
+ <desc>The string <code>"submit"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
@@ -19,11 +18,10 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <signature>
- <added>1.0</added>
- </signature>
<longdesc>
- <p>This method is a shortcut for <code>.on( "submit", handler )</code> in the first variation, and <code>.trigger( "submit" )</code> in the third.</p>
+ <div class="warning">
+ <p>This page describes the <code>submit</code> event. For the deprecated <code>.submit()</code> method, see <a href="/https/github.com/submit-shorthand/"><code>.submit()</code></a>.</p>
+ </div>
<p>The <code>submit</code> event is sent to an element when the user is attempting to submit a form. It can only be attached to <code><form></code> elements. Forms can be submitted either by clicking an explicit <code><input type="submit"></code>, <code><input type="image"></code>, or <code><button type="submit"></code>, or by pressing <kbd>Enter</kbd> when certain form elements have focus.</p>
<div class="warning">
<p>Depending on the browser, the Enter key may only cause a form submission if the form has exactly one text field, or only when there is a submit button present. The interface should not rely on a particular behavior for this key unless the issue is forced by observing the keypress event for presses of the Enter key.</p>
@@ -39,16 +37,16 @@
</div></code></pre>
<p>The event handler can be bound to the form:</p>
<pre><code>
-$( "#target" ).submit(function( event ) {
- alert( "Handler for .submit() called." );
+$( "#target" ).on( "submit", function( event ) {
+ alert( "Handler for `submit` called." );
event.preventDefault();
});
</code></pre>
<p>Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling <code>.preventDefault()</code> on the event object or by returning <code>false</code> from our handler. We can trigger the event manually when another element is clicked:</p>
<pre><code>
-$( "#other" ).click(function() {
- $( "#target" ).submit();
-});
+$( "#other" ).on( "click", function() {
+ $( "#target" ).trigger( "submit" );
+} );
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also display the message. In addition, the default <code>submit</code> action on the form will be fired, so the form will be submitted.</p>
<p>The JavaScript <code>submit</code> event does not bubble in Internet Explorer. However, scripts that rely on event delegation with the <code>submit</code> event will work consistently across browsers as of jQuery 1.4, which has normalized the event's behavior. </p>
@@ -57,15 +55,15 @@ $( "#other" ).click(function() {
<example>
<desc>If you'd like to prevent forms from being submitted unless a flag variable is set, try:</desc>
<code><![CDATA[
-$( "form" ).submit(function( event ) {
- if ( $( "input:first" ).val() === "correct" ) {
+$( "form" ).on( "submit", function( event ) {
+ if ( $( "input" ).first().val() === "correct" ) {
$( "span" ).text( "Validated..." ).show();
return;
}
$( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
event.preventDefault();
-});
+} );
]]></code>
<css><![CDATA[
p {
@@ -93,19 +91,37 @@ $( "form" ).submit(function( event ) {
<example>
<desc>If you'd like to prevent forms from being submitted unless a flag variable is set, try:</desc>
<code><![CDATA[
-$( "form" ).submit(function() {
+$( "form" ).on( "submit", function() {
return this.some_flag_variable;
-});
+} );
]]></code>
</example>
<example>
<desc>To trigger the submit event on the first form on the page, try:</desc>
<code><![CDATA[
-$( "form:first" ).submit();
+$( "form" ).first().trigger( "submit" );
]]></code>
</example>
<category slug="events/form-events"/>
<category slug="forms"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
+ <category slug="version/1.7"/>
</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>submit event</title>
+ <desc>Trigger the "submit" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""submit"" type="string">
+ <desc>The string <code>"submit"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "submit", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/form-events"/>
+ <category slug="version/1.0"/>
+</entry>
+
+</entries>
diff --git a/entries/target-selector.xml b/entries/target-selector.xml
index 5d60f3dab..b010a5ced 100644
--- a/entries/target-selector.xml
+++ b/entries/target-selector.xml
@@ -7,8 +7,8 @@
</signature>
<desc>Selects the target element indicated by the fragment identifier of the document's URI.</desc>
<longdesc>
- <p>If the document's URI contains a fragment identifier, or hash, then the <code>:target</code> selector will match the element with an ID that matches the identifier. For example, given a document with a URI of http://example.com/#foo, <code>$( "p:target" )</code> will select the <code><p id="foo"></code> element.</p>
- <p>Further discussion of this usage can be found in the <a href="http://www.w3.org/TR/css3-selectors/#target-pseudo">W3C CSS specification</a>.</p>
+ <p>If the document's URI contains a fragment identifier, or hash, then the <code>:target</code> selector will match the element with an ID that matches the identifier. For example, given a document with a URI of https://example.com/#foo, <code>$( "p:target" )</code> will select the <code><p id="foo"></code> element.</p>
+ <p>Further discussion of this usage can be found in the <a href="https://www.w3.org/TR/css3-selectors/#target-pseudo">W3C CSS specification</a>.</p>
</longdesc>
<category slug="selectors/basic-filter-selectors"/>
<category slug="version/1.9"/>
diff --git a/entries/text-selector.xml b/entries/text-selector.xml
index 9af4dc445..4886c3a50 100644
--- a/entries/text-selector.xml
+++ b/entries/text-selector.xml
@@ -19,19 +19,19 @@ $( "<input>" ).is( ":text" ); // true
<example>
<desc>Finds all text inputs.</desc>
<code><![CDATA[
-var input = $( "form input:text" ).css({
+var input = $( "form input:text" ).css( {
background: "yellow",
border: "3px red solid"
-});
+} );
$( "div" )
.text( "For this type jQuery found " + input.length + "." )
.css( "color", "red" );
// Prevent form submission
-$( "form" ).submit(function( event ) {
+$( "form" ).on( "submit", function( event ) {
event.preventDefault();
-});
+} );
]]></code>
<css><![CDATA[
textarea {
diff --git a/entries/text.xml b/entries/text.xml
index 3752dd10c..616b8a2cf 100644
--- a/entries/text.xml
+++ b/entries/text.xml
@@ -22,14 +22,14 @@
<p>
<code>Demonstration Box list item 1 list item 2</code>
</p>
- <p>The <code>.text()</code> method cannot be used on form inputs or scripts. To set or get the text value of <code>input</code> or <code>textarea</code> elements, use the <a href="/https/github.com/val/"><code>.val()</code></a> method. To get the value of a script element, use the <a href="/https/github.com/html/"><code>.html()</code></a> method.</p>
+ <p>The <code>.text()</code> method should not be used on form inputs or scripts. To set or get the text value of <code>input</code> or <code>textarea</code> elements, use the <a href="/https/github.com/val/"><code>.val()</code></a> method. To get the value of a script element, use the <a href="/https/github.com/html/"><code>.html()</code></a> method.</p>
<p>As of jQuery 1.4, the <code>.text()</code> method returns the value of text and CDATA nodes as well as element nodes.</p>
</longdesc>
<example>
<desc>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).</desc>
<code><![CDATA[
-var str = $( "p:first" ).text();
-$( "p:last" ).html( str );
+var str = $( "p" ).first().text();
+$( "p" ).last().html( str );
]]></code>
<css><![CDATA[
p {
@@ -91,7 +91,7 @@ $( "p:last" ).html( str );
<pre><code>
<p>This is a test</p>
</code></pre>
- <p>The <code>.text()</code> method cannot be used on input elements. For input field text, use the <a href="/https/github.com/val/">.val()</a> method.</p>
+ <p>The <code>.text()</code> method should not be used on input elements. For input field text, use the <a href="/https/github.com/val/">.val()</a> method.</p>
<p>As of jQuery 1.4, the <code>.text()</code> method allows us to set the text content by passing in a function.</p>
<pre><code>
$( "ul li" ).text(function( index ) {
diff --git a/entries/toggle.xml b/entries/toggle.xml
index 76d95f42a..7d74577fe 100644
--- a/entries/toggle.xml
+++ b/entries/toggle.xml
@@ -24,8 +24,8 @@
</signature>
<signature>
<added>1.3</added>
- <argument name="showOrHide" type="Boolean">
- <desc>A Boolean indicating whether to show or hide the elements.</desc>
+ <argument name="display" type="Boolean">
+ <desc>Use <code>true</code> to show the element or <code>false</code> to hide it.</desc>
</argument>
</signature>
@@ -40,7 +40,7 @@ $( ".target" ).toggle();
<p>The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS <code>display</code> property. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The <code>display</code> property is saved and restored as needed. If an element has a <code>display</code> value of <code>inline</code>, then is hidden and shown, it will once again be displayed <code>inline</code>.</p>
<p>When a duration, a plain object, or a <em>single</em> "complete" function is provided, <code>.toggle()</code> becomes an animation method. The <code>.toggle()</code> method animates the width, height, and opacity of the matched elements simultaneously. When these properties reach 0 after a hiding animation, the <code>display</code> style property is set to <code>none</code> to ensure that the element no longer affects the layout of the page.</p>
<p>Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings <code>'fast'</code> and <code>'slow'</code> can be supplied to indicate durations of <code>200</code> and <code>600</code> milliseconds, respectively.</p>
- <p>As of jQuery 1.4.3, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com">jQuery UI suite</a>.</p>
+ <p>As of jQuery 1.4.3, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="https://jqueryui.com">jQuery UI suite</a>.</p>
<p>If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but <code>this</code> is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.</p>
<p>We can animate any element, such as a simple image:</p>
<pre><code>
@@ -51,7 +51,7 @@ $( ".target" ).toggle();
</code></pre>
<p>We will cause <code>.toggle()</code> to be called when another element is clicked:</p>
<pre><code>
-$( "#clickme" ).click(function() {
+$( "#clickme" ).on( "click", function() {
$( "#book" ).toggle( "slow", function() {
// Animation complete.
});
@@ -59,29 +59,31 @@ $( "#clickme" ).click(function() {
</code></pre>
<p>With the element initially shown, we can hide it slowly with the first click:
</p>
- <p class="image four-across">
- <img src="/https/github.com/resources/0042_06_09.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_10.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_11.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_12.png" alt=""/>
- </p>
+ <figure>
+ <img class="column three" src="/https/github.com/resources/0042_06_09.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_10.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_11.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_12.png" alt=""/>
+ <figcaption>Figure 1 - Illustration of the <code>toggle()</code> effect when hiding the image</figcaption>
+ </figure>
<p>A second click will show the element once again:</p>
- <p class="image four-across">
- <img src="/https/github.com/resources/0042_06_13.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_14.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_15.png" alt=""/>
- <img src="/https/github.com/resources/0042_06_16.png" alt=""/>
- </p>
+ <figure>
+ <img class="column three" src="/https/github.com/resources/0042_06_13.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_14.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_15.png" alt=""/>
+ <img class="column three" src="/https/github.com/resources/0042_06_16.png" alt=""/>
+ <figcaption>Figure 2 - Illustration of the <code>toggle()</code> effect when showing the image</figcaption>
+ </figure>
<p>The second version of the method accepts a Boolean parameter. If this parameter is <code>true</code>, then the matched elements are shown; if <code>false</code>, the elements are hidden. In essence, the statement:
</p>
<pre><code>
-$( "#foo" ).toggle( showOrHide );
+$( "#foo" ).toggle( display );
</code></pre>
<p>is equivalent to:</p>
<pre><code>
-if ( showOrHide === true ) {
+if ( display === true ) {
$( "#foo" ).show();
-} else if ( showOrHide === false ) {
+} else if ( display === false ) {
$( "#foo" ).hide();
}
</code></pre>
@@ -90,9 +92,9 @@ if ( showOrHide === true ) {
<example>
<desc>Toggles all paragraphs.</desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( "p" ).toggle();
-});
+} );
]]></code>
<html><![CDATA[
<button>Toggle</button>
@@ -103,7 +105,7 @@ $( "button" ).click(function() {
<example>
<desc>Animates all paragraphs to be shown if they are hidden and hidden if they are visible, completing the animation within 600 milliseconds.</desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( "p" ).toggle( "slow" );
});
]]></code>
@@ -124,7 +126,7 @@ $( "button" ).click(function() {
<desc>Shows all paragraphs, then hides them all, back and forth.</desc>
<code><![CDATA[
var flip = 0;
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
$( "p" ).toggle( flip++ % 2 === 0 );
});
]]></code>
diff --git a/entries/toggleClass.xml b/entries/toggleClass.xml
index a45166522..b42f23290 100644
--- a/entries/toggleClass.xml
+++ b/entries/toggleClass.xml
@@ -1,67 +1,91 @@
<?xml version="1.0"?>
-<entry type="method" name="toggleClass" return="jQuery">
- <title>.toggleClass()</title>
- <signature>
- <added>1.0</added>
- <argument name="className" type="String">
- <desc>One or more class names (separated by spaces) to be toggled for each element in the matched set.</desc>
- </argument>
- </signature>
- <signature>
- <added>1.3</added>
- <argument name="className" type="String">
- <desc>One or more class names (separated by spaces) to be toggled for each element in the matched set.</desc>
- </argument>
- <argument name="switch" type="Boolean">
- <desc>A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.</desc>
- </argument>
- </signature>
- <signature>
- <added>1.4</added>
- <argument name="switch" optional="true" type="Boolean">
- <desc>A boolean value to determine whether the class should be added or removed.</desc>
- </argument>
- </signature>
- <signature>
- <added>1.4</added>
- <argument name="function" type="Function">
- <argument name="index" type="Integer" />
- <argument name="className" type="String" />
- <argument name="switch" type="Boolean" />
- <return type="String" />
- <desc>A function that returns class names to be toggled in the class attribute of each element in the matched set. Receives the index position of the element in the set, the old class value, and the switch as arguments.</desc>
- </argument>
- <argument name="switch" optional="true" type="Boolean">
- <desc>A boolean value to determine whether the class should be added or removed.</desc>
- </argument>
- </signature>
- <desc>Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.</desc>
- <longdesc>
- <p>This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added. For example, we can apply <code>.toggleClass()</code> to a simple <code><div></code>: </p>
- <pre><code>
+<entries>
+ <entry type="method" name="toggleClass" return="jQuery">
+ <title>.toggleClass()</title>
+ <signature>
+ <added>1.0</added>
+ <argument name="className" type="String">
+ <desc>One or more classes (separated by spaces) to be toggled for each element in the matched set.</desc>
+ </argument>
+ </signature>
+ <signature>
+ <added>1.3</added>
+ <argument name="className" type="String">
+ <desc>One or more classes (separated by spaces) to be toggled for each element in the matched set.</desc>
+ </argument>
+ <argument name="state" type="Boolean">
+ <desc>A boolean (not just truthy/falsy) value to determine whether the class should be added or removed.</desc>
+ </argument>
+ </signature>
+ <signature>
+ <added>3.3</added>
+ <argument name="classNames" type="Array">
+ <desc>An array of classes to be toggled for each element in the matched set.</desc>
+ </argument>
+ </signature>
+ <signature>
+ <added>3.3</added>
+ <argument name="classNames" type="Array">
+ <desc>An array of classes to be toggled for each element in the matched set.</desc>
+ </argument>
+ <argument name="state" type="Boolean">
+ <desc>A boolean (not just truthy/falsy) value to determine whether the class should be added or removed.</desc>
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4</added>
+ <argument name="function" type="Function">
+ <argument name="index" type="Integer" />
+ <argument name="className" type="String" />
+ <argument name="state" type="Boolean" />
+ <return type="String" />
+ <desc>A function returning one or more space-separated class names to be toggled in the class attribute of each element in the matched set. Receives the index position of the element in the set, the old class value, and the state as arguments.</desc>
+ </argument>
+ <argument name="state" optional="true" type="Boolean">
+ <desc>A boolean value to determine whether the class should be added or removed.</desc>
+ </argument>
+ </signature>
+ <signature>
+ <added>3.3</added>
+ <argument name="function" type="Function">
+ <argument name="index" type="Integer" />
+ <argument name="className" type="String" />
+ <argument name="state" type="Boolean" />
+ <return type="String" />
+ <return type="Array" />
+ <desc>A function returning one or more space-separated class names or an array of class names to be toggled in the class attribute of each element in the matched set. Receives the index position of the element in the set, the old class value, and the state as arguments.</desc>
+ </argument>
+ <argument name="state" optional="true" type="Boolean">
+ <desc>A boolean value to determine whether the class should be added or removed.</desc>
+ </argument>
+ </signature>
+ <desc>Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.</desc>
+ <longdesc>
+ <p>This method takes one or more classes as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added. For example, we can apply <code>.toggleClass()</code> to a simple <code><div></code>: </p>
+ <pre><code>
<div class="tumble">Some text.</div>
- </code></pre>
- <p>The first time we apply <code>$( "div.tumble" ).toggleClass( "bounce" )</code>, we get the following:</p>
- <pre><code>
+ </code></pre>
+ <p>The first time we apply <code>$( "div.tumble" ).toggleClass( "bounce" )</code>, we get the following:</p>
+ <pre><code>
<div class="tumble bounce">Some text.</div>
- </code></pre>
- <p>The second time we apply <code>$( "div.tumble" ).toggleClass( "bounce" )</code>, the <code><div></code> class is returned to the single <code>tumble</code> value:</p>
- <pre><code><div class="tumble">Some text.</div></code></pre>
- <p>Applying <code>.toggleClass( "bounce spin" )</code> to the same <code><div></code> alternates between <code><div class="tumble bounce spin"></code> and <code><div class="tumble"></code>.</p>
- <p>The second version of <code>.toggleClass()</code> uses the second parameter for determining whether the class should be added or removed. If this parameter's value is <code>true</code>, then the class is added; if <code>false</code>, the class is removed. In essence, the statement:</p>
- <pre><code>
+ </code></pre>
+ <p>The second time we apply <code>$( "div.tumble" ).toggleClass( "bounce" )</code>, the <code><div></code> class is returned to the single <code>tumble</code> value:</p>
+ <pre><code><div class="tumble">Some text.</div></code></pre>
+ <p>Applying <code>.toggleClass( "bounce spin" )</code> to the same <code><div></code> alternates between <code><div class="tumble bounce spin"></code> and <code><div class="tumble"></code>.</p>
+ <p>The second version of <code>.toggleClass()</code> uses the second parameter for determining whether the class should be added or removed. If this parameter's value is <code>true</code>, then the class is added; if <code>false</code>, the class is removed. In essence, the statement:</p>
+ <pre><code>
$( "#foo" ).toggleClass( className, addOrRemove );
- </code></pre>
- <p>is equivalent to:</p>
- <pre><code>
+ </code></pre>
+ <p>is equivalent to:</p>
+ <pre><code>
if ( addOrRemove ) {
$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
}
- </code></pre>
- <p><strong>As of jQuery 1.4</strong>, if no arguments are passed to <code>.toggleClass()</code>, all class names on the element the first time <code>.toggleClass()</code> is called will be toggled. Also as of jQuery 1.4, the class name to be toggled can be determined by passing in a function.</p>
- <pre><code>
+ </code></pre>
+ <p><strong>As of jQuery 1.4</strong>, if no arguments are passed to <code>.toggleClass()</code>, all classes on the element the first time <code>.toggleClass()</code> is called will be toggled. Also as of jQuery 1.4, the class name to be toggled can be determined by passing in a function.</p>
+ <pre><code>
$( "div.foo" ).toggleClass(function() {
if ( $( this ).parent().is( ".bar" ) ) {
return "happy";
@@ -69,17 +93,17 @@ $( "div.foo" ).toggleClass(function() {
return "sad";
}
});
-</code></pre>
- <p>This example will toggle the <code>happy</code> class for <code><div class="foo"></code> elements if their parent element has a class of <code>bar</code>; otherwise, it will toggle the <code>sad</code> class.</p>
- </longdesc>
- <example>
- <desc>Toggle the class 'highlight' when a paragraph is clicked.</desc>
- <code><![CDATA[
-$( "p" ).click(function() {
+ </code></pre>
+ <p>This example will toggle the <code>happy</code> class for <code><div class="foo"></code> elements if their parent element has a class of <code>bar</code>; otherwise, it will toggle the <code>sad</code> class.</p>
+ </longdesc>
+ <example>
+ <desc>Toggle the class 'highlight' when a paragraph is clicked.</desc>
+ <code><![CDATA[
+$( "p" ).on( "click", function() {
$( this ).toggleClass( "highlight" );
});
]]></code>
- <css><![CDATA[
+ <css><![CDATA[
p {
margin: 4px;
font-size: 16px;
@@ -93,28 +117,28 @@ $( "p" ).click(function() {
background: yellow;
}
]]></css>
- <html><![CDATA[
+ <html><![CDATA[
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
]]></html>
- </example>
- <example>
- <desc>Add the "highlight" class to the clicked paragraph on every third click of that paragraph, remove it every first and second click.</desc>
- <code><![CDATA[
+ </example>
+ <example>
+ <desc>Add the "highlight" class to the clicked paragraph on every third click of that paragraph, remove it every first and second click.</desc>
+ <code><![CDATA[
var count = 0;
-$( "p" ).each(function() {
+$( "p" ).each( function() {
var $thisParagraph = $( this );
var count = 0;
- $thisParagraph.click(function() {
+ $thisParagraph.on( "click", function() {
count++;
$thisParagraph.find( "span" ).text( "clicks: " + count );
$thisParagraph.toggleClass( "highlight", count % 3 === 0 );
- });
-});
+ } );
+} );
]]></code>
- <css><![CDATA[
+ <css><![CDATA[
p {
margin: 4px;
font-size: 16px;
@@ -128,22 +152,21 @@ $( "p" ).each(function() {
background: red;
}
]]></css>
- <html><![CDATA[
+ <html><![CDATA[
<p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
<p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
<p class="blue">on these (<span>clicks: 0</span>)</p>
<p class="blue">paragraphs (<span>clicks: 0</span>)</p>
]]></html>
- </example>
- <example>
- <desc>Toggle the class name(s) indicated on the buttons for each div.
- </desc>
- <css><![CDATA[
+ </example>
+ <example>
+ <desc>Toggle the class name(s) indicated on the buttons for each div.</desc>
+ <css><![CDATA[
.wrap > div {
float: left;
width: 100px;
margin: 1em 1em 0 0;
- padding=left: 3px;
+ padding-left: 3px;
border: 1px solid #abc;
}
div.a {
@@ -156,7 +179,7 @@ $( "p" ).each(function() {
background-color: cornsilk;
}
]]></css>
- <html><![CDATA[
+ <html><![CDATA[
<div class="buttons">
<button>toggle</button>
<button class="a">toggle a</button>
@@ -171,7 +194,7 @@ $( "p" ).each(function() {
<div class="a c"></div>
</div>
]]></html>
- <code><![CDATA[
+ <code><![CDATA[
var cls = [ "", "a", "a b", "a b c" ];
var divs = $( "div.wrap" ).children();
var appendClass = function() {
@@ -196,11 +219,26 @@ $( "a" ).on( "click", function( event ) {
appendClass();
});
]]></code>
- </example>
- <category slug="attributes"/>
- <category slug="manipulation/class-attribute"/>
- <category slug="css"/>
- <category slug="version/1.0"/>
- <category slug="version/1.3"/>
- <category slug="version/1.4"/>
-</entry>
+ </example>
+ <category slug="attributes"/>
+ <category slug="manipulation/class-attribute"/>
+ <category slug="css"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.3"/>
+ <category slug="version/1.4"/>
+ <category slug="version/1.12-and-2.2"/>
+ <category slug="version/3.3"/>
+ </entry>
+ <entry type="method" name="toggleClass" return="jQuery" deprecated="3.0" removed="4.0">
+ <signature>
+ <added>1.4</added>
+ <argument name="state" optional="true" type="Boolean">
+ <desc>A boolean value to determine whether the class should be added or removed.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <div class="warning"><strong>This signature (only!) is deprecated as of jQuery 3.0</strong>.</div>
+ </longdesc>
+ <category slug="deprecated/deprecated-3.0"/>
+ </entry>
+</entries>
diff --git a/entries/trigger.xml b/entries/trigger.xml
index a377c0f54..caff8cb8f 100644
--- a/entries/trigger.xml
+++ b/entries/trigger.xml
@@ -44,20 +44,21 @@ $( "#foo").trigger( "custom", [ "Custom", "Event" ] );
<p>The event object is always passed as the first parameter to an event handler. An array of arguments can also be passed to the .trigger() call, and these parameters will be passed along to the handler as well following the event object. As of jQuery 1.6.2, single string or numeric argument can be passed without being wrapped in an array.</p>
<p>Note the difference between the extra parameters passed here and the <code>eventData</code> parameter to the <a href="/https/github.com/on/">.on()</a> method. Both are mechanisms for passing information to an event handler, but the <code>extraParameters</code> argument to <code>.trigger()</code> allows information to be determined at the time the event is triggered, while the <code>eventData</code> argument to <code>.on()</code> requires the information to be already computed at the time the handler is bound.</p>
<p>The <code>.trigger()</code> method can be used on jQuery collections that wrap plain JavaScript objects similar to a pub/sub mechanism; any event handlers bound to the object will be called when the event is triggered. </p>
- <div class="warning"><strong>Note:</strong> For both plain objects and DOM objects other than <code>window</code>, if a triggered event name matches the name of a property on the object, jQuery will attempt to invoke the property as a method if no event handler calls <code>event.preventDefault()</code>. If this behavior is not desired, use <code>.triggerHandler()</code> instead.</div>
- <div class="warning"><strong>Note:</strong> As with <code>.triggerHandler()</code>, when calling <code>.trigger()</code> with an event name matches the name of a property on the object, prefixed by <code>on</code> (e.g. triggering <code>click</code> on <code>window</code> that has a non null <code>onclick</code> method), jQuery will attempt to invoke that property as a method.</div>
+ <div class="warning"><strong>Note:</strong> For both plain objects and DOM objects other than <code>window</code>, if a triggered event name matches the name of a property on the object, jQuery will attempt to invoke the property as a method if no event handler calls <a href="/https/github.com/event.preventDefault/"><code>event.preventDefault()</code></a>. If this behavior is not desired, use <a href="/https/github.com/triggerHandler/"><code>.triggerHandler()</code></a> instead.</div>
+ <div class="warning"><strong>Note:</strong> As with <a href="/https/github.com/triggerHandler/"><code>.triggerHandler()</code></a>, when calling <code>.trigger()</code> with an event name matches the name of a property on the object, prefixed by <code>on</code> (e.g. triggering <code>click</code> on <code>window</code> that has a non null <code>onclick</code> method), jQuery will attempt to invoke that property as a method.</div>
+ <div class="warning"><strong>Note:</strong> When triggering with a plain object that is not array-like but still contains a <code>length</code> property, you should pass the object in an array (e.g. <code>[ { length: 1 } ]</code>).</div>
</longdesc>
<example>
<desc>Clicks to button #2 also trigger a click for button #1.</desc>
<code><![CDATA[
-$( "button:first" ).click(function() {
- update( $( "span:first" ) );
-});
+$( "button" ).first().on( "click", function() {
+ update( $( "span" ).first() );
+} );
-$( "button:last" ).click(function() {
- $( "button:first" ).trigger( "click" );
- update( $( "span:last" ) );
-});
+$( "button" ).last().on( "click", function() {
+ $( "button" ).first().trigger( "click" );
+ update( $( "span" ).last() );
+} );
function update( j ) {
var n = parseInt( j.text(), 10 );
@@ -86,14 +87,14 @@ function update( j ) {
<example>
<desc>To submit the first form without using the submit() function, try:</desc>
<code><![CDATA[
-$( "form:first" ).trigger( "submit" );
+$( "form" ).first().trigger( "submit" );
]]></code>
</example>
<example>
<desc>To submit the first form without using the submit() function, try:</desc>
<code><![CDATA[
var event = jQuery.Event( "submit" );
-$( "form:first" ).trigger( event );
+$( "form" ).first().trigger( event );
if ( event.isDefaultPrevented() ) {
// Perform an action...
}
@@ -103,10 +104,10 @@ if ( event.isDefaultPrevented() ) {
<desc>To pass arbitrary data to an event:</desc>
<code><![CDATA[
$( "p" )
- .click(function( event, a, b ) {
+ .on( "click", function( event, a, b ) {
// When a normal click fires, a and b are undefined
// for a trigger like below a refers to "foo" and b refers to "bar"
- })
+ } )
.trigger( "click", [ "foo", "bar" ] );
]]></code>
</example>
diff --git a/entries/triggerHandler.xml b/entries/triggerHandler.xml
index df6fb8afd..83b2a576f 100644
--- a/entries/triggerHandler.xml
+++ b/entries/triggerHandler.xml
@@ -7,14 +7,27 @@
<argument name="eventType" type="String">
<desc>A string containing a JavaScript event type, such as <code>click</code> or <code>submit</code>.</desc>
</argument>
- <argument name="extraParameters" optional="true" type="Array">
- <desc>An array of additional parameters to pass along to the event handler.</desc>
+ <argument name="extraParameters" optional="true">
+ <type name="Array"/>
+ <type name="PlainObject"/>
+ <desc>Additional parameters to pass along to the event handler.</desc>
+ </argument>
+ </signature>
+ <signature>
+ <added>1.3</added>
+ <argument name="event" type="Event">
+ <desc>A <a href="/https/github.com/category/events/event-object/"><code>jQuery.Event</code></a> object.</desc>
+ </argument>
+ <argument name="extraParameters" optional="true">
+ <type name="Array"/>
+ <type name="PlainObject"/>
+ <desc>Additional parameters to pass along to the event handler.</desc>
</argument>
</signature>
<longdesc>
- <p>The <code>.triggerHandler()</code> method behaves similarly to <code>.trigger()</code>, with the following exceptions:</p>
+ <p><code>.triggerHandler( eventType )</code> executes all handlers bound with jQuery for the event type. It will also execute any method called <code>on{eventType}()</code> found on the element. The behavior of this method is similar to <a href="/https/github.com/trigger/"><code>.trigger()</code></a>, with the following exceptions:</p>
<ul>
- <li>The <code>.triggerHandler()</code> method does not cause the default behavior of an event to occur (such as a form submission).</li>
+ <li>The <code>.triggerHandler( "event" )</code> method will not call <code>.event()</code> on the element it is triggered on. This means <code>.triggerHandler( "submit" )</code> on a form will not call <code>.submit()</code> on the form.</li>
<li>While <code>.trigger()</code> will operate on all elements matched by the jQuery object, <code>.triggerHandler()</code> only affects the first matched element.</li>
<li>Events triggered with <code>.triggerHandler()</code> do not bubble up the DOM hierarchy; if they are not handled by the target element directly, they do nothing.</li>
<li>Instead of returning the jQuery object (to allow chaining), <code>.triggerHandler()</code> returns whatever value was returned by the last handler it caused to be executed. If no handlers are triggered, it returns <code>undefined</code></li>
@@ -24,15 +37,15 @@
<example>
<desc>If you called .triggerHandler() on a focus event - the browser's default focus action would not be triggered, only the event handlers bound to the focus event.</desc>
<code><![CDATA[
-$( "#old" ).click(function() {
+$( "#old" ).on( "click", function() {
$( "input" ).trigger( "focus" );
-});
-$( "#new" ).click(function() {
+} );
+$( "#new" ).on( "click", function() {
$( "input" ).triggerHandler( "focus" );
-});
-$( "input" ).focus(function() {
+} );
+$( "input" ).on( "focus", function() {
$( "<span>Focused!</span>" ).appendTo( "body" ).fadeOut( 1000 );
-});
+} );
]]></code>
<html><![CDATA[
<button id="old">.trigger( "focus" )</button>
diff --git a/entries/unbind.xml b/entries/unbind.xml
index f7f615147..6a85004ec 100644
--- a/entries/unbind.xml
+++ b/entries/unbind.xml
@@ -1,11 +1,11 @@
<?xml version="1.0"?>
-<entry type="method" name="unbind" return="jQuery">
+<entry type="method" name="unbind" return="jQuery" deprecated="3.0">
<title>.unbind()</title>
<desc>Remove a previously-attached event handler from the elements.</desc>
<signature>
<added>1.0</added>
<argument name="eventType" type="String">
- <desc>A string containing a JavaScript event type, such as <code>click</code> or <code>submit</code>.</desc>
+ <desc>A string containing one or more DOM event types, such as "click" or "submit," or custom event names.</desc>
</argument>
<argument name="handler" type="Function" optional="true">
<desc>The function that is to be no longer executed.</desc>
@@ -15,7 +15,7 @@
<signature>
<added>1.4.3</added>
<argument name="eventType" type="String">
- <desc>A string containing a JavaScript event type, such as <code>click</code> or <code>submit</code>.</desc>
+ <desc>A string containing one or more DOM event types, such as "click" or "submit," or custom event names.</desc>
</argument>
<argument name="false" type="Boolean">
<desc>Unbinds the corresponding 'return false' function that was bound using <code>.bind( eventType, false )</code>.</desc>
@@ -23,15 +23,16 @@
</signature>
<signature>
<added>1.0</added>
- <argument name="event" type="Object">
- <desc>A JavaScript event object as passed to an event handler.</desc>
+ <argument name="event" type="Event">
+ <desc>A <a href="/https/github.com/category/events/event-object/"><code>jQuery.Event</code></a> object.</desc>
</argument>
</signature>
<signature>
<added>1.0</added>
</signature>
<longdesc>
- <p>Event handlers attached with <code>.bind()</code> can be removed with <code>.unbind()</code>. (As of jQuery 1.7, the <a href="/https/github.com/on/"><code>.on()</code></a> and <a href="/https/github.com/off/"><code>.off()</code></a> methods are preferred to attach and remove event handlers on elements.) In the simplest case, with no arguments, <code>.unbind()</code> removes all handlers attached to the elements:</p>
+ <p>As of jQuery 3.0, <code>.unbind()</code> has been deprecated. It was superseded by the <a href="/https/github.com/off/"><code>.off()</code></a> method since jQuery 1.7, so its use was already discouraged.</p>
+ <p>Event handlers attached with <code>.bind()</code> can be removed with <code>.unbind()</code>. In the simplest case, with no arguments, <code>.unbind()</code> removes all handlers attached to the elements:</p>
<pre><code>
$( "#foo" ).unbind();
</code></pre>
@@ -101,12 +102,12 @@ This example is also an illustration of a closure. Since the handler refers to t
function aClick() {
$( "div" ).show().fadeOut( "slow" );
}
-$( "#bind" ).click(function() {
+$( "#bind" ).on( "click", function() {
$( "#theone" )
.bind( "click", aClick )
.text( "Can Click!" );
});
-$( "#unbind" ).click(function() {
+$( "#unbind" ).on( "click", function() {
$( "#theone" )
.unbind( "click", aClick )
.text( "Does nothing..." );
@@ -155,4 +156,5 @@ $( "p" ).unbind( "click", foo ); // ... foo will no longer be called.
<category slug="events/event-handler-attachment"/>
<category slug="version/1.0"/>
<category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-3.0"/>
</entry>
diff --git a/entries/undelegate.xml b/entries/undelegate.xml
index 842a504aa..f3a985963 100644
--- a/entries/undelegate.xml
+++ b/entries/undelegate.xml
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<entry type="method" name="undelegate" return="jQuery">
+<entry type="method" name="undelegate" return="jQuery" deprecated="3.0">
<title>.undelegate()</title>
<desc>Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.</desc>
<signature>
@@ -43,7 +43,8 @@
</argument>
</signature>
<longdesc>
- <p>The <code>.undelegate()</code> method is a way of removing event handlers that have been bound using <a href="/https/github.com/delegate/"><code>.delegate()</code></a>. <strong>As of jQuery 1.7</strong>, the <a href="/https/github.com/on/"><code>.on()</code></a> and <a href="/https/github.com/off/"><code>.off()</code></a> methods are preferred for attaching and removing event handlers.</p>
+ <p>As of jQuery 3.0, <code>.undelegate()</code> has been deprecated. It was superseded by the <a href="/https/github.com/off/"><code>.off()</code></a> method since jQuery 1.7, so its use was already discouraged.</p>
+ <p>The <code>.undelegate()</code> method is a way of removing event handlers that have been bound using <a href="/https/github.com/delegate/"><code>.delegate()</code></a>.</p>
</longdesc>
<example>
<desc>Can bind and unbind events to the colored button.</desc>
@@ -51,12 +52,12 @@
function aClick() {
$( "div" ).show().fadeOut( "slow" );
}
-$( "#bind" ).click(function() {
+$( "#bind" ).on( "click", function() {
$( "body" )
.delegate( "#theone", "click", aClick )
.find( "#theone" ).text( "Can Click!" );
});
-$( "#unbind" ).click(function() {
+$( "#unbind" ).on( "click", function() {
$( "body" )
.undelegate( "#theone", "click", aClick )
.find( "#theone" ).text( "Does nothing..." );
@@ -124,4 +125,5 @@ $( "form" ).undelegate( ".whatever" );
<category slug="version/1.4.2"/>
<category slug="version/1.4.3"/>
<category slug="version/1.6"/>
+ <category slug="deprecated/deprecated-3.0"/>
</entry>
diff --git a/entries/uniqueSort.xml b/entries/uniqueSort.xml
new file mode 100644
index 000000000..999f15b0f
--- /dev/null
+++ b/entries/uniqueSort.xml
@@ -0,0 +1,112 @@
+<?xml version="1.0"?>
+<entry type="method" name="uniqueSort" return="jQuery">
+ <title>.uniqueSort()</title>
+ <signature>
+ <added>3.7</added>
+ </signature>
+ <desc>Sorts a jQuery object of DOM elements, in place, with the duplicates removed. Note that this only works on jQuery objects consisting of DOM elements, not strings or numbers.</desc>
+ <longdesc>
+ <p>The <code>.uniqueSort()</code> function searches through a jQuery object, sorting it in document order, and removing any duplicate nodes. A node is considered a duplicate if it is the <em>exact same</em> node as one already in the jQuery object; two different nodes with identical attributes are not considered to be duplicates. This function only works on jQuery objects consisting of DOM elements.</p>
+ </longdesc>
+ <example>
+ <desc>Removes any duplicate elements from the jQuery object of divs.</desc>
+ <code><![CDATA[
+var divs = $( "div" ).get();
+
+// Add 3 elements of class dup too (they are divs)
+divs = divs.concat( $( ".dup" ).get() );
+
+// Create a jQuery object from `divs`.
+var elems = $( divs );
+
+$( "div" )
+ .eq( 1 )
+ .text( "Pre-uniqueSort there are " + elems.length + " elements in the collection." );
+
+elems = elems.uniqueSort();
+
+$( "div" )
+ .eq( 2 )
+ .text( "Post-uniqueSort there are " + elems.length + " elements in the collection." )
+ .css( "color", "red" );
+]]></code>
+ <css><![CDATA[
+ div {
+ color: blue;
+ }
+]]></css>
+ <html><![CDATA[
+<div>There are 6 divs in this document.</div>
+<div></div>
+<div class="dup"></div>
+<div class="dup"></div>
+<div class="dup"></div>
+<div></div>
+]]></html>
+ </example>
+ <example>
+ <desc>Locate all the divs preceding the last item and wrap them with a div with class <code>wrapper</code> - with or without <code><a href="/https/github.com/uniqueSort/">.uniqueSort()</a></code>.</desc>
+ <code><![CDATA[
+$( "#container-1" )
+ .find( ".item" )
+ .last()
+ .prevAll()
+ .wrapAll( "<div class='wrapper' data-content='No uniqueSort'></div>" );
+
+$( "#container-2" )
+ .find( ".item" )
+ .last()
+ .prevAll()
+ .uniqueSort()
+ .wrapAll( "<div class='wrapper' data-content='With uniqueSort'></div>" );
+]]></code>
+ <css><![CDATA[
+ body {
+ display: flex;
+ }
+ .container {
+ display: flex;
+ margin: 10px 50px 10px 10px;
+ }
+ .wrapper {
+ position: relative;
+ display: flex;
+ padding: 30px 10px 10px 10px;
+ background: #def;
+ border: 2px solid black;
+ }
+ .wrapper::before {
+ content: attr(data-content);
+ position: absolute;
+ top: 15px;
+ left: 15px;
+ }
+ .item {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 70px;
+ height: 70px;
+ background: #abc;
+ border: 2px solid black;
+ margin: 10px;
+ font-size: 50px;
+ }
+]]></css>
+ <html><![CDATA[
+<div class="container" id="container-1">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+</div>
+
+<div class="container" id="container-2">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+</div>
+]]></html>
+ </example>
+ <category slug="utilities"/>
+ <category slug="version/3.7"/>
+</entry>
diff --git a/entries/unload-shorthand.xml b/entries/unload-shorthand.xml
new file mode 100644
index 000000000..693768ecd
--- /dev/null
+++ b/entries/unload-shorthand.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0"?>
+<entry type="method" name="unload" return="jQuery" deprecated="1.8" removed="3.0">
+ <title>.unload()</title>
+ <desc>Bind an event handler to the "unload" event, or trigger that event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.4.3</added>
+ <argument name="eventData" type="Anything" optional="true">
+ <desc>An object containing data that will be passed to the event handler.</desc>
+ </argument>
+ <argument name="handler" type="Function">
+ <desc>A function to execute each time the event is triggered.</desc>
+ <argument name="eventObject" type="Event" />
+ </argument>
+ </signature>
+ <signature>
+ <added>1.0</added>
+ </signature>
+ <longdesc>
+ <div class="warning">
+ <p>This API has been removed in jQuery 3.0.</p>
+ <p>Instead of <code>.unload( handler )</code> or <code>.unload( eventData, handler )</code>, use <a href="/https/github.com/unload/#on1"><code>.on( "unload", handler )</code></a> or <a href="/https/github.com/unload/#on1"><code>.on( "unload", eventData, handler )</code></a>, respectively.</p>
+ <p>Instead of <code>.unload()</code>, use <a href="/https/github.com/unload/#trigger2"><code>.trigger( "unload" )</code></a>.</p>
+ </div>
+ </longdesc>
+ <category slug="events/document-loading"/>
+ <category slug="version/1.0"/>
+ <category slug="version/1.4.3"/>
+ <category slug="deprecated/deprecated-1.8"/>
+ <category slug="removed"/>
+</entry>
diff --git a/entries/unload.xml b/entries/unload.xml
index e7c12492d..05d1c27a4 100644
--- a/entries/unload.xml
+++ b/entries/unload.xml
@@ -1,15 +1,15 @@
<?xml version="1.0"?>
-<entry type="method" name="unload" return="jQuery" deprecated="1.8">
- <title>.unload()</title>
+<entries>
+<desc>Bind an event handler to the "unload" event, or trigger that event on an element.</desc>
+
+<entry type="method" name="on" return="jQuery">
+ <title>unload event</title>
+ <desc>Bind an event handler to the "unload" event.</desc>
<signature>
- <added>1.0</added>
- <argument name="handler" type="Function">
- <desc>A function to execute when the event is triggered.</desc>
- <argument name="eventObject" type="Event" />
+ <added>1.7</added>
+ <argument name=""unload"" type="string">
+ <desc>The string <code>"unload"</code>.</desc>
</argument>
- </signature>
- <signature>
- <added>1.4.3</added>
<argument name="eventData" type="Anything" optional="true">
<desc>A plain object of data that will be passed to the event handler.</desc>
</argument>
@@ -18,33 +18,49 @@
<argument name="eventObject" type="Event" />
</argument>
</signature>
- <desc>Bind an event handler to the "unload" JavaScript event.</desc>
<longdesc>
- <p>This method is a shortcut for <code>.on( "unload", handler )</code>.</p>
+ <div class="warning">
+ <p>This page describes the <code>unload</code> event. For the <code>.unload()</code> method removed in jQuery 3.0, see <a href="/https/github.com/unload-shorthand/"><code>.unload()</code></a>.</p>
+ </div>
<p>The <code>unload</code> event is sent to the <code>window</code> element when the user navigates away from the page. This could mean one of many things. The user could have clicked on a link to leave the page, or typed in a new URL in the address bar. The forward and back buttons will trigger the event. Closing the browser window will cause the event to be triggered. Even a page reload will first create an <code>unload</code> event.</p>
<div class="warning">
- <p>The exact handling of the <code>unload</code> event has varied from version to version of browsers. For example, some versions of Firefox trigger the event when a link is followed, but not when the window is closed. In practical usage, behavior should be tested on all supported browsers, and contrasted with the proprietary <code>beforeunload</code> event.</p>
+ <p>The exact handling of the <code>unload</code> event has varied from version to version of browsers. For example, some versions of Firefox trigger the event when a link is followed, but not when the window is closed. In practical usage, behavior should be tested on all supported browsers and contrasted with the similar <code>beforeunload</code> event.</p>
</div>
<p>Any <code>unload</code> event handler should be bound to the <code>window</code> object:</p>
<pre><code>
-$( window ).unload(function() {
- alert( "Handler for .unload() called." );
-});
+$( window ).on( "unload", function() {
+ return "Handler for `unload` called.";
+} );
</code></pre>
- <p>After this code executes, the alert will be displayed whenever the browser leaves the current page.
-It is not possible to cancel the <code>unload</code> event with <code>.preventDefault()</code>. This event is available so that scripts can perform cleanup when the user leaves the page.
- </p>
+ <p>This event is available so that scripts can perform cleanup when the user leaves the page. Most browsers will ignore calls to <code>alert()</code>, <code>confirm()</code> and <code>prompt()</code> inside the event handler. The string you return may be used in a confirmation dialog, but not all browsers support this. It is not possible to cancel the <code>unload</code> event with <code>.preventDefault()</code>.</p>
</longdesc>
<example>
<desc>To display an alert when a page is unloaded:</desc>
<code><![CDATA[
-$( window ).unload(function() {
- alert( "Bye now!" );
-});
+$( window ).on( "unload", function() {
+ return "Bye now!";
+} );
]]></code>
</example>
<category slug="events/document-loading"/>
<category slug="version/1.0"/>
- <category slug="version/1.4.3"/>
- <category slug="deprecated/deprecated-1.8"/>
+ <category slug="version/1.7"/>
+</entry>
+
+<entry type="method" name="trigger" return="jQuery">
+ <title>unload event</title>
+ <desc>Trigger the "unload" event on an element.</desc>
+ <signature>
+ <added>1.0</added>
+ <argument name=""unload"" type="string">
+ <desc>The string <code>"unload"</code>.</desc>
+ </argument>
+ </signature>
+ <longdesc>
+ <p>See the description for <a href="#on1"><code>.on( "unload", ... )</code></a>.</p>
+ </longdesc>
+ <category slug="events/document-loading"/>
+ <category slug="version/1.0"/>
</entry>
+
+</entries>
diff --git a/entries/unwrap.xml b/entries/unwrap.xml
index d966952c6..b2dde6046 100644
--- a/entries/unwrap.xml
+++ b/entries/unwrap.xml
@@ -4,15 +4,21 @@
<signature>
<added>1.4</added>
</signature>
+ <signature>
+ <added>3.0</added>
+ <argument name="selector" type="String" optional="true">
+ <desc>A selector to check the parent element against. If an element's parent does not match the selector, the element won't be unwrapped.</desc>
+ </argument>
+ </signature>
<desc>Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.</desc>
<longdesc>
- <p>The <code>.unwrap()</code> method removes the element's parent. This is effectively the inverse of the <code><a href="/https/github.com/wrap/">.wrap()</a></code> method. The matched elements (and their siblings, if any) replace their parents within the DOM structure.</p>
+ <p>The <code>.unwrap()</code> method removes the element's parent and returns the unwrapped content. This is effectively the inverse of the <code><a href="/https/github.com/wrap/">.wrap()</a></code> method. The matched elements (and their siblings, if any) replace their parents within the DOM structure.</p>
</longdesc>
<example>
<desc>Wrap/unwrap a div around each of the paragraphs.</desc>
<code><![CDATA[
var pTags = $( "p" );
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
if ( pTags.parent().is( "div" ) ) {
pTags.unwrap();
} else {
diff --git a/entries/val.xml b/entries/val.xml
index 27cbc392f..4965b2b24 100644
--- a/entries/val.xml
+++ b/entries/val.xml
@@ -11,23 +11,24 @@
</signature>
<desc>Get the current value of the first element in the set of matched elements.</desc>
<longdesc>
- <p>The <code>.val()</code> method is primarily used to get the values of form elements such as <code>input</code>, <code>select</code> and <code>textarea</code>. In the case of <code>select</code> elements, it returns <code>null</code> when no option is selected and an array containing the value of each selected option when there is at least one and it is possible to select more because the <code>multiple</code> attribute is present.</p>
- <p>For selects and checkboxes, you can also use the <a href="/https/github.com/selected/">:selected</a> and <a href="/https/github.com/checked/">:checked</a> selectors to get at values, for example:</p>
+ <p>The <code>.val()</code> method is primarily used to get the values of form elements such as <code>input</code>, <code>select</code> and <code>textarea</code>. When called on an empty collection, it returns <code>undefined</code>.</p>
+ <p>When the first element in the collection is a <code>select-multiple</code> (i.e., a <code>select</code> element with the <code>multiple</code> attribute set), <code>.val()</code> returns an array containing the value of each selected option. <strong>As of jQuery 3.0</strong>, if no options are selected, it returns an empty array; <strong>prior to jQuery 3.0</strong>, it returns <code>null</code>.</p>
+ <p>For selects, checkboxes and radio buttons, you can use <a href="/https/github.com/checked-selector/">:checked</a> to select the right elements. For example:</p>
<pre><code>
-// Get the value from a dropdown select
-$( "select.foo option:selected").val();
+// Get the value from the selected option in a dropdown
+$( "select#foo option:checked" ).val();
-// Get the value from a dropdown select even easier
-$( "select.foo" ).val();
+// Get the value from a dropdown select directly
+$( "select#foo" ).val();
// Get the value from a checked checkbox
-$( "input:checkbox:checked" ).val();
+$( "input[type=checkbox][name=bar]:checked" ).val();
// Get the value from a set of radio buttons
-$( "input:radio[name=bar]:checked" ).val();
+$( "input[type=radio][name=baz]:checked" ).val();
</code></pre>
<div class="warning">
- <p><strong>Note: </strong> At present, using <code>.val()</code> on textarea elements strips carriage return characters from the browser-reported value. When this value is sent to the server via XHR however, carriage returns are preserved (or added by browsers which do not include them in the raw value). A workaround for this issue can be achieved using a valHook as follows:</p>
+ <p><strong>Note: </strong> At present, using <code>.val()</code> on <code><textarea></code> elements strips carriage return characters from the browser-reported value. When this value is sent to the server via XHR, however, carriage returns are preserved (or added by browsers which do not include them in the raw value). A workaround for this issue can be achieved using a valHook as follows:</p>
</div>
<pre><code>
$.valHooks.textarea = {
@@ -43,11 +44,13 @@ $.valHooks.textarea = {
function displayVals() {
var singleValues = $( "#single" ).val();
var multipleValues = $( "#multiple" ).val() || [];
+ // When using jQuery 3:
+ // var multipleValues = $( "#multiple" ).val();
$( "p" ).html( "<b>Single:</b> " + singleValues +
" <b>Multiple:</b> " + multipleValues.join( ", " ) );
}
-$( "select" ).change( displayVals );
+$( "select" ).on( "change", displayVals );
displayVals();
]]></code>
<css><![CDATA[
@@ -78,11 +81,11 @@ displayVals();
<desc>Find the value of an input box.</desc>
<code><![CDATA[
$( "input" )
- .keyup(function() {
+ .on( "keyup", function() {
var value = $( this ).val();
$( "p" ).text( value );
- })
- .keyup();
+ } )
+ .trigger( "keyup" );
]]></code>
<css><![CDATA[
p {
@@ -106,35 +109,37 @@ $( "input" )
<added>1.0</added>
<argument name="value">
<type name="String"/>
+ <type name="Number"/>
<type name="Array"/>
- <desc>A string of text or an array of strings corresponding to the value of each matched element to set as selected/checked.</desc>
+ <desc>A string of text, a number, or an array of strings corresponding to the value of each matched element to set as selected/checked.</desc>
</argument>
</signature>
<signature>
<added>1.4</added>
<argument name="function" type="Function">
<argument name="index" type="Integer" />
- <argument name="value" type="String" />
- <return type="String" />
+ <argument name="value" type="String" />
+ <return type="String" />
<desc>A function returning the value to set. <code>this</code> is the current element. Receives the index position of the element in the set and the old value as arguments.</desc>
</argument>
</signature>
<desc>Set the value of each element in the set of matched elements.</desc>
<longdesc>
<p>This method is typically used to set the values of form fields. </p>
- <p>Passing an array of element values allows matching <code><input type="checkbox"></code>, <code><input type="radio"></code> and <code><option></code>s inside of n <code><select multiple="multiple"></code> to be selected. In the case of <code><input type="radio"></code>s that are part of a radio group and <code><select multiple="multiple"></code> the other elements will be deselected.</p>
- <p>The <code>.val()</code> method allows us to set the value by passing in a function. As of jQuery 1.4, the function is passed two arguments, the current element's index and its current value: </p>
+ <p><code>val()</code> allows you to pass an array of element values. This is useful when working on a jQuery object containing elements like <code><input type="checkbox"></code>, <code><input type="radio"></code>, and <code><option></code>s inside of a <code><select></code>. In this case, the <code>input</code>s and the <code>option</code>s having a <code>value</code> that matches one of the elements of the array will be checked or selected while those having a <code>value</code> that doesn't match one of the elements of the array will be unchecked or unselected, depending on the type. In the case of <code><input type="radio"></code>s that are part of a radio group and <code><select></code>s, any previously selected element will be deselected.</p>
+ <p>Setting values using this method (or using the native <code>value</code> property) does not cause the dispatch of the <code>change</code> event. For this reason, the relevant event handlers will not be executed. If you want to execute them, you should call <code>.trigger( "change" )</code> after setting the value.</p>
+ <p>The <code>.val()</code> method allows setting the value by passing in a function. As of jQuery 1.4, the function is passed two arguments, the current element's index and its current value: </p>
<pre><code>
-$( "input:text.items" ).val(function( index, value ) {
- return value + " " + this.className;
+$( "input[type=text].tags" ).val(function( index, value ) {
+ return value.trim();
});
</code></pre>
- <p>This example appends the string " items" to the text inputs' values.</p>
+ <p>This example removes leading and trailing whitespace from the values of text inputs with a "tags" class.</p>
</longdesc>
<example>
<desc>Set the value of an input box.</desc>
<code><![CDATA[
-$( "button" ).click(function() {
+$( "button" ).on( "click", function() {
var text = $( this ).text();
$( "input" ).val( text );
});
diff --git a/entries/visible-selector.xml b/entries/visible-selector.xml
index 28a716fb8..b315cc15e 100644
--- a/entries/visible-selector.xml
+++ b/entries/visible-selector.xml
@@ -10,20 +10,23 @@
<p>Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.</p>
<p>Elements with <code>visibility: hidden</code> or <code>opacity: 0</code> are considered visible, since they still consume space in the layout.</p>
<p>Elements that are not in a document are considered hidden; jQuery does not have a way to know if they will be visible when appended to a document since it depends on the applicable styles.</p>
+ <p>This selector is the opposite of the <a href="/https/github.com/hidden-selector/"><code>:hidden</code></a> selector. So, every element selected by <code>:visible</code> isn't selected by <code>:hidden</code> and vice versa.</p>
<p>All <code>option</code> elements are considered hidden, regardless of their <code>selected</code> state.</p>
<p>During animations that hide an element, the element is considered visible until the end of the animation. During animations to show an element, the element is considered visible at the start at the animation.</p>
- <p>How <code>:visible</code> is calculated was changed in jQuery 1.3.2. The <a href="http://blog.jquery.com/2009/02/20/jquery-1-3-2-released/">release notes</a> outline the changes in more detail.</p>
+ <p>How <code>:visible</code> is calculated was changed in jQuery 1.3.2. The <a href="https://blog.jquery.com/2009/02/20/jquery-1-3-2-released/">release notes</a> outline the changes in more detail.</p>
+ <p>jQuery 3 slightly modifies the meaning of <code>:visible</code> (and therefore of <a href="/https/github.com/hidden-selector/"><code>:hidden</code></a>). Starting with this version, elements will be considered <code>:visible</code> if they have any layout boxes, including those of zero width and/or height. For example, <code>br</code> elements and inline elements with no content will be selected by the <code>:visible</code> selector.</p>
</longdesc>
<note id="jquery-selector-extension" type="additional" data-selector=":visible"/>
+ <note id="hidden-forces-layout" type="additional"/>
<example>
<desc>Make all visible divs turn yellow on click.</desc>
<code><![CDATA[
-$( "div:visible" ).click(function() {
+$( "div:visible" ).on( "click", function() {
$( this ).css( "background", "yellow" );
-});
-$( "button" ).click(function() {
+} );
+$( "button" ).on( "click", function() {
$( "div:hidden" ).show( "fast" );
-});
+} );
]]></code>
<css><![CDATA[
div {
diff --git a/entries/width.xml b/entries/width.xml
index cd71d7444..c8afa4224 100644
--- a/entries/width.xml
+++ b/entries/width.xml
@@ -8,10 +8,11 @@
</signature>
<desc>Get the current computed width for the first element in the set of matched elements.</desc>
<longdesc>
- <p>The difference between <code>.css(width)</code> and <code>.width()</code> is that the latter returns a unit-less pixel value (for example, <code>400</code>) while the former returns a value with units intact (for example, <code>400px</code>). The <code>.width()</code> method is recommended when an element's width needs to be used in a mathematical calculation.</p>
- <p class="image">
+ <p>The difference between <code>.css( "width" )</code> and <code>.width()</code> is that the latter returns a unit-less pixel value (for example, <code>400</code>) while the former returns a value with units intact (for example, <code>400px</code>). The <code>.width()</code> method is recommended when an element's width needs to be used in a mathematical calculation.</p>
+ <figure>
<img src="/https/github.com/resources/0042_04_04.png"/>
- </p>
+ <figcaption>Figure 1 - Illustration of the measured width</figcaption>
+ </figure>
<p>This method is also able to find the width of the window and document.</p>
<pre><code>
// Returns width of browser viewport
@@ -25,23 +26,23 @@ $( document ).width();
<p><strong>Note:</strong> Although <code>style</code> and <code>script</code> tags will report a value for <code>.width()</code> or <code>height()</code> when absolutely positioned and given <code>display:block</code>, it is strongly discouraged to call those methods on these tags. In addition to being a bad practice, the results may also prove unreliable.</p>
</div>
</longdesc>
- <note id="dimensions-number" type="additional" data-title=".width()"/>
- <note id="inaccurate-dimensions-for-hidden-elements" type="additional" data-title=".width()"/>
+ <note id="dimensions-number" type="additional" data-title=".width()"/>
+ <note id="hidden-element-dimensions" type="additional" data-title=".width()"/>
<example>
<desc>Show various widths. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.</desc>
<code><![CDATA[
function showWidth( ele, w ) {
$( "div" ).text( "The width for the " + ele + " is " + w + "px." );
}
-$( "#getp" ).click(function() {
+$( "#getp" ).on( "click", function() {
showWidth( "paragraph", $( "p" ).width() );
-});
-$( "#getd" ).click(function() {
+} );
+$( "#getd" ).on( "click", function() {
showWidth( "document", $( document ).width() );
-});
-$("#getw").click(function() {
+} );
+$("#getw").on( "click", function() {
showWidth( "window", $( window ).width() );
-});
+} );
]]></code>
<css><![CDATA[
body {
diff --git a/entries/wrap.xml b/entries/wrap.xml
index 02bce46c2..d6258d707 100644
--- a/entries/wrap.xml
+++ b/entries/wrap.xml
@@ -8,7 +8,7 @@
<type name="htmlString"/>
<type name="Element"/>
<type name="jQuery"/>
- <desc>A selector, element, HTML string, or jQuery object specifying the structure to wrap around the matched elements.</desc>
+ <desc>A selector, element, HTML string, or jQuery object specifying the structure to wrap around the matched elements. When you pass a jQuery collection containing more than one element, or a selector matching more than one element, the first element will be used.</desc>
</argument>
</signature>
<signature>
diff --git a/entries/wrapAll.xml b/entries/wrapAll.xml
index 80112ca0c..7d8c741dc 100644
--- a/entries/wrapAll.xml
+++ b/entries/wrapAll.xml
@@ -14,9 +14,11 @@
<signature>
<added>1.4</added>
<argument name="function" type="Function">
- <desc>A function that returns a structure to wrap around the matched elements. Receives the index position of the element in the set as an argument. Within the function, <code>this</code> refers to the current element in the set.</desc>
- <argument name="index" type="Integer" />
- <return type="String"/>
+ <desc>A callback function returning the HTML content or jQuery object to wrap around all the matched elements. Within the function, <code>this</code> refers to the first element in the set. <strong>Prior to jQuery 3.0</strong>, the callback was incorrectly called for every element in the set and received the index position of the element in the set as an argument.</desc>
+ <return>
+ <type name="String"/>
+ <type name="jQuery"/>
+ </return>
</argument>
</signature>
<desc>Wrap an HTML structure around all elements in the set of matched elements.</desc>
diff --git a/entries2html.xsl b/entries2html.xsl
index 85c33b391..a1a199827 100755
--- a/entries2html.xsl
+++ b/entries2html.xsl
@@ -12,7 +12,7 @@
<meta charset="utf-8">
<title><xsl:value-of select="//entry/@name"/> demo</title><xsl:if test="css">
<style><xsl:value-of select="css/text()"/> </style></xsl:if>
- <script src="//code.jquery.com/jquery-1.10.2.js"></script><xsl:if test="code/@location='head'">
+ <script src="https://code.jquery.com/jquery-3.7.1.js"></script><xsl:if test="code/@location='head'">
<script>
<xsl:copy-of select="code/text()"/>
</script>
diff --git a/grunt.js b/grunt.js
deleted file mode 100644
index ea16b4694..000000000
--- a/grunt.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/*jshint node:true */
-module.exports = function( grunt ) {
-"use strict";
-
-var entryFiles = grunt.file.expandFiles( "entries/*.xml" );
-
-grunt.loadNpmTasks( "grunt-clean" );
-grunt.loadNpmTasks( "grunt-wordpress" );
-grunt.loadNpmTasks( "grunt-jquery-content" );
-grunt.loadNpmTasks( "grunt-check-modules" );
-
-grunt.initConfig({
- clean: {
- folder: "dist"
- },
- lint: {
- grunt: "grunt.js"
- },
- xmllint: {
- all: [].concat( entryFiles, "categories.xml", "entries2html.xsl", "notes.xsl" )
- },
- xmltidy: {
- all: [].concat( entryFiles, "categories.xml" )
- },
- "build-pages": {
- all: grunt.file.expandFiles( "pages/**" )
- },
- "build-xml-entries": {
- all: entryFiles
- },
- "build-resources": {
- all: grunt.file.expandFiles( "resources/**" )
- },
- wordpress: grunt.utils._.extend({
- dir: "dist/wordpress"
- }, grunt.file.readJSON( "config.json" ) )
-});
-
-grunt.registerTask( "default", "build-wordpress" );
-grunt.registerTask( "build", "build-pages build-xml-entries build-xml-categories build-xml-full build-resources" );
-grunt.registerTask( "build-wordpress", "check-modules clean lint xmllint build" );
-grunt.registerTask( "tidy", "xmllint xmltidy" );
-
-};
diff --git a/includes/complete-argument.xml b/includes/complete-argument.xml
index 042fdf453..4ef06fa39 100644
--- a/includes/complete-argument.xml
+++ b/includes/complete-argument.xml
@@ -1,4 +1,4 @@
<?xml version="1.0"?>
<argument name="complete" type="Function" optional="true">
- <desc>A function to call once the animation is complete.</desc>
+ <desc>A function to call once the animation is complete, called once per matched element.</desc>
</argument>
diff --git a/includes/duration-argument.xml b/includes/duration-argument.xml
index 1a1c5c5e3..8fcfb7f30 100644
--- a/includes/duration-argument.xml
+++ b/includes/duration-argument.xml
@@ -1,6 +1,6 @@
<?xml version="1.0"?>
<argument name="duration" default="400" optional="true">
- <desc>A string or number determining how long the animation will run.</desc>
- <type name="Number"/>
- <type name="String"/>
+ <desc>A string or number determining how long the animation will run.</desc>
+ <type name="Number"/>
+ <type name="String"/>
</argument>
diff --git a/includes/easing-argument.xml b/includes/easing-argument.xml
index b64835515..127057afe 100644
--- a/includes/easing-argument.xml
+++ b/includes/easing-argument.xml
@@ -1,4 +1,4 @@
<?xml version="1.0"?>
<argument name="easing" type="String" default="swing" optional="true">
- <desc>A string indicating which easing function to use for the transition.</desc>
+ <desc>A string indicating which easing function to use for the transition.</desc>
</argument>
diff --git a/includes/options-argument.xml b/includes/options-argument.xml
index 110456cd6..cacb3286f 100644
--- a/includes/options-argument.xml
+++ b/includes/options-argument.xml
@@ -1,81 +1,81 @@
<?xml version="1.0"?>
<argument name="options" type="PlainObject">
- <desc>A map of additional options to pass to the method.</desc>
- <property name="duration" default="400">
- <desc>A string or number determining how long the animation will run.</desc>
- <type name="Number"/>
- <type name="String"/>
- </property>
- <property name="easing" type="String" default="swing">
- <desc>A string indicating which easing function to use for the transition.</desc>
- </property>
- <property name="queue" default="true">
- <desc>A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. <strong>As of jQuery 1.7</strong>, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call <code>.dequeue("queuename")</code> to start it.</desc>
- <type name="Boolean"/>
- <type name="String"/>
- </property>
- <property name="specialEasing" type="PlainObject" added="1.4">
- <desc>A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions.</desc>
- </property>
+ <desc>A map of additional options to pass to the method.</desc>
+ <property name="duration" default="400">
+ <desc>A string or number determining how long the animation will run.</desc>
+ <type name="Number"/>
+ <type name="String"/>
+ </property>
+ <property name="easing" type="String" default="swing">
+ <desc>A string indicating which easing function to use for the transition.</desc>
+ </property>
+ <property name="queue" default="true">
+ <desc>A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. <strong>As of jQuery 1.7</strong>, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call <code>.dequeue("queuename")</code> to start it.</desc>
+ <type name="Boolean"/>
+ <type name="String"/>
+ </property>
+ <property name="specialEasing" type="PlainObject" added="1.4">
+ <desc>An object containing one or more of the CSS properties defined by the properties argument and their corresponding easing functions.</desc>
+ </property>
- <property name="step" type="Function">
- <desc>A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.</desc>
- <argument name="now" type="Number">
- <desc>The numeric value of the property being animated at each step</desc>
- </argument>
- <argument name="tween" type="Tween">
- <desc>An object of properties related to the animation and the element being animated. For information about the tween object and its properties, see <a href="/https/github.com/jQuery.Tween/">jQuery.Tween</a></desc>
- </argument>
- </property>
+ <property name="step" type="Function">
+ <desc>A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.</desc>
+ <argument name="now" type="Number">
+ <desc>The numeric value of the property being animated at each step</desc>
+ </argument>
+ <argument name="tween" type="Tween">
+ <desc>An object of properties related to the animation and the element being animated. For information about the tween object and its properties, see <a href="/https/github.com/jQuery.Tween/">jQuery.Tween</a></desc>
+ </argument>
+ </property>
- <property name="progress" type="Function" added="1.8">
- <desc>A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties.</desc>
- <argument name="animation" type="Promise">
- <desc>An enhanced Promise object with additional properties for the animation</desc>
- </argument>
- <argument name="progress" type="Number">
- <desc>A number from 0 to 1 indicating the progress of the animation</desc>
- </argument>
- <argument name="remainingMs" type="Number">
- <desc>A number indicating the remaining number of milliseconds until the scheduled end of the animation</desc>
- </argument>
- </property>
- <property name="complete" type="Function">
- <desc>A function to call once the animation is complete.</desc>
- <!-- no parameters -->
- </property>
- <property name="start" type="Function" added="1.8">
- <desc>A function to call when the animation begins.</desc>
- <argument name="animation" type="Promise">
- <desc>An enhanced Promise object with additional properties for the animation</desc>
- </argument>
- </property>
- <property name="done" type="Function" added="1.8">
- <desc>A function to be called when the animation completes (its Promise object is resolved).</desc>
- <argument name="animation" type="Promise">
- <desc>An enhanced Promise object with additional properties for the animation</desc>
- </argument>
- <argument name="jumpedToEnd" type="Boolean">
- <desc>Indicates whether the animation jumped to the end</desc>
- </argument>
- </property>
- <property name="fail" type="Function" added="1.8">
- <desc>A function to be called when the animation fails to complete (its Promise object is rejected).</desc>
- <argument name="animation" type="Promise">
- <desc>An enhanced Promise object with additional properties for the animation</desc>
- </argument>
- <argument name="jumpedToEnd" type="Boolean">
- <desc>Indicates whether the animation jumped to the end</desc>
- </argument>
- </property>
- <property name="always" type="Function" added="1.8">
- <desc>A function to be called when the animation completes or stops without completing (its Promise object is either resolved or rejected).</desc>
- <argument name="animation" type="Promise">
- <desc>An enhanced Promise object with additional properties for the animation</desc>
- </argument>
- <argument name="jumpedToEnd" type="Boolean">
- <desc>Indicates whether the animation jumped to the end</desc>
- </argument>
- </property>
+ <property name="progress" type="Function" added="1.8">
+ <desc>A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties.</desc>
+ <argument name="animation" type="Promise">
+ <desc>An enhanced Promise object with additional properties for the animation</desc>
+ </argument>
+ <argument name="progress" type="Number">
+ <desc>A number from 0 to 1 indicating the progress of the animation</desc>
+ </argument>
+ <argument name="remainingMs" type="Number">
+ <desc>A number indicating the remaining number of milliseconds until the scheduled end of the animation</desc>
+ </argument>
+ </property>
+ <property name="complete" type="Function">
+ <desc>A function that is called once the animation on an element is complete.</desc>
+ <!-- no parameters -->
+ </property>
+ <property name="start" type="Function" added="1.8">
+ <desc>A function to call when the animation on an element begins.</desc>
+ <argument name="animation" type="Promise">
+ <desc>An enhanced Promise object with additional properties for the animation</desc>
+ </argument>
+ </property>
+ <property name="done" type="Function" added="1.8">
+ <desc>A function to be called when the animation on an element completes (its Promise object is resolved).</desc>
+ <argument name="animation" type="Promise">
+ <desc>An enhanced Promise object with additional properties for the animation</desc>
+ </argument>
+ <argument name="jumpedToEnd" type="Boolean">
+ <desc>Indicates whether the animation jumped to the end</desc>
+ </argument>
+ </property>
+ <property name="fail" type="Function" added="1.8">
+ <desc>A function to be called when the animation on an element fails to complete (its Promise object is rejected).</desc>
+ <argument name="animation" type="Promise">
+ <desc>An enhanced Promise object with additional properties for the animation</desc>
+ </argument>
+ <argument name="jumpedToEnd" type="Boolean">
+ <desc>Indicates whether the animation jumped to the end</desc>
+ </argument>
+ </property>
+ <property name="always" type="Function" added="1.8">
+ <desc>A function to be called when the animation on an element completes or stops without completing (its Promise object is either resolved or rejected).</desc>
+ <argument name="animation" type="Promise">
+ <desc>An enhanced Promise object with additional properties for the animation</desc>
+ </argument>
+ <argument name="jumpedToEnd" type="Boolean">
+ <desc>Indicates whether the animation jumped to the end</desc>
+ </argument>
+ </property>
</argument>
diff --git a/notes.xsl b/notes.xsl
index 756cedf76..6963dad28 100644
--- a/notes.xsl
+++ b/notes.xsl
@@ -2,7 +2,10 @@
<xsl:template name="note">
<xsl:choose>
<xsl:when test="@id = 'data-doesnt-accept-undefined'">
- <code>undefined</code> is not recognised as a data value. Calls such as <code><xsl:value-of select="@data-title" />( <xsl:value-of select="@data-parameters" />, undefined )</code> will return the corresponding data for "name", and is therefore the same as <code><xsl:value-of select="@data-title" />( <xsl:value-of select="@data-parameters" /> )</code>.
+ <code>undefined</code> is not recognized as a data value. Calls such as <code><xsl:value-of select="@data-title" />( <xsl:value-of select="@data-parameters" />, undefined )</code> will return the jQuery object that it was called on, allowing for chaining.
+ </xsl:when>
+ <xsl:when test="@id = 'jquery-data-doesnt-accept-undefined'">
+ <code>undefined</code> is not recognized as a data value. Calls such as <code><xsl:value-of select="@data-title" />( <xsl:value-of select="@data-parameters" />, undefined )</code> will return the corresponding data for "name", and is therefore the same as <code><xsl:value-of select="@data-title" />( <xsl:value-of select="@data-parameters" /> )</code>.
</xsl:when>
<xsl:when test="@id = 'dimensions-number'">
The number returned by dimensions-related APIs, including <code><xsl:value-of select="@data-title"/></code>, may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
@@ -14,10 +17,10 @@
Selected elements are in the order of their appearance in the document.
</xsl:when>
<xsl:when test="@id = 'domlint'">
- Forms and their child elements should not use input names or ids that conflict with properties of a form, such as <code>submit</code>, <code>length</code>, or <code>method</code>. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see <a href="http://kangax.github.com/domlint/">DOMLint</a>.
+ Forms and their child elements should not use input names or ids that conflict with properties of a form, such as <code>submit</code>, <code>length</code>, or <code>method</code>. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see <a href="https://kangax.github.io/domlint/">DOMLint</a>.
</xsl:when>
- <xsl:when test="@id = 'inaccurate-dimensions-for-hidden-elements'">
- The value reported by <code><xsl:value-of select="@data-title" /></code> is not guaranteed to be accurate when the element's parent is hidden. To get an accurate value, you should show the parent first, before using <code><xsl:value-of select="@data-title" /></code>.
+ <xsl:when test="@id = 'hidden-element-dimensions'">
+ The value reported by <code><xsl:value-of select="@data-title" /></code> is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using <code><xsl:value-of select="@data-title" /></code>. jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.
</xsl:when>
<xsl:when test="@id = 'jquery-selector-extension'">
Because <code><xsl:value-of select="@data-selector"/></code> is a jQuery extension and not part of the CSS specification, queries using <code><xsl:value-of select="@data-selector"/></code> cannot take advantage of the performance boost provided by the native DOM <code>querySelectorAll()</code> method. To achieve the best performance when using <code><xsl:value-of select="@data-selector"/></code> to select elements, first select the elements using a pure CSS selector, then use <a href="/https/github.com/filter/"><code>.filter("<xsl:value-of select="@data-selector"/>")</code></a>.
@@ -41,16 +44,16 @@
The <code><xsl:value-of select="@data-title"/></code> method removes all data and event handlers associated with the removed nodes.
</xsl:when>
<xsl:when test="@id = 'same-origin-policy'">
- Due to browser security restrictions, most "Ajax" requests are subject to the <a title="Same Origin Policy on Wikipedia" href="http://en.wikipedia.org/wiki/Same_origin_policy">same origin policy</a>; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
+ Due to browser security restrictions, most "Ajax" requests are subject to the <a title="Same Origin Policy on Wikipedia" href="https://en.wikipedia.org/wiki/Same_origin_policy">same origin policy</a>; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
</xsl:when>
<xsl:when test="@id = 'same-origin-policy-exceptions'">
Script and JSONP requests are not subject to the same origin policy restrictions.
</xsl:when>
<xsl:when test="@id = 'use-ajaxerror'">
- If a request with <xsl:value-of select="@data-title"/> returns an error code, it will fail silently unless the script has also called the global <a href="/https/github.com/ajaxError/">.ajaxError() </a> method. Alternatively, as of jQuery 1.5, the <code>.error()</code> method of the <code>jqXHR</code> object returned by <xsl:value-of select="@data-title"/> is also available for error handling.
+ If a request with <xsl:value-of select="@data-title"/> returns an error code, it will fail silently unless the script has also called the global <a href="/https/github.com/ajaxError/"><code>ajaxError</code></a> event. Alternatively, as of jQuery 1.5, the <code>.error()</code> method of the <code>jqXHR</code> object returned by <xsl:value-of select="@data-title"/> is also available for error handling.
</xsl:when>
<xsl:when test="@id = 'ajax-global-false'">
- If <code><a href="/https/github.com/jQuery.Ajax/">$.ajax()</a></code> or <code><a href="/https/github.com/jQuery.ajaxSetup/">$.ajaxSetup()</a></code> is called with the <code>global</code> option set to <code>false</code>, the <code><xsl:value-of select="@data-title"/></code> method will not fire.
+ If <code><a href="/https/github.com/jQuery.ajax/">$.ajax()</a></code> or <code><a href="/https/github.com/jQuery.ajaxSetup/">$.ajaxSetup()</a></code> is called with the <code>global</code> option set to <code>false</code>, the <code><xsl:value-of select="@data-title"/></code> event will not fire.
</xsl:when>
<xsl:when test="@id = 'slide-in-ie'">
If <code><xsl:value-of select="@data-title"/></code> is called on an unordered list (<code><ul></code>) and its <code><li></code> elements have position (relative, absolute, or fixed), the effect may not work properly in IE6 through at least IE9 unless the <code><ul></code> has "layout." To remedy the problem, add the <code>position: relative;</code> and <code>zoom: 1;</code> CSS declarations to the <code>ul</code>.
@@ -58,6 +61,15 @@
<xsl:when test="@id = 'html-code-execution'">
By design, any jQuery constructor or method that accepts an HTML string — <a href="/https/github.com/jQuery/">jQuery()</a>, <a href="/https/github.com/append/">.append()</a>, <a href="/https/github.com/after/">.after()</a>, etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, <code><img onload=""></code>). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.
</xsl:when>
+ <xsl:when test="@id = 'hidden-forces-layout'">
+ Using this selector heavily can have performance implications, as it may force the browser to re-render the page before it can determine visibility. Tracking the visibility of elements via other methods, using a class for example, can provide better performance.
+ </xsl:when>
+ <xsl:when test="@id = 'global-ajax-event'">
+ As of jQuery 1.9, all the handlers for the <a href="/https/github.com/category/ajax/global-ajax-event-handlers/">jQuery global Ajax events</a>, including those added with <code>.on( "<xsl:value-of select="@data-title"/>", ... )</code>, <em>must</em> be attached to <code>document</code>.
+ </xsl:when>
+ <xsl:when test="@id = 'svg-support'">
+ jQuery doesn't officially support SVG. Using jQuery methods on SVG documents, unless explicitly documented for that method, might cause unexpected behaviors. Examples of methods that support SVG as of jQuery 3.0 are <code>addClass</code> and <code>removeClass</code>.
+ </xsl:when>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..0da24ae3c
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1292 @@
+{
+ "name": "api.jquery.com",
+ "version": "3.3.10",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "api.jquery.com",
+ "version": "3.3.10",
+ "dependencies": {
+ "grunt": "1.6.1",
+ "grunt-jquery-content": "3.3.2"
+ }
+ },
+ "node_modules/abbrev": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+ "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+ },
+ "node_modules/ansi-styles": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+ "dependencies": {
+ "color-convert": "^2.0.1"
+ },
+ "engines": {
+ "node": ">=8"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+ }
+ },
+ "node_modules/argparse": {
+ "version": "1.0.10",
+ "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+ "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+ "dependencies": {
+ "sprintf-js": "~1.0.2"
+ }
+ },
+ "node_modules/argparse/node_modules/sprintf-js": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+ "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+ },
+ "node_modules/array-each": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz",
+ "integrity": "sha1-p5SvDAWrF1KEbudTofIRoFugxE8=",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/array-slice": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz",
+ "integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/async": {
+ "version": "3.2.4",
+ "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+ "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
+ },
+ "node_modules/balanced-match": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+ },
+ "node_modules/boolbase": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+ },
+ "node_modules/brace-expansion": {
+ "version": "1.1.11",
+ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+ "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+ "dependencies": {
+ "balanced-match": "^1.0.0",
+ "concat-map": "0.0.1"
+ }
+ },
+ "node_modules/braces": {
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+ "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+ "dependencies": {
+ "fill-range": "^7.1.1"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/chalk": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+ "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+ "dependencies": {
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/chalk?sponsor=1"
+ }
+ },
+ "node_modules/cheerio": {
+ "version": "1.0.0-rc.12",
+ "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
+ "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==",
+ "dependencies": {
+ "cheerio-select": "^2.1.0",
+ "dom-serializer": "^2.0.0",
+ "domhandler": "^5.0.3",
+ "domutils": "^3.0.1",
+ "htmlparser2": "^8.0.1",
+ "parse5": "^7.0.0",
+ "parse5-htmlparser2-tree-adapter": "^7.0.0"
+ },
+ "engines": {
+ "node": ">= 6"
+ },
+ "funding": {
+ "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+ }
+ },
+ "node_modules/cheerio-select": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+ "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+ "dependencies": {
+ "boolbase": "^1.0.0",
+ "css-select": "^5.1.0",
+ "css-what": "^6.1.0",
+ "domelementtype": "^2.3.0",
+ "domhandler": "^5.0.3",
+ "domutils": "^3.0.1"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/fb55"
+ }
+ },
+ "node_modules/color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "dependencies": {
+ "color-name": "~1.1.4"
+ },
+ "engines": {
+ "node": ">=7.0.0"
+ }
+ },
+ "node_modules/color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+ },
+ "node_modules/colors": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
+ "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
+ "engines": {
+ "node": ">=0.1.90"
+ }
+ },
+ "node_modules/concat-map": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+ "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+ },
+ "node_modules/css-select": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+ "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+ "dependencies": {
+ "boolbase": "^1.0.0",
+ "css-what": "^6.1.0",
+ "domhandler": "^5.0.2",
+ "domutils": "^3.0.1",
+ "nth-check": "^2.0.1"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/fb55"
+ }
+ },
+ "node_modules/css-what": {
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+ "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+ "engines": {
+ "node": ">= 6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/fb55"
+ }
+ },
+ "node_modules/dateformat": {
+ "version": "4.6.3",
+ "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-4.6.3.tgz",
+ "integrity": "sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==",
+ "engines": {
+ "node": "*"
+ }
+ },
+ "node_modules/detect-file": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
+ "integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/dom-serializer": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+ "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+ "dependencies": {
+ "domelementtype": "^2.3.0",
+ "domhandler": "^5.0.2",
+ "entities": "^4.2.0"
+ },
+ "funding": {
+ "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+ }
+ },
+ "node_modules/domelementtype": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+ "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/fb55"
+ }
+ ]
+ },
+ "node_modules/domhandler": {
+ "version": "5.0.3",
+ "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+ "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+ "dependencies": {
+ "domelementtype": "^2.3.0"
+ },
+ "engines": {
+ "node": ">= 4"
+ },
+ "funding": {
+ "url": "https://github.com/fb55/domhandler?sponsor=1"
+ }
+ },
+ "node_modules/domutils": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+ "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+ "dependencies": {
+ "dom-serializer": "^2.0.0",
+ "domelementtype": "^2.3.0",
+ "domhandler": "^5.0.3"
+ },
+ "funding": {
+ "url": "https://github.com/fb55/domutils?sponsor=1"
+ }
+ },
+ "node_modules/entities": {
+ "version": "4.5.0",
+ "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+ "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+ "engines": {
+ "node": ">=0.12"
+ },
+ "funding": {
+ "url": "https://github.com/fb55/entities?sponsor=1"
+ }
+ },
+ "node_modules/esprima": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+ "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+ "bin": {
+ "esparse": "bin/esparse.js",
+ "esvalidate": "bin/esvalidate.js"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/eventemitter2": {
+ "version": "0.4.14",
+ "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-0.4.14.tgz",
+ "integrity": "sha1-j2G3XN4BKy6esoTUVFWDtWQ7Yas="
+ },
+ "node_modules/exit": {
+ "version": "0.1.2",
+ "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+ "integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=",
+ "engines": {
+ "node": ">= 0.8.0"
+ }
+ },
+ "node_modules/expand-tilde": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
+ "integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=",
+ "dependencies": {
+ "homedir-polyfill": "^1.0.1"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/extend": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+ "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+ },
+ "node_modules/fill-range": {
+ "version": "7.1.1",
+ "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+ "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+ "dependencies": {
+ "to-regex-range": "^5.0.1"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/findup-sync": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-5.0.0.tgz",
+ "integrity": "sha512-MzwXju70AuyflbgeOhzvQWAvvQdo1XL0A9bVvlXsYcFEBM87WR4OakL4OfZq+QRmr+duJubio+UtNQCPsVESzQ==",
+ "dependencies": {
+ "detect-file": "^1.0.0",
+ "is-glob": "^4.0.3",
+ "micromatch": "^4.0.4",
+ "resolve-dir": "^1.0.1"
+ },
+ "engines": {
+ "node": ">= 10.13.0"
+ }
+ },
+ "node_modules/fined": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/fined/-/fined-1.2.0.tgz",
+ "integrity": "sha512-ZYDqPLGxDkDhDZBjZBb+oD1+j0rA4E0pXY50eplAAOPg2N/gUBSSk5IM1/QhPfyVo19lJ+CvXpqfvk+b2p/8Ng==",
+ "dependencies": {
+ "expand-tilde": "^2.0.2",
+ "is-plain-object": "^2.0.3",
+ "object.defaults": "^1.1.0",
+ "object.pick": "^1.2.0",
+ "parse-filepath": "^1.0.1"
+ },
+ "engines": {
+ "node": ">= 0.10"
+ }
+ },
+ "node_modules/flagged-respawn": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-1.0.1.tgz",
+ "integrity": "sha512-lNaHNVymajmk0OJMBn8fVUAU1BtDeKIqKoVhk4xAALB57aALg6b4W0MfJ/cUE0g9YBXy5XhSlPIpYIJ7HaY/3Q==",
+ "engines": {
+ "node": ">= 0.10"
+ }
+ },
+ "node_modules/for-in": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+ "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/for-own": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
+ "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
+ "dependencies": {
+ "for-in": "^1.0.1"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/fs.realpath": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+ "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+ },
+ "node_modules/function-bind": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+ "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+ },
+ "node_modules/getobject": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/getobject/-/getobject-1.0.2.tgz",
+ "integrity": "sha512-2zblDBaFcb3rB4rF77XVnuINOE2h2k/OnqXAiy0IrTxUfV1iFp3la33oAQVY9pCpWU268WFYVt2t71hlMuLsOg==",
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/gilded-wordpress": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/gilded-wordpress/-/gilded-wordpress-1.0.7.tgz",
+ "integrity": "sha512-w8g4jfs1TWywX2hZ4+LlzQoz2z/JRX/8S6OgelD3IUsNnGHxXQ1FgExoIqomwZVPAmxYs0vEu2BeA1Y4KciZlw==",
+ "dependencies": {
+ "async": "^0.9.0",
+ "wordpress": "^1.4.2"
+ }
+ },
+ "node_modules/gilded-wordpress/node_modules/async": {
+ "version": "0.9.2",
+ "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
+ "integrity": "sha512-l6ToIJIotphWahxxHyzK9bnLR6kM4jJIIgLShZeqLY7iboHoGkdgFl7W2/Ivi4SkMJYGKqW8vSuk0uKUj6qsSw=="
+ },
+ "node_modules/glob": {
+ "version": "7.1.7",
+ "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+ "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+ "dependencies": {
+ "fs.realpath": "^1.0.0",
+ "inflight": "^1.0.4",
+ "inherits": "2",
+ "minimatch": "^3.0.4",
+ "once": "^1.3.0",
+ "path-is-absolute": "^1.0.0"
+ },
+ "engines": {
+ "node": "*"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/isaacs"
+ }
+ },
+ "node_modules/global-modules": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
+ "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
+ "dependencies": {
+ "global-prefix": "^1.0.1",
+ "is-windows": "^1.0.1",
+ "resolve-dir": "^1.0.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/global-prefix": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
+ "integrity": "sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=",
+ "dependencies": {
+ "expand-tilde": "^2.0.2",
+ "homedir-polyfill": "^1.0.1",
+ "ini": "^1.3.4",
+ "is-windows": "^1.0.1",
+ "which": "^1.2.14"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/grunt": {
+ "version": "1.6.1",
+ "resolved": "https://registry.npmjs.org/grunt/-/grunt-1.6.1.tgz",
+ "integrity": "sha512-/ABUy3gYWu5iBmrUSRBP97JLpQUm0GgVveDCp6t3yRNIoltIYw7rEj3g5y1o2PGPR2vfTRGa7WC/LZHLTXnEzA==",
+ "dependencies": {
+ "dateformat": "~4.6.2",
+ "eventemitter2": "~0.4.13",
+ "exit": "~0.1.2",
+ "findup-sync": "~5.0.0",
+ "glob": "~7.1.6",
+ "grunt-cli": "~1.4.3",
+ "grunt-known-options": "~2.0.0",
+ "grunt-legacy-log": "~3.0.0",
+ "grunt-legacy-util": "~2.0.1",
+ "iconv-lite": "~0.6.3",
+ "js-yaml": "~3.14.0",
+ "minimatch": "~3.0.4",
+ "nopt": "~3.0.6"
+ },
+ "bin": {
+ "grunt": "bin/grunt"
+ },
+ "engines": {
+ "node": ">=16"
+ }
+ },
+ "node_modules/grunt-check-modules": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/grunt-check-modules/-/grunt-check-modules-1.1.0.tgz",
+ "integrity": "sha1-fBZB28ZlSGdqbVl5Ga35C3s11kQ=",
+ "engines": {
+ "node": ">=0.6.0"
+ },
+ "peerDependencies": {
+ "grunt": ">=0.4.0"
+ }
+ },
+ "node_modules/grunt-jquery-content": {
+ "version": "3.3.2",
+ "resolved": "https://registry.npmjs.org/grunt-jquery-content/-/grunt-jquery-content-3.3.2.tgz",
+ "integrity": "sha512-b6w8GBe022BG8O7BkhAKBFcBBAldoIiwAUZ2WI+A8HIouXy8XS8Cwp2RuUPEACg3g2/wHOarmjrsFKFPmmZ55Q==",
+ "dependencies": {
+ "cheerio": "^1.0.0-rc.12",
+ "gilded-wordpress": "1.0.7",
+ "grunt-check-modules": "^1.1.0",
+ "he": "^1.2.0",
+ "highlight.js": "^10.7.2",
+ "marked": "^4.0.0",
+ "which": "^4.0.0",
+ "wordpress": "^1.4.1"
+ }
+ },
+ "node_modules/grunt-jquery-content/node_modules/isexe": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+ "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+ "engines": {
+ "node": ">=16"
+ }
+ },
+ "node_modules/grunt-jquery-content/node_modules/which": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+ "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
+ "dependencies": {
+ "isexe": "^3.1.1"
+ },
+ "bin": {
+ "node-which": "bin/which.js"
+ },
+ "engines": {
+ "node": "^16.13.0 || >=18.0.0"
+ }
+ },
+ "node_modules/grunt-legacy-log": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/grunt-legacy-log/-/grunt-legacy-log-3.0.0.tgz",
+ "integrity": "sha512-GHZQzZmhyq0u3hr7aHW4qUH0xDzwp2YXldLPZTCjlOeGscAOWWPftZG3XioW8MasGp+OBRIu39LFx14SLjXRcA==",
+ "dependencies": {
+ "colors": "~1.1.2",
+ "grunt-legacy-log-utils": "~2.1.0",
+ "hooker": "~0.2.3",
+ "lodash": "~4.17.19"
+ },
+ "engines": {
+ "node": ">= 0.10.0"
+ }
+ },
+ "node_modules/grunt-legacy-log-utils": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/grunt-legacy-log-utils/-/grunt-legacy-log-utils-2.1.0.tgz",
+ "integrity": "sha512-lwquaPXJtKQk0rUM1IQAop5noEpwFqOXasVoedLeNzaibf/OPWjKYvvdqnEHNmU+0T0CaReAXIbGo747ZD+Aaw==",
+ "dependencies": {
+ "chalk": "~4.1.0",
+ "lodash": "~4.17.19"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/grunt-legacy-util": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/grunt-legacy-util/-/grunt-legacy-util-2.0.1.tgz",
+ "integrity": "sha512-2bQiD4fzXqX8rhNdXkAywCadeqiPiay0oQny77wA2F3WF4grPJXCvAcyoWUJV+po/b15glGkxuSiQCK299UC2w==",
+ "dependencies": {
+ "async": "~3.2.0",
+ "exit": "~0.1.2",
+ "getobject": "~1.0.0",
+ "hooker": "~0.2.3",
+ "lodash": "~4.17.21",
+ "underscore.string": "~3.3.5",
+ "which": "~2.0.2"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/grunt-legacy-util/node_modules/which": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+ "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+ "dependencies": {
+ "isexe": "^2.0.0"
+ },
+ "bin": {
+ "node-which": "bin/node-which"
+ },
+ "engines": {
+ "node": ">= 8"
+ }
+ },
+ "node_modules/grunt/node_modules/grunt-cli": {
+ "version": "1.4.3",
+ "resolved": "https://registry.npmjs.org/grunt-cli/-/grunt-cli-1.4.3.tgz",
+ "integrity": "sha512-9Dtx/AhVeB4LYzsViCjUQkd0Kw0McN2gYpdmGYKtE2a5Yt7v1Q+HYZVWhqXc/kGnxlMtqKDxSwotiGeFmkrCoQ==",
+ "dependencies": {
+ "grunt-known-options": "~2.0.0",
+ "interpret": "~1.1.0",
+ "liftup": "~3.0.1",
+ "nopt": "~4.0.1",
+ "v8flags": "~3.2.0"
+ },
+ "bin": {
+ "grunt": "bin/grunt"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/grunt/node_modules/grunt-cli/node_modules/nopt": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
+ "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
+ "dependencies": {
+ "abbrev": "1",
+ "osenv": "^0.1.4"
+ },
+ "bin": {
+ "nopt": "bin/nopt.js"
+ }
+ },
+ "node_modules/grunt/node_modules/grunt-known-options": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/grunt-known-options/-/grunt-known-options-2.0.0.tgz",
+ "integrity": "sha512-GD7cTz0I4SAede1/+pAbmJRG44zFLPipVtdL9o3vqx9IEyb7b4/Y3s7r6ofI3CchR5GvYJ+8buCSioDv5dQLiA==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/has": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+ "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+ "dependencies": {
+ "function-bind": "^1.1.1"
+ },
+ "engines": {
+ "node": ">= 0.4.0"
+ }
+ },
+ "node_modules/has-flag": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/he": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+ "bin": {
+ "he": "bin/he"
+ }
+ },
+ "node_modules/highlight.js": {
+ "version": "10.7.2",
+ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.2.tgz",
+ "integrity": "sha512-oFLl873u4usRM9K63j4ME9u3etNF0PLiJhSQ8rdfuL51Wn3zkD6drf9ZW0dOzjnZI22YYG24z30JcmfCZjMgYg==",
+ "engines": {
+ "node": "*"
+ }
+ },
+ "node_modules/homedir-polyfill": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
+ "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
+ "dependencies": {
+ "parse-passwd": "^1.0.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/hooker": {
+ "version": "0.2.3",
+ "resolved": "https://registry.npmjs.org/hooker/-/hooker-0.2.3.tgz",
+ "integrity": "sha1-uDT3I8xKJCqmWWNFnfbZhMXT2Vk=",
+ "engines": {
+ "node": "*"
+ }
+ },
+ "node_modules/htmlparser2": {
+ "version": "8.0.2",
+ "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+ "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+ "funding": [
+ "https://github.com/fb55/htmlparser2?sponsor=1",
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/fb55"
+ }
+ ],
+ "dependencies": {
+ "domelementtype": "^2.3.0",
+ "domhandler": "^5.0.3",
+ "domutils": "^3.0.1",
+ "entities": "^4.4.0"
+ }
+ },
+ "node_modules/iconv-lite": {
+ "version": "0.6.3",
+ "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+ "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+ "dependencies": {
+ "safer-buffer": ">= 2.1.2 < 3.0.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/inflight": {
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+ "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+ "dependencies": {
+ "once": "^1.3.0",
+ "wrappy": "1"
+ }
+ },
+ "node_modules/inherits": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+ },
+ "node_modules/ini": {
+ "version": "1.3.8",
+ "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+ },
+ "node_modules/interpret": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.1.0.tgz",
+ "integrity": "sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ="
+ },
+ "node_modules/is-absolute": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz",
+ "integrity": "sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==",
+ "dependencies": {
+ "is-relative": "^1.0.0",
+ "is-windows": "^1.0.1"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/is-core-module": {
+ "version": "2.4.0",
+ "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
+ "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
+ "dependencies": {
+ "has": "^1.0.3"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/is-extglob": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+ "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/is-glob": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+ "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+ "dependencies": {
+ "is-extglob": "^2.1.1"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/is-number": {
+ "version": "7.0.0",
+ "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+ "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+ "engines": {
+ "node": ">=0.12.0"
+ }
+ },
+ "node_modules/is-plain-object": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+ "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+ "dependencies": {
+ "isobject": "^3.0.1"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/is-relative": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
+ "integrity": "sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==",
+ "dependencies": {
+ "is-unc-path": "^1.0.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/is-unc-path": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-1.0.0.tgz",
+ "integrity": "sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==",
+ "dependencies": {
+ "unc-path-regex": "^0.1.2"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/is-windows": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+ "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/isexe": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+ "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
+ },
+ "node_modules/isobject": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+ "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/js-yaml": {
+ "version": "3.14.1",
+ "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+ "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+ "dependencies": {
+ "argparse": "^1.0.7",
+ "esprima": "^4.0.0"
+ },
+ "bin": {
+ "js-yaml": "bin/js-yaml.js"
+ }
+ },
+ "node_modules/kind-of": {
+ "version": "6.0.3",
+ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+ "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/liftup": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/liftup/-/liftup-3.0.1.tgz",
+ "integrity": "sha512-yRHaiQDizWSzoXk3APcA71eOI/UuhEkNN9DiW2Tt44mhYzX4joFoCZlxsSOF7RyeLlfqzFLQI1ngFq3ggMPhOw==",
+ "dependencies": {
+ "extend": "^3.0.2",
+ "findup-sync": "^4.0.0",
+ "fined": "^1.2.0",
+ "flagged-respawn": "^1.0.1",
+ "is-plain-object": "^2.0.4",
+ "object.map": "^1.0.1",
+ "rechoir": "^0.7.0",
+ "resolve": "^1.19.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/liftup/node_modules/findup-sync": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-4.0.0.tgz",
+ "integrity": "sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==",
+ "dependencies": {
+ "detect-file": "^1.0.0",
+ "is-glob": "^4.0.0",
+ "micromatch": "^4.0.2",
+ "resolve-dir": "^1.0.1"
+ },
+ "engines": {
+ "node": ">= 8"
+ }
+ },
+ "node_modules/lodash": {
+ "version": "4.17.21",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+ },
+ "node_modules/make-iterator": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/make-iterator/-/make-iterator-1.0.1.tgz",
+ "integrity": "sha512-pxiuXh0iVEq7VM7KMIhs5gxsfxCux2URptUQaXo4iZZJxBAzTPOLE2BumO5dbfVYq/hBJFBR/a1mFDmOx5AGmw==",
+ "dependencies": {
+ "kind-of": "^6.0.2"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/map-cache": {
+ "version": "0.2.2",
+ "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
+ "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/marked": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
+ "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+ "bin": {
+ "marked": "bin/marked.js"
+ },
+ "engines": {
+ "node": ">= 12"
+ }
+ },
+ "node_modules/micromatch": {
+ "version": "4.0.8",
+ "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+ "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+ "dependencies": {
+ "braces": "^3.0.3",
+ "picomatch": "^2.3.1"
+ },
+ "engines": {
+ "node": ">=8.6"
+ }
+ },
+ "node_modules/minimatch": {
+ "version": "3.0.8",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
+ "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
+ "dependencies": {
+ "brace-expansion": "^1.1.7"
+ },
+ "engines": {
+ "node": "*"
+ }
+ },
+ "node_modules/nopt": {
+ "version": "3.0.6",
+ "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+ "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+ "dependencies": {
+ "abbrev": "1"
+ },
+ "bin": {
+ "nopt": "bin/nopt.js"
+ }
+ },
+ "node_modules/nth-check": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+ "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+ "dependencies": {
+ "boolbase": "^1.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/fb55/nth-check?sponsor=1"
+ }
+ },
+ "node_modules/object.defaults": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz",
+ "integrity": "sha1-On+GgzS0B96gbaFtiNXNKeQ1/s8=",
+ "dependencies": {
+ "array-each": "^1.0.1",
+ "array-slice": "^1.0.0",
+ "for-own": "^1.0.0",
+ "isobject": "^3.0.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/object.map": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz",
+ "integrity": "sha1-z4Plncj8wK1fQlDh94s7gb2AHTc=",
+ "dependencies": {
+ "for-own": "^1.0.0",
+ "make-iterator": "^1.0.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/object.pick": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+ "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
+ "dependencies": {
+ "isobject": "^3.0.1"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/once": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+ "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+ "dependencies": {
+ "wrappy": "1"
+ }
+ },
+ "node_modules/os-homedir": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+ "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/os-tmpdir": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+ "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/osenv": {
+ "version": "0.1.5",
+ "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+ "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+ "dependencies": {
+ "os-homedir": "^1.0.0",
+ "os-tmpdir": "^1.0.0"
+ }
+ },
+ "node_modules/parse-filepath": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
+ "integrity": "sha1-pjISf1Oq89FYdvWHLz/6x2PWyJE=",
+ "dependencies": {
+ "is-absolute": "^1.0.0",
+ "map-cache": "^0.2.0",
+ "path-root": "^0.1.1"
+ },
+ "engines": {
+ "node": ">=0.8"
+ }
+ },
+ "node_modules/parse-passwd": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+ "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/parse5": {
+ "version": "7.1.2",
+ "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+ "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+ "dependencies": {
+ "entities": "^4.4.0"
+ },
+ "funding": {
+ "url": "https://github.com/inikulin/parse5?sponsor=1"
+ }
+ },
+ "node_modules/parse5-htmlparser2-tree-adapter": {
+ "version": "7.0.0",
+ "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz",
+ "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==",
+ "dependencies": {
+ "domhandler": "^5.0.2",
+ "parse5": "^7.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/inikulin/parse5?sponsor=1"
+ }
+ },
+ "node_modules/path-is-absolute": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+ "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/path-parse": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+ "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+ },
+ "node_modules/path-root": {
+ "version": "0.1.1",
+ "resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz",
+ "integrity": "sha1-mkpoFMrBwM1zNgqV8yCDyOpHRbc=",
+ "dependencies": {
+ "path-root-regex": "^0.1.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/path-root-regex": {
+ "version": "0.1.2",
+ "resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz",
+ "integrity": "sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/picomatch": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+ "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+ "engines": {
+ "node": ">=8.6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/jonschlinkert"
+ }
+ },
+ "node_modules/rechoir": {
+ "version": "0.7.0",
+ "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.0.tgz",
+ "integrity": "sha512-ADsDEH2bvbjltXEP+hTIAmeFekTFK0V2BTxMkok6qILyAJEXV0AFfoWcAq4yfll5VdIMd/RVXq0lR+wQi5ZU3Q==",
+ "dependencies": {
+ "resolve": "^1.9.0"
+ },
+ "engines": {
+ "node": ">= 0.10"
+ }
+ },
+ "node_modules/resolve": {
+ "version": "1.20.0",
+ "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+ "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+ "dependencies": {
+ "is-core-module": "^2.2.0",
+ "path-parse": "^1.0.6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/resolve-dir": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
+ "integrity": "sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=",
+ "dependencies": {
+ "expand-tilde": "^2.0.0",
+ "global-modules": "^1.0.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/safer-buffer": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+ },
+ "node_modules/sax": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+ "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+ },
+ "node_modules/sprintf-js": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz",
+ "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug=="
+ },
+ "node_modules/supports-color": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+ "dependencies": {
+ "has-flag": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/to-regex-range": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+ "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+ "dependencies": {
+ "is-number": "^7.0.0"
+ },
+ "engines": {
+ "node": ">=8.0"
+ }
+ },
+ "node_modules/unc-path-regex": {
+ "version": "0.1.2",
+ "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
+ "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/underscore.string": {
+ "version": "3.3.6",
+ "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-3.3.6.tgz",
+ "integrity": "sha512-VoC83HWXmCrF6rgkyxS9GHv8W9Q5nhMKho+OadDJGzL2oDYbYEppBaCMH6pFlwLeqj2QS+hhkw2kpXkSdD1JxQ==",
+ "dependencies": {
+ "sprintf-js": "^1.1.1",
+ "util-deprecate": "^1.0.2"
+ },
+ "engines": {
+ "node": "*"
+ }
+ },
+ "node_modules/util-deprecate": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+ "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+ },
+ "node_modules/v8flags": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.2.0.tgz",
+ "integrity": "sha512-mH8etigqMfiGWdeXpaaqGfs6BndypxusHHcv2qSHyZkGEznCd/qAXCWWRzeowtL54147cktFOC4P5y+kl8d8Jg==",
+ "dependencies": {
+ "homedir-polyfill": "^1.0.1"
+ },
+ "engines": {
+ "node": ">= 0.10"
+ }
+ },
+ "node_modules/which": {
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+ "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+ "dependencies": {
+ "isexe": "^2.0.0"
+ },
+ "bin": {
+ "which": "bin/which"
+ }
+ },
+ "node_modules/wordpress": {
+ "version": "1.4.2",
+ "resolved": "https://registry.npmjs.org/wordpress/-/wordpress-1.4.2.tgz",
+ "integrity": "sha512-T+o+Af6pK7mhTz/rJEZk4PpSIyRMVhx6vZm6UsmrnlL8pVudhu1gWzn1n3wZXlcEZQz7I0AOkEvPQ5hu++L+qg==",
+ "dependencies": {
+ "xmlrpc": "1.3.2"
+ }
+ },
+ "node_modules/wrappy": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+ "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+ },
+ "node_modules/xmlbuilder": {
+ "version": "8.2.2",
+ "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-8.2.2.tgz",
+ "integrity": "sha512-eKRAFz04jghooy8muekqzo8uCSVNeyRedbuJrp0fovbLIi7wlsYtdUn3vBAAPq2Y3/0xMz2WMEUQ8yhVVO9Stw==",
+ "engines": {
+ "node": ">=4.0"
+ }
+ },
+ "node_modules/xmlrpc": {
+ "version": "1.3.2",
+ "resolved": "https://registry.npmjs.org/xmlrpc/-/xmlrpc-1.3.2.tgz",
+ "integrity": "sha512-jQf5gbrP6wvzN71fgkcPPkF4bF/Wyovd7Xdff8d6/ihxYmgETQYSuTc+Hl+tsh/jmgPLro/Aro48LMFlIyEKKQ==",
+ "dependencies": {
+ "sax": "1.2.x",
+ "xmlbuilder": "8.2.x"
+ },
+ "engines": {
+ "node": ">=0.8",
+ "npm": ">=1.0.0"
+ }
+ }
+ }
+}
diff --git a/package.json b/package.json
index 9ed57519f..c86c045c7 100644
--- a/package.json
+++ b/package.json
@@ -1,32 +1,12 @@
{
"name": "api.jquery.com",
- "title": "jQuery API Docs",
- "description": "API reference documentation for the jQuery JavaScript Library.",
- "version": "1.11.34",
- "homepage": "https://github.com/jquery/api.jquery.com",
- "author": {
- "name": "jQuery Foundation (https://jquery.org/)"
+ "version": "3.3.10",
+ "private": true,
+ "scripts": {
+ "test": "grunt lint"
},
- "repository": {
- "type": "git",
- "url": "git://github.com/jquery/api.jquery.com.git"
- },
- "bugs": {
- "url": "https://github.com/jquery/api.jquery.com/issues"
- },
- "licenses": [
- {
- "type": "MIT",
- "url": "http://www.opensource.org/licenses/MIT"
- }
- ],
"dependencies": {
- "grunt": "0.3.17",
- "grunt-clean": "0.3.0",
- "grunt-wordpress": "1.2.1",
- "grunt-jquery-content": "0.13.0",
- "grunt-check-modules": "0.1.0"
- },
- "devDependencies": {},
- "keywords": []
+ "grunt": "1.6.1",
+ "grunt-jquery-content": "3.3.2"
+ }
}
diff --git a/pages/Ajax_Events.html b/pages/Ajax_Events.html
index 9ba25ff7c..6b1249be3 100644
--- a/pages/Ajax_Events.html
+++ b/pages/Ajax_Events.html
@@ -19,9 +19,9 @@ <h3>Local Events</h3>
</code></pre>
<h3>Global Events</h3>
<p>These events are triggered on the <code>document</code>, calling any handlers which may be listening. You can listen for these events like so:</p>
-<pre> $(document).bind("ajaxSend", function(){
+<pre> $(document).on("ajaxSend", function(){
$("#loading").show();
- }).bind("ajaxComplete", function(){
+ }).on("ajaxComplete", function(){
$("#loading").hide();
});
</pre>
@@ -33,7 +33,7 @@ <h3>Global Events</h3>
});
</code></pre>
<h3>Events</h3>
-<p>This is the full list of Ajax events , and in the order in which they are triggered. The indented events are triggered for each and every Ajax request (unless a global option has been set). The ajaxStart and ajaxStop events are events that relate to all Ajax requests together.
+<p>This is the full list of Ajax events, and in the order in which they are triggered. The indented events are triggered for each and every Ajax request (unless a global option has been set). The ajaxStart and ajaxStop events are events that relate to all Ajax requests together.
</p>
<ul>
<li> <b>ajaxStart</b> (Global Event)<br>This event is triggered if an Ajax request is started and no other Ajax requests are currently running.
diff --git a/pages/Types.html b/pages/Types.html
index c2b9d219b..16a3a7c1b 100644
--- a/pages/Types.html
+++ b/pages/Types.html
@@ -1,6 +1,6 @@
<script>
{
- "title": "Types"
+ "title": "Types"
}
</script>
<style>
@@ -9,9 +9,9 @@
ol ul li { font-size: 1em !important; }
ol ul { margin-left: 1.5em !important; }
</style>
-<p>JavaScript provides several built-in datatypes. In addition to those, this page documents virtual types like Selectors, enhanced pseudo-types like Events and all and everything you wanted to know about Functions.
+<p>This page documents data types appearing in jQuery function signatures, whether defined by JavaScript itself or further restricted by jQuery. Unless explicitly stated otherwise, jQuery functions require primitive values where applicable, and do not accept their Object-wrapped forms. If you want to study these concepts in depth, take a look at <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">MDN</a>.
</p>
-<p>You should be able to try out most of the examples below by just copying them to your browser's JavaScript Console (Chrome, Safari with Develop menu activated, IE 8+) or <a href="http://www.getfirebug.com/">Firebug</a> console (<a href="http://www.getfirefox.com">Firefox</a>).
+<p>You should be able to try out most of the examples below by just copying them to your browser's JavaScript Console.
</p>
<p>Whenever an example mentions that a type defaults to a boolean value, the result is good to know when using that type in a boolean context:
</p>
@@ -73,6 +73,7 @@
<li class="toclevel-2"><a href="#Array.3CType.3E_Notation"><span class="toctext">Array<Type> Notation</span></a></li>
</ul>
</li>
+ <li class="toclevel-1"><a href="#ArrayLikeObject"><span class="toctext">Array-Like Object</span></a></li>
<li class="toclevel-1"><a href="#PlainObject"><span class="toctext">PlainObject</span></a></li>
<li class="toclevel-1"><a href="#Date"><span class="toctext">Date</span></a></li>
<li class="toclevel-1"><a href="#Function"><span class="toctext">Function</span></a>
@@ -84,12 +85,15 @@
<li class="toclevel-2"><a href="#Proxy_Pattern"><span class="toctext">Proxy Pattern</span></a></li>
</ul>
</li>
+ <li class="toclevel-1"><a href="#Error"><span class="toctext">Error</span></a></li>
<li class="toclevel-1"><a href="#Selector"><span class="toctext">Selector</span></a></li>
<li class="toclevel-1"><a href="#Event"><span class="toctext">Event</span></a></li>
<li class="toclevel-1"><a href="#Element"><span class="toctext">Element</span></a></li>
+ <li class="toclevel-1"><a href="#Text"><span class="toctext">Text</span></a></li>
<li class="toclevel-1"><a href="#jQuery"><span class="toctext">jQuery</span></a></li>
<li class="toclevel-1"><a href="#XMLHttpRequest"><span class="toctext">XMLHttpRequest</span></a></li>
<li class="toclevel-1"><a href="#jqXHR"><span class="toctext">jqXHR</span></a></li>
+ <li class="toclevel-1"><a href="#Thenable"><span class="toctext">Thenable</span></a></li>
<li class="toclevel-1"><a href="#Deferred"><span class="toctext">Deferred Object</span></a></li>
<li class="toclevel-1"><a href="#Promise"><span class="toctext">Promise Object</span></a></li>
<li class="toclevel-1"><a href="#Callbacks"><span class="toctext">Callbacks Object</span></a></li>
@@ -97,12 +101,12 @@
<li class="toclevel-1"><a href="#Assert"><span class="toctext">Qunit's Assert Object</span></a></li>
</ol>
-<h2 id="Anything"> Anything </h2>
+<h2 id="Anything">Anything</h2>
<p>The <strong>Anything</strong> virtual type is used in jQuery documentation to indicate that any type can be used or should be expected.
</p>
-<h2 id="String"> String </h2>
-<p>A string in JavaScript is an immutable object that contains none, one or many characters.
+<h2 id="String">String</h2>
+<p>A string in JavaScript is an immutable primitive value that contains none, one or many characters.
</p>
<pre><code data-lang="javascript">"I'm a String in JavaScript!"
'So am I!'
@@ -111,14 +115,14 @@ <h2 id="String"> String </h2>
</p>
<pre><code data-lang="javascript">typeof "some string"; // "string"
</code></pre>
-<h3 id="Quoting"> Quoting </h3>
+<h3 id="Quoting">Quoting</h3>
<p>A string can be defined using single or double quotes. You can nest single quotes inside of double quotes, and the other way around. To mix double quotes with double quotes (or single with single), the nested ones have to be escaped with a backslash.
</p>
<pre><code data-lang="javascript">"You make 'me' sad."
'That\'s "cranking" good fun!'
"<a href=\"home\">Home</a>"
</code></pre>
-<h3 id="Built-in_Methods"> Built-in Methods </h3>
+<h3 id="Built-in_Methods">Built-in Methods</h3>
<p>A string in JavaScript has some built-in methods to manipulate the string, though the result is always a new string - or something else, eg. split returns an <a href="/Types/#Array" title="Types">array</a>.
</p>
<pre><code data-lang="javascript">"hello".charAt( 0 ) // "h"
@@ -127,13 +131,13 @@ <h3 id="Built-in_Methods"> Built-in Methods </h3>
"hello".replace( /e|o/g, "x" ) // "hxllx"
"1,2,3".split( "," ) // [ "1", "2", "3" ]
</code></pre>
-<h3 id="Length_Property"> Length Property </h3>
+<h3 id="Length_Property">Length Property</h3>
<p>All strings have a length property.
</p>
<pre><code data-lang="javascript">"Hello".length // 5
"".length // 0
</code></pre>
-<h3 id="Boolean_Default"> Boolean Default </h3>
+<h3 id="Boolean_Default">Boolean Default</h3>
<p>An empty string defaults to false:
</p>
<pre><code data-lang="javascript">!"" // true
@@ -143,9 +147,9 @@ <h3 id="Boolean_Default"> Boolean Default </h3>
!new Boolean( false ) // false
</code></pre>
-<h2 id="htmlString"> htmlString </h2>
+<h2 id="htmlString">htmlString</h2>
<p>A string is designated <strong>htmlString</strong> in jQuery documentation when it is used to represent one or more DOM elements, typically to be created and inserted in the document. When passed as an argument of the <code>jQuery()</code> function, the string is identified as HTML if it starts with <code><tag ... ></code>) and is parsed as such until the final <code>></code> character. Prior to jQuery 1.9, a string was considered to be HTML if it contained <code><tag ... ></code> <em>anywhere within the string</em>.</p>
-<p>When a string as passed as an argument to a manipulation method such as <code>.append()</code>, it is always considered to be HTML since jQuery's other common interpretation of a string (CSS selectors) does not apply in those contexts.</p>
+<p>When a string is passed as an argument to a manipulation method such as <code>.append()</code>, it is always considered to be HTML since jQuery's other common interpretation of a string (CSS selectors) does not apply in those contexts.</p>
<p>For explicit parsing of a string to HTML, the <code><a href="/https/github.com/jQuery.parseHTML/">$.parseHTML()</a></code> method is available as of jQuery 1.8.</p>
<pre><code data-lang="javascript">// Appends <b>hello</b>:
$( "<b>hello</b>" ).appendTo( "body" );
@@ -162,8 +166,8 @@ <h2 id="htmlString"> htmlString </h2>
// Appends <b>hello</b>wait<b>bye</b>:
$( "<b>hello</b>wait<b>bye</b>" ).appendTo( "body" );
</code></pre>
-<h2 id="Number"> Number </h2>
-<p>Numbers in JavaScript are double-precision 64-bit format IEEE 754 values. They are immutable, just as <a href="#String" title="">strings</a>. All operators common in c-based languages are available to work with numbers (+, -, *, /, %, =, +=, -=, *=, /=, ++, --).
+<h2 id="Number">Number</h2>
+<p>Numbers in JavaScript are double-precision 64-bit format IEEE 754 values. They are immutable primitive values, just like <a href="#String" title="">strings</a>. All operators common in c-based languages are available to work with numbers (+, -, *, /, %, =, +=, -=, *=, /=, ++, --).
</p>
<pre><code data-lang="javascript">12
3.543
@@ -173,7 +177,7 @@ <h2 id="Number"> Number </h2>
<pre><code data-lang="javascript">typeof 12 // "number"
typeof 3.543 // "number"
</code></pre>
-<h3 id="Boolean_Default_2"> Boolean Default </h3>
+<h3 id="Boolean_Default_2">Boolean Default</h3>
<p>If a number is zero, it defaults to false:
</p>
<pre><code data-lang="javascript">!0 // true
@@ -185,15 +189,13 @@ <h3 id="Boolean_Default_2"> Boolean Default </h3>
</p>
<pre><code data-lang="javascript">0.1 + 0.2 // 0.30000000000000004
</code></pre>
-<p><br />
-</p>
-<h3 id="Math"> Math </h3>
+<h3 id="Math">Math</h3>
<p>JavaScript provides utilities to work with numbers in the Math object:
</p>
<pre><code data-lang="javascript">Math.PI // 3.141592653589793
Math.cos( Math.PI ) // -1
</code></pre>
-<h3 id="Parsing_Numbers"> Parsing Numbers </h3>
+<h3 id="Parsing_Numbers">Parsing Numbers</h3>
<p>parseInt and parseFloat help parsing strings into numbers. Both do some implicit conversion if the base isn't specified:
</p>
<pre><code data-lang="javascript">parseInt( "123" ) = 123 // (implicit decimal)
@@ -203,8 +205,8 @@ <h3 id="Parsing_Numbers"> Parsing Numbers </h3>
parseInt( "11", 2 ) = 3 // (explicit binary)
parseFloat( "10.10" ) = 10.1
</code></pre>
-<h3 id="Numbers_to_Strings"> Numbers to Strings </h3>
-<p>When appending numbers to string, the result is always a string. The operator is the same, so be careful: If you want to add numbers and then append them to a string, put parentheses around them:
+<h3 id="Numbers_to_Strings">Numbers to Strings</h3>
+<p>When appending numbers to string, the result is always a string. The operator is the same, so be careful: If you want to add numbers and then append them to a string, put parentheses around the numbers:
</p>
<pre><code data-lang="javascript">"" + 1 + 2; // "12"
"" + ( 1 + 2 ); // "3"
@@ -216,7 +218,7 @@ <h3 id="Numbers_to_Strings"> Numbers to Strings </h3>
<pre><code data-lang="javascript">String( 1 ) + String( 2 ); // "12"
String( 1 + 2 ); // "3"
</code></pre>
-<h3 id="NaN_and_Infinity"> NaN and Infinity </h3>
+<h3 id="NaN_and_Infinity">NaN and Infinity</h3>
<p>Parsing something that isn't a number results in NaN. isNaN helps to detect those cases:
</p>
<pre><code data-lang="javascript">parseInt( "hello", 10 ) // NaN
@@ -233,27 +235,25 @@ <h3 id="NaN_and_Infinity"> NaN and Infinity </h3>
</code></pre>
<p>Note that NaN compares in a strange way:
</p>
-<pre><code data-lang="javascript">NaN == NaN // false (!)
+<pre><code data-lang="javascript">NaN === NaN // false (!)
</code></pre>
<p>But:
</p>
-<pre><code data-lang="javascript">Infinity == Infinity // true
+<pre><code data-lang="javascript">Infinity === Infinity // true
</code></pre>
-<h3 id="Integer"> Integer </h3>
+<h3 id="Integer">Integer</h3>
<p>An integer is a plain Number type, but whenever explicitly mentioned, indicates that a non-floating-point number is expected.
</p>
-<h3 id="Float"> Float </h3>
+<h3 id="Float">Float</h3>
<p>A float is a plain Number type, just as Integer, but whenever explicitly mentioned, indicates that a floating-point number is expected.
</p>
-<p><br />
-</p>
-<h2 id="Boolean"> Boolean </h2>
+<h2 id="Boolean">Boolean</h2>
<p>A boolean in JavaScript can be either true or false:
</p>
<pre><code data-lang="javascript">if ( true ) console.log( "always!" );
if ( false ) console.log( "never!" );
</code></pre>
-<h2 id="Object"> Object </h2>
+<h2 id="Object">Object</h2>
<p>Everything in JavaScript is an object, though some are more objective (haha). The easiest way to create an object is the object literal:
</p>
<pre><code data-lang="javascript">var x = {};
@@ -266,7 +266,7 @@ <h2 id="Object"> Object </h2>
</p>
<pre><code data-lang="javascript">typeof {} // "object"
</code></pre>
-<h3 id="Dot_Notation"> Dot Notation </h3>
+<h3 id="Dot_Notation">Dot Notation</h3>
<p>You can write and read properties of an object using the dot notation:
</p>
<pre><code data-lang="javascript">y.name // "Pete"
@@ -274,7 +274,7 @@ <h3 id="Dot_Notation"> Dot Notation </h3>
x.name = y.name + " Pan" // "Pete Pan"
x.age = y.age + 1 // 16
</code></pre>
-<h3 id="Array_Notation"> Array Notation </h3>
+<h3 id="Array_Notation">Array Notation</h3>
<p>Or you write and read properties using the array notation, which allows you to dynamically choose the property:
</p>
<pre><code data-lang="javascript">var operations = {
@@ -285,7 +285,7 @@ <h3 id="Array_Notation"> Array Notation </h3>
operations[ operation ] // "++"
operations[ "multiply" ] = "*"; // "*"
</code></pre>
-<h3 id="Iteration"> Iteration </h3>
+<h3 id="Iteration">Iteration</h3>
<p>Iterating over objects is easy with the for-in-loop:
</p>
<pre><code data-lang="javascript">var obj = {
@@ -296,7 +296,7 @@ <h3 id="Iteration"> Iteration </h3>
alert( "key is " + [ key ] + ", value is " + obj[ key ] );
}
</code></pre>
-<p>Note that for-in-loop can be spoiled by extending Object.prototype (see <a href="http://erik.eae.net/archives/2005/06/06/22.13.54" class="external text" title="http://erik.eae.net/archives/2005/06/06/22.13.54">Object.prototype is verboten</a>) so take care when using other libraries.
+<p>Note that for-in-loop can be spoiled by extending <code>Object.prototype</code> (see <a href="https://web.archive.org/web/20200416084623/https://erik.eae.net/archives/2005/06/06/22.13.54/" class="external text" title="https://web.archive.org/web/20200416084623/https://erik.eae.net/archives/2005/06/06/22.13.54/">Object.prototype is verboten</a>) so take care when using other libraries.
</p>
<p>jQuery provides a generic <a href="/https/github.com/jQuery.each/"><em>each</em> function</a> to iterate over properties of objects, as well as elements of arrays:
</p>
@@ -307,19 +307,19 @@ <h3 id="Iteration"> Iteration </h3>
<p>The drawback is that the callback is called in the context of each value and you therefore lose the context of your own object if applicable. More on this below at Functions.
</p>
-<h3 id="Boolean_default_3"> Boolean default </h3>
+<h3 id="Boolean_default_3">Boolean default</h3>
<p>An object, no matter if it has properties or not, never defaults to false:
</p>
<pre><code data-lang="javascript">!{} // false
!!{} // true
</code></pre>
-<h3 id="Prototype"> Prototype </h3>
+<h3 id="Prototype">Prototype</h3>
<p>All objects have a prototype property. Whenever the interpreter looks for a property, it also checks in the object's prototype if the property is not found on the object itself. jQuery uses the prototype extensively to add methods to jQuery instances. Internally, jQuery makes <code>jQuery.fn</code> an alias of <code>jQuery.prototype</code> so you can use either one (though plugin developers have standardized on <code>fn</code>).
</p>
<pre><code data-lang="javascript">var form = $("#myform");
console.log( form.clearForm ); // undefined
-// jQuery.fn == jQuery.prototype
+// jQuery.fn === jQuery.prototype
jQuery.fn.clearForm = function() {
return this.find( ":input" ).each(function() {
this.value = "";
@@ -332,7 +332,7 @@ <h3 id="Prototype"> Prototype </h3>
form.clearForm();
</code></pre>
-<h2 id="Array"> Array </h2>
+<h2 id="Array">Array</h2>
<p>Arrays in JavaScript are mutable lists with a few built-in methods. You can define arrays using the array literal:
</p>
<pre><code data-lang="javascript">var x = [];
@@ -348,7 +348,7 @@ <h2 id="Array"> Array </h2>
<pre><code data-lang="javascript">x[ 0 ] = 1;
y[ 2 ] // 3
</code></pre>
-<h3 id="Iteration_2"> Iteration </h3>
+<h3 id="Iteration_2">Iteration</h3>
<p>An array has a length property that is useful for iteration:
</p>
<pre><code data-lang="javascript">for ( var i = 0; i < a.length; i++ ) {
@@ -398,21 +398,24 @@ <h3 id="Iteration_2"> Iteration </h3>
</code></pre>
<p>Note: .unshift() method does not return a length property in Internet Explorer.
</p>
-<h3 id="Boolean_Default_4"> Boolean Default </h3>
+<h3 id="Boolean_Default_4">Boolean Default</h3>
<p>An array, no matter if it has elements or not, never defaults to false:
</p>
<pre><code data-lang="javascript">![] // false
!![] // true
</code></pre>
-<h3 id="Array.3CType.3E_Notation"> Array<Type> Notation </h3>
+<h3 id="Array.3CType.3E_Notation">Array<Type> Notation</h3>
<p>In the jQuery API you'll often find the notation of Array<Type>:
</p>
<pre>dragPrevention Array<String>
</pre>
<p>This indicates that the method doesn't only expect an array as the argument, but also specifies the expected type. The notation is borrowed from Java 5's generics notation (or C++ templates).
</p>
-<h2 id="PlainObject"> PlainObject </h2>
-<p>The PlainObject type is a JavaScript object containing zero or more key-value pairs. The plain object is, in other words, an <code>Object</code> object. It is designated "plain" in jQuery documentation to distinguish it from other kinds of JavaScript objects: for example, <code>null</code>, user-defined arrays, and host objects such as <code>document</code>, all of which have a <code>typeof</code> value of "object." The <code><a href="/https/github.com/jQuery.isPlainObject">jQuery.isPlainObject()</a></code> method identifies whether the passed argument is a plain object or not, as demonstrated below:
+<h2 id="ArrayLikeObject">Array-Like Object</h2>
+<p>Either a true JavaScript Array or a JavaScript Object that contains a nonnegative integer <code>length</code> property and index properties from <code>0</code> up to <code>length - 1</code>. This latter case includes array-like objects commonly encountered in web-based code such as the <code>arguments</code> object and the <code>NodeList</code> object returned by many DOM methods.</p>
+<p>When a jQuery API accepts either plain Objects or Array-Like objects, a plain Object with a numeric <code>length</code> property will trigger the Array-Like behavior.</p>
+<h2 id="PlainObject">PlainObject</h2>
+<p>The PlainObject type is a JavaScript object containing zero or more key-value pairs. The plain object is, in other words, an <code>Object</code> object. It is designated "plain" in jQuery documentation to distinguish it from other kinds of JavaScript objects: for example, <code>null</code>, user-defined arrays, and host objects such as <code>document</code>, all of which have a <code>typeof</code> value of "object." The <code><a href="/https/github.com/jQuery.isPlainObject/">jQuery.isPlainObject()</a></code> method identifies whether the passed argument is a plain object or not, as demonstrated below:
</p>
<pre><code data-lang="javascript">
var a = [];
@@ -428,7 +431,10 @@ <h2 id="PlainObject"> PlainObject </h2>
jQuery.isPlainObject( o ); // true
</code></pre>
-<h2 id="Date"> Date </h2>
+<h2 id="Null">Null</h2>
+<p>The <code>null</code> keyword is a JavaScript literal that is commonly used to express the absence of an intentional value.</p>
+
+<h2 id="Date">Date</h2>
<p>The Date type is a JavaScript object that represents a single moment in time. Date objects are instantiated using their constructor function, which by default creates an object that represents the current date and time.
</p>
<pre><code data-lang="javascript">
@@ -440,7 +446,7 @@ <h2 id="Date"> Date </h2>
new Date( 2014, 0, 1, 8, 15 );
</code></pre>
-<h2 id="Function"> Function </h2>
+<h2 id="Function">Function</h2>
<p>A function in JavaScript can be either named or anonymous. Any function can be assigned to a variable or passed to a method, but passing member functions this way can cause them to be called in the context of another object (i.e. with a different "this" object).
</p>
<pre><code data-lang="javascript">function named() {}
@@ -449,7 +455,7 @@ <h2 id="Function"> Function </h2>
<p>You see a lot of anonymous functions in jQuery code:
</p>
<pre><code data-lang="javascript">$( document ).ready(function() {});
-$( "a" ).click(function() {});
+$( "a)" ).on( "click", function() {});
$.ajax({
url: "someurl.php",
success: function() {}
@@ -457,7 +463,7 @@ <h2 id="Function"> Function </h2>
</code></pre>
<p>The type of a function is "function".
</p>
-<h3 id="Arguments"> Arguments </h3>
+<h3 id="Arguments">Arguments</h3>
<p>Inside a function a special variable "arguments" is always available. It's similar to an array in that it has a length property, but it lacks the built-in methods of an array. The elements of the pseudo-array are the argument of the function call.
</p>
<pre><code data-lang="javascript">function log( x ) {
@@ -470,9 +476,9 @@ <h3 id="Arguments"> Arguments </h3>
<p>The arguments object also has a callee property, which refers to the function you're inside of. For instance:
</p>
<pre><code data-lang="javascript">var awesome = function() { return arguments.callee; }
-awesome() == awesome // true
+awesome() === awesome // true
</code></pre>
-<h3 id="Context.2C_Call_and_Apply"> Context, Call and Apply </h3>
+<h3 id="Context.2C_Call_and_Apply">Context, Call and Apply</h3>
<p>In JavaScript, the variable "this" always refers to the current context. By default, "this" refers to the window object. Within a function this context can change, depending on how the function is called.
</p>
<p>All event handlers in jQuery are called with the handling element as the context.
@@ -480,7 +486,7 @@ <h3 id="Context.2C_Call_and_Apply"> Context, Call and Apply </h3>
<pre><code data-lang="javascript">$( document ).ready(function() {
// this refers to window.document
});
-$( "a" ).click(function() {
+$( "a)" ).on( "click", function() {
// this refers to an anchor DOM element
});
</code></pre>
@@ -493,7 +499,7 @@ <h3 id="Context.2C_Call_and_Apply"> Context, Call and Apply </h3>
scope.call( "foobar", [ 1, 2 ] ); // "foobar", 1
scope.apply( "foobar", [ 1, 2 ] ); // "foobar", 2
</code></pre>
-<h3 id="Scope"> Scope </h3>
+<h3 id="Scope">Scope</h3>
<p>In JavaScript, all variables defined inside a function are only visible inside that function scope. Consider the following example:
</p>
<pre><code data-lang="javascript">// global
@@ -507,7 +513,7 @@ <h3 id="Scope"> Scope </h3>
</code></pre>
<p>It defines a variable <i>x</i> in the global scope, then defines an anonymous function and executes it immediately (the additional parentheses are required for immediate execution). Inside the function another variable <i>x</i> is defined with a different value. It is only visible within that function and doesn't overwrite the global variable.
</p>
-<h3 id="Closures"> Closures </h3>
+<h3 id="Closures">Closures</h3>
<p>Closures are created whenever a variable that is defined outside the current scope is accessed from within some inner scope. In the following example, the variable <i>counter</i> is visible within the create, increment, and print functions, but not outside of them.
</p>
<pre><code data-lang="javascript">function create() {
@@ -527,7 +533,7 @@ <h3 id="Closures"> Closures </h3>
</code></pre>
<p>The pattern allows you to create objects with methods that operate on data that isn't visible to the outside—the very basis of object-oriented programming.
</p>
-<h3 id="Proxy_Pattern"> Proxy Pattern </h3>
+<h3 id="Proxy_Pattern">Proxy Pattern</h3>
<p>Combining the above knowledge gives you as a JavaScript developer quite a lot of power. One way to combine that is to implement a proxy pattern in JavaScript, enabling the basics of aspect-oriented programming (AOP):
</p>
<pre><code data-lang="javascript">(function() {
@@ -541,10 +547,10 @@ <h3 id="Proxy_Pattern"> Proxy Pattern </h3>
</code></pre>
<p>The above wraps its code in a function to hide the "proxied"-variable. It saves jQuery's setArray-method in a closure and overwrites it. The proxy then logs all calls to the method and delegates the call to the original. Using apply(this, arguments) guarantees that the caller won't be able to notice the difference between the original and the proxied method.
</p>
-<h2 id="Callback"> Callback </h2>
+<h2 id="Callback">Callback</h2>
<p>A callback is a plain JavaScript function passed to some method as an argument or option. Some callbacks are just events, called to give the user a chance to react when a certain state is triggered. jQuery's event system uses such callbacks everywhere:
</p>
-<pre><code data-lang="javascript">$( "body" ).click(function( event ) {
+<pre><code data-lang="javascript">$( "body" ).on( "click", function( event ) {
console.log( "clicked: " + event.target );
});
</code></pre>
@@ -552,15 +558,23 @@ <h2 id="Callback"> Callback </h2>
</p>
<p>Some callbacks are required to return something, others make that return value optional. To prevent a form submission, a submit event handler can return false:
</p>
-<pre><code data-lang="javascript">$( "#myform" ).submit(function() {
+<pre><code data-lang="javascript">$( "#myform" ).on( "submit", function() {
return false;
-});
+} );
</code></pre>
<p>Instead of always returning false, the callback could check fields of the form for validity, and return false only when the form is invalid.
</p>
-<p><br />
+<h2 id="Error">Error</h2>
+<p>An instance of an Error object is thrown as an exception when a runtime error occurs. Error can also be used as base to define user custom exception classes. In JavaScript an error can be thrown as shown below:
+</p>
+<pre><code data-lang="javascript">throw new Error( "The argument provided is incorrect" );
+</code></pre>
+<p>An error can also be thrown by the engine under some circumstances. For example, when trying to access a property of <code>null</code>:
</p>
-<h2 id="Selector"> Selector </h2>
+<pre><code data-lang="javascript">var obj = null;
+console.log( obj.foo() );
+</code></pre>
+<h2 id="Selector">Selector</h2>
<p>A selector is used in jQuery to select DOM elements from a DOM document. That document is, in most cases, the DOM document present in all browsers, but can also be an XML document received via Ajax.
</p>
<p>The selectors are a composition of CSS and custom additions. All selectors available in jQuery are documented on the <a href="/https/github.com/category/selectors/" title="Selectors">Selectors API page</a>.
@@ -582,7 +596,7 @@ <h2 id="Event">Event</h2>
</p>
<p>The standard events in the Document Object Model are: <code>blur</code>, <code>focus</code>, <code>load</code>, <code>resize</code>, <code>scroll</code>, <code>unload</code>, <code>beforeunload</code>, <code>click</code>, <code>dblclick</code>, <code>mousedown</code>, <code>mouseup</code>, <code>mousemove</code>, <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code>, <code>mouseleave</code>, <code>change</code>, <code>select</code>, <code>submit</code>, <code>keydown</code>, <code>keypress,</code> and <code>keyup</code>. Since the DOM event names have predefined meanings for some elements, using them for other purposes is not recommended. jQuery's event model can trigger an event by any name on an element, and it is propagated up the DOM tree to which that element belongs, if any.
</p>
-<h2 id="Element"> Element </h2>
+<h2 id="Element">Element</h2>
<p>An element in the Document Object Model (DOM) can have attributes, text, and children. It provides methods to traverse the parent and children and to get access to its attributes. Due to inconsistencies in DOM API specifications and implementations, however, those methods can be a challenge to use. jQuery provides a "wrapper" around those elements to help interacting with the DOM. But sometimes you will be working directly with DOM elements, or see methods that (also) accept DOM elements as arguments.
</p>
<p>Whenever you call jQuery's <code>.each()</code> method or one of its event methods on a jQuery collection, the context of the callback function — <code>this</code> — is set to a DOM element.
@@ -597,7 +611,17 @@ <h2 id="Element"> Element </h2>
</code></pre>
<p>You could replace <code>this.value</code> with <code>$(this).val()</code> to access the value of the text input via jQuery, but in that case you wouldn't gain anything.
</p>
-<h2 id="jQuery"> jQuery </h2>
+<h2 id="Text">Text</h2>
+<p>Text is a node of the Document Object Model (DOM) that represents the textual content of an <a href="#Element">element</a> or an attribute. Consider the following code:
+</p>
+<pre><code><p id="target"><b>Hello</b> world</p></code></pre>
+<p>If you retrieve the children of the paragraph of the example as follows:
+</p>
+<pre><code data-lang="javascript">var children = document.getElementById( "target" ).childNodes;
+</code></pre>
+<p>you obtain two children. The first one is the <a href="#Element">element</a> representing the <code>b</code> tag. The second child is a text node containing the string " world".
+</p>
+<h2 id="jQuery">jQuery</h2>
<p>A jQuery object contains a collection of Document Object Model (DOM) elements that have been created from an HTML string or selected from a document. Since jQuery methods often use CSS selectors to match elements from a document, the set of elements in a jQuery object is often called a set of "matched elements" or "selected elements".
</p>
<p>The jQuery object itself behaves much like an array; it has a <code>length</code> property and the elements in the object can be accessed by their numeric indices <code>[0]</code> to <code>[length-1]</code>. Note that a jQuery object is not actually a Javascript Array object, so it does not have all the methods of a true Array object such as <code>join()</code>.
@@ -614,31 +638,30 @@ <h2 id="jQuery"> jQuery </h2>
</p>
<pre><code data-lang="javascript">$( ".badEntry" ).css({ color: "red" });
</code></pre>
-<h2 id="XMLHttpRequest"> XMLHttpRequest </h2>
+<h2 id="XMLHttpRequest">XMLHttpRequest</h2>
<p>Some of jQuery's Ajax functions return the native XMLHttpRequest (XHR) object, or pass it as an argument to success/error/complete handlers, so that you can do additional processing or monitoring on the request. Note that Ajax functions only return or pass an XHR object when an XHR object is actually used in the request. For example, JSONP requests and cross-domain GET requests use a script element rather than an XHR object.
</p>
-<p>Although the XHR object is a standard, there are variations in its behavior on different browsers. Refer to the W3C site and browsers' documentation for more information:
+<p>Although the XHR object is a standard, there are variations in its behavior on different browsers. Refer to the WHATWG site and Mozilla Developer Network for more information:
</p>
-<ul><li> <a href="http://www.w3.org/TR/XMLHttpRequest/" class="external text" title="http://www.w3.org/TR/XMLHttpRequest/">W3C standard</a>
-</li><li> <a href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html" class="external text" title="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple (Safari)</a>
-</li><li> <a href="http://developer.mozilla.org/en/xmlhttprequest" class="external text" title="http://developer.mozilla.org/en/xmlhttprequest">Mozilla (Firefox)</a>
-</li><li> <a href="http://msdn.microsoft.com/en-us/library/ms535874%28VS.85%29.aspx" class="external text" title="http://msdn.microsoft.com/en-us/library/ms535874%28VS.85%29.aspx">Microsoft (Internet Explorer)</a>
-</li><li> <a href="http://www.opera.com/docs/specs/opera9/xhr/" class="external text" title="http://www.opera.com/docs/specs/opera9/xhr/">Opera</a>
+<ul><li> <a href="https://xhr.spec.whatwg.org/" class="external text" title="https://xhr.spec.whatwg.org/">WHATWG living standard</a>
+</li><li> <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" class="external text" title="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">Mozilla Developer Network</a>
</li></ul>
-<p>Google does not appear to have an official page for their XHR documentation for Chrome. As of version 5, Chrome does not support the use of the file protocol for XHR requests.
-</p>
-<h2 id="jqXHR"> jqXHR </h2>
+<h2 id="jqXHR">jqXHR</h2>
<p>As of jQuery 1.5, the <a href="/https/github.com/jQuery.ajax/">$.ajax()</a> method returns the jqXHR object, which is a superset of the XMLHTTPRequest object. For more information, see the <a href="/https/github.com/jQuery.ajax/#jqXHR">jqXHR section of the $.ajax entry</a>
</p>
+<h2 id="Thenable">Thenable</h2>
+<p>Any object that has a <code>then</code> method.</p>
<h2 id="Deferred"> Deferred Object</h2>
<p>As of jQuery 1.5, the <a href="/https/github.com/category/deferred-object/">Deferred</a> object provides a way to register multiple callbacks into self-managed callback queues, invoke callback queues as appropriate, and relay the success or failure state of any synchronous or asynchronous function.
</p>
<h2 id="Promise"> Promise Object</h2>
-<p>This object provides a subset of the methods of the <a href="/https/github.com/category/deferred-object/">Deferred</a> object (<a href="/https/github.com/deferred.then/"><code>then</code></a>, <a href="/https/github.com/deferred.done/"><code>done</code></a>, <a href="/https/github.com/deferred.fail/"><code>fail</code></a>, <a href="/https/github.com/deferred.always/"><code>always</code></a>, <a href="/https/github.com/deferred.pipe/"><code>pipe</code></a>, and <a href="/https/github.com/deferred.state/"><code>state</code></a>) to prevent users from changing the state of the Deferred.
+<p>This object provides a subset of the methods of the <a href="/https/github.com/category/deferred-object/">Deferred</a> object (<a href="/https/github.com/deferred.then/"><code>then</code></a>, <a href="/https/github.com/deferred.done/"><code>done</code></a>, <a href="/https/github.com/deferred.fail/"><code>fail</code></a>, <a href="/https/github.com/deferred.always/"><code>always</code></a>, <a href="/https/github.com/deferred.pipe/"><code>pipe</code></a>, <a href="/https/github.com/deferred.progress/"><code>progress</code></a>, <a href="/https/github.com/deferred.state/"><code>state</code></a> and <a href="/https/github.com/deferred.promise/"><code>promise</code></a>) to prevent users from changing the state of the Deferred.
</p>
<h2 id="Callbacks">Callbacks Object</h2>
<p>A multi-purpose object that provides a powerful way to manage callback lists. It supports adding, removing, firing, and disabling callbacks. The Callbacks object is created and returned by the <code>$.Callbacks</code> function and subsequently returned by most of that function's methods. </p>
+<h2 id="Document">Document</h2>
+<p>A document object created by the browser's DOM parser, usually from a string representing HTML or XML.</p>
<h2 id="XMLDocument">XML Document</h2>
<p>A document object created by the browser's XML DOM parser, usually from a string representing XML. XML documents have different semantics than HTML documents, but most of the traversing and manipulation methods provided by jQuery will work with them.</p>
<h2 id="Assert">Assert</h2>
-<p>A reference to or instance of the object holding all of QUnit's assertions. See the <a href="//api.qunitjs.com/QUnit.assert">API documentation for <code>QUnit.assert</code></a> for details.</p>
+<p>A reference to or instance of the object holding all of QUnit's assertions. See the <a href="https://api.qunitjs.com/config/QUnit.assert">API documentation for <code>QUnit.assert</code></a> for details.</p>
diff --git a/redirects.json b/redirects.json
new file mode 100644
index 000000000..ba33f9ddd
--- /dev/null
+++ b/redirects.json
@@ -0,0 +1,4 @@
+{
+ "/api/": "/resources/api.xml",
+ "/extending-ajax/": "/jQuery.ajax/#extending-ajax"
+}
diff --git a/resources/events.js b/resources/events.js
index e00efb363..9b01b7e6c 100644
--- a/resources/events.js
+++ b/resources/events.js
@@ -1,31 +1,31 @@
jQuery.print = function(message, insertionType) {
- if (typeof(message) == 'object') {
- var string = '{<br />',
- values = [],
- counter = 0;
- $.each(message, function(key, value) {
- if (value && value.nodeName) {
- var domnode = '<' + value.nodeName.toLowerCase();
- domnode += value.className ? ' class="' + value.className + '"' : '';
- domnode += value.id ? ' id="' + value.id + '"' : '';
- domnode += '>';
- value = domnode;
- }
- values[counter++] = key + ': ' + value;
- });
- string += values.join(',<br />');
- string += '<br />}';
- message = string;
- }
+ if (typeof(message) == 'object') {
+ var string = '{<br />',
+ values = [],
+ counter = 0;
+ $.each(message, function(key, value) {
+ if (value && value.nodeName) {
+ var domnode = '<' + value.nodeName.toLowerCase();
+ domnode += value.className ? ' class="' + value.className + '"' : '';
+ domnode += value.id ? ' id="' + value.id + '"' : '';
+ domnode += '>';
+ value = domnode;
+ }
+ values[counter++] = key + ': ' + value;
+ });
+ string += values.join(',<br />');
+ string += '<br />}';
+ message = string;
+ }
- var $output = $('#print-output');
+ var $output = $('#print-output');
- if ($output.length === 0) {
- $output = $('<div id="print-output" />').appendTo('body');
- }
+ if ($output.length === 0) {
+ $output = $('<div id="print-output" />').appendTo('body');
+ }
- var $newMessage = $('<div class="print-output-line" />');
- $newMessage.html(message);
- insertionType = insertionType || 'append';
- $output[insertionType]($newMessage);
+ var $newMessage = $('<div class="print-output-line" />');
+ $newMessage.html(message);
+ insertionType = insertionType || 'append';
+ $output[insertionType]($newMessage);
};
diff --git a/resources/load.html b/resources/load.html
index 659f60445..81558c2a8 100644
--- a/resources/load.html
+++ b/resources/load.html
@@ -1,20 +1,20 @@
<!doctype html>
<html lang="en">
<head>
- <meta charset="utf-8">
- <title>Sample Page</title>
+ <meta charset="utf-8">
+ <title>Sample Page</title>
</head>
<body>
<h1>Popular jQuery Projects</h1>
<ul id="projects">
- <li>jQuery</li>
- <li>jQuery UI</li>
- <li>jQuery Mobile</li>
- <li>QUnit</li>
- <li>Sizzle</li>
+ <li>jQuery</li>
+ <li>jQuery UI</li>
+ <li>jQuery Mobile</li>
+ <li>QUnit</li>
+ <li>Sizzle</li>
</ul>
</body>
-</html>
\ No newline at end of file
+</html>