UNPKG

395 kBTypeScriptView Raw
1// tslint:disable:jsdoc-format
2// tslint:disable:no-irregular-whitespace
3
4interface JQuery<TElement = HTMLElement> extends Iterable<TElement> {
5 /**
6 * A string containing the jQuery version number.
7 * @see \`{@link https://api.jquery.com/jquery-2/#jquery1 }\`
8 * @since 1.0
9 * @example ​ ````Determine if an object is a jQuery object
10```javascript
11var a = { what: "A regular JS object" },
12 b = $( "body" );
13​
14if ( a.jquery ) { // Falsy, since it's undefined
15 alert( "a is a jQuery object!" );
16}
17​
18if ( b.jquery ) { // Truthy, since it's a string
19 alert( "b is a jQuery object!" );
20}
21```
22 * @example ​ ````Get the current version of jQuery running on the page
23```javascript
24alert( "You are running jQuery version: " + $.fn.jquery );
25```
26 */
27 jquery: string;
28 /**
29 * The number of elements in the jQuery object.
30 * @see \`{@link https://api.jquery.com/length/ }\`
31 * @since 1.0
32 * @example ​ ````Count the divs. Click to add more.
33```html
34<!doctype html>
35<html lang="en">
36<head>
37 <meta charset="utf-8">
38 <title>length demo</title>
39 <style>
40 body {
41 cursor: pointer;
42 }
43 div {
44 width: 50px;
45 height: 30px;
46 margin: 5px;
47 float: left;
48 background: green;
49 }
50 span {
51 color: red;
52 }
53 </style>
54 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
55</head>
56<body>
57​<span></span>
58 <div></div>​
59<script>
60$( document.body )
61 .click(function() {
62 $( document.body ).append( $( "<div>" ) );
63 var n = $( "div" ).length;
64 $( "span" ).text( "There are " + n + " divs." +
65 "Click to add more.");
66 })
67 // Trigger the click to start
68 .trigger( "click" );
69</script>
70​
71</body>
72</html>
73```
74 */
75 length: number;
76 /**
77 * Create a new jQuery object with elements added to the set of matched elements.
78 * @param selector A string representing a selector expression to find additional elements to add to the set of matched elements.
79 * @param context The point in the document at which the selector should begin matching; similar to the context
80 * argument of the $(selector, context) method.
81 * @see \`{@link https://api.jquery.com/add/ }\`
82 * @since 1.4
83 */
84 add(selector: JQuery.Selector, context: Element): this;
85 // TODO: The return type should reflect newly selected types.
86 /**
87 * Create a new jQuery object with elements added to the set of matched elements.
88 * @param selector_elements_html_selection _&#x40;param_ `selector_elements_html_selection`
89 * <br>
90 * * `selector` — A string representing a selector expression to find additional elements to add to the set of matched elements. <br>
91 * * `elements` — One or more elements to add to the set of matched elements. <br>
92 * * `html` — An HTML fragment to add to the set of matched elements. <br>
93 * * `selection` — An existing jQuery object to add to the set of matched elements.
94 * @see \`{@link https://api.jquery.com/add/ }\`
95 * @since 1.0
96 * @since 1.3.2
97 * @example ​ ````Finds all divs and makes a border. Then adds all paragraphs to the jQuery object to set their backgrounds yellow.
98```html
99<!doctype html>
100<html lang="en">
101<head>
102 <meta charset="utf-8">
103 <title>add demo</title>
104 <style>
105 div {
106 width: 60px;
107 height: 60px;
108 margin: 10px;
109 float: left;
110 }
111 p {
112 clear: left;
113 font-weight: bold;
114 font-size: 16px;
115 color: blue;
116 margin: 0 10px;
117 padding: 2px;
118 }
119 </style>
120 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
121</head>
122<body>
123​
124<div></div>
125<div></div>
126<div></div>
127<div></div>
128<div></div>
129<div></div>
130​
131<p>Added this... (notice no border)</p>
132​
133<script>
134$( "div" ).css( "border", "2px solid red" )
135 .add( "p" )
136 .css( "background", "yellow" );
137</script>
138​
139</body>
140</html>
141```
142 * @example ​ ````Adds more elements, matched by the given expression, to the set of matched elements.
143```html
144<!doctype html>
145<html lang="en">
146<head>
147 <meta charset="utf-8">
148 <title>add demo</title>
149 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
150</head>
151<body>
152​
153<p>Hello</p>
154<span>Hello Again</span>
155​
156<script>
157$( "p" ).add( "span" ).css( "background", "yellow" );
158</script>
159​
160</body>
161</html>
162```
163 * @example ​ ````Adds more elements, created on the fly, to the set of matched elements.
164```html
165<!doctype html>
166<html lang="en">
167<head>
168 <meta charset="utf-8">
169 <title>add demo</title>
170 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
171</head>
172<body>
173​
174<p>Hello</p>
175​
176<script>
177$( "p" ).clone().add( "<span>Again</span>" ).appendTo( document.body );
178</script>
179​
180</body>
181</html>
182```
183 * @example ​ ````Adds one or more Elements to the set of matched elements.
184```html
185<!doctype html>
186<html lang="en">
187<head>
188 <meta charset="utf-8">
189 <title>add demo</title>
190 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
191</head>
192<body>
193​
194<p>Hello</p>
195<span id="a">Hello Again</span>
196​
197<script>
198$( "p" ).add( document.getElementById( "a" ) ).css( "background", "yellow" );
199</script>
200​
201</body>
202</html>
203```
204 * @example ​ ````Demonstrates how to add (or push) elements to an existing collection
205```html
206<!doctype html>
207<html lang="en">
208<head>
209 <meta charset="utf-8">
210 <title>add demo</title>
211 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
212</head>
213<body>
214​
215<p>Hello</p>
216<span id="a">Hello Again</span>
217​
218<script>
219var collection = $( "p" );
220// Capture the new collection
221collection = collection.add( document.getElementById( "a" ) );
222collection.css( "background", "yellow" );
223</script>
224​
225</body>
226</html>
227```
228 */
229 add(
230 selector_elements_html_selection:
231 | JQuery.Selector
232 | JQuery.TypeOrArray<Element>
233 | JQuery.htmlString
234 | JQuery
235 | JQuery.Node,
236 ): this;
237 /**
238 * Add the previous set of elements on the stack to the current set, optionally filtered by a selector.
239 * @param selector A string containing a selector expression to match the current set of elements against.
240 * @see \`{@link https://api.jquery.com/addBack/ }\`
241 * @since 1.8
242 * @example ​ ````The .addBack() 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 .find(&quot;p&quot;). In the second example, .addBack() adds the previous set of elements on the stack — in this case $(&quot;div.after-addback&quot;) — to the current set, selecting both the div and its enclosed paragraphs.
243```html
244<!doctype html>
245<html lang="en">
246<head>
247 <meta charset="utf-8">
248 <title>addBack demo</title>
249 <style>
250 p, div {
251 margin: 5px;
252 padding: 5px;
253 }
254 .border {
255 border: 2px solid red;
256 }
257 .background {
258 background: yellow;
259 }
260 .left, .right {
261 width: 45%;
262 float: left;
263 }
264 .right {
265 margin-left: 3%;
266 }
267 </style>
268 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
269</head>
270<body>
271​
272<div class="left">
273 <p><strong>Before <code>addBack()</code></strong></p>
274 <div class="before-addback">
275 <p>First Paragraph</p>
276 <p>Second Paragraph</p>
277 </div>
278</div>
279<div class="right">
280 <p><strong>After <code>addBack()</code></strong></p>
281 <div class="after-addback">
282 <p>First Paragraph</p>
283 <p>Second Paragraph</p>
284 </div>
285</div>
286​
287<script>
288$( "div.left, div.right" ).find( "div, div > p" ).addClass( "border" );
289​
290// First Example
291$( "div.before-addback" ).find( "p" ).addClass( "background" );
292​
293// Second Example
294$( "div.after-addback" ).find( "p" ).addBack().addClass( "background" );
295</script>
296​
297</body>
298</html>
299```
300 */
301 addBack(selector?: JQuery.Selector): this;
302 /**
303 * Adds the specified class(es) to each element in the set of matched elements.
304 * @param className_function _&#x40;param_ `className_function`
305 * <br>
306 * * `className` — One or more space-separated classes to be added to the class attribute of each matched element. <br>
307 * * `function` — A function returning one or more space-separated class names to be added to the existing class
308 * name(s). Receives the index position of the element in the set and the existing class name(s) as
309 * arguments. Within the function, `this` refers to the current element in the set.
310 * @see \`{@link https://api.jquery.com/addClass/ }\`
311 * @since 1.0
312 * @since 1.4
313 * @since 3.3
314 * @example ​ ````Add the class &quot;selected&quot; to the matched elements.
315```html
316<!doctype html>
317<html lang="en">
318<head>
319 <meta charset="utf-8">
320 <title>addClass demo</title>
321 <style>
322 p {
323 margin: 8px;
324 font-size: 16px;
325 }
326 .selected {
327 color: blue;
328 }
329 .highlight {
330 background: yellow;
331 }
332 </style>
333 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
334</head>
335<body>
336​
337<p>Hello</p>
338<p>and</p>
339<p>Goodbye</p>
340​
341<script>
342$( "p" ).last().addClass( "selected" );
343</script>
344​
345</body>
346</html>
347```
348 * @example ​ ````Add the classes &quot;selected&quot; and &quot;highlight&quot; to the matched elements.
349```html
350<!doctype html>
351<html lang="en">
352<head>
353 <meta charset="utf-8">
354 <title>addClass demo</title>
355 <style>
356 p {
357 margin: 8px;
358 font-size: 16px;
359 }
360 .selected {
361 color: red;
362 }
363 .highlight {
364 background: yellow;
365 }
366 </style>
367 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
368</head>
369<body>
370​
371<p>Hello</p>
372<p>and</p>
373<p>Goodbye</p>
374​
375<script>
376$( "p:last" ).addClass( "selected highlight" );
377</script>
378​
379</body>
380</html>
381```
382 * @example ​ ````Pass in a function to .addClass() to add the &quot;green&quot; class to a div that already has a &quot;red&quot; class.
383```html
384<!doctype html>
385<html lang="en">
386<head>
387 <meta charset="utf-8">
388 <title>addClass demo</title>
389 <style>
390 div {
391 background: white;
392 }
393 .red {
394 background: red;
395 }
396 .red.green {
397 background: green;
398 }
399 </style>
400 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
401</head>
402<body>
403​
404 <div>This div should be white</div>
405 <div class="red">This div will be green because it now has the "green" and "red" classes.
406 It would be red if the addClass function failed.</div>
407 <div>This div should be white</div>
408 <p>There are zero green divs</p>
409​
410<script>
411$( "div" ).addClass(function( index, currentClass ) {
412 var addedClass;
413​
414 if ( currentClass === "red" ) {
415 addedClass = "green";
416 $( "p" ).text( "There is one green div" );
417 }
418​
419 return addedClass;
420});
421</script>
422​
423</body>
424</html>
425```
426 */
427 addClass(
428 className_function:
429 | JQuery.TypeOrArray<string>
430 | ((this: TElement, index: number, currentClassName: string) => string),
431 ): this;
432 /**
433 * Insert content, specified by the parameter, after each element in the set of matched elements.
434 * @param contents One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or
435 * jQuery objects to insert after each element in the set of matched elements.
436 * @see \`{@link https://api.jquery.com/after/ }\`
437 * @since 1.0
438 * @example ​ ````Inserts some HTML after all paragraphs.
439```html
440<!doctype html>
441<html lang="en">
442<head>
443 <meta charset="utf-8">
444 <title>after demo</title>
445 <style>
446 p {
447 background: yellow;
448 }
449 </style>
450 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
451</head>
452<body>
453​
454<p>I would like to say: </p>
455​
456<script>
457$( "p" ).after( "<b>Hello</b>" );
458</script>
459​
460</body>
461</html>
462```
463 * @example ​ ````Inserts a DOM element after all paragraphs.
464```html
465<!doctype html>
466<html lang="en">
467<head>
468 <meta charset="utf-8">
469 <title>after demo</title>
470 <style>
471 p {
472 background: yellow;
473 }
474 </style>
475 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
476</head>
477<body>
478​
479<p>I would like to say: </p>
480​
481<script>
482$( "p" ).after( document.createTextNode( "Hello" ) );
483</script>
484​
485</body>
486</html>
487```
488 * @example ​ ````Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.
489```html
490<!doctype html>
491<html lang="en">
492<head>
493 <meta charset="utf-8">
494 <title>after demo</title>
495 <style>
496 p {
497 background: yellow;
498 }
499 </style>
500 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
501</head>
502<body>
503​
504<b>Hello</b>
505<p>I would like to say: </p>
506​
507<script>
508$( "p" ).after( $( "b" ) );
509</script>
510​
511</body>
512</html>
513```
514 */
515 after(...contents: Array<JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>>): this;
516 /**
517 * Insert content, specified by the parameter, after each element in the set of matched elements.
518 * @param function_functionｰhtml _&#x40;param_ `function_functionｰhtml`
519 * <br>
520 * * `function` — A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert
521 * after each element in the set of matched elements. Receives the index position of the element in the
522 * set as an argument. Within the function, `this` refers to the current element in the set. <br>
523 * * `functionｰhtml` — A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert
524 * after each element in the set of matched elements. Receives the index position of the element in the
525 * set and the old HTML value of the element as arguments. Within the function, `this` refers to the
526 * current element in the set.
527 * @see \`{@link https://api.jquery.com/after/ }\`
528 * @since 1.4
529 * @since 1.10
530 */
531 after(
532 function_functionｰhtml: (
533 this: TElement,
534 index: number,
535 html: string,
536 ) => JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>,
537 ): this;
538 /**
539 * Register a handler to be called when Ajax requests complete. This is an AjaxEvent.
540 * @param handler The function to be invoked.
541 * @see \`{@link https://api.jquery.com/ajaxComplete/ }\`
542 * @since 1.0
543 * @example ​ ````Show a message when an Ajax request completes.
544```javascript
545$( document ).ajaxComplete(function( event, request, settings ) {
546 $( "#msg" ).append( "<li>Request Complete.</li>" );
547});
548```
549 */
550 ajaxComplete(
551 handler: (
552 this: Document,
553 event: JQuery.TriggeredEvent<Document, undefined, Document, Document>,
554 jqXHR: JQuery.jqXHR,
555 ajaxOptions: JQuery.AjaxSettings,
556 // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
557 ) => void | false,
558 ): this;
559 /**
560 * Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.
561 * @param handler The function to be invoked.
562 * @see \`{@link https://api.jquery.com/ajaxError/ }\`
563 * @since 1.0
564 * @example ​ ````Show a message when an Ajax request fails.
565```javascript
566$( document ).ajaxError(function( event, request, settings ) {
567 $( "#msg" ).append( "<li>Error requesting page " + settings.url + "</li>" );
568});
569```
570 */
571 ajaxError(
572 handler: (
573 this: Document,
574 event: JQuery.TriggeredEvent<Document, undefined, Document, Document>,
575 jqXHR: JQuery.jqXHR,
576 ajaxSettings: JQuery.AjaxSettings,
577 thrownError: string,
578 // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
579 ) => void | false,
580 ): this;
581 /**
582 * Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.
583 * @param handler The function to be invoked.
584 * @see \`{@link https://api.jquery.com/ajaxSend/ }\`
585 * @since 1.0
586 * @example ​ ````Show a message before an Ajax request is sent.
587```javascript
588$( document ).ajaxSend(function( event, request, settings ) {
589 $( "#msg" ).append( "<li>Starting request at " + settings.url + "</li>" );
590});
591```
592 */
593 ajaxSend(
594 handler: (
595 this: Document,
596 event: JQuery.TriggeredEvent<Document, undefined, Document, Document>,
597 jqXHR: JQuery.jqXHR,
598 ajaxOptions: JQuery.AjaxSettings,
599 // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
600 ) => void | false,
601 ): this;
602 /**
603 * Register a handler to be called when the first Ajax request begins. This is an Ajax Event.
604 * @param handler The function to be invoked.
605 * @see \`{@link https://api.jquery.com/ajaxStart/ }\`
606 * @since 1.0
607 * @example ​ ````Show a loading message whenever an Ajax request starts (and none is already active).
608```javascript
609$( document ).ajaxStart(function() {
610 $( "#loading" ).show();
611});
612```
613 */
614 // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
615 ajaxStart(handler: (this: Document) => void | false): this;
616 /**
617 * Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.
618 * @param handler The function to be invoked.
619 * @see \`{@link https://api.jquery.com/ajaxStop/ }\`
620 * @since 1.0
621 * @example ​ ````Hide a loading message after all the Ajax requests have stopped.
622```javascript
623$( document ).ajaxStop(function() {
624 $( "#loading" ).hide();
625});
626```
627 */
628 // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
629 ajaxStop(handler: (this: Document) => void | false): this;
630 /**
631 * Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event.
632 * @param handler The function to be invoked.
633 * @see \`{@link https://api.jquery.com/ajaxSuccess/ }\`
634 * @since 1.0
635 * @example ​ ````Show a message when an Ajax request completes successfully.
636```javascript
637$( document ).ajaxSuccess(function( event, request, settings ) {
638 $( "#msg" ).append( "<li>Successful Request!</li>" );
639});
640```
641 */
642 ajaxSuccess(
643 handler: (
644 this: Document,
645 event: JQuery.TriggeredEvent<Document, undefined, Document, Document>,
646 jqXHR: JQuery.jqXHR,
647 ajaxOptions: JQuery.AjaxSettings,
648 data: JQuery.PlainObject,
649 // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
650 ) => void | false,
651 ): this;
652 /**
653 * Perform a custom animation of a set of CSS properties.
654 * @param properties An object of CSS properties and values that the animation will move toward.
655 * @param duration A string or number determining how long the animation will run.
656 * @param easing A string indicating which easing function to use for the transition.
657 * @param complete A function to call once the animation is complete, called once per matched element.
658 * @see \`{@link https://api.jquery.com/animate/ }\`
659 * @since 1.0
660 * @example ​ ````An example of using an &#39;easing&#39; function to provide a different style of animation. This will only work if you have a plugin that provides this easing function. Note, this code will do nothing unless the paragraph element is hidden.
661```javascript
662$( "p" ).animate({
663 opacity: "show"
664}, "slow", "easein" );
665```
666 * @example ​ ````Animate all paragraphs and execute a callback function when the animation is complete. The first argument is an object of CSS properties, the second specifies that the animation should take 1000 milliseconds to complete, the third states the easing type, and the fourth argument is an anonymous callback function.
667```javascript
668$( "p" ).animate({
669 height: 200,
670 width: 400,
671 opacity: 0.5
672}, 1000, "linear", function() {
673 alert( "all done" );
674});
675```
676 */
677 animate(
678 properties: JQuery.PlainObject,
679 duration: JQuery.Duration,
680 easing: string,
681 complete?: (this: TElement) => void,
682 ): this;
683 /**
684 * Perform a custom animation of a set of CSS properties.
685 * @param properties An object of CSS properties and values that the animation will move toward.
686 * @param duration_easing _&#x40;param_ `duration_easing`
687 * <br>
688 * * `duration` — A string or number determining how long the animation will run. <br>
689 * * `easing` — A string indicating which easing function to use for the transition.
690 * @param complete A function to call once the animation is complete, called once per matched element.
691 * @see \`{@link https://api.jquery.com/animate/ }\`
692 * @since 1.0
693 * @example ​ ````Click the button to animate the div with a number of different properties.
694```html
695<!doctype html>
696<html lang="en">
697<head>
698 <meta charset="utf-8">
699 <title>animate demo</title>
700 <style>
701 div {
702 background-color: #bca;
703 width: 100px;
704 border: 1px solid green;
705 }
706 </style>
707 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
708</head>
709<body>
710​
711<button id="go">&raquo; Run</button>
712<div id="block">Hello!</div>
713​
714<script>
715// Using multiple unit types within one animation.
716​
717$( "#go" ).click(function() {
718 $( "#block" ).animate({
719 width: "70%",
720 opacity: 0.4,
721 marginLeft: "0.6in",
722 fontSize: "3em",
723 borderWidth: "10px"
724 }, 1500 );
725});
726</script>
727​
728</body>
729</html>
730```
731 * @example ​ ````Animates a div&#39;s left property with a relative value. Click several times on the buttons to see the relative animations queued up.
732```html
733<!doctype html>
734<html lang="en">
735<head>
736 <meta charset="utf-8">
737 <title>animate demo</title>
738 <style>
739 div {
740 position: absolute;
741 background-color: #abc;
742 left: 50px;
743 width: 90px;
744 height: 90px;
745 margin: 5px;
746 }
747 </style>
748 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
749</head>
750<body>
751​
752<button id="left">&laquo;</button>
753<button id="right">&raquo;</button>
754<div class="block"></div>
755​
756<script>
757$( "#right" ).click(function() {
758 $( ".block" ).animate({ "left": "+=50px" }, "slow" );
759});
760​
761$( "#left" ).click(function(){
762 $( ".block" ).animate({ "left": "-=50px" }, "slow" );
763});
764</script>
765​
766</body>
767</html>
768```
769 * @example ​ ````Animate all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.
770```javascript
771$( "p" ).animate({
772 height: "toggle",
773 opacity: "toggle"
774}, "slow" );
775```
776 * @example ​ ````Animate all paragraphs to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.
777```javascript
778$( "p" ).animate({
779 left: 50,
780 opacity: 1
781}, 500 );
782```
783 */
784 animate(
785 properties: JQuery.PlainObject,
786 duration_easing: JQuery.Duration | string,
787 complete?: (this: TElement) => void,
788 ): this;
789 /**
790 * Perform a custom animation of a set of CSS properties.
791 * @param properties An object of CSS properties and values that the animation will move toward.
792 * @param options A map of additional options to pass to the method.
793 * @see \`{@link https://api.jquery.com/animate/ }\`
794 * @since 1.0
795 * @example ​ ````The first button shows how an unqueued animation works. It expands the div out to 90% width while the font-size is increasing. Once the font-size change is complete, the border animation will begin.
796
797The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.
798```html
799<!doctype html>
800<html lang="en">
801<head>
802 <meta charset="utf-8">
803 <title>animate demo</title>
804 <style>
805 div {
806 background-color: #bca;
807 width: 200px;
808 height: 1.1em;
809 text-align: center;
810 border: 2px solid green;
811 margin: 3px;
812 font-size: 14px;
813 }
814 button {
815 font-size: 14px;
816 }
817 </style>
818 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
819</head>
820<body>
821​
822<button id="go1">&raquo; Animate Block1</button>
823<button id="go2">&raquo; Animate Block2</button>
824<button id="go3">&raquo; Animate Both</button>
825<button id="go4">&raquo; Reset</button>
826<div id="block1">Block1</div>
827<div id="block2">Block2</div>
828​
829<script>
830$( "#go1" ).click(function() {
831 $( "#block1" )
832 .animate({
833 width: "90%"
834 }, {
835 queue: false,
836 duration: 3000
837 })
838 .animate({ fontSize: "24px" }, 1500 )
839 .animate({ borderRightWidth: "15px" }, 1500 );
840});
841​
842$( "#go2" ).click(function() {
843 $( "#block2" )
844 .animate({ width: "90%" }, 1000 )
845 .animate({ fontSize: "24px" }, 1000 )
846 .animate({ borderLeftWidth: "15px" }, 1000 );
847});
848​
849$( "#go3" ).click(function() {
850 $( "#go1" ).add( "#go2" ).click();
851});
852​
853$( "#go4" ).click(function() {
854 $( "div" ).css({
855 width: "",
856 fontSize: "",
857 borderWidth: ""
858 });
859});
860</script>
861​
862</body>
863</html>
864```
865 * @example ​ ````Animates the first div&#39;s left property and synchronizes the remaining divs, using the step function to set their left properties at each stage of the animation.
866```html
867<!doctype html>
868<html lang="en">
869<head>
870 <meta charset="utf-8">
871 <title>animate demo</title>
872 <style>
873 div {
874 position: relative;
875 background-color: #abc;
876 width: 40px;
877 height: 40px;
878 float: left;
879 margin: 5px;
880 }
881 </style>
882 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
883</head>
884<body>
885​
886<p><button id="go">Run »</button></p>
887<div class="block"></div>
888<div class="block"></div>
889<div class="block"></div>
890<div class="block"></div>
891<div class="block"></div>
892<div class="block"></div>
893​
894<script>
895$( "#go" ).click(function() {
896 $( ".block:first" ).animate({
897 left: 100
898 }, {
899 duration: 1000,
900 step: function( now, fx ){
901 $( ".block:gt(0)" ).css( "left", now );
902 }
903 });
904});
905</script>
906​
907</body>
908</html>
909```
910 * @example ​ ````Animate the left and opacity style properties of all paragraphs; run the animation outside the queue, so that it will automatically start without waiting for its turn.
911```javascript
912$( "p" ).animate({
913 left: "50px",
914 opacity: 1
915}, {
916 duration: 500,
917 queue: false
918});
919```
920 * @example ​ ````Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.
921```javascript
922$( "p" ).animate({
923 height: "toggle",
924 opacity: "toggle"
925}, {
926 duration: "slow"
927});
928```
929 * @example ​ ````Use an easing function to provide a different style of animation. This will only work if you have a plugin that provides this easing function.
930```javascript
931$( "p" ).animate({
932 opacity: "show"
933}, {
934 duration: "slow",
935 easing: "easein"
936});
937```
938 */
939 animate(properties: JQuery.PlainObject, options: JQuery.EffectsOptions<TElement>): this;
940 /**
941 * Perform a custom animation of a set of CSS properties.
942 * @param properties An object of CSS properties and values that the animation will move toward.
943 * @param complete A function to call once the animation is complete, called once per matched element.
944 * @see \`{@link https://api.jquery.com/animate/ }\`
945 * @since 1.0
946 */
947 animate(properties: JQuery.PlainObject, complete?: (this: TElement) => void): this;
948 /**
949 * Insert content, specified by the parameter, to the end of each element in the set of matched elements.
950 * @param contents One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or
951 * jQuery objects to insert at the end of each element in the set of matched elements.
952 * @see \`{@link https://api.jquery.com/append/ }\`
953 * @since 1.0
954 * @example ​ ````Appends some HTML to all paragraphs.
955```html
956<!doctype html>
957<html lang="en">
958<head>
959 <meta charset="utf-8">
960 <title>append demo</title>
961 <style>
962 p {
963 background: yellow;
964 }
965 </style>
966 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
967</head>
968<body>
969​
970<p>I would like to say: </p>
971​
972<script>
973$( "p" ).append( "<strong>Hello</strong>" );
974</script>
975​
976</body>
977</html>
978```
979 * @example ​ ````Appends an Element to all paragraphs.
980```html
981<!doctype html>
982<html lang="en">
983<head>
984 <meta charset="utf-8">
985 <title>append demo</title>
986 <style>
987 p {
988 background: yellow;
989 }
990 </style>
991 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
992</head>
993<body>
994​
995<p>I would like to say: </p>
996​
997<script>
998$( "p" ).append( document.createTextNode( "Hello" ) );
999</script>
1000​
1001</body>
1002</html>
1003```
1004 * @example ​ ````Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.
1005```html
1006<!doctype html>
1007<html lang="en">
1008<head>
1009 <meta charset="utf-8">
1010 <title>append demo</title>
1011 <style>
1012 p {
1013 background: yellow;
1014 }
1015 </style>
1016 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1017</head>
1018<body>
1019​
1020<strong>Hello world!!!</strong>
1021<p>I would like to say: </p>
1022​
1023<script>
1024$( "p" ).append( $( "strong" ) );
1025</script>
1026​
1027</body>
1028</html>
1029```
1030 */
1031 append(...contents: Array<JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>>): this;
1032 /**
1033 * Insert content, specified by the parameter, to the end of each element in the set of matched elements.
1034 * @param funсtion A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert at
1035 * the end of each element in the set of matched elements. Receives the index position of the element
1036 * in the set and the old HTML value of the element as arguments. Within the function, `this` refers to
1037 * the current element in the set.
1038 * @see \`{@link https://api.jquery.com/append/ }\`
1039 * @since 1.4
1040 */
1041 append(
1042 funсtion: (
1043 this: TElement,
1044 index: number,
1045 html: string,
1046 ) => JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>,
1047 ): this;
1048 /**
1049 * Insert every element in the set of matched elements to the end of the target.
1050 * @param target A selector, element, HTML string, array of elements, or jQuery object; the matched set of elements
1051 * will be inserted at the end of the element(s) specified by this parameter.
1052 * @see \`{@link https://api.jquery.com/appendTo/ }\`
1053 * @since 1.0
1054 * @example ​ ````Append all spans to the element with the ID &quot;foo&quot; (Check append() documentation for more examples)
1055```html
1056<!doctype html>
1057<html lang="en">
1058<head>
1059 <meta charset="utf-8">
1060 <title>appendTo demo</title>
1061 <style>
1062 #foo {
1063 background: yellow;
1064 }
1065 </style>
1066 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1067</head>
1068<body>
1069​
1070<span>I have nothing more to say... </span>
1071​
1072<div id="foo">FOO! </div>
1073​
1074<script>
1075$( "span" ).appendTo( "#foo" );
1076</script>
1077​
1078</body>
1079</html>
1080```
1081 */
1082 appendTo(
1083 target: JQuery.Selector | JQuery.htmlString | JQuery.TypeOrArray<Element | DocumentFragment> | JQuery,
1084 ): this;
1085 /**
1086 * Set one or more attributes for the set of matched elements.
1087 * @param attributeName The name of the attribute to set.
1088 * @param value_function _&#x40;param_ `value_function`
1089 * <br>
1090 * * `value` — A value to set for the attribute. If `null`, the specified attribute will be removed (as in \`{@link removeAttr .removeAttr()}`). <br>
1091 * * `function` — A function returning the value to set. `this` is the current element. Receives the index position of
1092 * the element in the set and the old attribute value as arguments.
1093 * @see \`{@link https://api.jquery.com/attr/ }\`
1094 * @since 1.0
1095 * @since 1.1
1096 * @example ​ ````Set the id for divs based on the position in the page.
1097```html
1098<!doctype html>
1099<html lang="en">
1100<head>
1101 <meta charset="utf-8">
1102 <title>attr demo</title>
1103 <style>
1104 div {
1105 color: blue;
1106 }
1107 span {
1108 color: red;
1109 }
1110 b {
1111 font-weight: bolder;
1112 }
1113 </style>
1114 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1115</head>
1116<body>
1117​
1118<div>Zero-th <span></span></div>
1119<div>First <span></span></div>
1120<div>Second <span></span></div>
1121​
1122<script>
1123$( "div" )
1124 .attr( "id", function( arr ) {
1125 return "div-id" + arr;
1126 })
1127 .each(function() {
1128 $( "span", this ).html( "(id = '<b>" + this.id + "</b>')" );
1129});
1130</script>
1131​
1132</body>
1133</html>
1134```
1135 * @example ​ ````Set the src attribute from title attribute on the image.
1136```html
1137<!doctype html>
1138<html lang="en">
1139<head>
1140 <meta charset="utf-8">
1141 <title>attr demo</title>
1142 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1143</head>
1144<body>
1145​
1146<img title="hat.gif">
1147​
1148<script>
1149$( "img" ).attr( "src", function() {
1150 return "/resources/" + this.title;
1151});
1152</script>
1153​
1154</body>
1155</html>
1156```
1157 */
1158 attr(
1159 attributeName: string,
1160 value_function:
1161 | string
1162 | number
1163 | null
1164 // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
1165 | ((this: TElement, index: number, attr: string) => string | number | void | undefined),
1166 ): this;
1167 /**
1168 * Set one or more attributes for the set of matched elements.
1169 * @param attributes An object of attribute-value pairs to set.
1170 * @see \`{@link https://api.jquery.com/attr/ }\`
1171 * @since 1.0
1172 * @example ​ ````Set some attributes for all &lt;img&gt;s in the page.
1173```html
1174<!doctype html>
1175<html lang="en">
1176<head>
1177 <meta charset="utf-8">
1178 <title>attr demo</title>
1179 <style>
1180 img {
1181 padding: 10px;
1182 }
1183 div {
1184 color: red;
1185 font-size: 24px;
1186 }
1187 </style>
1188 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1189</head>
1190<body>
1191​
1192<img>
1193<img>
1194<img>
1195​
1196<div><b>Attribute of Ajax</b></div>
1197​
1198<script>
1199$( "img" ).attr({
1200 src: "/resources/hat.gif",
1201 title: "jQuery",
1202 alt: "jQuery Logo"
1203});
1204$( "div" ).text( $( "img" ).attr( "alt" ) );
1205</script>
1206​
1207</body>
1208</html>
1209```
1210 */
1211 attr(attributes: JQuery.PlainObject): this;
1212 /**
1213 * Get the value of an attribute for the first element in the set of matched elements.
1214 * @param attributeName The name of the attribute to get.
1215 * @see \`{@link https://api.jquery.com/attr/ }\`
1216 * @since 1.0
1217 * @example ​ ````Display the checked attribute and property of a checkbox as it changes.
1218```html
1219<!doctype html>
1220<html lang="en">
1221<head>
1222 <meta charset="utf-8">
1223 <title>attr demo</title>
1224 <style>
1225 p {
1226 margin: 20px 0 0;
1227 }
1228 b {
1229 color: blue;
1230 }
1231 </style>
1232 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1233</head>
1234<body>
1235​
1236<input id="check1" type="checkbox" checked="checked">
1237<label for="check1">Check me</label>
1238<p></p>
1239​
1240<script>
1241$( "input" )
1242 .change(function() {
1243 var $input = $( this );
1244 $( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
1245 ".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
1246 ".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
1247 })
1248 .change();
1249</script>
1250​
1251</body>
1252</html>
1253```
1254 * @example ​ ````Find the title attribute of the first &lt;em&gt; in the page.
1255```html
1256<!doctype html>
1257<html lang="en">
1258<head>
1259 <meta charset="utf-8">
1260 <title>attr demo</title>
1261 <style>
1262 em {
1263 color: blue;
1264 font-weight: bold;
1265 }
1266 div {
1267 color: red;
1268 }
1269 </style>
1270 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1271</head>
1272<body>
1273​
1274<p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>
1275​
1276The title of the emphasis is:<div></div>
1277​
1278<script>
1279var title = $( "em" ).attr( "title" );
1280$( "div" ).text( title );
1281</script>
1282​
1283</body>
1284</html>
1285```
1286 */
1287 attr(attributeName: string): string | undefined;
1288 /**
1289 * Insert content, specified by the parameter, before each element in the set of matched elements.
1290 * @param contents One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or
1291 * jQuery objects to insert before each element in the set of matched elements.
1292 * @see \`{@link https://api.jquery.com/before/ }\`
1293 * @since 1.0
1294 * @example ​ ````Inserts some HTML before all paragraphs.
1295```html
1296<!doctype html>
1297<html lang="en">
1298<head>
1299 <meta charset="utf-8">
1300 <title>before demo</title>
1301 <style>
1302 p {
1303 background: yellow;
1304 }
1305 </style>
1306 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1307</head>
1308<body>
1309​
1310<p> is what I said...</p>
1311​
1312<script>
1313$( "p" ).before( "<b>Hello</b>" );
1314</script>
1315​
1316</body>
1317</html>
1318```
1319 * @example ​ ````Inserts a DOM element before all paragraphs.
1320```html
1321<!doctype html>
1322<html lang="en">
1323<head>
1324 <meta charset="utf-8">
1325 <title>before demo</title>
1326 <style>
1327 p {
1328 background: yellow;
1329 }
1330 </style>
1331 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1332</head>
1333<body>
1334​
1335<p> is what I said...</p>
1336​
1337<script>
1338$( "p" ).before( document.createTextNode( "Hello" ) );
1339</script>
1340​
1341</body>
1342</html>
1343```
1344 * @example ​ ````Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.
1345```html
1346<!doctype html>
1347<html lang="en">
1348<head>
1349 <meta charset="utf-8">
1350 <title>before demo</title>
1351 <style>
1352 p {
1353 background: yellow;
1354 }
1355 </style>
1356 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1357</head>
1358<body>
1359​
1360<p> is what I said...</p><b>Hello</b>
1361​
1362<script>
1363$( "p" ).before( $( "b" ) );
1364</script>
1365​
1366</body>
1367</html>
1368```
1369 */
1370 before(...contents: Array<JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>>): this;
1371 /**
1372 * Insert content, specified by the parameter, before each element in the set of matched elements.
1373 * @param function_functionｰhtml _&#x40;param_ `function_functionｰhtml`
1374 * <br>
1375 * * `function` — A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert
1376 * before each element in the set of matched elements. Receives the index position of the element in
1377 * the set as an argument. Within the function, `this` refers to the current element in the set. <br>
1378 * * `functionｰhtml` — A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert
1379 * before each element in the set of matched elements. Receives the index position of the element in
1380 * the set and the old HTML value of the element as arguments. Within the function, `this` refers to the
1381 * current element in the set.
1382 * @see \`{@link https://api.jquery.com/before/ }\`
1383 * @since 1.4
1384 * @since 1.10
1385 */
1386 before(
1387 function_functionｰhtml: (
1388 this: TElement,
1389 index: number,
1390 html: string,
1391 ) => JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>,
1392 ): this;
1393 // [bind() overloads] https://github.com/jquery/api.jquery.com/issues/1048
1394 /**
1395 * Attach a handler to an event for the elements.
1396 * @param eventType A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
1397 * @param eventData An object containing data that will be passed to the event handler.
1398 * @param handler A function to execute each time the event is triggered.
1399 * @see \`{@link https://api.jquery.com/bind/ }\`
1400 * @since 1.0
1401 * @since 1.4.3
1402 * @deprecated ​ Deprecated since 3.0. Use \`{@link on }\`.
1403 *
1404 * **Cause**: These event binding methods have been deprecated in favor of the `.on()` and `.off()` methods which can handle both delegated and direct event binding. Although the older methods are still present in jQuery 3.0, they may be removed as early as the next major-version update.
1405 *
1406 * **Solution**: Change the method call to use `.on()` or `.off()`, the documentation for the old methods include specific instructions. In general, the `.bind()` and `.unbind()` methods can be renamed directly to `.on()` and `.off()` respectively since the argument orders are identical.
1407 */
1408 bind<TType extends string, TData>(
1409 eventType: TType,
1410 eventData: TData,
1411 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, TType>,
1412 ): this;
1413 /**
1414 * Attach a handler to an event for the elements.
1415 * @param eventType A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
1416 * @param handler_preventBubble _&#x40;param_ `handler_preventBubble`
1417 * <br>
1418 * * `handler` — A function to execute each time the event is triggered. <br>
1419 * * `preventBubble` — Setting the third argument to false will attach a function that prevents the default action from
1420 * occurring and stops the event from bubbling. The default is `true`.
1421 * @see \`{@link https://api.jquery.com/bind/ }\`
1422 * @since 1.0
1423 * @since 1.4.3
1424 * @deprecated ​ Deprecated since 3.0. Use \`{@link on }\`.
1425 *
1426 * **Cause**: These event binding methods have been deprecated in favor of the `.on()` and `.off()` methods which can handle both delegated and direct event binding. Although the older methods are still present in jQuery 3.0, they may be removed as early as the next major-version update.
1427 *
1428 * **Solution**: Change the method call to use `.on()` or `.off()`, the documentation for the old methods include specific instructions. In general, the `.bind()` and `.unbind()` methods can be renamed directly to `.on()` and `.off()` respectively since the argument orders are identical.
1429 * @example ​ ````Handle click and double-click for the paragraph. Note: the coordinates are window relative, so in this case relative to the demo iframe.
1430```html
1431<!doctype html>
1432<html lang="en">
1433<head>
1434 <meta charset="utf-8">
1435 <title>bind demo</title>
1436 <style>
1437 p {
1438 background: yellow;
1439 font-weight: bold;
1440 cursor: pointer;
1441 padding: 5px;
1442 }
1443 p.over {
1444 background: #ccc;
1445 }
1446 span {
1447 color: red;
1448 }
1449 </style>
1450 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1451</head>
1452<body>
1453​
1454<p>Click or double click here.</p>
1455<span></span>
1456​
1457<script>
1458$( "p" ).bind( "click", function( event ) {
1459 var str = "( " + event.pageX + ", " + event.pageY + " )";
1460 $( "span" ).text( "Click happened! " + str );
1461});
1462$( "p" ).bind( "dblclick", function() {
1463 $( "span" ).text( "Double-click happened in " + this.nodeName );
1464});
1465$( "p" ).bind( "mouseenter mouseleave", function( event ) {
1466 $( this ).toggleClass( "over" );
1467});
1468</script>
1469​
1470</body>
1471</html>
1472```
1473 * @example ​ ````To display each paragraph&#39;s text in an alert box whenever it is clicked:
1474```javascript
1475$( "p" ).bind( "click", function() {
1476 alert( $( this ).text() );
1477});
1478```
1479 * @example ​ ````Cancel a default action and prevent it from bubbling up by returning false:
1480```javascript
1481$( "form" ).bind( "submit", function() {
1482 return false;
1483})
1484```
1485 * @example ​ ````Cancel only the default action by using the .preventDefault() method.
1486```javascript
1487$( "form" ).bind( "submit", function( event ) {
1488 event.preventDefault();
1489});
1490```
1491 * @example ​ ````Stop an event from bubbling without preventing the default action by using the .stopPropagation() method.
1492```javascript
1493$( "form" ).bind( "submit", function( event ) {
1494 event.stopPropagation();
1495});
1496```
1497 * @example ​ ````Bind custom events.
1498```html
1499<!doctype html>
1500<html lang="en">
1501<head>
1502 <meta charset="utf-8">
1503 <title>bind demo</title>
1504 <style>
1505 p {
1506 color: red;
1507 }
1508 span {
1509 color: blue;
1510 }
1511 </style>
1512 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1513</head>
1514<body>
1515​
1516<p>Has an attached custom event.</p>
1517<button>Trigger custom event</button>
1518<span style="display: none;"></span>
1519​
1520<script>
1521$( "p" ).bind( "myCustomEvent", function( e, myName, myValue ) {
1522 $( this ).text( myName + ", hi there!" );
1523 $( "span" )
1524 .stop()
1525 .css( "opacity", 1 )
1526 .text( "myName = " + myName )
1527 .fadeIn( 30 )
1528 .fadeOut( 1000 );
1529 });
1530$( "button" ).click(function() {
1531 $( "p" ).trigger( "myCustomEvent", [ "John" ] );
1532});
1533</script>
1534​
1535</body>
1536</html>
1537```
1538 */
1539 bind<TType extends string>(
1540 eventType: TType,
1541 handler_preventBubble:
1542 | JQuery.TypeEventHandler<TElement, undefined, TElement, TElement, TType>
1543 | false
1544 | null
1545 | undefined,
1546 ): this;
1547 /**
1548 * Attach a handler to an event for the elements.
1549 * @param events An object containing one or more DOM event types and functions to execute for them.
1550 * @see \`{@link https://api.jquery.com/bind/ }\`
1551 * @since 1.4
1552 * @deprecated ​ Deprecated since 3.0. Use \`{@link on }\`.
1553 *
1554 * **Cause**: These event binding methods have been deprecated in favor of the `.on()` and `.off()` methods which can handle both delegated and direct event binding. Although the older methods are still present in jQuery 3.0, they may be removed as early as the next major-version update.
1555 *
1556 * **Solution**: Change the method call to use `.on()` or `.off()`, the documentation for the old methods include specific instructions. In general, the `.bind()` and `.unbind()` methods can be renamed directly to `.on()` and `.off()` respectively since the argument orders are identical.
1557 * @example ​ ````Bind multiple events simultaneously.
1558```javascript
1559$( "div.test" ).bind({
1560 click: function() {
1561 $( this ).addClass( "active" );
1562 },
1563 mouseenter: function() {
1564 $( this ).addClass( "inside" );
1565 },
1566 mouseleave: function() {
1567 $( this ).removeClass( "inside" );
1568 }
1569});
1570```
1571 */
1572 bind(events: JQuery.TypeEventHandlers<TElement, undefined, TElement, TElement>): this;
1573 /**
1574 * Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.
1575 * @param eventData An object containing data that will be passed to the event handler.
1576 * @param handler A function to execute each time the event is triggered.
1577 * @see \`{@link https://api.jquery.com/blur-shorthand/ }\`
1578 * @since 1.4.3
1579 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
1580 *
1581 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
1582 *
1583 * **Solution**: Instead of `.blur(fn)` use `.on("blur", fn)`. Instead of `.blur()` use `.trigger("blur")`.
1584 */
1585 blur<TData>(eventData: TData, handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "blur">): this;
1586 /**
1587 * Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.
1588 * @param handler A function to execute each time the event is triggered.
1589 * @see \`{@link https://api.jquery.com/blur-shorthand/ }\`
1590 * @since 1.0
1591 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
1592 *
1593 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
1594 *
1595 * **Solution**: Instead of `.blur(fn)` use `.on("blur", fn)`. Instead of `.blur()` use `.trigger("blur")`.
1596 * @example ​ ````To trigger the blur event on all paragraphs:
1597```javascript
1598$( "p" ).blur();
1599```
1600 */
1601 blur(
1602 handler?:
1603 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "blur">
1604 | false,
1605 ): this;
1606 /**
1607 * Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
1608 * @param eventData An object containing data that will be passed to the event handler.
1609 * @param handler A function to execute each time the event is triggered.
1610 * @see \`{@link https://api.jquery.com/change-shorthand/ }\`
1611 * @since 1.4.3
1612 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
1613 *
1614 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
1615 *
1616 * **Solution**: Instead of `.change(fn)` use `.on("change", fn)`. Instead of `.change()` use `.trigger("change")`.
1617 */
1618 change<TData>(
1619 eventData: TData,
1620 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "change">,
1621 ): this;
1622 /**
1623 * Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
1624 * @param handler A function to execute each time the event is triggered.
1625 * @see \`{@link https://api.jquery.com/change-shorthand/ }\`
1626 * @since 1.0
1627 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
1628 *
1629 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
1630 *
1631 * **Solution**: Instead of `.change(fn)` use `.on("change", fn)`. Instead of `.change()` use `.trigger("change")`.
1632 * @example ​ ````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.
1633```html
1634<!doctype html>
1635<html lang="en">
1636<head>
1637 <meta charset="utf-8">
1638 <title>change demo</title>
1639 <style>
1640 div {
1641 color: red;
1642 }
1643 </style>
1644 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1645</head>
1646<body>
1647​
1648<select name="sweets" multiple="multiple">
1649 <option>Chocolate</option>
1650 <option selected="selected">Candy</option>
1651 <option>Taffy</option>
1652 <option selected="selected">Caramel</option>
1653 <option>Fudge</option>
1654 <option>Cookie</option>
1655</select>
1656<div></div>
1657​
1658<script>
1659$( "select" )
1660 .change(function () {
1661 var str = "";
1662 $( "select option:selected" ).each(function() {
1663 str += $( this ).text() + " ";
1664 });
1665 $( "div" ).text( str );
1666 })
1667 .change();
1668</script>
1669​
1670</body>
1671</html>
1672```
1673 * @example ​ ````To add a validity test to all text input elements:
1674```javascript
1675$( "input[type='text']" ).change(function() {
1676 // Check input( $( this ).val() ) for validity here
1677});
1678```
1679 */
1680 change(
1681 handler?:
1682 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "change">
1683 | false,
1684 ): this;
1685 /**
1686 * Get the children of each element in the set of matched elements, optionally filtered by a selector.
1687 * @param selector A string containing a selector expression to match elements against.
1688 * @see \`{@link https://api.jquery.com/children/ }\`
1689 * @since 1.0
1690 * @example ​ ````Find all children of the clicked element.
1691```html
1692<!doctype html>
1693<html lang="en">
1694<head>
1695 <meta charset="utf-8">
1696 <title>children demo</title>
1697 <style>
1698 body {
1699 font-size: 16px;
1700 font-weight: bolder;
1701 }
1702 div {
1703 width: 130px;
1704 height: 82px;
1705 margin: 10px;
1706 float: left;
1707 border: 1px solid blue;
1708 padding: 4px;
1709 }
1710 #container {
1711 width: auto;
1712 height: 105px;
1713 margin: 0;
1714 float: none;
1715 border: none;
1716 }
1717 .hilite {
1718 border-color: red;
1719 }
1720 #results {
1721 display: block;
1722 color: red;
1723 }
1724 p, span, em, a, b, button {
1725 border: 1px solid transparent;
1726 }
1727 p {
1728 margin: 10px;
1729 }
1730 span {
1731 color: blue;
1732 }
1733 input {
1734 width: 100px;
1735 }
1736 </style>
1737 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1738</head>
1739<body>
1740​
1741<div id="container">
1742 <div>
1743 <p>This <span>is the <em>way</em> we</span>
1744 write <em>the</em> demo,</p>
1745 </div>
1746​
1747 <div>
1748 <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write
1749 the</button> demo,
1750 </div>
1751​
1752 <div>
1753 This <span>the way we <em>write</em> the <em>demo</em> so</span>
1754 <input type="text" value="early"> in
1755 </div>
1756​
1757 <p>
1758 <span>t</span>he <span>m</span>orning.
1759 <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
1760 </p>
1761</div>
1762​
1763<script>
1764$( "#container" ).click(function ( event ) {
1765 $( "*" ).removeClass( "hilite" );
1766 var kids = $( event.target ).children();
1767 var len = kids.addClass( "hilite" ).length;
1768​
1769 $( "#results span:first" ).text( len );
1770 $( "#results span:last" ).text( event.target.tagName );
1771​
1772 event.preventDefault();
1773});
1774</script>
1775​
1776</body>
1777</html>
1778```
1779 * @example ​ ````Find all children of each div.
1780```html
1781<!doctype html>
1782<html lang="en">
1783<head>
1784 <meta charset="utf-8">
1785 <title>children demo</title>
1786 <style>
1787 body {
1788 font-size: 16px;
1789 font-weight: bolder;
1790 }
1791 span {
1792 color: blue;
1793 }
1794 p {
1795 margin: 5px 0;
1796 }
1797 </style>
1798 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1799</head>
1800<body>
1801​
1802<p>Hello (this is a paragraph)</p>
1803​
1804<div><span>Hello Again (this span is a child of the a div)</span></div>
1805<p>And <span>Again</span> (in another paragraph)</p>
1806​
1807<div>And One Last <span>Time</span> (most text directly in a div)</div>
1808​
1809<script>
1810$( "div" ).children().css( "border-bottom", "3px double red" );
1811</script>
1812​
1813</body>
1814</html>
1815```
1816 * @example ​ ````Find all children with a class &quot;selected&quot; of each div.
1817```html
1818<!doctype html>
1819<html lang="en">
1820<head>
1821 <meta charset="utf-8">
1822 <title>children demo</title>
1823 <style>
1824 body {
1825 font-size: 16px;
1826 font-weight: bolder;
1827 }
1828 p {
1829 margin: 5px 0;
1830 }
1831 </style>
1832 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1833</head>
1834<body>
1835​
1836<div>
1837 <span>Hello</span>
1838 <p class="selected">Hello Again</p>
1839 <div class="selected">And Again</div>
1840 <p>And One Last Time</p>
1841</div>
1842​
1843<script>
1844$( "div" ).children( ".selected" ).css( "color", "blue" );
1845</script>
1846​
1847</body>
1848</html>
1849```
1850 */
1851 children<K extends keyof HTMLElementTagNameMap>(selector: K): JQuery<HTMLElementTagNameMap[K]>;
1852 children<K extends keyof SVGElementTagNameMap>(selector: K): JQuery<SVGElementTagNameMap[K]>;
1853 // eslint-disable-next-line @definitelytyped/no-unnecessary-generics
1854 children<E extends Element = HTMLElement>(selector?: JQuery.Selector): JQuery<E>;
1855 /**
1856 * Remove from the queue all items that have not yet been run.
1857 * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
1858 * @see \`{@link https://api.jquery.com/clearQueue/ }\`
1859 * @since 1.4
1860 * @example ​ ````Empty the queue.
1861```html
1862<!doctype html>
1863<html lang="en">
1864<head>
1865 <meta charset="utf-8">
1866 <title>clearQueue demo</title>
1867 <style>
1868 div {
1869 margin: 3px;
1870 width: 40px;
1871 height: 40px;
1872 position: absolute;
1873 left: 0px;
1874 top: 30px;
1875 background: green;
1876 display: none;
1877 }
1878 div.newcolor {
1879 background: blue;
1880 }
1881 </style>
1882 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1883</head>
1884<body>
1885​
1886<button id="start">Start</button>
1887<button id="stop">Stop</button>
1888<div></div>
1889​
1890<script>
1891$( "#start" ).click(function() {
1892 var myDiv = $( "div" );
1893 myDiv.show( "slow" );
1894 myDiv.animate({
1895 left:"+=200"
1896 }, 5000 );
1897​
1898 myDiv.queue(function() {
1899 var that = $( this );
1900 that.addClass( "newcolor" );
1901 that.dequeue();
1902 });
1903​
1904 myDiv.animate({
1905 left:"-=200"
1906 }, 1500 );
1907 myDiv.queue(function() {
1908 var that = $( this );
1909 that.removeClass( "newcolor" );
1910 that.dequeue();
1911 });
1912 myDiv.slideUp();
1913});
1914​
1915$( "#stop" ).click(function() {
1916 var myDiv = $( "div" );
1917 myDiv.clearQueue();
1918 myDiv.stop();
1919});
1920</script>
1921​
1922</body>
1923</html>
1924```
1925 */
1926 clearQueue(queueName?: string): this;
1927 /**
1928 * Bind an event handler to the "click" JavaScript event, or trigger that event on an element.
1929 * @param eventData An object containing data that will be passed to the event handler.
1930 * @param handler A function to execute each time the event is triggered.
1931 * @see \`{@link https://api.jquery.com/click/ }\`
1932 * @since 1.4.3
1933 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
1934 *
1935 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
1936 *
1937 * **Solution**: Instead of `.click(fn)` use `.on("click", fn)`. Instead of `.click()` use `.trigger("click")`.
1938 */
1939 click<TData>(
1940 eventData: TData,
1941 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "click">,
1942 ): this;
1943 /**
1944 * Bind an event handler to the "click" JavaScript event, or trigger that event on an element.
1945 * @param handler A function to execute each time the event is triggered.
1946 * @see \`{@link https://api.jquery.com/click/ }\`
1947 * @since 1.0
1948 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
1949 *
1950 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
1951 *
1952 * **Solution**: Instead of `.click(fn)` use `.on("click", fn)`. Instead of `.click()` use `.trigger("click")`.
1953 * @example ​ ````Hide paragraphs on a page when they are clicked:
1954```html
1955<!doctype html>
1956<html lang="en">
1957<head>
1958 <meta charset="utf-8">
1959 <title>click demo</title>
1960 <style>
1961 p {
1962 color: red;
1963 margin: 5px;
1964 cursor: pointer;
1965 }
1966 p:hover {
1967 background: yellow;
1968 }
1969 </style>
1970 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
1971</head>
1972<body>
1973​
1974<p>First Paragraph</p>
1975<p>Second Paragraph</p>
1976<p>Yet one more Paragraph</p>
1977​
1978<script>
1979$( "p" ).click(function() {
1980 $( this ).slideUp();
1981});
1982</script>
1983​
1984</body>
1985</html>
1986```
1987 * @example ​ ````Trigger the click event on all of the paragraphs on the page:
1988```javascript
1989$( "p" ).click();
1990```
1991 */
1992 click(
1993 handler?:
1994 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "click">
1995 | false,
1996 ): this;
1997 /**
1998 * Create a deep copy of the set of matched elements.
1999 * @param withDataAndEvents A Boolean indicating whether event handlers and data should be copied along with the elements. The
2000 * default value is false. *In jQuery 1.5.0 the default value was incorrectly true; it was changed back
2001 * to false in 1.5.1 and up.
2002 * @param deepWithDataAndEvents A Boolean indicating whether event handlers and data for all children of the cloned element should
2003 * be copied. By default its value matches the first argument's value (which defaults to false).
2004 * @see \`{@link https://api.jquery.com/clone/ }\`
2005 * @since 1.0
2006 * @since 1.5
2007 * @example ​ ````Clones all b elements (and selects the clones) and prepends them to all paragraphs.
2008```html
2009<!doctype html>
2010<html lang="en">
2011<head>
2012 <meta charset="utf-8">
2013 <title>clone demo</title>
2014 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2015</head>
2016<body>
2017​
2018<b>Hello</b><p>, how are you?</p>
2019​
2020<script>
2021$( "b" ).clone().prependTo( "p" );
2022</script>
2023​
2024</body>
2025</html>
2026```
2027 */
2028 clone(withDataAndEvents?: boolean, deepWithDataAndEvents?: boolean): this;
2029 /**
2030 * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
2031 * @param selector A string containing a selector expression to match elements against.
2032 * @param context A DOM element within which a matching element may be found.
2033 * @see \`{@link https://api.jquery.com/closest/ }\`
2034 * @since 1.4
2035 */
2036 closest<K extends keyof HTMLElementTagNameMap>(selector: K, context: Element): JQuery<HTMLElementTagNameMap[K]>;
2037 closest<K extends keyof SVGElementTagNameMap>(selector: K, context: Element): JQuery<SVGElementTagNameMap[K]>;
2038 // eslint-disable-next-line @definitelytyped/no-unnecessary-generics
2039 closest<E extends Element = HTMLElement>(selector: JQuery.Selector, context: Element): JQuery<E>;
2040 /**
2041 * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
2042 * @param selector_selection_element _&#x40;param_ `selector_selection_element`
2043 * <br>
2044 * * `selector` — A string containing a selector expression to match elements against. <br>
2045 * * `selection` — A jQuery object to match elements against. <br>
2046 * * `element` — An element to match elements against.
2047 * @see \`{@link https://api.jquery.com/closest/ }\`
2048 * @since 1.3
2049 * @since 1.6
2050 * @example ​ ````Show how event delegation can be done with closest. The closest list element toggles a yellow background when it or its descendent is clicked.
2051```html
2052<!doctype html>
2053<html lang="en">
2054<head>
2055 <meta charset="utf-8">
2056 <title>closest demo</title>
2057 <style>
2058 li {
2059 margin: 3px;
2060 padding: 3px;
2061 background: #EEEEEE;
2062 }
2063 li.highlight {
2064 background: yellow;
2065 }
2066 </style>
2067 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2068</head>
2069<body>
2070​
2071<ul>
2072 <li><b>Click me!</b></li>
2073 <li>You can also <b>Click me!</b></li>
2074</ul>
2075​
2076<script>
2077$( document ).on( "click", function( event ) {
2078 $( event.target ).closest( "li" ).toggleClass( "highlight" );
2079});
2080</script>
2081​
2082</body>
2083</html>
2084```
2085 * @example ​ ````Pass a jQuery object to closest. The closest list element toggles a yellow background when it or its descendent is clicked.
2086```html
2087<!doctype html>
2088<html lang="en">
2089<head>
2090 <meta charset="utf-8">
2091 <title>closest demo</title>
2092 <style>
2093 li {
2094 margin: 3px;
2095 padding: 3px;
2096 background: #EEEEEE;
2097 }
2098 li.highlight {
2099 background: yellow;
2100 }
2101 </style>
2102 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2103</head>
2104<body>
2105​
2106<ul>
2107 <li><b>Click me!</b></li>
2108 <li>You can also <b>Click me!</b></li>
2109</ul>
2110​
2111<script>
2112var listElements = $( "li" ).css( "color", "blue" );
2113$( document ).on( "click", function( event ) {
2114 $( event.target ).closest( listElements ).toggleClass( "highlight" );
2115});
2116</script>
2117​
2118</body>
2119</html>
2120```
2121 */
2122 closest<K extends keyof HTMLElementTagNameMap>(
2123 selector_selection_element: K | JQuery<K>,
2124 ): JQuery<HTMLElementTagNameMap[K]>;
2125 closest<K extends keyof SVGElementTagNameMap>(
2126 selector_selection_element: K | JQuery<K>,
2127 ): JQuery<SVGElementTagNameMap[K]>;
2128 // eslint-disable-next-line @definitelytyped/no-unnecessary-generics
2129 closest<E extends Element = HTMLElement>(selector_selection_element: JQuery.Selector): JQuery<E>;
2130 closest<E extends Element = HTMLElement>(selector_selection_element: E | JQuery<E>): JQuery<E>;
2131 /**
2132 * Get the children of each element in the set of matched elements, including text and comment nodes.
2133 * @see \`{@link https://api.jquery.com/contents/ }\`
2134 * @since 1.2
2135 * @example ​ ````Find all the text nodes inside a paragraph and wrap them with a bold tag.
2136```html
2137<!doctype html>
2138<html lang="en">
2139<head>
2140 <meta charset="utf-8">
2141 <title>contents demo</title>
2142 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2143</head>
2144<body>
2145​
2146<p>Hello <a href="https://johnresig.com/">John</a>, how are you doing?</p>
2147​
2148<script>
2149$( "p" )
2150 .contents()
2151 .filter(function(){
2152 return this.nodeType !== 1;
2153 })
2154 .wrap( "<b></b>" );
2155</script>
2156​
2157</body>
2158</html>
2159```
2160 * @example ​ ````Change the background color of links inside of an iframe.
2161```html
2162<!doctype html>
2163<html lang="en">
2164<head>
2165 <meta charset="utf-8">
2166 <title>contents demo</title>
2167 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2168</head>
2169<body>
2170​
2171<iframe src="https://api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe>
2172​
2173<script>
2174$( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );
2175</script>
2176​
2177</body>
2178</html>
2179```
2180 */
2181 contents(): JQuery<TElement | Text | Comment | Document>;
2182 /**
2183 * Bind an event handler to the "contextmenu" JavaScript event, or trigger that event on an element.
2184 * @param eventData An object containing data that will be passed to the event handler.
2185 * @param handler A function to execute each time the event is triggered.
2186 * @see \`{@link https://api.jquery.com/contextmenu-shorthand/ }\`
2187 * @since 1.4.3
2188 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
2189 *
2190 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
2191 *
2192 * **Solution**: Instead of `.contextmenu(fn)` use `.on("contextmenu", fn)`. Instead of `.contextmenu()` use `.trigger("contextmenu")`.
2193 */
2194 contextmenu<TData>(
2195 eventData: TData,
2196 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "contextmenu">,
2197 ): this;
2198 /**
2199 * Bind an event handler to the "contextmenu" JavaScript event, or trigger that event on an element.
2200 * @param handler A function to execute each time the event is triggered.
2201 * @see \`{@link https://api.jquery.com/contextmenu-shorthand/ }\`
2202 * @since 1.0
2203 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
2204 *
2205 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
2206 *
2207 * **Solution**: Instead of `.contextmenu(fn)` use `.on("contextmenu", fn)`. Instead of `.contextmenu()` use `.trigger("contextmenu")`.
2208 * @example ​ ````To show a &quot;Hello World!&quot; alert box when the contextmenu event is triggered on a paragraph on the page:
2209```javascript
2210$( "p" ).contextmenu(function() {
2211 alert( "Hello World!" );
2212});
2213```
2214 * @example ​ ````Right click to toggle background color.
2215```html
2216<!doctype html>
2217<html lang="en">
2218<head>
2219 <meta charset="utf-8">
2220 <title>contextmenu demo</title>
2221 <style>
2222 div {
2223 background: blue;
2224 color: white;
2225 height: 100px;
2226 width: 150px;
2227 }
2228 div.contextmenu {
2229 background: yellow;
2230 color: black;
2231 }
2232 </style>
2233 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2234</head>
2235<body>
2236​
2237<div></div>
2238<span>Right click the block</span>
2239​
2240<script>
2241var div = $( "div:first" );
2242div.contextmenu(function() {
2243 div.toggleClass( "contextmenu" );
2244});
2245</script>
2246​
2247</body>
2248</html>
2249```
2250 */
2251 contextmenu(
2252 handler?:
2253 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "contextmenu">
2254 | false,
2255 ): this;
2256 /**
2257 * Set one or more CSS properties for the set of matched elements.
2258 * @param propertyName A CSS property name.
2259 * @param value_function _&#x40;param_ `value_function`
2260 * <br>
2261 * * `value` — A value to set for the property. <br>
2262 * * `function` — A function returning the value to set. `this` is the current element. Receives the index position of
2263 * the element in the set and the old value as arguments.
2264 * @see \`{@link https://api.jquery.com/css/ }\`
2265 * @since 1.0
2266 * @since 1.4
2267 * @example ​ ````Change the color of any paragraph to red on mouseover event.
2268```html
2269<!doctype html>
2270<html lang="en">
2271<head>
2272 <meta charset="utf-8">
2273 <title>css demo</title>
2274 <style>
2275 p {
2276 color: blue;
2277 width: 200px;
2278 font-size: 14px;
2279 }
2280 </style>
2281 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2282</head>
2283<body>
2284​
2285 <p>Just roll the mouse over me.</p>
2286​
2287 <p>Or me to see a color change.</p>
2288​
2289<script>
2290$( "p" ).on( "mouseover", function() {
2291 $( this ).css( "color", "red" );
2292});
2293</script>
2294​
2295</body>
2296</html>
2297```
2298 * @example ​ ````Increase the width of #box by 200 pixels the first time it is clicked.
2299```html
2300<!doctype html>
2301<html lang="en">
2302<head>
2303 <meta charset="utf-8">
2304 <title>css demo</title>
2305 <style>
2306 #box {
2307 background: black;
2308 color: snow;
2309 width: 100px;
2310 padding: 10px;
2311 }
2312 </style>
2313 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2314</head>
2315<body>
2316​
2317<div id="box">Click me to grow</div>
2318​
2319<script>
2320$( "#box" ).one( "click", function() {
2321 $( this ).css( "width", "+=200" );
2322});
2323</script>
2324​
2325</body>
2326</html>
2327```
2328 * @example ​ ````Highlight a clicked word in the paragraph.
2329```html
2330<!doctype html>
2331<html lang="en">
2332<head>
2333 <meta charset="utf-8">
2334 <title>css demo</title>
2335 <style>
2336 p {
2337 color: blue;
2338 font-weight: bold;
2339 cursor: pointer;
2340 }
2341 </style>
2342 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2343</head>
2344<body>
2345​
2346<p>
2347 Once upon a time there was a man
2348 who lived in a pizza parlor. This
2349 man just loved pizza and ate it all
2350 the time. He went on to be the
2351 happiest man in the world. The end.
2352</p>
2353​
2354<script>
2355var words = $( "p" ).first().text().split( /\s+/ );
2356var text = words.join( "</span> <span>" );
2357$( "p" ).first().html( "<span>" + text + "</span>" );
2358$( "span" ).on( "click", function() {
2359 $( this ).css( "background-color", "yellow" );
2360});
2361</script>
2362​
2363</body>
2364</html>
2365```
2366 */
2367 css(
2368 propertyName: string,
2369 value_function:
2370 | string
2371 | number
2372 // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
2373 | ((this: TElement, index: number, value: string) => string | number | void | undefined),
2374 ): this;
2375 /**
2376 * Set one or more CSS properties for the set of matched elements.
2377 * @param properties An object of property-value pairs to set.
2378 * @see \`{@link https://api.jquery.com/css/ }\`
2379 * @since 1.0
2380 * @example ​ ````Change the font weight and background color on mouseenter and mouseleave.
2381```html
2382<!doctype html>
2383<html lang="en">
2384<head>
2385 <meta charset="utf-8">
2386 <title>css demo</title>
2387 <style>
2388 p {
2389 color: green;
2390 }
2391 </style>
2392 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2393</head>
2394<body>
2395​
2396<p>Move the mouse over a paragraph.</p>
2397<p>Like this one or the one above.</p>
2398​
2399<script>
2400$( "p" )
2401 .on( "mouseenter", function() {
2402 $( this ).css({
2403 "background-color": "yellow",
2404 "font-weight": "bolder"
2405 });
2406 })
2407 .on( "mouseleave", function() {
2408 var styles = {
2409 backgroundColor : "#ddd",
2410 fontWeight: ""
2411 };
2412 $( this ).css( styles );
2413 });
2414</script>
2415​
2416</body>
2417</html>
2418```
2419 * @example ​ ````Increase the size of a div when you click it.
2420```html
2421<!doctype html>
2422<html lang="en">
2423<head>
2424 <meta charset="utf-8">
2425 <title>css demo</title>
2426 <style>
2427 div {
2428 width: 20px;
2429 height: 15px;
2430 background-color: #f33;
2431 }
2432 </style>
2433 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2434</head>
2435<body>
2436​
2437<div>click</div>
2438<div>click</div>
2439​
2440<script>
2441$( "div" ).on( "click", function() {
2442 $( this ).css({
2443 width: function( index, value ) {
2444 return parseFloat( value ) * 1.2;
2445 },
2446 height: function( index, value ) {
2447 return parseFloat( value ) * 1.2;
2448 }
2449 });
2450});
2451</script>
2452​
2453</body>
2454</html>
2455```
2456 */
2457 css(
2458 properties: JQuery.PlainObject<
2459 // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
2460 string | number | ((this: TElement, index: number, value: string) => string | number | void | undefined)
2461 >,
2462 ): this;
2463 /**
2464 * Get the computed style properties for the first element in the set of matched elements.
2465 * @param propertyName A CSS property.
2466 * @see \`{@link https://api.jquery.com/css/ }\`
2467 * @since 1.0
2468 * @example ​ ````Get the background color of a clicked div.
2469```html
2470<!doctype html>
2471<html lang="en">
2472<head>
2473 <meta charset="utf-8">
2474 <title>css demo</title>
2475 <style>
2476 div {
2477 width: 60px;
2478 height: 60px;
2479 margin: 5px;
2480 float: left;
2481 }
2482 </style>
2483 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2484</head>
2485<body>
2486​
2487<span id="result">&nbsp;</span>
2488<div style="background-color:blue;"></div>
2489<div style="background-color:rgb(15,99,30);"></div>
2490<div style="background-color:#123456;"></div>
2491<div style="background-color:#f11;"></div>
2492​
2493<script>
2494$( "div" ).click(function() {
2495 var color = $( this ).css( "background-color" );
2496 $( "#result" ).html( "That div is <span style='color:" +
2497 color + ";'>" + color + "</span>." );
2498});
2499</script>
2500​
2501</body>
2502</html>
2503```
2504 */
2505 css(propertyName: string): string;
2506 /**
2507 * Get the computed style properties for the first element in the set of matched elements.
2508 * @param propertyNames An array of one or more CSS properties.
2509 * @see \`{@link https://api.jquery.com/css/ }\`
2510 * @since 1.9
2511 * @example ​ ````Get the width, height, text color, and background color of a clicked div.
2512```html
2513<!doctype html>
2514<html lang="en">
2515<head>
2516 <meta charset="utf-8">
2517 <title>css demo</title>
2518 <style>
2519 div {
2520 height: 50px;
2521 margin: 5px;
2522 padding: 5px;
2523 float: left;
2524 }
2525 #box1 {
2526 width: 50px;
2527 color: yellow;
2528 background-color: blue;
2529 }
2530 #box2 {
2531 width: 80px;
2532 color: rgb(255, 255, 255);
2533 background-color: rgb(15, 99, 30);
2534 }
2535 #box3 {
2536 width: 40px;
2537 color: #fcc;
2538 background-color: #123456;
2539 }
2540 #box4 {
2541 width: 70px;
2542 background-color: #f11;
2543 }
2544 </style>
2545 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2546</head>
2547<body>
2548​
2549<p id="result">&nbsp;</p>
2550<div id="box1">1</div>
2551<div id="box2">2</div>
2552<div id="box3">3</div>
2553<div id="box4">4</div>
2554​
2555<script>
2556$( "div" ).click(function() {
2557 var html = [ "The clicked div has the following styles:" ];
2558​
2559 var styleProps = $( this ).css([
2560 "width", "height", "color", "background-color"
2561 ]);
2562 $.each( styleProps, function( prop, value ) {
2563 html.push( prop + ": " + value );
2564 });
2565​
2566 $( "#result" ).html( html.join( "<br>" ) );
2567});
2568</script>
2569​
2570</body>
2571</html>
2572```
2573 */
2574 css(propertyNames: string[]): JQuery.PlainObject<string>;
2575 /**
2576 * Store arbitrary data associated with the matched elements.
2577 * @param key A string naming the piece of data to set.
2578 * @param value The new data value; this can be any Javascript type except `undefined`.
2579 * @see \`{@link https://api.jquery.com/data/ }\`
2580 * @since 1.2.3
2581 * @example ​ ````Store then retrieve a value from the div element.
2582```html
2583<!doctype html>
2584<html lang="en">
2585<head>
2586 <meta charset="utf-8">
2587 <title>data demo</title>
2588 <style>
2589 div {
2590 color: blue;
2591 }
2592 span {
2593 color: red;
2594 }
2595 </style>
2596 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2597</head>
2598<body>
2599​
2600<div>
2601 The values stored were
2602 <span></span>
2603 and
2604 <span></span>
2605</div>
2606​
2607<script>
2608$( "div" ).data( "test", { first: 16, last: "pizza!" } );
2609$( "span:first" ).text( $( "div" ).data( "test" ).first );
2610$( "span:last" ).text( $( "div" ).data( "test" ).last );
2611</script>
2612​
2613</body>
2614</html>
2615```
2616 */
2617 data(key: string, value: string | number | boolean | symbol | object | null): this;
2618 /**
2619 * Store arbitrary data associated with the matched elements.
2620 * @param obj An object of key-value pairs of data to update.
2621 * @see \`{@link https://api.jquery.com/data/ }\`
2622 * @since 1.4.3
2623 */
2624 data(obj: JQuery.PlainObject): this;
2625 /**
2626 * 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.
2627 * @param key Name of the data stored.
2628 * @param value `undefined` is not recognized as a data value. Calls such as `.data( "name", undefined )`
2629 * will return the jQuery object that it was called on, allowing for chaining.
2630 * @see \`{@link https://api.jquery.com/data/ }\`
2631 * @since 1.2.3
2632 */
2633 // `unified-signatures` is disabled so that behavior when passing `undefined` to `value` can be documented. Unifying the signatures
2634 // results in potential confusion for users from an unexpected parameter.
2635 // tslint:disable-next-line:unified-signatures
2636 data(key: string, value: undefined): any;
2637 /**
2638 * 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.
2639 * @param key Name of the data stored.
2640 * @see \`{@link https://api.jquery.com/data/ }\`
2641 * @since 1.2.3
2642 * @example ​ ````Get the data named &quot;blah&quot; stored at for an element.
2643```html
2644<!doctype html>
2645<html lang="en">
2646<head>
2647 <meta charset="utf-8">
2648 <title>data demo</title>
2649 <style>
2650 div {
2651 margin: 5px;
2652 background: yellow;
2653 }
2654 button {
2655 margin: 5px;
2656 font-size: 14px;
2657 }
2658 p {
2659 margin: 5px;
2660 color: blue;
2661 }
2662 span {
2663 color: red;
2664 }
2665 </style>
2666 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2667</head>
2668<body>
2669​
2670<div>A div</div>
2671<button>Get "blah" from the div</button>
2672<button>Set "blah" to "hello"</button>
2673<button>Set "blah" to 86</button>
2674<button>Remove "blah" from the div</button>
2675<p>The "blah" value of this div is <span>?</span></p>
2676​
2677<script>
2678$( "button" ).click(function() {
2679 var value;
2680​
2681 switch ( $( "button" ).index( this ) ) {
2682 case 0 :
2683 value = $( "div" ).data( "blah" );
2684 break;
2685 case 1 :
2686 $( "div" ).data( "blah", "hello" );
2687 value = "Stored!";
2688 break;
2689 case 2 :
2690 $( "div" ).data( "blah", 86 );
2691 value = "Stored!";
2692 break;
2693 case 3 :
2694 $( "div" ).removeData( "blah" );
2695 value = "Removed!";
2696 break;
2697 }
2698​
2699 $( "span" ).text( "" + value );
2700});
2701</script>
2702​
2703</body>
2704</html>
2705```
2706 */
2707 data(key: string): any;
2708 /**
2709 * 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.
2710 * @see \`{@link https://api.jquery.com/data/ }\`
2711 * @since 1.4
2712 */
2713 data(): JQuery.PlainObject;
2714 /**
2715 * Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.
2716 * @param eventData An object containing data that will be passed to the event handler.
2717 * @param handler A function to execute each time the event is triggered.
2718 * @see \`{@link https://api.jquery.com/dblclick-shorthand/ }\`
2719 * @since 1.4.3
2720 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
2721 *
2722 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
2723 *
2724 * **Solution**: Instead of `.dblclick(fn)` use `.on("dblclick", fn)`. Instead of `.dblclick()` use `.trigger("dblclick")`.
2725 */
2726 dblclick<TData>(
2727 eventData: TData,
2728 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "dblclick">,
2729 ): this;
2730 /**
2731 * Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.
2732 * @param handler A function to execute each time the event is triggered.
2733 * @see \`{@link https://api.jquery.com/dblclick-shorthand/ }\`
2734 * @since 1.0
2735 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
2736 *
2737 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
2738 *
2739 * **Solution**: Instead of `.dblclick(fn)` use `.on("dblclick", fn)`. Instead of `.dblclick()` use `.trigger("dblclick")`.
2740 * @example ​ ````To bind a &quot;Hello World!&quot; alert box to the dblclick event on every paragraph on the page:
2741```javascript
2742$( "p" ).dblclick(function() {
2743 alert( "Hello World!" );
2744});
2745```
2746 * @example ​ ````Double click to toggle background color.
2747```html
2748<!doctype html>
2749<html lang="en">
2750<head>
2751 <meta charset="utf-8">
2752 <title>dblclick demo</title>
2753 <style>
2754 div {
2755 background: blue;
2756 color: white;
2757 height: 100px;
2758 width: 150px;
2759 }
2760 div.dbl {
2761 background: yellow;
2762 color: black;
2763 }
2764 </style>
2765 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2766</head>
2767<body>
2768​
2769<div></div>
2770<span>Double click the block</span>
2771​
2772<script>
2773var divdbl = $( "div:first" );
2774divdbl.dblclick(function() {
2775 divdbl.toggleClass( "dbl" );
2776});
2777</script>
2778​
2779</body>
2780</html>
2781```
2782 */
2783 dblclick(
2784 handler?:
2785 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "dblclick">
2786 | false,
2787 ): this;
2788 /**
2789 * Set a timer to delay execution of subsequent items in the queue.
2790 * @param duration An integer indicating the number of milliseconds to delay execution of the next item in the queue.
2791 * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
2792 * @see \`{@link https://api.jquery.com/delay/ }\`
2793 * @since 1.4
2794 * @example ​ ````Animate the hiding and showing of two divs, delaying the first before showing it.
2795```html
2796<!doctype html>
2797<html lang="en">
2798<head>
2799 <meta charset="utf-8">
2800 <title>delay demo</title>
2801 <style>
2802 div {
2803 position: absolute;
2804 width: 60px;
2805 height: 60px;
2806 float: left;
2807 }
2808 .first {
2809 background-color: #3f3;
2810 left: 0;
2811 }
2812 .second {
2813 background-color: #33f;
2814 left: 80px;
2815 }
2816 </style>
2817 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2818</head>
2819<body>
2820​
2821<p><button>Run</button></p>
2822<div class="first"></div>
2823<div class="second"></div>
2824​
2825<script>
2826$( "button" ).click(function() {
2827 $( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
2828 $( "div.second" ).slideUp( 300 ).fadeIn( 400 );
2829});
2830</script>
2831​
2832</body>
2833</html>
2834```
2835 */
2836 delay(duration: JQuery.Duration, queueName?: string): this;
2837 /**
2838 * 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.
2839 * @param selector A selector to filter the elements that trigger the event.
2840 * @param eventType A string containing one or more space-separated JavaScript event types, such as "click" or
2841 * "keydown," or custom event names.
2842 * @param eventData An object containing data that will be passed to the event handler.
2843 * @param handler A function to execute each time the event is triggered.
2844 * @see \`{@link https://api.jquery.com/delegate/ }\`
2845 * @since 1.4.2
2846 * @deprecated ​ Deprecated since 3.0. Use \`{@link on }\`.
2847 *
2848 * **Cause**: These event binding methods have been deprecated in favor of the `.on()` and `.off()` methods which can handle both delegated and direct event binding. Although the older methods are still present in jQuery 3.0, they may be removed as early as the next major-version update.
2849 *
2850 * **Solution**: Change the method call to use `.on()` or `.off()`, the documentation for the old methods include specific instructions. In general, the `.bind()` and `.unbind()` methods can be renamed directly to `.on()` and `.off()` respectively since the argument orders are identical.
2851 */
2852 delegate<TType extends string, TData>(
2853 selector: JQuery.Selector,
2854 eventType: TType,
2855 eventData: TData,
2856 handler: JQuery.TypeEventHandler<TElement, TData, any, any, TType>,
2857 ): this;
2858 /**
2859 * 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.
2860 * @param selector A selector to filter the elements that trigger the event.
2861 * @param eventType A string containing one or more space-separated JavaScript event types, such as "click" or
2862 * "keydown," or custom event names.
2863 * @param handler A function to execute each time the event is triggered.
2864 * @see \`{@link https://api.jquery.com/delegate/ }\`
2865 * @since 1.4.2
2866 * @deprecated ​ Deprecated since 3.0. Use \`{@link on }\`.
2867 *
2868 * **Cause**: These event binding methods have been deprecated in favor of the `.on()` and `.off()` methods which can handle both delegated and direct event binding. Although the older methods are still present in jQuery 3.0, they may be removed as early as the next major-version update.
2869 *
2870 * **Solution**: Change the method call to use `.on()` or `.off()`, the documentation for the old methods include specific instructions. In general, the `.bind()` and `.unbind()` methods can be renamed directly to `.on()` and `.off()` respectively since the argument orders are identical.
2871 * @example ​ ````Click a paragraph to add another. Note that .delegate() attaches a click event handler to all paragraphs - even new ones.
2872```html
2873<!doctype html>
2874<html lang="en">
2875<head>
2876 <meta charset="utf-8">
2877 <title>delegate demo</title>
2878 <style>
2879 p {
2880 background: yellow;
2881 font-weight: bold;
2882 cursor: pointer;
2883 padding: 5px;
2884 }
2885 p.over {
2886 background: #ccc;
2887 }
2888 span {
2889 color: red;
2890 }
2891 </style>
2892 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2893</head>
2894<body>
2895​
2896<p>Click me!</p>
2897​
2898<span></span>
2899​
2900<script>
2901$( "body" ).delegate( "p", "click", function() {
2902 $( this ).after( "<p>Another paragraph!</p>" );
2903});
2904</script>
2905​
2906</body>
2907</html>
2908```
2909 * @example ​ ````To display each paragraph&#39;s text in an alert box whenever it is clicked:
2910```javascript
2911$( "body" ).delegate( "p", "click", function() {
2912 alert( $( this ).text() );
2913});
2914```
2915 * @example ​ ````To cancel a default action and prevent it from bubbling up, return false:
2916```javascript
2917$( "body" ).delegate( "a", "click", function() {
2918 return false;
2919});
2920```
2921 * @example ​ ````To cancel only the default action by using the preventDefault method.
2922```javascript
2923$( "body" ).delegate( "a", "click", function( event ) {
2924 event.preventDefault();
2925});
2926```
2927 * @example ​ ````Can bind custom events too.
2928```html
2929<!doctype html>
2930<html lang="en">
2931<head>
2932 <meta charset="utf-8">
2933 <title>delegate demo</title>
2934 <style>
2935 p {
2936 color: red;
2937 }
2938 span {
2939 color: blue;
2940 }
2941 </style>
2942 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2943</head>
2944<body>
2945​
2946<p>Has an attached custom event.</p>
2947<button>Trigger custom event</button>
2948<span style="display:none;"></span>
2949​
2950<script>
2951$( "body" ).delegate( "p", "myCustomEvent", function( e, myName, myValue ) {
2952 $( this ).text( "Hi there!" );
2953 $( "span" )
2954 .stop()
2955 .css( "opacity", 1 )
2956 .text( "myName = " + myName )
2957 .fadeIn( 30 )
2958 .fadeOut( 1000 );
2959});
2960$( "button" ).click(function() {
2961 $( "p" ).trigger( "myCustomEvent" );
2962});
2963</script>
2964​
2965</body>
2966</html>
2967```
2968 */
2969 delegate<TType extends string>(
2970 selector: JQuery.Selector,
2971 eventType: TType,
2972 handler:
2973 | JQuery.TypeEventHandler<TElement, undefined, any, any, TType>
2974 | false,
2975 ): this;
2976 /**
2977 * 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.
2978 * @param selector A selector to filter the elements that trigger the event.
2979 * @param events A plain object of one or more event types and functions to execute for them.
2980 * @see \`{@link https://api.jquery.com/delegate/ }\`
2981 * @since 1.4.3
2982 * @deprecated ​ Deprecated since 3.0. Use \`{@link on }\`.
2983 *
2984 * **Cause**: These event binding methods have been deprecated in favor of the `.on()` and `.off()` methods which can handle both delegated and direct event binding. Although the older methods are still present in jQuery 3.0, they may be removed as early as the next major-version update.
2985 *
2986 * **Solution**: Change the method call to use `.on()` or `.off()`, the documentation for the old methods include specific instructions. In general, the `.bind()` and `.unbind()` methods can be renamed directly to `.on()` and `.off()` respectively since the argument orders are identical.
2987 */
2988 delegate(selector: JQuery.Selector, events: JQuery.TypeEventHandlers<TElement, undefined, any, any>): this;
2989 /**
2990 * Execute the next function on the queue for the matched elements.
2991 * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
2992 * @see \`{@link https://api.jquery.com/dequeue/ }\`
2993 * @since 1.2
2994 * @example ​ ````Use dequeue to end a custom queue function which allows the queue to keep going.
2995```html
2996<!doctype html>
2997<html lang="en">
2998<head>
2999 <meta charset="utf-8">
3000 <title>dequeue demo</title>
3001 <style>
3002 div {
3003 margin: 3px;
3004 width: 50px;
3005 position: absolute;
3006 height: 50px;
3007 left: 10px;
3008 top: 30px;
3009 background-color: yellow;
3010 }
3011 div.red {
3012 background-color: red;
3013 }
3014 </style>
3015 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3016</head>
3017<body>
3018​
3019<button>Start</button>
3020<div></div>
3021​
3022<script>
3023$( "button" ).click(function() {
3024 $( "div" )
3025 .animate({ left:"+=200px" }, 2000 )
3026 .animate({ top:"0px" }, 600 )
3027 .queue(function() {
3028 $( this ).toggleClass( "red" ).dequeue();
3029 })
3030 .animate({ left:"10px", top:"30px" }, 700 );
3031});
3032</script>
3033​
3034</body>
3035</html>
3036```
3037 */
3038 dequeue(queueName?: string): this;
3039 /**
3040 * Remove the set of matched elements from the DOM.
3041 * @param selector A selector expression that filters the set of matched elements to be removed.
3042 * @see \`{@link https://api.jquery.com/detach/ }\`
3043 * @since 1.4
3044 * @example ​ ````Detach all paragraphs from the DOM
3045```html
3046<!doctype html>
3047<html lang="en">
3048<head>
3049 <meta charset="utf-8">
3050 <title>detach demo</title>
3051 <style>
3052 p {
3053 background: yellow;
3054 margin: 6px 0;
3055 }
3056 p.off {
3057 background: black;
3058 }
3059 </style>
3060 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3061</head>
3062<body>
3063​
3064<p>Hello</p>
3065how are
3066<p>you?</p>
3067<button>Attach/detach paragraphs</button>
3068​
3069<script>
3070$( "p" ).click(function() {
3071 $( this ).toggleClass( "off" );
3072});
3073var p;
3074$( "button" ).click(function() {
3075 if ( p ) {
3076 p.appendTo( "body" );
3077 p = null;
3078 } else {
3079 p = $( "p" ).detach();
3080 }
3081});
3082</script>
3083​
3084</body>
3085</html>
3086```
3087 */
3088 detach(selector?: JQuery.Selector): this;
3089 /**
3090 * Iterate over a jQuery object, executing a function for each matched element.
3091 * @param funсtion A function to execute for each matched element.
3092 * @see \`{@link https://api.jquery.com/each/ }\`
3093 * @since 1.0
3094 * @example ​ ````Iterate over three divs and sets their color property.
3095```html
3096<!doctype html>
3097<html lang="en">
3098<head>
3099 <meta charset="utf-8">
3100 <title>each demo</title>
3101 <style>
3102 div {
3103 color: red;
3104 text-align: center;
3105 cursor: pointer;
3106 font-weight: bolder;
3107 width: 300px;
3108 }
3109 </style>
3110 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3111</head>
3112<body>
3113​
3114<div>Click here</div>
3115<div>to iterate through</div>
3116<div>these divs.</div>
3117​
3118<script>
3119$( document.body ).click(function() {
3120 $( "div" ).each(function( i ) {
3121 if ( this.style.color !== "blue" ) {
3122 this.style.color = "blue";
3123 } else {
3124 this.style.color = "";
3125 }
3126 });
3127});
3128</script>
3129​
3130</body>
3131</html>
3132```
3133 * @example ​ ````To access a jQuery object instead of the regular DOM element, use $( this ). For example:
3134```html
3135<!doctype html>
3136<html lang="en">
3137<head>
3138 <meta charset="utf-8">
3139 <title>each demo</title>
3140 <style>
3141 ul {
3142 font-size: 18px;
3143 margin: 0;
3144 }
3145 span {
3146 color: blue;
3147 text-decoration: underline;
3148 cursor: pointer;
3149 }
3150 .example {
3151 font-style: italic;
3152 }
3153 </style>
3154 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3155</head>
3156<body>
3157​
3158To do list: <span>(click here to change)</span>
3159<ul>
3160 <li>Eat</li>
3161 <li>Sleep</li>
3162 <li>Be merry</li>
3163</ul>
3164​
3165<script>
3166$( "span" ).click(function() {
3167 $( "li" ).each(function() {
3168 $( this ).toggleClass( "example" );
3169 });
3170});
3171</script>
3172​
3173</body>
3174</html>
3175```
3176 * @example ​ ````Use return false to break out of each() loops early.
3177```html
3178<!doctype html>
3179<html lang="en">
3180<head>
3181 <meta charset="utf-8">
3182 <title>each demo</title>
3183 <style>
3184 div {
3185 width: 40px;
3186 height: 40px;
3187 margin: 5px;
3188 float: left;
3189 border: 2px blue solid;
3190 text-align: center;
3191 }
3192 span {
3193 color: red;
3194 }
3195 </style>
3196 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3197</head>
3198<body>
3199​
3200<button>Change colors</button>
3201<span></span>
3202<div></div>
3203<div></div>
3204<div></div>
3205<div></div>
3206<div id="stop">Stop here</div>
3207<div></div>
3208<div></div>
3209<div></div>
3210​
3211<script>
3212$( "button" ).click(function() {
3213 $( "div" ).each(function( index, element ) {
3214 // element == this
3215 $( element ).css( "backgroundColor", "yellow" );
3216 if ( $( this ).is( "#stop" ) ) {
3217 $( "span" ).text( "Stopped at div index #" + index );
3218 return false;
3219 }
3220 });
3221});
3222</script>
3223​
3224</body>
3225</html>
3226```
3227 */
3228 // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
3229 each(funсtion: (this: TElement, index: number, element: TElement) => void | false): this;
3230 /**
3231 * Remove all child nodes of the set of matched elements from the DOM.
3232 * @see \`{@link https://api.jquery.com/empty/ }\`
3233 * @since 1.0
3234 * @example ​ ````Removes all child nodes (including text nodes) from all paragraphs
3235```html
3236<!doctype html>
3237<html lang="en">
3238<head>
3239 <meta charset="utf-8">
3240 <title>empty demo</title>
3241 <style>
3242 p {
3243 background: yellow;
3244 }
3245 </style>
3246 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3247</head>
3248<body>
3249​
3250<p>
3251 Hello, <span>Person</span> <em>and person</em>.
3252</p>
3253​
3254<button>Call empty() on above paragraph</button>
3255​
3256<script>
3257$( "button" ).click(function() {
3258 $( "p" ).empty();
3259});
3260</script>
3261​
3262</body>
3263</html>
3264```
3265 */
3266 empty(): this;
3267 /**
3268 * End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.
3269 * @see \`{@link https://api.jquery.com/end/ }\`
3270 * @since 1.0
3271 * @example ​ ````Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.
3272```html
3273<!doctype html>
3274<html lang="en">
3275<head>
3276 <meta charset="utf-8">
3277 <title>end demo</title>
3278 <style>
3279 p, div {
3280 margin: 1px;
3281 padding: 1px;
3282 font-weight: bold;
3283 font-size: 16px;
3284 }
3285 div {
3286 color: blue;
3287 }
3288 b {
3289 color: red;
3290 }
3291 </style>
3292 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3293</head>
3294<body>
3295​
3296<p>
3297 Hi there <span>how</span> are you <span>doing</span>?
3298</p>
3299​
3300<p>
3301 This <span>span</span> is one of
3302 several <span>spans</span> in this
3303 <span>sentence</span>.
3304</p>
3305​
3306<div>
3307 Tags in jQuery object initially: <b></b>
3308</div>
3309​
3310<div>
3311 Tags in jQuery object after find: <b></b>
3312</div>
3313​
3314<div>
3315 Tags in jQuery object after end: <b></b>
3316</div>
3317​
3318<script>
3319jQuery.fn.showTags = function( n ) {
3320 var tags = this.map(function() {
3321 return this.tagName;
3322 })
3323 .get()
3324 .join( ", " );
3325 $( "b:eq( " + n + " )" ).text( tags );
3326 return this;
3327};
3328​
3329$( "p" )
3330 .showTags( 0 )
3331 .find( "span" )
3332 .showTags( 1 )
3333 .css( "background", "yellow" )
3334 .end()
3335 .showTags( 2 )
3336 .css( "font-style", "italic" );
3337</script>
3338​
3339</body>
3340</html>
3341```
3342 * @example ​ ````Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.
3343```html
3344<!doctype html>
3345<html lang="en">
3346<head>
3347 <meta charset="utf-8">
3348 <title>end demo</title>
3349 <style>
3350 p {
3351 margin: 10px;
3352 padding: 10px;
3353 }
3354 </style>
3355 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3356</head>
3357<body>
3358​
3359<p><span>Hello</span>, how are you?</p>
3360​
3361<script>
3362$( "p" )
3363 .find( "span" )
3364 .end()
3365 .css( "border", "2px red solid" );
3366</script>
3367​
3368</body>
3369</html>
3370```
3371 */
3372 end(): this;
3373 /**
3374 * Reduce the set of matched elements to the one at the specified index.
3375 * @param index An integer indicating the 0-based position of the element.
3376 * An integer indicating the position of the element, counting backwards from the last element in the set.
3377 * @see \`{@link https://api.jquery.com/eq/ }\`
3378 * @since 1.1.2
3379 * @since 1.4
3380 * @example ​ ````Turn the div with index 2 blue by adding an appropriate class.
3381```html
3382<!doctype html>
3383<html lang="en">
3384<head>
3385 <meta charset="utf-8">
3386 <title>eq demo</title>
3387 <style>
3388 div {
3389 width: 60px;
3390 height: 60px;
3391 margin: 10px;
3392 float: left;
3393 border: 2px solid blue;
3394 }
3395 .blue {
3396 background: blue;
3397 }
3398 </style>
3399 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3400</head>
3401<body>
3402​
3403<div></div>
3404<div></div>
3405<div></div>
3406<div></div>
3407<div></div>
3408<div></div>
3409​
3410<script>
3411$( "body" ).find( "div" ).eq( 2 ).addClass( "blue" );
3412</script>
3413​
3414</body>
3415</html>
3416```
3417 */
3418 eq(index: number): this;
3419 /**
3420 * Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.
3421 * @param obj An object to merge onto the jQuery prototype.
3422 * @see \`{@link https://api.jquery.com/jQuery.fn.extend/ }\`
3423 * @since 1.0
3424 * @example ​ ````Add two methods to the jQuery prototype ($.fn) object and then use one of them.
3425```html
3426<!doctype html>
3427<html lang="en">
3428<head>
3429 <meta charset="utf-8">
3430 <title>jQuery.fn.extend demo</title>
3431 <style>
3432 label {
3433 display: block;
3434 margin: .5em;
3435 }
3436 </style>
3437 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3438</head>
3439<body>
3440​
3441<label><input type="checkbox" name="foo"> Foo</label>
3442<label><input type="checkbox" name="bar"> Bar</label>
3443​
3444<script>
3445jQuery.fn.extend({
3446 check: function() {
3447 return this.each(function() {
3448 this.checked = true;
3449 });
3450 },
3451 uncheck: function() {
3452 return this.each(function() {
3453 this.checked = false;
3454 });
3455 }
3456});
3457​
3458// Use the newly created .check() method
3459$( "input[type='checkbox']" ).check();
3460</script>
3461​
3462</body>
3463</html>
3464```
3465 */
3466 extend(obj: object): this;
3467 /**
3468 * Display the matched elements by fading them to opaque.
3469 * @param duration A string or number determining how long the animation will run.
3470 * @param easing A string indicating which easing function to use for the transition.
3471 * @param complete A function to call once the animation is complete, called once per matched element.
3472 * @see \`{@link https://api.jquery.com/fadeIn/ }\`
3473 * @since 1.4.3
3474 */
3475 fadeIn(duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
3476 /**
3477 * Display the matched elements by fading them to opaque.
3478 * @param duration_easing _&#x40;param_ `duration_easing`
3479 * <br>
3480 * * `duration` — A string or number determining how long the animation will run. <br>
3481 * * `easing` — A string indicating which easing function to use for the transition.
3482 * @param complete A function to call once the animation is complete, called once per matched element.
3483 * @see \`{@link https://api.jquery.com/fadeIn/ }\`
3484 * @since 1.0
3485 * @since 1.4.3
3486 * @example ​ ````Fades a red block in over the text. Once the animation is done, it quickly fades in more text on top.
3487```html
3488<!doctype html>
3489<html lang="en">
3490<head>
3491 <meta charset="utf-8">
3492 <title>fadeIn demo</title>
3493 <style>
3494 p {
3495 position: relative;
3496 width: 400px;
3497 height: 90px;
3498 }
3499 div {
3500 position: absolute;
3501 width: 400px;
3502 height: 65px;
3503 font-size: 36px;
3504 text-align: center;
3505 color: yellow;
3506 background: red;
3507 padding-top: 25px;
3508 top: 0;
3509 left: 0;
3510 display: none;
3511 }
3512 span {
3513 display: none;
3514 }
3515 </style>
3516 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3517</head>
3518<body>
3519​
3520<p>
3521 Let it be known that the party of the first part
3522 and the party of the second part are henceforth
3523 and hereto directed to assess the allegations
3524 for factual correctness... (<a href="#">click!</a>)
3525 <div><span>CENSORED!</span></div>
3526</p>
3527​
3528<script>
3529$( "a" ).click(function() {
3530 $( "div" ).fadeIn( 3000, function() {
3531 $( "span" ).fadeIn( 100 );
3532 });
3533 return false;
3534});
3535</script>
3536​
3537</body>
3538</html>
3539```
3540 */
3541 fadeIn(duration_easing: JQuery.Duration | string, complete: (this: TElement) => void): this;
3542 /**
3543 * Display the matched elements by fading them to opaque.
3544 * @param duration_easing_complete_options _&#x40;param_ `duration_easing_complete_options`
3545 * <br>
3546 * * `duration` — A string or number determining how long the animation will run. <br>
3547 * * `easing` — A string indicating which easing function to use for the transition. <br>
3548 * * `complete` — A function to call once the animation is complete, called once per matched element. <br>
3549 * * `options` — A map of additional options to pass to the method.
3550 * @see \`{@link https://api.jquery.com/fadeIn/ }\`
3551 * @since 1.0
3552 * @since 1.4.3
3553 * @example ​ ````Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.
3554```html
3555<!doctype html>
3556<html lang="en">
3557<head>
3558 <meta charset="utf-8">
3559 <title>fadeIn demo</title>
3560 <style>
3561 span {
3562 color: red;
3563 cursor: pointer;
3564 }
3565 div {
3566 margin: 3px;
3567 width: 80px;
3568 display: none;
3569 height: 80px;
3570 float: left;
3571 }
3572 #one {
3573 background: #f00;
3574 }
3575 #two {
3576 background: #0f0;
3577 }
3578 #three {
3579 background: #00f;
3580 }
3581 </style>
3582 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3583</head>
3584<body>
3585​
3586<span>Click here...</span>
3587<div id="one"></div>
3588<div id="two"></div>
3589<div id="three"></div>
3590​
3591<script>
3592$( document.body ).click(function() {
3593 $( "div:hidden:first" ).fadeIn( "slow" );
3594});
3595</script>
3596​
3597</body>
3598</html>
3599```
3600 */
3601 fadeIn(
3602 duration_easing_complete_options?:
3603 | JQuery.Duration
3604 | string
3605 | ((this: TElement) => void)
3606 | JQuery.EffectsOptions<TElement>,
3607 ): this;
3608 /**
3609 * Hide the matched elements by fading them to transparent.
3610 * @param duration A string or number determining how long the animation will run.
3611 * @param easing A string indicating which easing function to use for the transition.
3612 * @param complete A function to call once the animation is complete, called once per matched element.
3613 * @see \`{@link https://api.jquery.com/fadeOut/ }\`
3614 * @since 1.4.3
3615 * @example ​ ````Fades out two divs, one with a &quot;linear&quot; easing and one with the default, &quot;swing,&quot; easing.
3616```html
3617<!doctype html>
3618<html lang="en">
3619<head>
3620 <meta charset="utf-8">
3621 <title>fadeOut demo</title>
3622 <style>
3623 .box,
3624 button {
3625 float: left;
3626 margin: 5px 10px 5px 0;
3627 }
3628 .box {
3629 height: 80px;
3630 width: 80px;
3631 background: #090;
3632 }
3633 #log {
3634 clear: left;
3635 }
3636 </style>
3637 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3638</head>
3639<body>
3640​
3641<button id="btn1">fade out</button>
3642<button id="btn2">show</button>
3643​
3644<div id="log"></div>
3645​
3646<div id="box1" class="box">linear</div>
3647<div id="box2" class="box">swing</div>
3648​
3649<script>
3650$( "#btn1" ).click(function() {
3651 function complete() {
3652 $( "<div>" ).text( this.id ).appendTo( "#log" );
3653 }
3654 $( "#box1" ).fadeOut( 1600, "linear", complete );
3655 $( "#box2" ).fadeOut( 1600, complete );
3656});
3657​
3658$( "#btn2" ).click(function() {
3659 $( "div" ).show();
3660 $( "#log" ).empty();
3661});
3662</script>
3663​
3664</body>
3665</html>
3666```
3667 */
3668 fadeOut(duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
3669 /**
3670 * Hide the matched elements by fading them to transparent.
3671 * @param duration_easing _&#x40;param_ `duration_easing`
3672 * <br>
3673 * * `duration` — A string or number determining how long the animation will run. <br>
3674 * * `easing` — A string indicating which easing function to use for the transition.
3675 * @param complete A function to call once the animation is complete, called once per matched element.
3676 * @see \`{@link https://api.jquery.com/fadeOut/ }\`
3677 * @since 1.0
3678 * @since 1.4.3
3679 * @example ​ ````Fades out spans in one section that you click on.
3680```html
3681<!doctype html>
3682<html lang="en">
3683<head>
3684 <meta charset="utf-8">
3685 <title>fadeOut demo</title>
3686 <style>
3687 span {
3688 cursor: pointer;
3689 }
3690 span.hilite {
3691 background: yellow;
3692 }
3693 div {
3694 display: inline;
3695 color: red;
3696 }
3697 </style>
3698 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3699</head>
3700<body>
3701​
3702<h3>Find the modifiers - <div></div></h3>
3703<p>
3704 If you <span>really</span> want to go outside
3705 <span>in the cold</span> then make sure to wear
3706 your <span>warm</span> jacket given to you by
3707 your <span>favorite</span> teacher.
3708</p>
3709​
3710<script>
3711$( "span" ).click(function() {
3712 $( this ).fadeOut( 1000, function() {
3713 $( "div" ).text( "'" + $( this ).text() + "' has faded!" );
3714 $( this ).remove();
3715 });
3716});
3717$( "span" ).hover(function() {
3718 $( this ).addClass( "hilite" );
3719}, function() {
3720 $( this ).removeClass( "hilite" );
3721});
3722</script>
3723​
3724</body>
3725</html>
3726```
3727 */
3728 fadeOut(duration_easing: JQuery.Duration | string, complete: (this: TElement) => void): this;
3729 /**
3730 * Hide the matched elements by fading them to transparent.
3731 * @param duration_easing_complete_options _&#x40;param_ `duration_easing_complete_options`
3732 * <br>
3733 * * `duration` — A string or number determining how long the animation will run. <br>
3734 * * `easing` — A string indicating which easing function to use for the transition. <br>
3735 * * `complete` — A function to call once the animation is complete, called once per matched element. <br>
3736 * * `options` — A map of additional options to pass to the method.
3737 * @see \`{@link https://api.jquery.com/fadeOut/ }\`
3738 * @since 1.0
3739 * @since 1.4.3
3740 * @example ​ ````Animates all paragraphs to fade out, completing the animation within 600 milliseconds.
3741```html
3742<!doctype html>
3743<html lang="en">
3744<head>
3745 <meta charset="utf-8">
3746 <title>fadeOut demo</title>
3747 <style>
3748 p {
3749 font-size: 150%;
3750 cursor: pointer;
3751 }
3752 </style>
3753 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3754</head>
3755<body>
3756​
3757<p>
3758 If you click on this paragraph
3759 you'll see it just fade away.
3760</p>
3761​
3762<script>
3763$( "p" ).click(function() {
3764 $( "p" ).fadeOut( "slow" );
3765});
3766</script>
3767​
3768</body>
3769</html>
3770```
3771 */
3772 fadeOut(
3773 duration_easing_complete_options?:
3774 | JQuery.Duration
3775 | string
3776 | ((this: TElement) => void)
3777 | JQuery.EffectsOptions<TElement>,
3778 ): this;
3779 /**
3780 * Adjust the opacity of the matched elements.
3781 * @param duration A string or number determining how long the animation will run.
3782 * @param opacity A number between 0 and 1 denoting the target opacity.
3783 * @param easing A string indicating which easing function to use for the transition.
3784 * @param complete A function to call once the animation is complete, called once per matched element.
3785 * @see \`{@link https://api.jquery.com/fadeTo/ }\`
3786 * @since 1.4.3
3787 */
3788 fadeTo(duration: JQuery.Duration, opacity: number, easing: string, complete?: (this: TElement) => void): this;
3789 /**
3790 * Adjust the opacity of the matched elements.
3791 * @param duration A string or number determining how long the animation will run.
3792 * @param opacity A number between 0 and 1 denoting the target opacity.
3793 * @param complete A function to call once the animation is complete, called once per matched element.
3794 * @see \`{@link https://api.jquery.com/fadeTo/ }\`
3795 * @since 1.0
3796 * @example ​ ````Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.
3797```html
3798<!doctype html>
3799<html lang="en">
3800<head>
3801 <meta charset="utf-8">
3802 <title>fadeTo demo</title>
3803 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3804</head>
3805<body>
3806​
3807<p>
3808Click this paragraph to see it fade.
3809</p>
3810​
3811<p>
3812Compare to this one that won't fade.
3813</p>
3814​
3815<script>
3816$( "p:first" ).click(function() {
3817 $( this ).fadeTo( "slow", 0.33 );
3818});
3819</script>
3820​
3821</body>
3822</html>
3823```
3824 * @example ​ ````Fade div to a random opacity on each click, completing the animation within 200 milliseconds.
3825```html
3826<!doctype html>
3827<html lang="en">
3828<head>
3829 <meta charset="utf-8">
3830 <title>fadeTo demo</title>
3831 <style>
3832 p {
3833 width: 80px;
3834 margin: 0;
3835 padding: 5px;
3836 }
3837 div {
3838 width: 40px;
3839 height: 40px;
3840 position: absolute;
3841 }
3842 #one {
3843 top: 0;
3844 left: 0;
3845 background: #f00;
3846 }
3847 #two {
3848 top: 20px;
3849 left: 20px;
3850 background: #0f0;
3851 }
3852 #three {
3853 top: 40px;
3854 left:40px;
3855 background:#00f;
3856 }
3857 </style>
3858 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3859</head>
3860<body>
3861​
3862<p>And this is the library that John built...</p>
3863​
3864<div id="one"></div>
3865<div id="two"></div>
3866<div id="three"></div>
3867​
3868<script>
3869$( "div" ).click(function() {
3870 $( this ).fadeTo( "fast", Math.random() );
3871});
3872</script>
3873​
3874</body>
3875</html>
3876```
3877 * @example ​ ````Find the right answer! The fade will take 250 milliseconds and change various styles when it completes.
3878```html
3879<!doctype html>
3880<html lang="en">
3881<head>
3882 <meta charset="utf-8">
3883 <title>fadeTo demo</title>
3884 <style>
3885 div, p {
3886 width: 80px;
3887 height: 40px;
3888 top: 0;
3889 margin: 0;
3890 position: absolute;
3891 padding-top: 8px;
3892 }
3893 p {
3894 background: #fcc;
3895 text-align: center;
3896 }
3897 div {
3898 background: blue;
3899 }
3900 </style>
3901 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3902</head>
3903<body>
3904​
3905<p>Wrong</p>
3906<div></div>
3907<p>Wrong</p>
3908<div></div>
3909<p>Right!</p>
3910<div></div>
3911​
3912<script>
3913var getPos = function( n ) {
3914 return (Math.floor( n ) * 90) + "px";
3915};
3916$( "p" ).each(function( n ) {
3917 var r = Math.floor( Math.random() * 3 );
3918 var tmp = $( this ).text();
3919 $( this ).text( $( "p:eq(" + r + ")" ).text() );
3920 $( "p:eq(" + r + ")" ).text( tmp );
3921 $( this ).css( "left", getPos( n ) );
3922});
3923$( "div" )
3924 .each(function( n ) {
3925 $( this ).css( "left", getPos( n ) );
3926 })
3927 .css( "cursor", "pointer" )
3928 .click( function() {
3929 $( this ).fadeTo( 250, 0.25, function() {
3930 $( this )
3931 .css( "cursor", "" )
3932 .prev()
3933 .css({
3934 "font-weight": "bolder",
3935 "font-style": "italic"
3936 });
3937 });
3938 });
3939</script>
3940​
3941</body>
3942</html>
3943```
3944 */
3945 fadeTo(duration: JQuery.Duration, opacity: number, complete?: (this: TElement) => void): this;
3946 /**
3947 * Display or hide the matched elements by animating their opacity.
3948 * @param duration A string or number determining how long the animation will run.
3949 * @param easing A string indicating which easing function to use for the transition.
3950 * @param complete A function to call once the animation is complete, called once per matched element.
3951 * @see \`{@link https://api.jquery.com/fadeToggle/ }\`
3952 * @since 1.4.4
3953 * @example ​ ````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 &quot;finished&quot; message upon completion.
3954```html
3955<!doctype html>
3956<html lang="en">
3957<head>
3958 <meta charset="utf-8">
3959 <title>fadeToggle demo</title>
3960 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
3961</head>
3962<body>
3963​
3964<button>fadeToggle p1</button>
3965<button>fadeToggle p2</button>
3966<p>This paragraph has a slow, linear fade.</p>
3967<p>This paragraph has a fast animation.</p>
3968<div id="log"></div>
3969​
3970<script>
3971$( "button:first" ).click(function() {
3972 $( "p:first" ).fadeToggle( "slow", "linear" );
3973});
3974$( "button:last" ).click(function() {
3975 $( "p:last" ).fadeToggle( "fast", function() {
3976 $( "#log" ).append( "<div>finished</div>" );
3977 });
3978});
3979</script>
3980​
3981</body>
3982</html>
3983```
3984 */
3985 fadeToggle(duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
3986 /**
3987 * Display or hide the matched elements by animating their opacity.
3988 * @param duration_easing _&#x40;param_ `duration_easing`
3989 * <br>
3990 * * `duration` — A string or number determining how long the animation will run. <br>
3991 * * `easing` — A string indicating which easing function to use for the transition.
3992 * @param complete A function to call once the animation is complete, called once per matched element.
3993 * @see \`{@link https://api.jquery.com/fadeToggle/ }\`
3994 * @since 1.0
3995 * @since 1.4.3
3996 * @example ​ ````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 &quot;finished&quot; message upon completion.
3997```html
3998<!doctype html>
3999<html lang="en">
4000<head>
4001 <meta charset="utf-8">
4002 <title>fadeToggle demo</title>
4003 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4004</head>
4005<body>
4006​
4007<button>fadeToggle p1</button>
4008<button>fadeToggle p2</button>
4009<p>This paragraph has a slow, linear fade.</p>
4010<p>This paragraph has a fast animation.</p>
4011<div id="log"></div>
4012​
4013<script>
4014$( "button:first" ).click(function() {
4015 $( "p:first" ).fadeToggle( "slow", "linear" );
4016});
4017$( "button:last" ).click(function() {
4018 $( "p:last" ).fadeToggle( "fast", function() {
4019 $( "#log" ).append( "<div>finished</div>" );
4020 });
4021});
4022</script>
4023​
4024</body>
4025</html>
4026```
4027 */
4028 fadeToggle(duration_easing: JQuery.Duration | string, complete: (this: TElement) => void): this;
4029 /**
4030 * Display or hide the matched elements by animating their opacity.
4031 * @param duration_easing_complete_options _&#x40;param_ `duration_easing_complete_options`
4032 * <br>
4033 * * `duration` — A string or number determining how long the animation will run. <br>
4034 * * `easing` — A string indicating which easing function to use for the transition. <br>
4035 * * `complete` — A function to call once the animation is complete, called once per matched element. <br>
4036 * * `options` — A map of additional options to pass to the method.
4037 * @see \`{@link https://api.jquery.com/fadeToggle/ }\`
4038 * @since 1.0
4039 * @since 1.4.3
4040 */
4041 fadeToggle(
4042 duration_easing_complete_options?:
4043 | JQuery.Duration
4044 | string
4045 | ((this: TElement) => void)
4046 | JQuery.EffectsOptions<TElement>,
4047 ): this;
4048 /**
4049 * Reduce the set of matched elements to those that match the selector or pass the function's test.
4050 * @param selector_elements_selection_function _&#x40;param_ `selector_elements_selection_function`
4051 * <br>
4052 * * `selector` — A string containing a selector expression to match the current set of elements against. <br>
4053 * * `elements` — One or more DOM elements to match the current set of elements against. <br>
4054 * * `selection` — An existing jQuery object to match the current set of elements against. <br>
4055 * * `function` — A function used as a test for each element in the set. this is the current DOM element.
4056 * @see \`{@link https://api.jquery.com/filter/ }\`
4057 * @since 1.0
4058 * @since 1.4
4059 * @example ​ ````Change the color of all divs; then add a border to those with a &quot;middle&quot; class.
4060```html
4061<!doctype html>
4062<html lang="en">
4063<head>
4064 <meta charset="utf-8">
4065 <title>filter demo</title>
4066 <style>
4067 div {
4068 width: 60px;
4069 height: 60px;
4070 margin: 5px;
4071 float: left;
4072 border: 2px white solid;
4073 }
4074 </style>
4075 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4076</head>
4077<body>
4078​
4079<div></div>
4080<div class="middle"></div>
4081<div class="middle"></div>
4082<div class="middle"></div>
4083<div class="middle"></div>
4084<div></div>
4085​
4086<script>
4087$( "div" )
4088 .css( "background", "#c8ebcc" )
4089 .filter( ".middle" )
4090 .css( "border-color", "red" );
4091</script>
4092​
4093</body>
4094</html>
4095```
4096 * @example ​ ````Change the color of all divs; then add a border to the second one (index == 1) and the div with an id of &quot;fourth.&quot;
4097```html
4098<!doctype html>
4099<html lang="en">
4100<head>
4101 <meta charset="utf-8">
4102 <title>filter demo</title>
4103 <style>
4104 div {
4105 width: 60px;
4106 height: 60px;
4107 margin: 5px;
4108 float: left;
4109 border: 3px white solid;
4110 }
4111 </style>
4112 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4113</head>
4114<body>
4115​
4116<div id="first"></div>
4117<div id="second"></div>
4118<div id="third"></div>
4119<div id="fourth"></div>
4120<div id="fifth"></div>
4121<div id="sixth"></div>
4122​
4123<script>
4124$( "div" )
4125 .css( "background", "#b4b0da" )
4126 .filter(function( index ) {
4127 return index === 1 || $( this ).attr( "id" ) === "fourth";
4128 })
4129 .css( "border", "3px double red" );
4130</script>
4131​
4132</body>
4133</html>
4134```
4135 * @example ​ ````Select all divs and filter the selection with a DOM element, keeping only the one with an id of &quot;unique&quot;.
4136```javascript
4137$( "div" ).filter( document.getElementById( "unique" ) );
4138```
4139 * @example ​ ````Select all divs and filter the selection with a jQuery object, keeping only the one with an id of &quot;unique&quot;.
4140```javascript
4141$( "div" ).filter( $( "#unique" ) );
4142```
4143 */
4144 filter(
4145 selector_elements_selection_function:
4146 | JQuery.Selector
4147 | JQuery.TypeOrArray<Element>
4148 | JQuery
4149 | ((this: TElement, index: number, element: TElement) => boolean),
4150 ): this;
4151 /**
4152 * Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
4153 * @param selector_element _&#x40;param_ `selector_element`
4154 * <br>
4155 * * `selector` — A string containing a selector expression to match elements against. <br>
4156 * * `element` — An element or a jQuery object to match elements against.
4157 * @see \`{@link https://api.jquery.com/find/ }\`
4158 * @since 1.0
4159 * @since 1.6
4160 * @example ​ ````Starts with all paragraphs and searches for descendant span elements, same as $( &quot;p span&quot; )
4161```html
4162<!doctype html>
4163<html lang="en">
4164<head>
4165 <meta charset="utf-8">
4166 <title>find demo</title>
4167 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4168</head>
4169<body>
4170​
4171<p><span>Hello</span>, how are you?</p>
4172<p>Me? I'm <span>good</span>.</p>
4173​
4174<script>
4175$( "p" ).find( "span" ).css( "color", "red" );
4176</script>
4177​
4178</body>
4179</html>
4180```
4181 * @example ​ ````A selection using a jQuery collection of all span tags. Only spans within p tags are changed to red while others are left blue.
4182```html
4183<!doctype html>
4184<html lang="en">
4185<head>
4186 <meta charset="utf-8">
4187 <title>find demo</title>
4188 <style>
4189 span {
4190 color: blue;
4191 }
4192 </style>
4193 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4194</head>
4195<body>
4196​
4197<p><span>Hello</span>, how are you?</p>
4198<p>Me? I'm <span>good</span>.</p>
4199<div>Did you <span>eat</span> yet?</div>
4200​
4201<script>
4202var spans = $( "span" );
4203$( "p" ).find( spans ).css( "color", "red" );
4204</script>
4205​
4206</body>
4207</html>
4208```
4209 * @example ​ ````Add spans around each word then add a hover and italicize words with the letter t.
4210```html
4211<!doctype html>
4212<html lang="en">
4213<head>
4214 <meta charset="utf-8">
4215 <title>find demo</title>
4216 <style>
4217 p {
4218 font-size: 20px;
4219 width: 200px;
4220 color: blue;
4221 font-weight: bold;
4222 margin: 0 10px;
4223 }
4224 .hilite {
4225 background: yellow;
4226 }
4227 </style>
4228 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4229</head>
4230<body>
4231​
4232<p>
4233 When the day is short
4234 find that which matters to you
4235 or stop believing
4236</p>
4237​
4238<script>
4239var newText = $( "p" ).text().split( " " ).join( "</span> <span>" );
4240newText = "<span>" + newText + "</span>";
4241​
4242$( "p" )
4243 .html( newText )
4244 .find( "span" )
4245 .hover(function() {
4246 $( this ).addClass( "hilite" );
4247 }, function() {
4248 $( this ).removeClass( "hilite" );
4249 })
4250 .end()
4251 .find( ":contains('t')" )
4252 .css({
4253 "font-style": "italic",
4254 "font-weight": "bolder"
4255 });
4256</script>
4257​
4258</body>
4259</html>
4260```
4261 */
4262 find<K extends keyof HTMLElementTagNameMap>(selector_element: K | JQuery<K>): JQuery<HTMLElementTagNameMap[K]>;
4263 find<K extends keyof SVGElementTagNameMap>(selector_element: K | JQuery<K>): JQuery<SVGElementTagNameMap[K]>;
4264 // eslint-disable-next-line @definitelytyped/no-unnecessary-generics
4265 find<E extends Element = HTMLElement>(selector_element: JQuery.Selector): JQuery<E>;
4266 find<E extends Element = HTMLElement>(selector_element: E | JQuery<E>): JQuery<E>;
4267 /**
4268 * Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.
4269 * @param queue The name of the queue in which to stop animations.
4270 * @see \`{@link https://api.jquery.com/finish/ }\`
4271 * @since 1.9
4272 * @example ​ ````Click the Go button once to start the animation, and then click the other buttons to see how they affect the current and queued animations.
4273```html
4274<!doctype html>
4275<html lang="en">
4276<head>
4277 <meta charset="utf-8">
4278 <title>finish demo</title>
4279 <style>
4280 .box {
4281 position: absolute;
4282 top: 10px;
4283 left: 10px;
4284 width: 15px;
4285 height: 15px;
4286 background: black;
4287 }
4288 #path {
4289 height: 244px;
4290 font-size: 70%;
4291 border-left: 2px dashed red;
4292 border-bottom: 2px dashed green;
4293 border-right: 2px dashed blue;
4294 }
4295 button {
4296 width: 12em;
4297 display: block;
4298 text-align: left;
4299 margin: 0 auto;
4300 }
4301 </style>
4302 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4303</head>
4304<body>
4305​
4306<div class="box"></div>
4307<div id="path">
4308 <button id="go">Go</button>
4309 <br>
4310 <button id="bstt" class="b">.stop( true,true )</button>
4311 <button id="bcf" class="b">.clearQueue().finish()</button>
4312 <br>
4313 <button id="bstf" class="b">.stop( true, false )</button>
4314 <button id="bcs" class="b">.clearQueue().stop()</button>
4315 <br>
4316 <button id="bsff" class="b">.stop( false, false )</button>
4317 <button id="bs" class="b">.stop()</button>
4318 <br>
4319 <button id="bsft" class="b">.stop( false, true )</button>
4320 <br>
4321 <button id="bf" class="b">.finish()</button>
4322</div>
4323​
4324<script>
4325var horiz = $( "#path" ).width() - 20,
4326 vert = $( "#path" ).height() - 20;
4327​
4328var btns = {
4329 bstt: function() {
4330 $( "div.box" ).stop( true, true );
4331 },
4332 bs: function() {
4333 $( "div.box" ).stop();
4334 },
4335 bsft: function() {
4336 $( "div.box" ).stop( false, true );
4337 },
4338 bf: function() {
4339 $( "div.box" ).finish();
4340 },
4341 bcf: function() {
4342 $( "div.box" ).clearQueue().finish();
4343 },
4344 bsff: function() {
4345 $( "div.box" ).stop( false, false );
4346 },
4347 bstf: function() {
4348 $( "div.box" ).stop( true, false );
4349 },
4350 bcs: function() {
4351 $( "div.box" ).clearQueue().stop();
4352 }
4353};
4354​
4355$( "button.b" ).on( "click", function() {
4356 btns[ this.id ]();
4357});
4358​
4359$( "#go" ).on( "click", function() {
4360 $( ".box" )
4361 .clearQueue()
4362 .stop()
4363 .css({
4364 left: 10,
4365 top: 10
4366 })
4367 .animate({
4368 top: vert
4369 }, 3000 )
4370 .animate({
4371 left: horiz
4372 }, 3000 )
4373 .animate({
4374 top: 10
4375 }, 3000 );
4376});
4377</script>
4378​
4379</body>
4380</html>
4381```
4382 */
4383 finish(queue?: string): this;
4384 /**
4385 * Reduce the set of matched elements to the first in the set.
4386 * @see \`{@link https://api.jquery.com/first/ }\`
4387 * @since 1.4
4388 * @example ​ ````Highlight the first span in a paragraph.
4389```html
4390<!doctype html>
4391<html lang="en">
4392<head>
4393 <meta charset="utf-8">
4394 <title>first demo</title>
4395 <style>
4396 .highlight{
4397 background-color: yellow
4398 }
4399 </style>
4400 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4401</head>
4402<body>
4403​
4404<p>
4405 <span>Look:</span>
4406 <span>This is some text in a paragraph.</span>
4407 <span>This is a note about it.</span>
4408</p>
4409​
4410<script>
4411$( "p span" ).first().addClass( "highlight" );
4412</script>
4413​
4414</body>
4415</html>
4416```
4417 */
4418 first(): this;
4419 /**
4420 * Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.
4421 * @param eventData An object containing data that will be passed to the event handler.
4422 * @param handler A function to execute each time the event is triggered.
4423 * @see \`{@link https://api.jquery.com/focus-shorthand/ }\`
4424 * @since 1.4.3
4425 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
4426 *
4427 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
4428 *
4429 * **Solution**: Instead of `.focus(fn)` use `.on("focus", fn)`. Instead of `.focus()` use `.trigger("focus")`.
4430 */
4431 focus<TData>(
4432 eventData: TData,
4433 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "focus">,
4434 ): this;
4435 /**
4436 * Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.
4437 * @param handler A function to execute each time the event is triggered.
4438 * @see \`{@link https://api.jquery.com/focus-shorthand/ }\`
4439 * @since 1.0
4440 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
4441 *
4442 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
4443 *
4444 * **Solution**: Instead of `.focus(fn)` use `.on("focus", fn)`. Instead of `.focus()` use `.trigger("focus")`.
4445 * @example ​ ````Fire focus.
4446```html
4447<!doctype html>
4448<html lang="en">
4449<head>
4450 <meta charset="utf-8">
4451 <title>focus demo</title>
4452 <style>
4453 span {
4454 display: none;
4455 }
4456 </style>
4457 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4458</head>
4459<body>
4460​
4461<p><input type="text"> <span>focus fire</span></p>
4462<p><input type="password"> <span>focus fire</span></p>
4463​
4464<script>
4465$( "input" ).focus(function() {
4466 $( this ).next( "span" ).css( "display", "inline" ).fadeOut( 1000 );
4467});
4468</script>
4469​
4470</body>
4471</html>
4472```
4473 * @example ​ ````To stop people from writing in text input boxes, try:
4474```javascript
4475$( "input[type=text]" ).focus(function() {
4476 $( this ).blur();
4477});
4478```
4479 * @example ​ ````To focus on a login input box with id &#39;login&#39; on page startup, try:
4480```javascript
4481$( document ).ready(function() {
4482 $( "#login" ).focus();
4483});
4484```
4485 */
4486 focus(
4487 handler?:
4488 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "focus">
4489 | false,
4490 ): this;
4491 /**
4492 * Bind an event handler to the "focusin" event.
4493 * @param eventData An object containing data that will be passed to the event handler.
4494 * @param handler A function to execute each time the event is triggered.
4495 * @see \`{@link https://api.jquery.com/focusin-shorthand/ }\`
4496 * @since 1.4.3
4497 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
4498 *
4499 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
4500 *
4501 * **Solution**: Instead of `.focusin(fn)` use `.on("focusin", fn)`. Instead of `.focusin()` use `.trigger("focusin")`.
4502 */
4503 focusin<TData>(
4504 eventData: TData,
4505 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "focusin">,
4506 ): this;
4507 /**
4508 * Bind an event handler to the "focusin" event.
4509 * @param handler A function to execute each time the event is triggered.
4510 * @see \`{@link https://api.jquery.com/focusin-shorthand/ }\`
4511 * @since 1.4
4512 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
4513 *
4514 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
4515 *
4516 * **Solution**: Instead of `.focusin(fn)` use `.on("focusin", fn)`. Instead of `.focusin()` use `.focusin("click")`.
4517 * @example ​ ````Watch for a focus to occur within the paragraphs on the page.
4518```html
4519<!doctype html>
4520<html lang="en">
4521<head>
4522 <meta charset="utf-8">
4523 <title>focusin demo</title>
4524 <style>
4525 span {
4526 display: none;
4527 }
4528 </style>
4529 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4530</head>
4531<body>
4532​
4533<p><input type="text"> <span>focusin fire</span></p>
4534<p><input type="password"> <span>focusin fire</span></p>
4535​
4536<script>
4537$( "p" ).focusin(function() {
4538 $( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );
4539});
4540</script>
4541​
4542</body>
4543</html>
4544```
4545 */
4546 focusin(
4547 handler?:
4548 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "focusin">
4549 | false,
4550 ): this;
4551 /**
4552 * Bind an event handler to the "focusout" JavaScript event.
4553 * @param eventData An object containing data that will be passed to the event handler.
4554 * @param handler A function to execute each time the event is triggered.
4555 * @see \`{@link https://api.jquery.com/focusout/ }\`
4556 * @since 1.4.3
4557 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
4558 *
4559 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
4560 *
4561 * **Solution**: Instead of `.focusout(fn)` use `.on("focusout", fn)`. Instead of `.focusout()` use `.trigger("focusout")`.
4562 */
4563 focusout<TData>(
4564 eventData: TData,
4565 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "focusout">,
4566 ): this;
4567 /**
4568 * Bind an event handler to the "focusout" JavaScript event.
4569 * @param handler A function to execute each time the event is triggered.
4570 * @see \`{@link https://api.jquery.com/focusout/ }\`
4571 * @since 1.4
4572 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
4573 *
4574 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
4575 *
4576 * **Solution**: Instead of `.focusout(fn)` use `.on("focusout", fn)`. Instead of `.focusout()` use `.trigger("focusout")`.
4577 * @example ​ ````Watch for a loss of focus to occur inside paragraphs and note the difference between the focusout count and the blur count. (The blur count does not change because those events do not bubble.)
4578```html
4579<!doctype html>
4580<html lang="en">
4581<head>
4582 <meta charset="utf-8">
4583 <title>focusout demo</title>
4584 <style>
4585 .inputs {
4586 float: left;
4587 margin-right: 1em;
4588 }
4589 .inputs p {
4590 margin-top: 0;
4591 }
4592 </style>
4593 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4594</head>
4595<body>
4596​
4597<div class="inputs">
4598 <p>
4599 <input type="text"><br>
4600 <input type="text">
4601 </p>
4602 <p>
4603 <input type="password">
4604 </p>
4605</div>
4606<div id="focus-count">focusout fire</div>
4607<div id="blur-count">blur fire</div>
4608​
4609<script>
4610var focus = 0,
4611 blur = 0;
4612$( "p" )
4613 .focusout(function() {
4614 focus++;
4615 $( "#focus-count" ).text( "focusout fired: " + focus + "x" );
4616 })
4617 .blur(function() {
4618 blur++;
4619 $( "#blur-count" ).text( "blur fired: " + blur + "x" );
4620 });
4621</script>
4622​
4623</body>
4624</html>
4625```
4626 */
4627 focusout(
4628 handler?:
4629 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "focusout">
4630 | false,
4631 ): this;
4632 /**
4633 * Retrieve one of the elements matched by the jQuery object.
4634 * @param index A zero-based integer indicating which element to retrieve.
4635 * @see \`{@link https://api.jquery.com/get/ }\`
4636 * @since 1.0
4637 * @example ​ ````Display the tag name of the click element.
4638```html
4639<!doctype html>
4640<html lang="en">
4641<head>
4642 <meta charset="utf-8">
4643 <title>get demo</title>
4644 <style>
4645 span {
4646 color: red;
4647 }
4648 div {
4649 background: yellow;
4650 }
4651 </style>
4652 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4653</head>
4654<body>
4655​
4656<span>&nbsp;</span>
4657<p>In this paragraph is an <span>important</span> section</p>
4658<div><input type="text"></div>
4659​
4660<script>
4661$( "*", document.body ).click(function( event ) {
4662 event.stopPropagation();
4663 var domElement = $( this ).get( 0 );
4664 $( "span:first" ).text( "Clicked on - " + domElement.nodeName );
4665});
4666</script>
4667​
4668</body>
4669</html>
4670```
4671 */
4672 get(index: number): TElement | undefined;
4673 /**
4674 * Retrieve the elements matched by the jQuery object. If the value of index is out of bounds — less than the negative number of elements or equal to or greater than the number of elements — it returns undefined.
4675 * @see \`{@link https://api.jquery.com/get/ }\`
4676 * @since 1.0
4677 * @example ​ ````Select all divs in the document and return the DOM Elements as an Array; then use the built-in reverse() method to reverse that array.
4678```html
4679<!doctype html>
4680<html lang="en">
4681<head>
4682 <meta charset="utf-8">
4683 <title>get demo</title>
4684 <style>
4685 span {
4686 color: red;
4687 }
4688 </style>
4689 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4690</head>
4691<body>
4692​
4693Reversed - <span></span>
4694​
4695<div>One</div>
4696<div>Two</div>
4697<div>Three</div>
4698​
4699<script>
4700function display( divs ) {
4701 var a = [];
4702 for ( var i = 0; i < divs.length; i++ ) {
4703 a.push( divs[ i ].innerHTML );
4704 }
4705 $( "span" ).text( a.join(" ") );
4706}
4707display( $( "div" ).get().reverse() );
4708</script>
4709​
4710</body>
4711</html>
4712```
4713 */
4714 get(): TElement[];
4715 /**
4716 * Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
4717 * @param selector_contained _&#x40;param_ `selector_contained`
4718 * <br>
4719 * * `selector` — A string containing a selector expression to match elements against. <br>
4720 * * `contained` — A DOM element to match elements against.
4721 * @see \`{@link https://api.jquery.com/has/ }\`
4722 * @since 1.4
4723 * @example ​ ````Check if an element is inside another.
4724```html
4725<!doctype html>
4726<html lang="en">
4727<head>
4728 <meta charset="utf-8">
4729 <title>has demo</title>
4730 <style>
4731 .full {
4732 border: 1px solid red;
4733 }
4734 </style>
4735 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4736</head>
4737<body>
4738​
4739<ul><li>Does the UL contain an LI?</li></ul>
4740​
4741<script>
4742$( "ul" ).append( "<li>" +
4743 ( $( "ul" ).has( "li" ).length ? "Yes" : "No" ) +
4744 "</li>" );
4745$( "ul" ).has( "li" ).addClass( "full" );
4746</script>
4747​
4748</body>
4749</html>
4750```
4751 */
4752 has(selector_contained: string | Element): this;
4753 /**
4754 * Determine whether any of the matched elements are assigned the given class.
4755 * @param className The class name to search for.
4756 * @see \`{@link https://api.jquery.com/hasClass/ }\`
4757 * @since 1.2
4758 * @example ​ ````Looks for the paragraph that contains &#39;selected&#39; as a class.
4759```html
4760<!doctype html>
4761<html lang="en">
4762<head>
4763 <meta charset="utf-8">
4764 <title>hasClass demo</title>
4765 <style>
4766 p {
4767 margin: 8px;
4768 font-size: 16px;
4769 }
4770 .selected {
4771 color: red;
4772 }
4773 </style>
4774 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4775</head>
4776<body>
4777​
4778<p>This paragraph is black and is the first paragraph.</p>
4779<p class="selected">This paragraph is red and is the second paragraph.</p>
4780<div id="result1">First paragraph has selected class: </div>
4781<div id="result2">Second paragraph has selected class: </div>
4782<div id="result3">At least one paragraph has selected class: </div>
4783​
4784<script>
4785$( "#result1" ).append( $( "p:first" ).hasClass( "selected" ).toString() );
4786$( "#result2" ).append( $( "p:last" ).hasClass( "selected" ).toString() );
4787$( "#result3" ).append( $( "p" ).hasClass( "selected" ).toString() ) ;
4788</script>
4789​
4790</body>
4791</html>
4792```
4793 */
4794 hasClass(className: string): boolean;
4795 /**
4796 * Set the CSS height of every matched element.
4797 * @param value_function _&#x40;param_ `value_function`
4798 * <br>
4799 * * `value` — An integer representing the number of pixels, or an integer with an optional unit of measure
4800 * appended (as a string). <br>
4801 * * `function` — A function returning the height to set. Receives the index position of the element in the set and
4802 * the old height as arguments. Within the function, `this` refers to the current element in the set.
4803 * @see \`{@link https://api.jquery.com/height/ }\`
4804 * @since 1.0
4805 * @since 1.4.1
4806 * @example ​ ````To set the height of each div on click to 30px plus a color change.
4807```html
4808<!doctype html>
4809<html lang="en">
4810<head>
4811 <meta charset="utf-8">
4812 <title>height demo</title>
4813 <style>
4814 div {
4815 width: 50px;
4816 height: 70px;
4817 float: left;
4818 margin: 5px;
4819 background: rgb(255,140,0);
4820 cursor: pointer;
4821 }
4822 </style>
4823 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4824</head>
4825<body>
4826​
4827<div></div>
4828<div></div>
4829<div></div>
4830<div></div>
4831<div></div>
4832​
4833<script>
4834$( "div" ).one( "click", function() {
4835 $( this ).height( 30 ).css({
4836 cursor: "auto",
4837 backgroundColor: "green"
4838 });
4839});
4840</script>
4841​
4842</body>
4843</html>
4844```
4845 */
4846 height(
4847 value_function: string | number | ((this: TElement, index: number, height: number) => string | number),
4848 ): this;
4849 /**
4850 * Get the current computed height for the first element in the set of matched elements.
4851 * @see \`{@link https://api.jquery.com/height/ }\`
4852 * @since 1.0
4853 * @example ​ ````Show various heights. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.
4854```html
4855<!doctype html>
4856<html lang="en">
4857<head>
4858 <meta charset="utf-8">
4859 <title>height demo</title>
4860 <style>
4861 body {
4862 background: yellow;
4863 }
4864 button {
4865 font-size: 12px;
4866 margin: 2px;
4867 }
4868 p {
4869 width: 150px;
4870 border: 1px red solid;
4871 }
4872 div {
4873 color: red;
4874 font-weight: bold;
4875 }
4876 </style>
4877 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4878</head>
4879<body>
4880​
4881<button id="getp">Get Paragraph Height</button>
4882<button id="getd">Get Document Height</button>
4883<button id="getw">Get Window Height</button>
4884​
4885<div>&nbsp;</div>
4886<p>
4887 Sample paragraph to test height
4888</p>
4889​
4890<script>
4891function showHeight( element, height ) {
4892 $( "div" ).text( "The height for the " + element + " is " + height + "px." );
4893}
4894$( "#getp" ).click(function() {
4895 showHeight( "paragraph", $( "p" ).height() );
4896});
4897$( "#getd" ).click(function() {
4898 showHeight( "document", $( document ).height() );
4899});
4900$( "#getw" ).click(function() {
4901 showHeight( "window", $( window ).height() );
4902});
4903</script>
4904​
4905</body>
4906</html>
4907```
4908 */
4909 height(): number | undefined;
4910 /**
4911 * Hide the matched elements.
4912 * @param duration A string or number determining how long the animation will run.
4913 * @param easing A string indicating which easing function to use for the transition.
4914 * @param complete A function to call once the animation is complete, called once per matched element.
4915 * @see \`{@link https://api.jquery.com/hide/ }\`
4916 * @since 1.4.3
4917 */
4918 hide(duration: JQuery.Duration, easing: string, complete: (this: TElement) => void): this;
4919 /**
4920 * Hide the matched elements.
4921 * @param duration A string or number determining how long the animation will run.
4922 * @param easing_complete _&#x40;param_ `easing_complete`
4923 * <br>
4924 * * `easing` — A string indicating which easing function to use for the transition. <br>
4925 * * `complete` — A function to call once the animation is complete, called once per matched element.
4926 * @see \`{@link https://api.jquery.com/hide/ }\`
4927 * @since 1.0
4928 * @since 1.4.3
4929 * @example ​ ````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.
4930```html
4931<!doctype html>
4932<html lang="en">
4933<head>
4934 <meta charset="utf-8">
4935 <title>hide demo</title>
4936 <style>
4937 span {
4938 background: #def3ca;
4939 padding: 3px;
4940 float: left;
4941 }
4942 </style>
4943 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4944</head>
4945<body>
4946​
4947<button id="hider">Hide</button>
4948<button id="shower">Show</button>
4949<div>
4950 <span>Once</span> <span>upon</span> <span>a</span>
4951 <span>time</span> <span>there</span> <span>were</span>
4952 <span>three</span> <span>programmers...</span>
4953</div>
4954​
4955<script>
4956$( "#hider" ).click(function() {
4957 $( "span:last-child" ).hide( "fast", function() {
4958 // Use arguments.callee so we don't need a named function
4959 $( this ).prev().hide( "fast", arguments.callee );
4960 });
4961});
4962$( "#shower" ).click(function() {
4963 $( "span" ).show( 2000 );
4964});
4965</script>
4966​
4967</body>
4968</html>
4969```
4970 * @example ​ ````Hides the divs when clicked over 2 seconds, then removes the div element when its hidden. Try clicking on more than one box at a time.
4971```html
4972<!doctype html>
4973<html lang="en">
4974<head>
4975 <meta charset="utf-8">
4976 <title>hide demo</title>
4977 <style>
4978 div {
4979 background: #ece023;
4980 width: 30px;
4981 height: 40px;
4982 margin: 2px;
4983 float: left;
4984 }
4985 </style>
4986 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
4987</head>
4988<body>
4989​
4990<div></div>
4991​
4992<script>
4993for ( var i = 0; i < 5; i++ ) {
4994 $( "<div>" ).appendTo( document.body );
4995}
4996$( "div" ).click(function() {
4997 $( this ).hide( 2000, function() {
4998 $( this ).remove();
4999 });
5000});
5001</script>
5002​
5003</body>
5004</html>
5005```
5006 */
5007 hide(duration: JQuery.Duration, easing_complete: string | ((this: TElement) => void)): this;
5008 /**
5009 * Hide the matched elements.
5010 * @param duration_complete_options _&#x40;param_ `duration_complete_options`
5011 * <br>
5012 * * `duration` — A string or number determining how long the animation will run. <br>
5013 * * `complete` — A function to call once the animation is complete, called once per matched element. <br>
5014 * * `options` — A map of additional options to pass to the method.
5015 * @see \`{@link https://api.jquery.com/hide/ }\`
5016 * @since 1.0
5017 * @example ​ ````Hides all paragraphs then the link on click.
5018```html
5019<!doctype html>
5020<html lang="en">
5021<head>
5022 <meta charset="utf-8">
5023 <title>hide demo</title>
5024 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5025</head>
5026<body>
5027​
5028<p>Hello</p>
5029<a href="#">Click to hide me too</a>
5030<p>Here is another paragraph</p>
5031​
5032<script>
5033$( "p" ).hide();
5034$( "a" ).click(function( event ) {
5035 event.preventDefault();
5036 $( this ).hide();
5037});
5038</script>
5039​
5040</body>
5041</html>
5042```
5043 * @example ​ ````Animates all shown paragraphs to hide slowly, completing the animation within 600 milliseconds.
5044```html
5045<!doctype html>
5046<html lang="en">
5047<head>
5048 <meta charset="utf-8">
5049 <title>hide demo</title>
5050 <style>
5051 p {
5052 background: #dad;
5053 font-weight: bold;
5054 }
5055 </style>
5056 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5057</head>
5058<body>
5059​
5060<button>Hide 'em</button>
5061<p>Hiya</p>
5062<p>Such interesting text, eh?</p>
5063​
5064<script>
5065$( "button" ).click(function() {
5066 $( "p" ).hide( "slow" );
5067});
5068</script>
5069​
5070</body>
5071</html>
5072```
5073 */
5074 hide(
5075 duration_complete_options?: JQuery.Duration | ((this: TElement) => void) | JQuery.EffectsOptions<TElement>,
5076 ): this;
5077 /**
5078 * Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
5079 * @param handlerIn A function to execute when the mouse pointer enters the element.
5080 * @param handlerOut A function to execute when the mouse pointer leaves the element.
5081 * @see \`{@link https://api.jquery.com/hover/ }\`
5082 * @since 1.0
5083 * @deprecated ​ Deprecated.
5084 *
5085 * **Cause**: The `.hover()` method is a shorthand for the use of the `mouseover`/`mouseout` events. It is often a poor user interface choice because it does not allow for any small amounts of delay between when the mouse enters or exits an area and when the event fires. This can make it quite difficult to use with UI widgets such as drop-down menus. For more information on the problems of hovering, see the \`{@link http://cherne.net/brian/resources/jquery.hoverIntent.html hoverIntent plugin}\`.
5086 *
5087 * **Solution**: Review uses of `.hover()` to determine if they are appropriate, and consider use of plugins such as `hoverIntent` as an alternative. The direct replacement for `.hover(fn1, fn2)`, is `.on("mouseenter", fn1).on("mouseleave", fn2)`.
5088 * @example ​ ````To add a special style to list items that are being hovered over, try:
5089```html
5090<!doctype html>
5091<html lang="en">
5092<head>
5093 <meta charset="utf-8">
5094 <title>hover demo</title>
5095 <style>
5096 ul {
5097 margin-left: 20px;
5098 color: blue;
5099 }
5100 li {
5101 cursor: default;
5102 }
5103 span {
5104 color: red;
5105 }
5106 </style>
5107 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5108</head>
5109<body>
5110​
5111<ul>
5112 <li>Milk</li>
5113 <li>Bread</li>
5114 <li class="fade">Chips</li>
5115 <li class="fade">Socks</li>
5116</ul>
5117​
5118<script>
5119$( "li" ).hover(
5120 function() {
5121 $( this ).append( $( "<span> ***</span>" ) );
5122 }, function() {
5123 $( this ).find( "span:last" ).remove();
5124 }
5125);
5126​
5127$( "li.fade" ).hover(function() {
5128 $( this ).fadeOut( 100 );
5129 $( this ).fadeIn( 500 );
5130});
5131</script>
5132​
5133</body>
5134</html>
5135```
5136 * @example ​ ````To add a special style to table cells that are being hovered over, try:
5137```javascript
5138$( "td" ).hover(
5139 function() {
5140 $( this ).addClass( "hover" );
5141 }, function() {
5142 $( this ).removeClass( "hover" );
5143 }
5144);
5145```
5146 * @example ​ ````To unbind the above example use:
5147```javascript
5148$( "td" ).off( "mouseenter mouseleave" );
5149```
5150 */
5151 hover(
5152 handlerIn:
5153 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "mouseenter">
5154 | false,
5155 handlerOut:
5156 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "mouseleave">
5157 | false,
5158 ): this;
5159 /**
5160 * Bind a single handler to the matched elements, to be executed when the mouse pointer enters or leaves the elements.
5161 * @param handlerInOut A function to execute when the mouse pointer enters or leaves the element.
5162 * @see \`{@link https://api.jquery.com/hover/ }\`
5163 * @since 1.4
5164 * @deprecated ​ Deprecated.
5165 *
5166 * **Cause**: The `.hover()` method is a shorthand for the use of the `mouseover`/`mouseout` events. It is often a poor user interface choice because it does not allow for any small amounts of delay between when the mouse enters or exits an area and when the event fires. This can make it quite difficult to use with UI widgets such as drop-down menus. For more information on the problems of hovering, see the \`{@link http://cherne.net/brian/resources/jquery.hoverIntent.html hoverIntent plugin}\`.
5167 *
5168 * **Solution**: Review uses of `.hover()` to determine if they are appropriate, and consider use of plugins such as `hoverIntent` as an alternative. The direct replacement for `.hover(fn1, fn2)`, is `.on("mouseenter", fn1).on("mouseleave", fn2)`.
5169 * @example ​ ````Slide the next sibling LI up or down on hover, and toggle a class.
5170```html
5171<!doctype html>
5172<html lang="en">
5173<head>
5174 <meta charset="utf-8">
5175 <title>hover demo</title>
5176 <style>
5177 ul {
5178 margin-left: 20px;
5179 color: blue;
5180 }
5181 li {
5182 cursor: default;
5183 }
5184 li.active {
5185 background: black;
5186 color: white;
5187 }
5188 span {
5189 color:red;
5190 }
5191 </style>
5192 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5193</head>
5194<body>
5195​
5196<ul>
5197 <li>Milk</li>
5198 <li>White</li>
5199 <li>Carrots</li>
5200 <li>Orange</li>
5201 <li>Broccoli</li>
5202 <li>Green</li>
5203</ul>
5204​
5205<script>
5206$( "li" )
5207 .filter( ":odd" )
5208 .hide()
5209 .end()
5210 .filter( ":even" )
5211 .hover(function() {
5212 $( this )
5213 .toggleClass( "active" )
5214 .next()
5215 .stop( true, true )
5216 .slideToggle();
5217 });
5218</script>
5219​
5220</body>
5221</html>
5222```
5223 */
5224 hover(
5225 handlerInOut:
5226 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "mouseenter" | "mouseleave">
5227 | false,
5228 ): this;
5229 /**
5230 * Set the HTML contents of each element in the set of matched elements.
5231 * @param htmlString_function _&#x40;param_ `htmlString_function`
5232 * <br>
5233 * * `htmlString` — A string of HTML to set as the content of each matched element. <br>
5234 * * `function` — A function returning the HTML content to set. Receives the index position of the element in the set
5235 * and the old HTML value as arguments. jQuery empties the element before calling the function; use the
5236 * oldhtml argument to reference the previous content. Within the function, `this` refers to the current
5237 * element in the set.
5238 * @see \`{@link https://api.jquery.com/html/ }\`
5239 * @since 1.0
5240 * @since 1.4
5241 * @example ​ ````Add some html to each div.
5242```html
5243<!doctype html>
5244<html lang="en">
5245<head>
5246 <meta charset="utf-8">
5247 <title>html demo</title>
5248 <style>
5249 .red {
5250 color: red;
5251 }
5252 </style>
5253 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5254</head>
5255<body>
5256​
5257<span>Hello</span>
5258<div></div>
5259<div></div>
5260<div></div>
5261​
5262<script>
5263$( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );
5264</script>
5265​
5266</body>
5267</html>
5268```
5269 * @example ​ ````Add some html to each div then immediately do further manipulations to the inserted html.
5270```html
5271<!doctype html>
5272<html lang="en">
5273<head>
5274 <meta charset="utf-8">
5275 <title>html demo</title>
5276 <style>
5277 div {
5278 color: blue;
5279 font-size: 18px;
5280 }
5281 </style>
5282 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5283</head>
5284<body>
5285​
5286<div></div>
5287<div></div>
5288<div></div>
5289​
5290<script>
5291$( "div" ).html( "<b>Wow!</b> Such excitement..." );
5292$( "div b" )
5293 .append( document.createTextNode( "!!!" ) )
5294 .css( "color", "red" );
5295</script>
5296​
5297</body>
5298</html>
5299```
5300 */
5301 html(
5302 htmlString_function:
5303 | JQuery.htmlString
5304 | JQuery.Node
5305 | ((this: TElement, index: number, oldhtml: JQuery.htmlString) => JQuery.htmlString | JQuery.Node),
5306 ): this;
5307 /**
5308 * Get the HTML contents of the first element in the set of matched elements.
5309 * @see \`{@link https://api.jquery.com/html/ }\`
5310 * @since 1.0
5311 * @example ​ ````Click a paragraph to convert it from html to text.
5312```html
5313<!doctype html>
5314<html lang="en">
5315<head>
5316 <meta charset="utf-8">
5317 <title>html demo</title>
5318 <style>
5319 p {
5320 margin: 8px;
5321 font-size: 20px;
5322 color: blue;
5323 cursor: pointer;
5324 }
5325 b {
5326 text-decoration: underline;
5327 }
5328 button {
5329 cursor: pointer;
5330 }
5331 </style>
5332 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5333</head>
5334<body>
5335​
5336<p>
5337 <b>Click</b> to change the <span id="tag">html</span>
5338</p>
5339<p>
5340 to a <span id="text">text</span> node.
5341</p>
5342<p>
5343 This <button name="nada">button</button> does nothing.
5344</p>
5345​
5346<script>
5347$( "p" ).click(function() {
5348 var htmlString = $( this ).html();
5349 $( this ).text( htmlString );
5350});
5351</script>
5352​
5353</body>
5354</html>
5355```
5356 */
5357 html(): string;
5358 /**
5359 * Search for a given element from among the matched elements.
5360 * @param selector_element _&#x40;param_ `selector_element`
5361 * <br>
5362 * * `selector` — A selector representing a jQuery collection in which to look for an element. <br>
5363 * * `element` — The DOM element or first element within the jQuery object to look for.
5364 * @see \`{@link https://api.jquery.com/index/ }\`
5365 * @since 1.0
5366 * @since 1.4
5367 * @example ​ ````On click, returns the index (zero-based) of that div in the page.
5368```html
5369<!doctype html>
5370<html lang="en">
5371<head>
5372 <meta charset="utf-8">
5373 <title>index demo</title>
5374 <style>
5375 div {
5376 background: yellow;
5377 margin: 5px;
5378 }
5379 span {
5380 color: red;
5381 }
5382 </style>
5383 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5384</head>
5385<body>
5386​
5387<span>Click a div!</span>
5388<div>First div</div>
5389<div>Second div</div>
5390<div>Third div</div>
5391​
5392<script>
5393$( "div" ).click(function() {
5394 // `this` is the DOM element that was clicked
5395 var index = $( "div" ).index( this );
5396 $( "span" ).text( "That was div index #" + index );
5397});
5398</script>
5399​
5400</body>
5401</html>
5402```
5403 * @example ​ ````Returns the index for the element with ID bar.
5404```html
5405<!doctype html>
5406<html lang="en">
5407<head>
5408 <meta charset="utf-8">
5409 <title>index demo</title>
5410 <style>
5411 div {
5412 font-weight: bold;
5413 color: #090;
5414 }
5415 </style>
5416 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5417</head>
5418<body>
5419​
5420<ul>
5421 <li id="foo">foo</li>
5422 <li id="bar">bar</li>
5423 <li id="baz">baz</li>
5424</ul>
5425<div></div>
5426​
5427<script>
5428var listItem = $( "#bar" );
5429$( "div" ).html( "Index: " + $( "li" ).index( listItem ) );
5430</script>
5431​
5432</body>
5433</html>
5434```
5435 * @example ​ ````Returns the index for the first item in the jQuery collection.
5436```html
5437<!doctype html>
5438<html lang="en">
5439<head>
5440 <meta charset="utf-8">
5441 <title>index demo</title>
5442 <style>
5443 div {
5444 font-weight: bold;
5445 color: #090;
5446 }
5447 </style>
5448 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5449</head>
5450<body>
5451​
5452<ul>
5453 <li id="foo">foo</li>
5454 <li id="bar">bar</li>
5455 <li id="baz">baz</li>
5456</ul>
5457<div></div>
5458​
5459<script>
5460var listItems = $( "li:gt(0)" );
5461$( "div" ).html( "Index: " + $( "li" ).index( listItems ) );
5462</script>
5463​
5464</body>
5465</html>
5466```
5467 * @example ​ ````Returns the index for the element with ID bar in relation to all &lt;li&gt; elements.
5468```html
5469<!doctype html>
5470<html lang="en">
5471<head>
5472 <meta charset="utf-8">
5473 <title>index demo</title>
5474 <style>
5475 div {
5476 font-weight: bold;
5477 color: #090;
5478 }
5479 </style>
5480 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5481</head>
5482<body>
5483​
5484<ul>
5485 <li id="foo">foo</li>
5486 <li id="bar">bar</li>
5487 <li id="baz">baz</li>
5488</ul>
5489<div></div>
5490​
5491<script>
5492$( "div" ).html( "Index: " + $( "#bar" ).index( "li" ) );
5493</script>
5494​
5495</body>
5496</html>
5497```
5498 * @example ​ ````Returns the index for the element with ID bar in relation to its siblings.
5499```html
5500<!doctype html>
5501<html lang="en">
5502<head>
5503 <meta charset="utf-8">
5504 <title>index demo</title>
5505 <style>
5506 div {
5507 font-weight: bold;
5508 color: #090;
5509 }
5510 </style>
5511 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5512</head>
5513<body>
5514​
5515<ul>
5516 <li id="foo">foo</li>
5517 <li id="bar">bar</li>
5518 <li id="baz">baz</li>
5519</ul>
5520<div></div>
5521​
5522<script>
5523var barIndex = $( "#bar" ).index();
5524$( "div" ).html( "Index: " + barIndex );
5525</script>
5526​
5527</body>
5528</html>
5529```
5530 * @example ​ ````Returns -1, as there is no element with ID foobar.
5531```html
5532<!doctype html>
5533<html lang="en">
5534<head>
5535 <meta charset="utf-8">
5536 <title>index demo</title>
5537 <style>
5538 div {
5539 font-weight: bold;
5540 color: #090;
5541 }
5542 </style>
5543 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5544</head>
5545<body>
5546​
5547<ul>
5548 <li id="foo">foo</li>
5549 <li id="bar">bar</li>
5550 <li id="baz">baz</li>
5551</ul>
5552<div></div>
5553​
5554<script>
5555var foobar = $( "li" ).index( $( "#foobar" ) );
5556$( "div" ).html( "Index: " + foobar );
5557</script>
5558​
5559</body>
5560</html>
5561```
5562 */
5563 index(selector_element?: JQuery.Selector | Element | JQuery): number;
5564 /**
5565 * Set the CSS inner height of each element in the set of matched elements.
5566 * @param value_function _&#x40;param_ `value_function`
5567 * <br>
5568 * * `value` — A number representing the number of pixels, or a number along with an optional unit of measure
5569 * appended (as a string). <br>
5570 * * `function` — A function returning the inner height (including padding but not border) to set. Receives the index
5571 * position of the element in the set and the old inner height as arguments. Within the function, `this`
5572 * refers to the current element in the set.
5573 * @see \`{@link https://api.jquery.com/innerHeight/ }\`
5574 * @since 1.8.0
5575 * @example ​ ````Change the inner height of each div the first time it is clicked (and change its color).
5576```html
5577<!doctype html>
5578<html lang="en">
5579<head>
5580 <meta charset="utf-8">
5581 <title>innerHeight demo</title>
5582 <style>
5583div {
5584 width: 60px;
5585 padding: 10px;
5586 height: 70px;
5587 float: left;
5588 margin: 5px;
5589 background: red;
5590 cursor: pointer;
5591}
5592.mod {
5593 background: blue;
5594 cursor: default;
5595}
5596 </style>
5597 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5598</head>
5599<body>
5600​
5601<div>d</div>
5602<div>d</div>
5603<div>d</div>
5604<div>d</div>
5605<div>d</div>
5606​
5607<script>
5608var modHeight = 70;
5609$( "div" ).one( "click", function() {
5610 $( this ).innerHeight( modHeight ).addClass( "mod" );
5611 modHeight -= 8;
5612});
5613</script>
5614​
5615</body>
5616</html>
5617```
5618 */
5619 innerHeight(
5620 value_function: string | number | ((this: TElement, index: number, height: number) => string | number),
5621 ): this;
5622 /**
5623 * Get the current computed height for the first element in the set of matched elements, including padding but not border.
5624 * @see \`{@link https://api.jquery.com/innerHeight/ }\`
5625 * @since 1.2.6
5626 * @example ​ ````Get the innerHeight of a paragraph.
5627```html
5628<!doctype html>
5629<html lang="en">
5630<head>
5631 <meta charset="utf-8">
5632 <title>innerHeight demo</title>
5633 <style>
5634 p {
5635 margin: 10px;
5636 padding: 5px;
5637 border: 2px solid #666;
5638 }
5639 </style>
5640 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5641</head>
5642<body>
5643​
5644<p>Hello</p>
5645<p></p>
5646​
5647<script>
5648var p = $( "p:first" );
5649$( "p:last" ).text( "innerHeight:" + p.innerHeight() );
5650</script>
5651​
5652</body>
5653</html>
5654```
5655 */
5656 innerHeight(): number | undefined;
5657 /**
5658 * Set the CSS inner width of each element in the set of matched elements.
5659 * @param value_function _&#x40;param_ `value_function`
5660 * <br>
5661 * * `value` — A number representing the number of pixels, or a number along with an optional unit of measure
5662 * appended (as a string). <br>
5663 * * `function` — A function returning the inner width (including padding but not border) to set. Receives the index
5664 * position of the element in the set and the old inner width as arguments. Within the function, `this`
5665 * refers to the current element in the set.
5666 * @see \`{@link https://api.jquery.com/innerWidth/ }\`
5667 * @since 1.8.0
5668 * @example ​ ````Change the inner width of each div the first time it is clicked (and change its color).
5669```html
5670<!doctype html>
5671<html lang="en">
5672<head>
5673 <meta charset="utf-8">
5674 <title>innerWidth demo</title>
5675 <style>
5676div {
5677width: 60px;
5678padding: 10px;
5679height: 50px;
5680float: left;
5681margin: 5px;
5682background: red;
5683cursor: pointer;
5684}
5685.mod {
5686background: blue;
5687cursor: default;
5688}
5689 </style>
5690 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5691</head>
5692<body>
5693​
5694<div>d</div>
5695<div>d</div>
5696<div>d</div>
5697<div>d</div>
5698<div>d</div>
5699​
5700<script>
5701var modWidth = 60;
5702$( "div" ).one( "click", function() {
5703$( this ).innerWidth( modWidth ).addClass( "mod" );
5704modWidth -= 8;
5705});
5706</script>
5707​
5708</body>
5709</html>
5710```
5711 */
5712 innerWidth(
5713 value_function: string | number | ((this: TElement, index: number, width: number) => string | number),
5714 ): this;
5715 /**
5716 * Get the current computed inner width for the first element in the set of matched elements, including padding but not border.
5717 * @see \`{@link https://api.jquery.com/innerWidth/ }\`
5718 * @since 1.2.6
5719 * @example ​ ````Get the innerWidth of a paragraph.
5720```html
5721<!doctype html>
5722<html lang="en">
5723<head>
5724 <meta charset="utf-8">
5725 <title>innerWidth demo</title>
5726 <style>
5727 p {
5728 margin: 10px;
5729 padding: 5px;
5730 border: 2px solid #666;
5731 }
5732 </style>
5733 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5734</head>
5735<body>
5736​
5737<p>Hello</p>
5738<p></p>
5739​
5740<script>
5741var p = $( "p:first" );
5742$( "p:last" ).text( "innerWidth:" + p.innerWidth() );
5743</script>
5744​
5745</body>
5746</html>
5747```
5748 */
5749 innerWidth(): number | undefined;
5750 /**
5751 * Insert every element in the set of matched elements after the target.
5752 * @param target A selector, element, array of elements, HTML string, or jQuery object; the matched set of elements
5753 * will be inserted after the element(s) specified by this parameter.
5754 * @see \`{@link https://api.jquery.com/insertAfter/ }\`
5755 * @since 1.0
5756 * @example ​ ````Insert all paragraphs after an element with id of &quot;foo&quot;. Same as $( &quot;#foo&quot; ).after( &quot;p&quot; )
5757```html
5758<!doctype html>
5759<html lang="en">
5760<head>
5761 <meta charset="utf-8">
5762 <title>insertAfter demo</title>
5763 <style>
5764 #foo {
5765 background: yellow;
5766 }
5767 </style>
5768 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5769</head>
5770<body>
5771​
5772<p> is what I said... </p>
5773<div id="foo">FOO!</div>
5774​
5775<script>
5776$( "p" ).insertAfter( "#foo" );
5777</script>
5778​
5779</body>
5780</html>
5781```
5782 */
5783 insertAfter(target: JQuery.Selector | JQuery.htmlString | JQuery.TypeOrArray<Node> | JQuery<Node>): this;
5784 /**
5785 * Insert every element in the set of matched elements before the target.
5786 * @param target A selector, element, array of elements, HTML string, or jQuery object; the matched set of elements
5787 * will be inserted before the element(s) specified by this parameter.
5788 * @see \`{@link https://api.jquery.com/insertBefore/ }\`
5789 * @since 1.0
5790 * @example ​ ````Insert all paragraphs before an element with id of &quot;foo&quot;. Same as $( &quot;#foo&quot; ).before( &quot;p&quot; )
5791```html
5792<!doctype html>
5793<html lang="en">
5794<head>
5795 <meta charset="utf-8">
5796 <title>insertBefore demo</title>
5797 <style>
5798 #foo {
5799 background: yellow;
5800 }
5801 </style>
5802 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5803</head>
5804<body>
5805​
5806<div id="foo">FOO!</div>
5807<p>I would like to say: </p>
5808​
5809<script>
5810$( "p" ).insertBefore( "#foo" );
5811</script>
5812​
5813</body>
5814</html>
5815```
5816 */
5817 insertBefore(target: JQuery.Selector | JQuery.htmlString | JQuery.TypeOrArray<Node> | JQuery<Node>): this;
5818 /**
5819 * Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
5820 * @param selector_function_selection_elements _&#x40;param_ `selector_function_selection_elements`
5821 * <br>
5822 * * `selector` — A string containing a selector expression to match elements against. <br>
5823 * * `function` — A function used as a test for every element in the set. It accepts two arguments, `index`, which is
5824 * the element's index in the jQuery collection, and `element`, which is the DOM element. Within the
5825 * function, `this` refers to the current DOM element. <br>
5826 * * `selection` — An existing jQuery object to match the current set of elements against. <br>
5827 * * `elements` — One or more elements to match the current set of elements against.
5828 * @see \`{@link https://api.jquery.com/is/ }\`
5829 * @since 1.0
5830 * @since 1.6
5831 * @example ​ ````Shows a few ways is() can be used inside an event handler.
5832```html
5833<!doctype html>
5834<html lang="en">
5835<head>
5836 <meta charset="utf-8">
5837 <title>is demo</title>
5838 <style>
5839 div {
5840 width: 60px;
5841 height: 60px;
5842 margin: 5px;
5843 float: left;
5844 border: 4px outset;
5845 background: green;
5846 text-align: center;
5847 font-weight: bolder;
5848 cursor: pointer;
5849 }
5850 .blue {
5851 background: blue;
5852 }
5853 .red {
5854 background: red;
5855 }
5856 span {
5857 color: white;
5858 font-size: 16px;
5859 }
5860 p {
5861 color: red;
5862 font-weight: bolder;
5863 background: yellow;
5864 margin: 3px;
5865 clear: left;
5866 display: none;
5867 }
5868 </style>
5869 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5870</head>
5871<body>
5872​
5873<div></div>
5874<div class="blue"></div>
5875<div></div>
5876<div class="red"></div>
5877<div><br/><span>Peter</span></div>
5878<div class="blue"></div>
5879<p>&nbsp;</p>
5880​
5881<script>
5882$( "div" ).one( "click", function() {
5883 if ( $( this ).is( ":first-child" ) ) {
5884 $( "p" ).text( "It's the first div." );
5885 } else if ( $( this ).is( ".blue,.red" ) ) {
5886 $( "p" ).text( "It's a blue or red div." );
5887 } else if ( $( this ).is( ":contains('Peter')" ) ) {
5888 $( "p" ).text( "It's Peter!" );
5889 } else {
5890 $( "p" ).html( "It's nothing <em>special</em>." );
5891 }
5892 $( "p" ).hide().slideDown( "slow" );
5893 $( this ).css({
5894 "border-style": "inset",
5895 cursor: "default"
5896 });
5897});
5898</script>
5899​
5900</body>
5901</html>
5902```
5903 * @example ​ ````Returns true, because the parent of the input is a form element.
5904```html
5905<!doctype html>
5906<html lang="en">
5907<head>
5908 <meta charset="utf-8">
5909 <title>is demo</title>
5910 <style>
5911 div {
5912 color: red;
5913 }
5914 </style>
5915 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5916</head>
5917<body>
5918​
5919<form>
5920 <input type="checkbox">
5921</form>
5922<div></div>
5923​
5924<script>
5925var isFormParent = $( "input[type='checkbox']" ).parent().is( "form" );
5926$( "div" ).text( "isFormParent = " + isFormParent );
5927</script>
5928​
5929</body>
5930</html>
5931```
5932 * @example ​ ````Returns false, because the parent of the input is a p element.
5933```html
5934<!doctype html>
5935<html lang="en">
5936<head>
5937 <meta charset="utf-8">
5938 <title>is demo</title>
5939 <style>
5940 div {
5941 color: red;
5942 }
5943 </style>
5944 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5945</head>
5946<body>
5947​
5948<form>
5949 <p><input type="checkbox"></p>
5950</form>
5951<div></div>
5952​
5953<script>
5954var isFormParent = $( "input[type='checkbox']" ).parent().is( "form" );
5955$( "div" ).text( "isFormParent = " + isFormParent );
5956</script>
5957​
5958</body>
5959</html>
5960```
5961 * @example ​ ````Checks against an existing collection of alternating list elements. Blue, alternating list elements slide up while others turn red.
5962```html
5963<!doctype html>
5964<html lang="en">
5965<head>
5966 <meta charset="utf-8">
5967 <title>is demo</title>
5968 <style>
5969 li {
5970 cursor: pointer;
5971 }
5972 </style>
5973 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
5974</head>
5975<body>
5976​
5977<ul id="browsers">
5978 <li>Chrome</li>
5979 <li>Safari</li>
5980 <li>Firefox</li>
5981 <li>Opera</li>
5982</ul>
5983​
5984<script>
5985var alt = $( "#browsers li:nth-child(2n)" ).css( "background", "#0ff" );
5986$( "li" ).click(function() {
5987 var li = $( this );
5988 if ( li.is( alt ) ) {
5989 li.slideUp();
5990 } else {
5991 li.css( "background", "red" );
5992 }
5993});
5994</script>
5995​
5996</body>
5997</html>
5998```
5999 * @example ​ ````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.
6000```html
6001<!doctype html>
6002<html lang="en">
6003<head>
6004 <meta charset="utf-8">
6005 <title>is demo</title>
6006 <style>
6007 li {
6008 cursor: pointer;
6009 }
6010 </style>
6011 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
6012</head>
6013<body>
6014​
6015<ul id="browsers">
6016 <li>Chrome</li>
6017 <li>Safari</li>
6018 <li>Firefox</li>
6019 <li>Opera</li>
6020</ul>
6021​
6022<script>
6023var alt = $( "#browsers li:nth-child(2n)" ).css( "background", "#0ff" );
6024$( "li" ).click(function() {
6025 if ( alt.is( this ) ) {
6026 $( this ).slideUp();
6027 } else {
6028 $( this ).css( "background", "red" );
6029 }
6030});
6031</script>
6032​
6033</body>
6034</html>
6035```
6036 */
6037 is(
6038 selector_function_selection_elements:
6039 | JQuery.Selector
6040 | JQuery.TypeOrArray<Element>
6041 | JQuery
6042 | ((this: TElement, index: number, element: TElement) => boolean),
6043 ): boolean;
6044 /**
6045 * Bind an event handler to the "keydown" JavaScript event, or trigger that event on an element.
6046 * @param eventData An object containing data that will be passed to the event handler.
6047 * @param handler A function to execute each time the event is triggered.
6048 * @see \`{@link https://api.jquery.com/keydown-shorthand/ }\`
6049 * @since 1.4.3
6050 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
6051 *
6052 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
6053 *
6054 * **Solution**: Instead of `.keydown(fn)` use `.on("keydown", fn)`. Instead of `.keydown()` use `.trigger("keydown")`.
6055 */
6056 keydown<TData>(
6057 eventData: TData,
6058 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "keydown">,
6059 ): this;
6060 /**
6061 * Bind an event handler to the "keydown" JavaScript event, or trigger that event on an element.
6062 * @param handler A function to execute each time the event is triggered.
6063 * @see \`{@link https://api.jquery.com/keydown-shorthand/ }\`
6064 * @since 1.0
6065 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
6066 *
6067 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
6068 *
6069 * **Solution**: Instead of `.keydown(fn)` use `.on("keydown", fn)`. Instead of `.keydown()` use `.trigger("keydown")`.
6070 * @example ​ ````Show the event object for the keydown handler when a key is pressed in the input.
6071```html
6072<!doctype html>
6073<html lang="en">
6074<head>
6075 <meta charset="utf-8">
6076 <title>keydown demo</title>
6077 <style>
6078 fieldset {
6079 margin-bottom: 1em;
6080 }
6081 input {
6082 display: block;
6083 margin-bottom: .25em;
6084 }
6085 #print-output {
6086 width: 100%;
6087 }
6088 .print-output-line {
6089 white-space: pre;
6090 padding: 5px;
6091 font-family: monaco, monospace;
6092 font-size: .7em;
6093 }
6094 </style>
6095 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
6096</head>
6097<body>
6098​
6099<form>
6100 <fieldset>
6101 <label for="target">Type Something:</label>
6102 <input id="target" type="text">
6103 </fieldset>
6104</form>
6105<button id="other">
6106 Trigger the handler
6107</button>
6108<script type="text/javascript" src="/resources/events.js"></script>
6109​
6110<script>
6111var xTriggered = 0;
6112$( "#target" ).keydown(function( event ) {
6113 if ( event.which == 13 ) {
6114 event.preventDefault();
6115 }
6116 xTriggered++;
6117 var msg = "Handler for .keydown() called " + xTriggered + " time(s).";
6118 $.print( msg, "html" );
6119 $.print( event );
6120});
6121​
6122$( "#other" ).click(function() {
6123 $( "#target" ).keydown();
6124});
6125</script>
6126​
6127</body>
6128</html>
6129```
6130 */
6131 keydown(
6132 handler?:
6133 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "keydown">
6134 | false,
6135 ): this;
6136 /**
6137 * Bind an event handler to the "keypress" JavaScript event, or trigger that event on an element.
6138 * @param eventData An object containing data that will be passed to the event handler.
6139 * @param handler A function to execute each time the event is triggered.
6140 * @see \`{@link https://api.jquery.com/keypress-shorthand/ }\`
6141 * @since 1.4.3
6142 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
6143 *
6144 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
6145 *
6146 * **Solution**: Instead of `.keypress(fn)` use `.on("keypress", fn)`. Instead of `.keypress()` use `.trigger("keypress")`.
6147 */
6148 keypress<TData>(
6149 eventData: TData,
6150 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "keypress">,
6151 ): this;
6152 /**
6153 * Bind an event handler to the "keypress" JavaScript event, or trigger that event on an element.
6154 * @param handler A function to execute each time the event is triggered.
6155 * @see \`{@link https://api.jquery.com/keypress-shorthand/ }\`
6156 * @since 1.0
6157 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
6158 *
6159 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
6160 *
6161 * **Solution**: Instead of `.keypress(fn)` use `.on("keypress", fn)`. Instead of `.keypress()` use `.trigger("keypress")`.
6162 * @example ​ ````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&#39;s output.
6163```html
6164<!doctype html>
6165<html lang="en">
6166<head>
6167 <meta charset="utf-8">
6168 <title>keypress demo</title>
6169 <style>
6170 fieldset {
6171 margin-bottom: 1em;
6172 }
6173 input {
6174 display: block;
6175 margin-bottom: .25em;
6176 }
6177 #print-output {
6178 width: 100%;
6179 }
6180 .print-output-line {
6181 white-space: pre;
6182 padding: 5px;
6183 font-family: monaco, monospace;
6184 font-size: .7em;
6185 }
6186 </style>
6187 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
6188</head>
6189<body>
6190​
6191<form>
6192 <fieldset>
6193 <label for="target">Type Something:</label>
6194 <input id="target" type="text">
6195 </fieldset>
6196</form>
6197<button id="other">
6198 Trigger the handler
6199</button>
6200<script src="/resources/events.js"></script>
6201​
6202<script>
6203var xTriggered = 0;
6204$( "#target" ).keypress(function( event ) {
6205 if ( event.which == 13 ) {
6206 event.preventDefault();
6207 }
6208 xTriggered++;
6209 var msg = "Handler for .keypress() called " + xTriggered + " time(s).";
6210 $.print( msg, "html" );
6211 $.print( event );
6212});
6213​
6214$( "#other" ).click(function() {
6215 $( "#target" ).keypress();
6216});
6217</script>
6218​
6219</body>
6220</html>
6221```
6222 */
6223 keypress(
6224 handler?:
6225 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "keypress">
6226 | false,
6227 ): this;
6228 /**
6229 * Bind an event handler to the "keyup" JavaScript event, or trigger that event on an element.
6230 * @param eventData An object containing data that will be passed to the event handler.
6231 * @param handler A function to execute each time the event is triggered.
6232 * @see \`{@link https://api.jquery.com/keyup/ }\`
6233 * @since 1.4.3
6234 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
6235 *
6236 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
6237 *
6238 * **Solution**: Instead of `.keyup(fn)` use `.on("keyup", fn)`. Instead of `.keyup()` use `.trigger("keyup")`.
6239 */
6240 keyup<TData>(
6241 eventData: TData,
6242 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "keyup">,
6243 ): this;
6244 /**
6245 * Bind an event handler to the "keyup" JavaScript event, or trigger that event on an element.
6246 * @param handler A function to execute each time the event is triggered.
6247 * @see \`{@link https://api.jquery.com/keyup/ }\`
6248 * @since 1.0
6249 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
6250 *
6251 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
6252 *
6253 * **Solution**: Instead of `.keyup(fn)` use `.on("keyup", fn)`. Instead of `.keyup()` use `.trigger("keyup")`.
6254 * @example ​ ````Show the event object for the keyup handler (using a simple $.print plugin) when a key is released in the input.
6255```html
6256<!doctype html>
6257<html lang="en">
6258<head>
6259 <meta charset="utf-8">
6260 <title>keyup demo</title>
6261 <style>
6262 fieldset {
6263 margin-bottom: 1em;
6264 }
6265 input {
6266 display: block;
6267 margin-bottom: .25em;
6268 }
6269 #print-output {
6270 width: 100%;
6271 }
6272 .print-output-line {
6273 white-space: pre;
6274 padding: 5px;
6275 font-family: monaco, monospace;
6276 font-size: .7em;
6277 }
6278 </style>
6279 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
6280</head>
6281<body>
6282​
6283<form>
6284 <fieldset>
6285 <label for="target">Type Something:</label>
6286 <input id="target" type="text">
6287 </fieldset>
6288</form>
6289<button id="other">
6290 Trigger the handler
6291</button>
6292<script type="text/javascript" src="/resources/events.js"></script>
6293​
6294<script>
6295var xTriggered = 0;
6296$( "#target" ).keyup(function( event ) {
6297 xTriggered++;
6298 var msg = "Handler for .keyup() called " + xTriggered + " time(s).";
6299 $.print( msg, "html" );
6300 $.print( event );
6301}).keydown(function( event ) {
6302 if ( event.which == 13 ) {
6303 event.preventDefault();
6304 }
6305});
6306​
6307$( "#other").click(function() {
6308 $( "#target" ).keyup();
6309});
6310</script>
6311​
6312</body>
6313</html>
6314```
6315 */
6316 keyup(
6317 handler?:
6318 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "keyup">
6319 | false,
6320 ): this;
6321 /**
6322 * Reduce the set of matched elements to the final one in the set.
6323 * @see \`{@link https://api.jquery.com/last/ }\`
6324 * @since 1.4
6325 * @example ​ ````Highlight the last span in a paragraph.
6326```html
6327<!doctype html>
6328<html lang="en">
6329<head>
6330 <meta charset="utf-8">
6331 <title>last demo</title>
6332 <style>
6333 .highlight {
6334 background-color: yellow;
6335 }
6336 </style>
6337 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
6338</head>
6339<body>
6340​
6341<p><span>Look:</span> <span>This is some text in a paragraph.</span> <span>This is a note about it.</span></p>
6342​
6343<script>
6344$( "p span" ).last().addClass( "highlight" );
6345</script>
6346​
6347</body>
6348</html>
6349```
6350 */
6351 last(): this;
6352
6353 /**
6354 * Reduce the set of matched elements to the even ones in the set, numbered from zero.
6355 * @see \`{@link https://api.jquery.com/even/ }\`
6356 * @since 3.5
6357 * @example ​ ````Highlight the even items in a list.
6358```html
6359<!doctype html>
6360<html lang="en">
6361<head>
6362 <meta charset="utf-8">
6363 <title>even demo</title>
6364 <style>
6365 .highlight {
6366 background-color: yellow;
6367 }
6368 </style>
6369 <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
6370</head>
6371<body>
6372
6373<ul>
6374 <li>Look:</li>
6375 <li>This is some text in a list.</li>
6376 <li>This is a note about it.</li>
6377 <li>This is another note about it.</li>
6378</ul>
6379
6380<script>
6381$( "ul li" ).even().addClass( "highlight" );
6382</script>
6383
6384</body>
6385</html>
6386```
6387 */
6388 even(): this;
6389
6390 /**
6391 * Reduce the set of matched elements to the odd ones in the set, numbered from zero.
6392 * @see \`{@link https://api.jquery.com/odd/ }\`
6393 * @since 3.5
6394 * @example ​ ````Highlight the odd items in a list.
6395```html
6396<!doctype html>
6397<html lang="en">
6398<head>
6399 <meta charset="utf-8">
6400 <title>odd demo</title>
6401 <style>
6402 .highlight {
6403 background-color: yellow;
6404 }
6405 </style>
6406 <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
6407</head>
6408<body>
6409
6410<ul>
6411 <li>Look:</li>
6412 <li>This is some text in a list.</li>
6413 <li>This is a note about it.</li>
6414 <li>This is another note about it.</li>
6415</ul>
6416
6417<script>
6418$( "ul li" ).odd().addClass( "highlight" );
6419</script>
6420
6421</body>
6422</html>
6423```
6424 */
6425 odd(): this;
6426
6427 /**
6428 * Load data from the server and place the returned HTML into the matched element.
6429 * @param url A string containing the URL to which the request is sent.
6430 * @param data A plain object or string that is sent to the server with the request.
6431 * @param complete A callback function that is executed when the request completes.
6432 * @see \`{@link https://api.jquery.com/load/ }\`
6433 * @since 1.0
6434 * @example ​ ````Same as above, but will POST the additional parameters to the server and a callback that is executed when the server is finished responding.
6435```javascript
6436$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
6437 alert( "The last 25 entries in the feed have been loaded" );
6438});
6439```
6440 */
6441 load(
6442 url: string,
6443 data: string | JQuery.PlainObject,
6444 complete: (
6445 this: TElement,
6446 responseText: string,
6447 textStatus: JQuery.Ajax.TextStatus,
6448 jqXHR: JQuery.jqXHR,
6449 ) => void,
6450 ): this;
6451 /**
6452 * Load data from the server and place the returned HTML into the matched element.
6453 * @param url A string containing the URL to which the request is sent.
6454 * @param complete_data _&#x40;param_ `complete_data`
6455 * <br>
6456 * * `complete` — A callback function that is executed when the request completes. <br>
6457 * * `data` — A plain object or string that is sent to the server with the request.
6458 * @see \`{@link https://api.jquery.com/load/ }\`
6459 * @since 1.0
6460 * @example ​ ````Load another page&#39;s list items into an ordered list.
6461```html
6462<!doctype html>
6463<html lang="en">
6464<head>
6465 <meta charset="utf-8">
6466 <title>load demo</title>
6467 <style>
6468 body {
6469 font-size: 12px;
6470 font-family: Arial;
6471 }
6472 </style>
6473 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
6474</head>
6475<body>
6476​
6477<b>Projects:</b>
6478<ol id="new-projects"></ol>
6479​
6480<script>
6481$( "#new-projects" ).load( "/resources/load.html #projects li" );
6482</script>
6483​
6484</body>
6485</html>
6486```
6487 * @example ​ ````Display a notice if the Ajax request encounters an error.
6488```html
6489<!doctype html>
6490<html lang="en">
6491<head>
6492 <meta charset="utf-8">
6493 <title>load demo</title>
6494 <style>
6495 body {
6496 font-size: 12px;
6497 font-family: Arial;
6498 }
6499 </style>
6500 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
6501</head>
6502<body>
6503​
6504<b>Successful Response (should be blank):</b>
6505<div id="success"></div>
6506<b>Error Response:</b>
6507<div id="error"></div>
6508​
6509<script>
6510$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
6511 if ( status == "error" ) {
6512 var msg = "Sorry but there was an error: ";
6513 $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
6514 }
6515});
6516</script>
6517​
6518</body>
6519</html>
6520```
6521 * @example ​ ````Load the feeds.html file into the div with the ID of feeds.
6522```javascript
6523$( "#feeds" ).load( "feeds.html" );
6524```
6525 * @example ​ ````pass arrays of data to the server.
6526```javascript
6527$( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } );
6528```
6529 */
6530 load(
6531 url: string,
6532 complete_data?:
6533 | ((this: TElement, responseText: string, textStatus: JQuery.Ajax.TextStatus, jqXHR: JQuery.jqXHR) => void)
6534 | string
6535 | JQuery.PlainObject,
6536 ): this;
6537 /**
6538 * Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.
6539 * @param callback A function object that will be invoked for each element in the current set.
6540 * @see \`{@link https://api.jquery.com/map/ }\`
6541 * @since 1.2
6542 * @example ​ ````Build a list of all the values within a form.
6543```html
6544<!doctype html>
6545<html lang="en">
6546<head>
6547 <meta charset="utf-8">
6548 <title>map demo</title>
6549 <style>
6550 p {
6551 color: red;
6552 }
6553 </style>
6554 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
6555</head>
6556<body>
6557​
6558<p><b>Values: </b></p>
6559<form>
6560 <input type="text" name="name" value="John">
6561 <input type="text" name="password" value="password">
6562 <input type="text" name="url" value="https://johnresig.com/">
6563</form>
6564​
6565<script>
6566$( "p" )
6567 .append( $( "input" ).map(function() {
6568 return $( this ).val();
6569 })
6570 .get()
6571 .join( ", " ) );
6572</script>
6573​
6574</body>
6575</html>
6576```
6577 * @example ​ ````A contrived example to show some functionality.
6578```html
6579<!doctype html>
6580<html lang="en">
6581<head>
6582 <meta charset="utf-8">
6583 <title>map demo</title>
6584 <style>
6585 body {
6586 font-size: 16px;
6587 }
6588 ul {
6589 float: left;
6590 margin: 0 30px;
6591 color: blue;
6592 }
6593 #results {
6594 color: red;
6595 }
6596 </style>
6597 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
6598</head>
6599<body>
6600​
6601<ul>
6602 <li>First</li>
6603 <li>Second</li>
6604 <li>Third</li>
6605 <li>Fourth</li>
6606 <li>Fifth</li>
6607</ul>
6608<ul id="results">
6609</ul>
6610​
6611<script>
6612var mappedItems = $( "li" ).map(function( index ) {
6613 var replacement = $( "<li>" ).text( $( this ).text() ).get( 0 );
6614 if ( index === 0 ) {
6615​
6616 // Make the first item all caps
6617 $( replacement ).text( $( replacement ).text().toUpperCase() );
6618 } else if ( index === 1 || index === 3 ) {
6619​
6620 // Delete the second and fourth items
6621 replacement = null;
6622 } else if ( index === 2 ) {
6623​
6624 // Make two of the third item and add some text
6625 replacement = [ replacement, $( "<li>" ).get( 0 ) ];
6626 $( replacement[ 0 ] ).append( "<b> - A</b>" );
6627 $( replacement[ 1 ] ).append( "Extra <b> - B</b>" );
6628 }
6629​
6630 // Replacement will be a dom element, null,
6631 // or an array of dom elements
6632 return replacement;
6633});
6634$( "#results" ).append( mappedItems );
6635</script>
6636​
6637</body>
6638</html>
6639```
6640 * @example ​ ````Equalize the heights of the divs.
6641```html
6642<!doctype html>
6643<html lang="en">
6644<head>
6645 <meta charset="utf-8">
6646 <title>map demo</title>
6647 <style>
6648 div {
6649 width: 40px;
6650 float: left;
6651 }
6652 input {
6653 clear: left;
6654 }
6655 </style>
6656 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
6657</head>
6658<body>
6659​
6660<input type="button" value="equalize div heights">
6661<div style="background: red; height: 40px; "></div>
6662<div style="background: green; height: 70px;"></div>
6663<div style="background: blue; height: 50px; "></div>
6664​
6665<script>
6666$.fn.equalizeHeights = function() {
6667 var maxHeight = this.map(function( i, e ) {
6668 return $( e ).height();
6669 }).get();
6670 return this.height( Math.max.apply( this, maxHeight ) );
6671};
6672​
6673$( "input" ).click(function() {
6674 $( "div" ).equalizeHeights();
6675});
6676</script>
6677​
6678</body>
6679</html>
6680```
6681 */
6682 map<TReturn>(
6683 callback: (
6684 this: TElement,
6685 index: number,
6686 domElement: TElement,
6687 ) => JQuery.TypeOrArray<TReturn> | null | undefined,
6688 ): JQuery<TReturn>;
6689 /**
6690 * Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element.
6691 * @param eventData An object containing data that will be passed to the event handler.
6692 * @param handler A function to execute each time the event is triggered.
6693 * @see \`{@link https://api.jquery.com/mousedown-shorthand/ }\`
6694 * @since 1.4.3
6695 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
6696 *
6697 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
6698 *
6699 * **Solution**: Instead of `.mousedown(fn)` use `.on("mousedown", fn)`. Instead of `.mousedown()` use `.trigger("mousedown")`.
6700 */
6701 mousedown<TData>(
6702 eventData: TData,
6703 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "mousedown">,
6704 ): this;
6705 /**
6706 * Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element.
6707 * @param handler A function to execute each time the event is triggered.
6708 * @see \`{@link https://api.jquery.com/mousedown-shorthand/ }\`
6709 * @since 1.0
6710 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
6711 *
6712 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
6713 *
6714 * **Solution**: Instead of `.mousedown(fn)` use `.on("mousedown", fn)`. Instead of `.mousedown()` use `.trigger("mousedown")`.
6715 * @example ​ ````Show texts when mouseup and mousedown event triggering.
6716```html
6717<!doctype html>
6718<html lang="en">
6719<head>
6720 <meta charset="utf-8">
6721 <title>mousedown demo</title>
6722 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
6723</head>
6724<body>
6725​
6726<p>Press mouse and release here.</p>
6727​
6728<script>
6729$( "p" )
6730 .mouseup(function() {
6731 $( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
6732 })
6733 .mousedown(function() {
6734 $( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
6735 });
6736</script>
6737​
6738</body>
6739</html>
6740```
6741 */
6742 mousedown(
6743 handler?:
6744 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "mousedown">
6745 | false,
6746 ): this;
6747 /**
6748 * Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.
6749 * @param eventData An object containing data that will be passed to the event handler.
6750 * @param handler A function to execute each time the event is triggered.
6751 * @see \`{@link https://api.jquery.com/mouseenter-shorthand/ }\`
6752 * @since 1.4.3
6753 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
6754 *
6755 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
6756 *
6757 * **Solution**: Instead of `.mouseenter(fn)` use `.on("mouseenter", fn)`. Instead of `.mouseenter()` use `.trigger("mouseenter")`.
6758 */
6759 mouseenter<TData>(
6760 eventData: TData,
6761 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "mouseenter">,
6762 ): this;
6763 /**
6764 * Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.
6765 * @param handler A function to execute each time the event is triggered.
6766 * @see \`{@link https://api.jquery.com/mouseenter-shorthand/ }\`
6767 * @since 1.0
6768 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
6769 *
6770 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
6771 *
6772 * **Solution**: Instead of `.mouseenter(fn)` use `.on("mouseenter", fn)`. Instead of `.mouseenter()` use `.trigger("mouseenter")`.
6773 * @example ​ ````Show texts when mouseenter and mouseout event triggering.
6774 mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.
6775```html
6776<!doctype html>
6777<html lang="en">
6778<head>
6779 <meta charset="utf-8">
6780 <title>mouseenter demo</title>
6781 <style>
6782 div.out {
6783 width: 40%;
6784 height: 120px;
6785 margin: 0 15px;
6786 background-color: #d6edfc;
6787 float: left;
6788 }
6789 div.in {
6790 width: 60%;
6791 height: 60%;
6792 background-color: #fc0;
6793 margin: 10px auto;
6794 }
6795 p {
6796 line-height: 1em;
6797 margin: 0;
6798 padding: 0;
6799 }
6800 </style>
6801 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
6802</head>
6803<body>
6804​
6805<div class="out overout">
6806 <p>move your mouse</p>
6807 <div class="in overout"><p>move your mouse</p><p>0</p></div>
6808 <p>0</p>
6809</div>
6810​
6811<div class="out enterleave">
6812 <p>move your mouse</p>
6813 <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
6814 <p>0</p>
6815</div>
6816​
6817<script>
6818var i = 0;
6819$( "div.overout" )
6820 .mouseover(function() {
6821 $( "p:first", this ).text( "mouse over" );
6822 $( "p:last", this ).text( ++i );
6823 })
6824 .mouseout(function() {
6825 $( "p:first", this ).text( "mouse out" );
6826 });
6827​
6828var n = 0;
6829$( "div.enterleave" )
6830 .mouseenter(function() {
6831 $( "p:first", this ).text( "mouse enter" );
6832 $( "p:last", this ).text( ++n );
6833 })
6834 .mouseleave(function() {
6835 $( "p:first", this ).text( "mouse leave" );
6836 });
6837</script>
6838​
6839</body>
6840</html>
6841```
6842 */
6843 mouseenter(
6844 handler?:
6845 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "mouseenter">
6846 | false,
6847 ): this;
6848 /**
6849 * Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.
6850 * @param eventData An object containing data that will be passed to the event handler.
6851 * @param handler A function to execute each time the event is triggered.
6852 * @see \`{@link https://api.jquery.com/mouseleave-shorthand/ }\`
6853 * @since 1.4.3
6854 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
6855 *
6856 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
6857 *
6858 * **Solution**: Instead of `.mouseleave(fn)` use `.on("mouseleave", fn)`. Instead of `.mouseleave()` use `.trigger("mouseleave")`.
6859 */
6860 mouseleave<TData>(
6861 eventData: TData,
6862 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "mouseleave">,
6863 ): this;
6864 /**
6865 * Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.
6866 * @param handler A function to execute each time the event is triggered.
6867 * @see \`{@link https://api.jquery.com/mouseleave-shorthand/ }\`
6868 * @since 1.0
6869 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
6870 *
6871 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
6872 *
6873 * **Solution**: Instead of `.mouseleave(fn)` use `.on("mouseleave", fn)`. Instead of `.mouseleave()` use `.trigger("mouseleave")`.
6874 * @example ​ ````Show number of times mouseout and mouseleave events are triggered. mouseout fires when the pointer moves out of child element as well, while mouseleave fires only when the pointer moves out of the bound element.
6875```html
6876<!doctype html>
6877<html lang="en">
6878<head>
6879 <meta charset="utf-8">
6880 <title>mouseleave demo</title>
6881 <style>
6882 div.out {
6883 width: 40%;
6884 height: 120px;
6885 margin: 0 15px;
6886 background-color: #d6edfc;
6887 float: left;
6888 }
6889 div.in {
6890 width: 60%;
6891 height: 60%;
6892 background-color: #fc0;
6893 margin: 10px auto;
6894 }
6895 p {
6896 line-height: 1em;
6897 margin: 0;
6898 padding: 0;
6899 }
6900 </style>
6901 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
6902</head>
6903<body>
6904​
6905<div class="out overout">
6906 <p>move your mouse</p>
6907 <div class="in overout"><p>move your mouse</p><p>0</p></div>
6908 <p>0</p>
6909</div>
6910<div class="out enterleave">
6911 <p>move your mouse</p>
6912 <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
6913 <p>0</p>
6914</div>
6915​
6916<script>
6917var i = 0;
6918$( "div.overout" )
6919 .mouseover(function() {
6920 $( "p:first", this ).text( "mouse over" );
6921 })
6922 .mouseout(function() {
6923 $( "p:first", this ).text( "mouse out" );
6924 $( "p:last", this ).text( ++i );
6925 });
6926​
6927var n = 0;
6928$( "div.enterleave" )
6929 .mouseenter(function() {
6930 $( "p:first", this ).text( "mouse enter" );
6931 })
6932 .mouseleave(function() {
6933 $( "p:first", this ).text( "mouse leave" );
6934 $( "p:last", this ).text( ++n );
6935 });
6936</script>
6937​
6938</body>
6939</html>
6940```
6941 */
6942 mouseleave(
6943 handler?:
6944 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "mouseleave">
6945 | false,
6946 ): this;
6947 /**
6948 * Bind an event handler to the "mousemove" JavaScript event, or trigger that event on an element.
6949 * @param eventData An object containing data that will be passed to the event handler.
6950 * @param handler A function to execute each time the event is triggered.
6951 * @see \`{@link https://api.jquery.com/mousemove-shorthand/ }\`
6952 * @since 1.4.3
6953 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
6954 *
6955 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
6956 *
6957 * **Solution**: Instead of `.mousemove(fn)` use `.on("mousemove", fn)`. Instead of `.mousemove()` use `.trigger("mousemove")`.
6958 */
6959 mousemove<TData>(
6960 eventData: TData,
6961 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "mousemove">,
6962 ): this;
6963 /**
6964 * Bind an event handler to the "mousemove" JavaScript event, or trigger that event on an element.
6965 * @param handler A function to execute each time the event is triggered.
6966 * @see \`{@link https://api.jquery.com/mousemove-shorthand/ }\`
6967 * @since 1.0
6968 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
6969 *
6970 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
6971 *
6972 * **Solution**: Instead of `.mousemove(fn)` use `.on("mousemove", fn)`. Instead of `.mousemove()` use `.trigger("mousemove")`.
6973 * @example ​ ````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.
6974```html
6975<!doctype html>
6976<html lang="en">
6977<head>
6978 <meta charset="utf-8">
6979 <title>mousemove demo</title>
6980 <style>
6981 div {
6982 width: 220px;
6983 height: 170px;
6984 margin: 10px 50px 10px 10px;
6985 background: yellow;
6986 border: 2px groove;
6987 float: right;
6988 }
6989 p {
6990 margin: 0;
6991 margin-left: 10px;
6992 color: red;
6993 width: 220px;
6994 height: 120px;
6995 padding-top: 70px;
6996 float: left;
6997 font-size: 14px;
6998 }
6999 span {
7000 display: block;
7001 }
7002 </style>
7003 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7004</head>
7005<body>
7006​
7007<p>
7008 <span>Move the mouse over the div.</span>
7009 <span>&nbsp;</span>
7010</p>
7011<div></div>
7012​
7013<script>
7014$( "div" ).mousemove(function( event ) {
7015 var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
7016 var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
7017 $( "span:first" ).text( "( event.pageX, event.pageY ) : " + pageCoords );
7018 $( "span:last" ).text( "( event.clientX, event.clientY ) : " + clientCoords );
7019});
7020</script>
7021​
7022</body>
7023</html>
7024```
7025 */
7026 mousemove(
7027 handler?:
7028 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "mousemove">
7029 | false,
7030 ): this;
7031 /**
7032 * Bind an event handler to the "mouseout" JavaScript event, or trigger that event on an element.
7033 * @param eventData An object containing data that will be passed to the event handler.
7034 * @param handler A function to execute each time the event is triggered.
7035 * @see \`{@link https://api.jquery.com/mouseout-shorthand/ }\`
7036 * @since 1.4.3
7037 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
7038 *
7039 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
7040 *
7041 * **Solution**: Instead of `.mouseout(fn)` use `.on("mouseout", fn)`. Instead of `.mouseout()` use `.trigger("mouseout")`.
7042 */
7043 mouseout<TData>(
7044 eventData: TData,
7045 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "mouseout">,
7046 ): this;
7047 /**
7048 * Bind an event handler to the "mouseout" JavaScript event, or trigger that event on an element.
7049 * @param handler A function to execute each time the event is triggered.
7050 * @see \`{@link https://api.jquery.com/mouseout-shorthand/ }\`
7051 * @since 1.0
7052 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
7053 *
7054 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
7055 *
7056 * **Solution**: Instead of `.mouseout(fn)` use `.on("mouseout", fn)`. Instead of `.mouseout()` use `.trigger("mouseout")`.
7057 * @example ​ ````Show the number of times mouseout and mouseleave events are triggered.
7058 mouseout fires when the pointer moves out of the child element as well, while mouseleave fires only when the pointer moves out of the bound element.
7059```html
7060<!doctype html>
7061<html lang="en">
7062<head>
7063 <meta charset="utf-8">
7064 <title>mouseout demo</title>
7065 <style>
7066 div.out {
7067 width: 40%;
7068 height: 120px;
7069 margin: 0 15px;
7070 background-color: #d6edfc;
7071 float: left;
7072 }
7073 div.in {
7074 width: 60%;
7075 height: 60%;
7076 background-color: #fc0;
7077 margin: 10px auto;
7078 }
7079 p {
7080 line-height: 1em;
7081 margin: 0;
7082 padding: 0;
7083 }
7084 </style>
7085 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7086</head>
7087<body>
7088​
7089<div class="out overout">
7090 <p>move your mouse</p>
7091 <div class="in overout"><p>move your mouse</p><p>0</p></div>
7092 <p>0</p>
7093</div>
7094​
7095<div class="out enterleave">
7096 <p>move your mouse</p>
7097 <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
7098 <p>0</p>
7099</div>
7100​
7101<script>
7102var i = 0;
7103$( "div.overout" )
7104 .mouseout(function() {
7105 $( "p:first", this ).text( "mouse out" );
7106 $( "p:last", this ).text( ++i );
7107 })
7108 .mouseover(function() {
7109 $( "p:first", this ).text( "mouse over" );
7110 });
7111​
7112var n = 0;
7113$( "div.enterleave" )
7114 .on( "mouseenter", function() {
7115 $( "p:first", this ).text( "mouse enter" );
7116 })
7117 .on( "mouseleave", function() {
7118 $( "p:first", this ).text( "mouse leave" );
7119 $( "p:last", this ).text( ++n );
7120 });
7121</script>
7122​
7123</body>
7124</html>
7125```
7126 */
7127 mouseout(
7128 handler?:
7129 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "mouseout">
7130 | false,
7131 ): this;
7132 /**
7133 * Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element.
7134 * @param eventData An object containing data that will be passed to the event handler.
7135 * @param handler A function to execute each time the event is triggered.
7136 * @see \`{@link https://api.jquery.com/mouseover-shorthand/ }\`
7137 * @since 1.4.3
7138 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
7139 *
7140 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
7141 *
7142 * **Solution**: Instead of `.mouseover(fn)` use `.on("mouseover", fn)`. Instead of `.mouseover()` use `.trigger("mouseover")`.
7143 */
7144 mouseover<TData>(
7145 eventData: TData,
7146 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "mouseover">,
7147 ): this;
7148 /**
7149 * Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element.
7150 * @param handler A function to execute each time the event is triggered.
7151 * @see \`{@link https://api.jquery.com/mouseover-shorthand/ }\`
7152 * @since 1.0
7153 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
7154 *
7155 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
7156 *
7157 * **Solution**: Instead of `.mouseover(fn)` use `.on("mouseover", fn)`. Instead of `.mouseover()` use `.trigger("mouseover")`.
7158 * @example ​ ````Show the number of times mouseover and mouseenter events are triggered.
7159mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.
7160```html
7161<!doctype html>
7162<html lang="en">
7163<head>
7164 <meta charset="utf-8">
7165 <title>mouseover demo</title>
7166 <style>
7167 div.out {
7168 width: 40%;
7169 height: 120px;
7170 margin: 0 15px;
7171 background-color: #d6edfc;
7172 float: left;
7173 }
7174 div.in {
7175 width: 60%;
7176 height: 60%;
7177 background-color: #fc0;
7178 margin: 10px auto;
7179 }
7180 p {
7181 line-height: 1em;
7182 margin: 0;
7183 padding: 0;
7184 }
7185 </style>
7186 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7187</head>
7188<body>
7189​
7190<div class="out overout">
7191 <span>move your mouse</span>
7192 <div class="in">
7193 </div>
7194</div>
7195​
7196<div class="out enterleave">
7197 <span>move your mouse</span>
7198 <div class="in">
7199 </div>
7200</div>
7201​
7202<script>
7203var i = 0;
7204$( "div.overout" )
7205 .mouseover(function() {
7206 i += 1;
7207 $( this ).find( "span" ).text( "mouse over x " + i );
7208 })
7209 .mouseout(function() {
7210 $( this ).find( "span" ).text( "mouse out " );
7211 });
7212​
7213var n = 0;
7214$( "div.enterleave" )
7215 .mouseenter(function() {
7216 n += 1;
7217 $( this ).find( "span" ).text( "mouse enter x " + n );
7218 })
7219 .mouseleave(function() {
7220 $( this ).find( "span" ).text( "mouse leave" );
7221 });
7222</script>
7223​
7224</body>
7225</html>
7226```
7227 */
7228 mouseover(
7229 handler?:
7230 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "mouseover">
7231 | false,
7232 ): this;
7233 /**
7234 * Bind an event handler to the "mouseup" JavaScript event, or trigger that event on an element.
7235 * @param eventData An object containing data that will be passed to the event handler.
7236 * @param handler A function to execute each time the event is triggered.
7237 * @see \`{@link https://api.jquery.com/mouseup-shorthand/ }\`
7238 * @since 1.4.3
7239 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
7240 *
7241 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
7242 *
7243 * **Solution**: Instead of `.mouseup(fn)` use `.on("mouseup", fn)`. Instead of `.mouseup()` use `.trigger("mouseup")`.
7244 */
7245 mouseup<TData>(
7246 eventData: TData,
7247 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "mouseup">,
7248 ): this;
7249 /**
7250 * Bind an event handler to the "mouseup" JavaScript event, or trigger that event on an element.
7251 * @param handler A function to execute each time the event is triggered.
7252 * @see \`{@link https://api.jquery.com/mouseup-shorthand/ }\`
7253 * @since 1.0
7254 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
7255 *
7256 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
7257 *
7258 * **Solution**: Instead of `.mouseup(fn)` use `.on("mouseup", fn)`. Instead of `.mouseup()` use `.trigger("mouseup")`.
7259 * @example ​ ````Show texts when mouseup and mousedown event triggering.
7260```html
7261<!doctype html>
7262<html lang="en">
7263<head>
7264 <meta charset="utf-8">
7265 <title>mouseup demo</title>
7266 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7267</head>
7268<body>
7269​
7270<p>Press mouse and release here.</p>
7271​
7272<script>
7273$( "p" )
7274 .mouseup(function() {
7275 $( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
7276 })
7277 .mousedown(function() {
7278 $( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
7279 });
7280</script>
7281​
7282</body>
7283</html>
7284```
7285 */
7286 mouseup(
7287 handler?:
7288 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "mouseup">
7289 | false,
7290 ): this;
7291 /**
7292 * Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
7293 * @param selector A string containing a selector expression to match elements against.
7294 * @see \`{@link https://api.jquery.com/next/ }\`
7295 * @since 1.0
7296 * @example ​ ````Find the very next sibling of each disabled button and change its text &quot;this button is disabled&quot;.
7297```html
7298<!doctype html>
7299<html lang="en">
7300<head>
7301 <meta charset="utf-8">
7302 <title>next demo</title>
7303 <style>
7304 span {
7305 color: blue;
7306 font-weight: bold;
7307 }
7308 button {
7309 width: 100px;
7310 }
7311 </style>
7312 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7313</head>
7314<body>
7315​
7316<div><button disabled="disabled">First</button> - <span></span></div>
7317<div><button>Second</button> - <span></span></div>
7318<div><button disabled="disabled">Third</button> - <span></span></div>
7319​
7320<script>
7321$( "button[disabled]" ).next().text( "this button is disabled" );
7322</script>
7323​
7324</body>
7325</html>
7326```
7327 * @example ​ ````Find the very next sibling of each paragraph. Keep only the ones with a class &quot;selected&quot;.
7328```html
7329<!doctype html>
7330<html lang="en">
7331<head>
7332 <meta charset="utf-8">
7333 <title>next demo</title>
7334 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7335</head>
7336<body>
7337​
7338<p>Hello</p>
7339<p class="selected">Hello Again</p>
7340<div><span>And Again</span></div>
7341​
7342<script>
7343$( "p" ).next( ".selected" ).css( "background", "yellow" );
7344</script>
7345​
7346</body>
7347</html>
7348```
7349 */
7350 next<K extends keyof HTMLElementTagNameMap>(selector: K): JQuery<HTMLElementTagNameMap[K]>;
7351 next<K extends keyof SVGElementTagNameMap>(selector: K): JQuery<SVGElementTagNameMap[K]>;
7352 // eslint-disable-next-line @definitelytyped/no-unnecessary-generics
7353 next<E extends Element = HTMLElement>(selector?: JQuery.Selector): JQuery<E>;
7354 /**
7355 * Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
7356 * @param selector A string containing a selector expression to match elements against.
7357 * @see \`{@link https://api.jquery.com/nextAll/ }\`
7358 * @since 1.2
7359 * @example ​ ````Locate all the divs after the first and give them a class.
7360```html
7361<!doctype html>
7362<html lang="en">
7363<head>
7364 <meta charset="utf-8">
7365 <title>nextAll demo</title>
7366 <style>
7367 div {
7368 width: 80px;
7369 height: 80px;
7370 background: #abc;
7371 border: 2px solid black;
7372 margin: 10px;
7373 float: left;
7374 }
7375 div.after {
7376 border-color: red;
7377 }
7378 </style>
7379 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7380</head>
7381<body>
7382​
7383<div>first</div>
7384<div>sibling<div>child</div></div>
7385<div>sibling</div>
7386<div>sibling</div>​
7387<script>
7388$( "div:first" ).nextAll().addClass( "after" );
7389</script>
7390​
7391</body>
7392</html>
7393```
7394 * @example ​ ````Locate all the paragraphs after the second child in the body and give them a class.
7395```html
7396<!doctype html>
7397<html lang="en">
7398<head>
7399 <meta charset="utf-8">
7400 <title>nextAll demo</title>
7401 <style>
7402 div, p {
7403 width: 60px;
7404 height: 60px;
7405 background: #abc;
7406 border: 2px solid black;
7407 margin: 10px;
7408 float: left;
7409 }
7410 .after {
7411 border-color: red;
7412 }
7413 </style>
7414 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7415</head>
7416<body>
7417​
7418<p>p</p>
7419<div>div</div>
7420<p>p</p>
7421<p>p</p>
7422<div>div</div>
7423<p>p</p>
7424<div>div</div>
7425​
7426<script>
7427$( ":nth-child(1)" ).nextAll( "p" ).addClass( "after" );
7428</script>
7429​
7430</body>
7431</html>
7432```
7433 */
7434 nextAll<K extends keyof HTMLElementTagNameMap>(selector: K): JQuery<HTMLElementTagNameMap[K]>;
7435 nextAll<K extends keyof SVGElementTagNameMap>(selector: K): JQuery<SVGElementTagNameMap[K]>;
7436 // eslint-disable-next-line @definitelytyped/no-unnecessary-generics
7437 nextAll<E extends Element = HTMLElement>(selector?: JQuery.Selector): JQuery<E>;
7438 /**
7439 * Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
7440 * @param selector_element _&#x40;param_ `selector_element`
7441 * <br>
7442 * * `selector` — A string containing a selector expression to indicate where to stop matching following sibling elements. <br>
7443 * * `element` — A DOM node or jQuery object indicating where to stop matching following sibling elements.
7444 * @param filter A string containing a selector expression to match elements against.
7445 * @see \`{@link https://api.jquery.com/nextUntil/ }\`
7446 * @since 1.4
7447 * @since 1.6
7448 * @example ​ ````Find the siblings that follow &lt;dt id=&quot;term-2&quot;&gt; up to the next &lt;dt&gt; and give them a red background color. Also, find &lt;dd&gt; siblings that follow &lt;dt id=&quot;term-1&quot;&gt; up to &lt;dt id=&quot;term-3&quot;&gt; and give them a green text color.
7449```html
7450<!doctype html>
7451<html lang="en">
7452<head>
7453 <meta charset="utf-8">
7454 <title>nextUntil demo</title>
7455 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7456</head>
7457<body>
7458​
7459<dl>
7460 <dt id="term-1">term 1</dt>
7461 <dd>definition 1-a</dd>
7462 <dd>definition 1-b</dd>
7463 <dd>definition 1-c</dd>
7464 <dd>definition 1-d</dd>
7465 <dt id="term-2">term 2</dt>
7466 <dd>definition 2-a</dd>
7467 <dd>definition 2-b</dd>
7468 <dd>definition 2-c</dd>
7469 <dt id="term-3">term 3</dt>
7470 <dd>definition 3-a</dd>
7471 <dd>definition 3-b</dd>
7472</dl>
7473​
7474<script>
7475$( "#term-2" )
7476 .nextUntil( "dt" )
7477 .css( "background-color", "red" );
7478var term3 = document.getElementById( "term-3" );
7479$( "#term-1" )
7480 .nextUntil( term3, "dd" )
7481 .css( "color", "green" );
7482</script>
7483​
7484</body>
7485</html>
7486```
7487 */
7488 nextUntil<K extends keyof HTMLElementTagNameMap>(
7489 selector_element: JQuery.Selector | Element | JQuery,
7490 filter: K,
7491 ): JQuery<HTMLElementTagNameMap[K]>;
7492 nextUntil<K extends keyof SVGElementTagNameMap>(
7493 selector_element: JQuery.Selector | Element | JQuery,
7494 filter: K,
7495 ): JQuery<SVGElementTagNameMap[K]>;
7496 // eslint-disable-next-line @definitelytyped/no-unnecessary-generics
7497 nextUntil<E extends Element = HTMLElement>(
7498 selector_element?: JQuery.Selector | Element | JQuery,
7499 filter?: JQuery.Selector,
7500 ): JQuery<E>;
7501 /**
7502 * Remove elements from the set of matched elements.
7503 * @param selector_function_selection _&#x40;param_ `selector_function_selection`
7504 * <br>
7505 * * `selector` — A string containing a selector expression, a DOM element, or an array of elements to match against the set. <br>
7506 * * `function` — A function used as a test for each element in the set. It accepts two arguments, `index`, which is
7507 * the element's index in the jQuery collection, and `element`, which is the DOM element. Within the
7508 * function, `this` refers to the current DOM element. <br>
7509 * * `selection` — An existing jQuery object to match the current set of elements against.
7510 * @see \`{@link https://api.jquery.com/not/ }\`
7511 * @since 1.0
7512 * @since 1.4
7513 * @example ​ ````Adds a border to divs that are not green or blue.
7514```html
7515<!doctype html>
7516<html lang="en">
7517<head>
7518 <meta charset="utf-8">
7519 <title>not demo</title>
7520 <style>
7521 div {
7522 width: 50px;
7523 height: 50px;
7524 margin: 10px;
7525 float: left;
7526 background: yellow;
7527 border: 2px solid white;
7528 }
7529 .green {
7530 background: #8f8;
7531 }
7532 .gray {
7533 background: #ccc;
7534 }
7535 #blueone {
7536 background: #99f;
7537 }
7538 </style>
7539 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7540</head>
7541<body>
7542​
7543<div></div>
7544<div id="blueone"></div>
7545<div></div>
7546<div class="green"></div>
7547<div class="green"></div>
7548<div class="gray"></div>
7549<div></div>
7550​
7551<script>
7552$( "div" ).not( ".green, #blueone" )
7553 .css( "border-color", "red" );
7554</script>
7555​
7556</body>
7557</html>
7558```
7559 * @example ​ ````Removes the element with the ID &quot;selected&quot; from the set of all paragraphs.
7560```javascript
7561$( "p" ).not( $( "#selected" )[ 0 ] );
7562```
7563 * @example ​ ````Removes the element with the ID &quot;selected&quot; from the set of all paragraphs.
7564```javascript
7565$( "p" ).not( "#selected" );
7566```
7567 * @example ​ ````Removes all elements that match &quot;div p.selected&quot; from the total set of all paragraphs.
7568```javascript
7569$( "p" ).not( $( "div p.selected" ) );
7570```
7571 */
7572 not(
7573 selector_function_selection:
7574 | JQuery.Selector
7575 | JQuery.TypeOrArray<Element>
7576 | JQuery
7577 | ((this: TElement, index: number, element: TElement) => boolean),
7578 ): this;
7579 /**
7580 * Remove an event handler.
7581 * @param events One or more space-separated event types and optional namespaces, or just namespaces, such as
7582 * "click", "keydown.myPlugin", or ".myPlugin".
7583 * @param selector A selector which should match the one originally passed to .on() when attaching event handlers.
7584 * @param handler A function to execute each time the event is triggered.
7585 * @see \`{@link https://api.jquery.com/off/ }\`
7586 * @since 1.7
7587 * @example ​ ````Add and remove event handlers on the colored button.
7588```html
7589<!doctype html>
7590<html lang="en">
7591<head>
7592 <meta charset="utf-8">
7593 <title>off demo</title>
7594 <style>
7595 button {
7596 margin: 5px;
7597 }
7598 button#theone {
7599 color: red;
7600 background: yellow;
7601 }
7602 </style>
7603 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7604</head>
7605<body>
7606​
7607<button id="theone">Does nothing...</button>
7608<button id="bind">Add Click</button>
7609<button id="unbind">Remove Click</button>
7610<div style="display:none;">Click!</div>
7611​
7612<script>
7613function flash() {
7614 $( "div" ).show().fadeOut( "slow" );
7615}
7616$( "#bind" ).click(function() {
7617 $( "body" )
7618 .on( "click", "#theone", flash )
7619 .find( "#theone" )
7620 .text( "Can Click!" );
7621});
7622$( "#unbind" ).click(function() {
7623 $( "body" )
7624 .off( "click", "#theone", flash )
7625 .find( "#theone" )
7626 .text( "Does nothing..." );
7627});
7628</script>
7629​
7630</body>
7631</html>
7632```
7633 * @example ​ ````Remove just one previously bound handler by passing it as the third argument:
7634```javascript
7635var foo = function() {
7636 // Code to handle some kind of event
7637};
7638​
7639// ... Now foo will be called when paragraphs are clicked ...
7640$( "body" ).on( "click", "p", foo );
7641​
7642// ... Foo will no longer be called.
7643$( "body" ).off( "click", "p", foo );
7644```
7645 */
7646 off<TType extends string>(
7647 events: TType,
7648 selector: JQuery.Selector,
7649 handler:
7650 | JQuery.TypeEventHandler<TElement, any, any, any, TType>
7651 | false,
7652 ): this;
7653 /**
7654 * Remove an event handler.
7655 * @param events One or more space-separated event types and optional namespaces, or just namespaces, such as
7656 * "click", "keydown.myPlugin", or ".myPlugin".
7657 * @param selector_handler _&#x40;param_ `selector_handler`
7658 * <br>
7659 * * `selector` — A selector which should match the one originally passed to `.on()` when attaching event handlers. <br>
7660 * * `handler` — A handler function previously attached for the event(s), or the special value `false`.
7661 * @see \`{@link https://api.jquery.com/off/ }\`
7662 * @since 1.7
7663 * @example ​ ````Remove all delegated click handlers from all paragraphs:
7664```javascript
7665$( "p" ).off( "click", "**" );
7666```
7667 * @example ​ ````Unbind all delegated event handlers by their namespace:
7668```javascript
7669var validate = function() {
7670 // Code to validate form entries
7671};
7672​
7673// Delegate events under the ".validator" namespace
7674$( "form" ).on( "click.validator", "button", validate );
7675​
7676$( "form" ).on( "keypress.validator", "input[type='text']", validate );
7677​
7678// Remove event handlers in the ".validator" namespace
7679$( "form" ).off( ".validator" );
7680```
7681 */
7682 off<TType extends string>(
7683 events: TType,
7684 selector_handler?:
7685 | JQuery.Selector
7686 | JQuery.TypeEventHandler<TElement, any, any, any, TType>
7687 | false,
7688 ): this;
7689 /**
7690 * Remove an event handler.
7691 * @param events An object where the string keys represent one or more space-separated event types and optional
7692 * namespaces, and the values represent handler functions previously attached for the event(s).
7693 * @param selector A selector which should match the one originally passed to .on() when attaching event handlers.
7694 * @see \`{@link https://api.jquery.com/off/ }\`
7695 * @since 1.7
7696 */
7697 off(events: JQuery.TypeEventHandlers<TElement, any, any, any>, selector?: JQuery.Selector): this;
7698 /**
7699 * Remove an event handler.
7700 * @param event A jQuery.Event object.
7701 * @see \`{@link https://api.jquery.com/off/ }\`
7702 * @since 1.7
7703 * @example ​ ````Remove all event handlers from all paragraphs:
7704```javascript
7705$( "p" ).off();
7706```
7707 */
7708 off(event?: JQuery.TriggeredEvent<TElement>): this;
7709 /**
7710 * Set the current coordinates of every element in the set of matched elements, relative to the document.
7711 * @param coordinates_function _&#x40;param_ `coordinates_function`
7712 * <br>
7713 * * `coordinates` — An object containing the properties `top` and `left`, which are numbers indicating the new top and
7714 * left coordinates for the elements. <br>
7715 * * `function` — A function to return the coordinates to set. Receives the index of the element in the collection as
7716 * the first argument and the current coordinates as the second argument. The function should return an
7717 * object with the new `top` and `left` properties.
7718 * @see \`{@link https://api.jquery.com/offset/ }\`
7719 * @since 1.4
7720 * @example ​ ````Set the offset of the second paragraph:
7721```html
7722<!doctype html>
7723<html lang="en">
7724<head>
7725 <meta charset="utf-8">
7726 <title>offset demo</title>
7727 <style>
7728 p {
7729 margin-left: 10px;
7730 }
7731 </style>
7732 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7733</head>
7734<body>
7735​
7736<p>Hello</p><p>2nd Paragraph</p>
7737​
7738<script>
7739$( "p:last" ).offset({ top: 10, left: 30 });
7740</script>
7741​
7742</body>
7743</html>
7744```
7745 */
7746 offset(
7747 coordinates_function:
7748 | JQuery.CoordinatesPartial
7749 | ((this: TElement, index: number, coords: JQuery.Coordinates) => JQuery.CoordinatesPartial),
7750 ): this;
7751 /**
7752 * Get the current coordinates of the first element in the set of matched elements, relative to the document.
7753 * @see \`{@link https://api.jquery.com/offset/ }\`
7754 * @since 1.2
7755 * @example ​ ````Access the offset of the second paragraph:
7756```html
7757<!doctype html>
7758<html lang="en">
7759<head>
7760 <meta charset="utf-8">
7761 <title>offset demo</title>
7762 <style>
7763 p {
7764 margin-left: 10px;
7765 }
7766 </style>
7767 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7768</head>
7769<body>
7770​
7771<p>Hello</p><p>2nd Paragraph</p>
7772​
7773<script>
7774var p = $( "p:last" );
7775var offset = p.offset();
7776p.html( "left: " + offset.left + ", top: " + offset.top );
7777</script>
7778​
7779</body>
7780</html>
7781```
7782 * @example ​ ````Click to see the offset.
7783```html
7784<!doctype html>
7785<html lang="en">
7786<head>
7787 <meta charset="utf-8">
7788 <title>offset demo</title>
7789 <style>
7790 p {
7791 margin-left: 10px;
7792 color: blue;
7793 width: 200px;
7794 cursor: pointer;
7795 }
7796 span {
7797 color: red;
7798 cursor: pointer;
7799 }
7800 div.abs {
7801 width: 50px;
7802 height: 50px;
7803 position: absolute;
7804 left: 220px;
7805 top: 35px;
7806 background-color: green;
7807 cursor: pointer;
7808 }
7809 </style>
7810 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7811</head>
7812<body>
7813​
7814<div id="result">Click an element.</div>
7815<p>
7816 This is the best way to <span>find</span> an offset.
7817</p>
7818<div class="abs">
7819</div>
7820​
7821<script>
7822$( "*", document.body ).click(function( event ) {
7823 var offset = $( this ).offset();
7824 event.stopPropagation();
7825 $( "#result" ).text( this.tagName +
7826 " coords ( " + offset.left + ", " + offset.top + " )" );
7827});
7828</script>
7829​
7830</body>
7831</html>
7832```
7833 */
7834 offset(): JQuery.Coordinates | undefined;
7835 /**
7836 * Get the closest ancestor element that is positioned.
7837 * @see \`{@link https://api.jquery.com/offsetParent/ }\`
7838 * @since 1.2.6
7839 * @example ​ ````Find the offsetParent of item &quot;A.&quot;
7840```html
7841<!doctype html>
7842<html lang="en">
7843<head>
7844 <meta charset="utf-8">
7845 <title>offsetParent demo</title>
7846 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7847</head>
7848<body>
7849​
7850<ul class="level-1">
7851 <li class="item-i">I</li>
7852 <li class="item-ii" style="position: relative;">II
7853 <ul class="level-2">
7854 <li class="item-a">A</li>
7855 <li class="item-b">B
7856 <ul class="level-3">
7857 <li class="item-1">1</li>
7858 <li class="item-2">2</li>
7859 <li class="item-3">3</li>
7860 </ul>
7861 </li>
7862 <li class="item-c">C</li>
7863 </ul>
7864 </li>
7865 <li class="item-iii">III</li>
7866</ul>
7867​
7868<script>$( "li.item-a" ).offsetParent().css( "background-color", "red" );</script>
7869​
7870</body>
7871</html>
7872```
7873 */
7874 offsetParent(): JQuery;
7875 /**
7876 * Attach an event handler function for one or more events to the selected elements.
7877 * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
7878 * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the
7879 * selector is null or omitted, the event is always triggered when it reaches the selected element.
7880 * @param data Data to be passed to the handler in event.data when an event is triggered.
7881 * @param handler A function to execute when the event is triggered.
7882 * @see \`{@link https://api.jquery.com/on/ }\`
7883 * @since 1.7
7884 */
7885 on<TType extends string, TData>(
7886 events: TType,
7887 selector: JQuery.Selector,
7888 data: TData,
7889 handler: JQuery.TypeEventHandler<TElement, TData, any, any, TType>,
7890 ): this;
7891 /**
7892 * Attach an event handler function for one or more events to the selected elements.
7893 * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
7894 * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the
7895 * selector is null or omitted, the event is always triggered when it reaches the selected element.
7896 * @param data Data to be passed to the handler in event.data when an event is triggered.
7897 * @param handler A function to execute when the event is triggered.
7898 * @see \`{@link https://api.jquery.com/on/ }\`
7899 * @since 1.7
7900 */
7901 on<TType extends string, TData>(
7902 events: TType,
7903 selector: null | undefined,
7904 data: TData,
7905 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, TType>,
7906 ): this;
7907 /**
7908 * Attach an event handler function for one or more events to the selected elements.
7909 * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
7910 * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the
7911 * selector is null or omitted, the event is always triggered when it reaches the selected element.
7912 * @param data Data to be passed to the handler in event.data when an event is triggered.
7913 * @param handler A function to execute when the event is triggered.
7914 * @see \`{@link https://api.jquery.com/on/ }\`
7915 * @since 1.7
7916 * @deprecated ​ Deprecated. Use \`{@link JQuery.Event }\` in place of \`{@link JQueryEventObject }\`.
7917 */
7918 on(
7919 events: string,
7920 selector: JQuery.Selector | null | undefined,
7921 data: any,
7922 handler: (event: JQueryEventObject) => void,
7923 ): this;
7924 /**
7925 * Attach an event handler function for one or more events to the selected elements.
7926 * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
7927 * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the
7928 * selector is null or omitted, the event is always triggered when it reaches the selected element.
7929 * @param handler A function to execute when the event is triggered. The value false is also allowed as a shorthand
7930 * for a function that simply does return false.
7931 * @see \`{@link https://api.jquery.com/on/ }\`
7932 * @since 1.7
7933 * @example ​ ````Click any paragraph to add another after it. Note that .on() allows a click event on any paragraph--even new ones--since the event is handled by the ever-present body element after it bubbles to there.
7934```html
7935<!doctype html>
7936<html lang="en">
7937<head>
7938 <meta charset="utf-8">
7939 <title>on demo</title>
7940 <style>
7941 p {
7942 background: yellow;
7943 font-weight: bold;
7944 cursor: pointer;
7945 padding: 5px;
7946 }
7947 p.over {
7948 background: #ccc;
7949 }
7950 span {
7951 color: red;
7952 }
7953 </style>
7954 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7955</head>
7956<body>
7957​
7958<p>Click me!</p>
7959<span></span>
7960​
7961<script>
7962var count = 0;
7963$( "body" ).on( "click", "p", function() {
7964 $( this ).after( "<p>Another paragraph! " + (++count) + "</p>" );
7965});
7966</script>
7967​
7968</body>
7969</html>
7970```
7971 * @example ​ ````Display each paragraph&#39;s text in an alert box whenever it is clicked:
7972```javascript
7973$( "body" ).on( "click", "p", function() {
7974 alert( $( this ).text() );
7975});
7976```
7977 * @example ​ ````Cancel a link&#39;s default action using the .preventDefault() method:
7978```javascript
7979$( "body" ).on( "click", "a", function( event ) {
7980 event.preventDefault();
7981});
7982```
7983 */
7984 on<TType extends string>(
7985 events: TType,
7986 selector: JQuery.Selector,
7987 handler:
7988 | JQuery.TypeEventHandler<TElement, undefined, any, any, TType>
7989 | false,
7990 ): this;
7991 /**
7992 * Attach an event handler function for one or more events to the selected elements.
7993 * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
7994 * @param data Data to be passed to the handler in event.data when an event is triggered.
7995 * @param handler A function to execute when the event is triggered.
7996 * @see \`{@link https://api.jquery.com/on/ }\`
7997 * @since 1.7
7998 * @example ​ ````Pass data to the event handler, which is specified here by name:
7999```javascript
8000function myHandler( event ) {
8001 alert( event.data.foo );
8002}
8003$( "p" ).on( "click", { foo: "bar" }, myHandler );
8004```
8005 */
8006 on<TType extends string, TData>(
8007 events: TType,
8008 data: TData,
8009 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, TType>,
8010 ): this;
8011 /**
8012 * Attach an event handler function for one or more events to the selected elements.
8013 * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
8014 * @param selector_data _&#x40;param_ `selector_data`
8015 * <br>
8016 * * `selector` — A selector string to filter the descendants of the selected elements that trigger the event. If the
8017 * selector is null or omitted, the event is always triggered when it reaches the selected element. <br>
8018 * * `data` — Data to be passed to the handler in event.data when an event is triggered.
8019 * @param handler A function to execute when the event is triggered.
8020 * @see \`{@link https://api.jquery.com/on/ }\`
8021 * @since 1.7
8022 * @deprecated ​ Deprecated. Use \`{@link JQuery.Event }\` in place of \`{@link JQueryEventObject }\`.
8023 * @example ​ ````Click any paragraph to add another after it. Note that .on() allows a click event on any paragraph--even new ones--since the event is handled by the ever-present body element after it bubbles to there.
8024```html
8025<!doctype html>
8026<html lang="en">
8027<head>
8028 <meta charset="utf-8">
8029 <title>on demo</title>
8030 <style>
8031 p {
8032 background: yellow;
8033 font-weight: bold;
8034 cursor: pointer;
8035 padding: 5px;
8036 }
8037 p.over {
8038 background: #ccc;
8039 }
8040 span {
8041 color: red;
8042 }
8043 </style>
8044 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
8045</head>
8046<body>
8047​
8048<p>Click me!</p>
8049<span></span>
8050​
8051<script>
8052var count = 0;
8053$( "body" ).on( "click", "p", function() {
8054 $( this ).after( "<p>Another paragraph! " + (++count) + "</p>" );
8055});
8056</script>
8057​
8058</body>
8059</html>
8060```
8061 * @example ​ ````Display each paragraph&#39;s text in an alert box whenever it is clicked:
8062```javascript
8063$( "body" ).on( "click", "p", function() {
8064 alert( $( this ).text() );
8065});
8066```
8067 * @example ​ ````Cancel a link&#39;s default action using the .preventDefault() method:
8068```javascript
8069$( "body" ).on( "click", "a", function( event ) {
8070 event.preventDefault();
8071});
8072```
8073 * @example ​ ````Pass data to the event handler, which is specified here by name:
8074```javascript
8075function myHandler( event ) {
8076 alert( event.data.foo );
8077}
8078$( "p" ).on( "click", { foo: "bar" }, myHandler );
8079```
8080 */
8081 on(events: string, selector_data: any, handler: (event: JQueryEventObject) => void): this;
8082 /**
8083 * Attach an event handler function for one or more events to the selected elements.
8084 * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
8085 * @param handler A function to execute when the event is triggered. The value false is also allowed as a shorthand
8086 * for a function that simply does return false.
8087 * @see \`{@link https://api.jquery.com/on/ }\`
8088 * @since 1.7
8089 * @example ​ ````Display a paragraph&#39;s text in an alert when it is clicked:
8090```javascript
8091$( "p" ).on( "click", function() {
8092 alert( $( this ).text() );
8093});
8094```
8095 * @example ​ ````Cancel a form submit action and prevent the event from bubbling up by returning false:
8096```javascript
8097$( "form" ).on( "submit", false );
8098```
8099 * @example ​ ````Cancel only the default action by using .preventDefault().
8100```javascript
8101$( "form" ).on( "submit", function( event ) {
8102 event.preventDefault();
8103});
8104```
8105 * @example ​ ````Stop submit events from bubbling without preventing form submit, using .stopPropagation().
8106```javascript
8107$( "form" ).on( "submit", function( event ) {
8108 event.stopPropagation();
8109});
8110```
8111 * @example ​ ````Pass data to the event handler using the second argument to .trigger()
8112```javascript
8113$( "div" ).on( "click", function( event, person ) {
8114 alert( "Hello, " + person.name );
8115});
8116$( "div" ).trigger( "click", { name: "Jim" } );
8117```
8118 * @example ​ ````Use the the second argument of .trigger() to pass an array of data to the event handler
8119```javascript
8120$( "div" ).on( "click", function( event, salutation, name ) {
8121 alert( salutation + ", " + name );
8122});
8123$( "div" ).trigger( "click", [ "Goodbye", "Jim" ] );
8124```
8125 * @example ​ ````Attach and trigger custom (non-browser) events.
8126```html
8127<!doctype html>
8128<html lang="en">
8129<head>
8130 <meta charset="utf-8">
8131 <title>on demo</title>
8132 <style>
8133 p {
8134 color: red;
8135 }
8136 span {
8137 color: blue;
8138 }
8139 </style>
8140 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
8141</head>
8142<body>
8143​
8144<p>Has an attached custom event.</p>
8145<button>Trigger custom event</button>
8146<span style="display:none;"></span>
8147​
8148<script>
8149$( "p" ).on( "myCustomEvent", function( event, myName ) {
8150 $( this ).text( myName + ", hi there!" );
8151 $( "span" )
8152 .stop()
8153 .css( "opacity", 1 )
8154 .text( "myName = " + myName )
8155 .fadeIn( 30 )
8156 .fadeOut( 1000 );
8157});
8158$( "button" ).click(function () {
8159 $( "p" ).trigger( "myCustomEvent", [ "John" ] );
8160});
8161</script>
8162​
8163</body>
8164</html>
8165```
8166 * @example ​ ````Attach multiple events—one on mouseenter and one on mouseleave to the same element:
8167```javascript
8168$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
8169 $( this ).toggleClass( "active" );
8170});
8171```
8172 */
8173 on<TType extends string>(
8174 events: TType,
8175 handler:
8176 | JQuery.TypeEventHandler<TElement, undefined, TElement, TElement, TType>
8177 | false,
8178 ): this;
8179 /**
8180 * Attach an event handler function for one or more events to the selected elements.
8181 * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
8182 * @param handler A function to execute when the event is triggered.
8183 * @see \`{@link https://api.jquery.com/on/ }\`
8184 * @since 1.7
8185 * @deprecated ​ Deprecated. Use \`{@link JQuery.Event }\` in place of \`{@link JQueryEventObject }\`.
8186 * @example ​ ````Display a paragraph&#39;s text in an alert when it is clicked:
8187```javascript
8188$( "p" ).on( "click", function() {
8189 alert( $( this ).text() );
8190});
8191```
8192 * @example ​ ````Cancel a form submit action and prevent the event from bubbling up by returning false:
8193```javascript
8194$( "form" ).on( "submit", false );
8195```
8196 * @example ​ ````Cancel only the default action by using .preventDefault().
8197```javascript
8198$( "form" ).on( "submit", function( event ) {
8199 event.preventDefault();
8200});
8201```
8202 * @example ​ ````Stop submit events from bubbling without preventing form submit, using .stopPropagation().
8203```javascript
8204$( "form" ).on( "submit", function( event ) {
8205 event.stopPropagation();
8206});
8207```
8208 * @example ​ ````Pass data to the event handler using the second argument to .trigger()
8209```javascript
8210$( "div" ).on( "click", function( event, person ) {
8211 alert( "Hello, " + person.name );
8212});
8213$( "div" ).trigger( "click", { name: "Jim" } );
8214```
8215 * @example ​ ````Use the the second argument of .trigger() to pass an array of data to the event handler
8216```javascript
8217$( "div" ).on( "click", function( event, salutation, name ) {
8218 alert( salutation + ", " + name );
8219});
8220$( "div" ).trigger( "click", [ "Goodbye", "Jim" ] );
8221```
8222 * @example ​ ````Attach and trigger custom (non-browser) events.
8223```html
8224<!doctype html>
8225<html lang="en">
8226<head>
8227 <meta charset="utf-8">
8228 <title>on demo</title>
8229 <style>
8230 p {
8231 color: red;
8232 }
8233 span {
8234 color: blue;
8235 }
8236 </style>
8237 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
8238</head>
8239<body>
8240​
8241<p>Has an attached custom event.</p>
8242<button>Trigger custom event</button>
8243<span style="display:none;"></span>
8244​
8245<script>
8246$( "p" ).on( "myCustomEvent", function( event, myName ) {
8247 $( this ).text( myName + ", hi there!" );
8248 $( "span" )
8249 .stop()
8250 .css( "opacity", 1 )
8251 .text( "myName = " + myName )
8252 .fadeIn( 30 )
8253 .fadeOut( 1000 );
8254});
8255$( "button" ).click(function () {
8256 $( "p" ).trigger( "myCustomEvent", [ "John" ] );
8257});
8258</script>
8259​
8260</body>
8261</html>
8262```
8263 * @example ​ ````Attach multiple events—one on mouseenter and one on mouseleave to the same element:
8264```javascript
8265$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
8266 $( this ).toggleClass( "active" );
8267});
8268```
8269 */
8270 on(events: string, handler: (event: JQueryEventObject) => void): this;
8271 /**
8272 * Attach an event handler function for one or more events to the selected elements.
8273 * @param events An object in which the string keys represent one or more space-separated event types and optional
8274 * namespaces, and the values represent a handler function to be called for the event(s).
8275 * @param selector A selector string to filter the descendants of the selected elements that will call the handler. If
8276 * the selector is null or omitted, the handler is always called when it reaches the selected element.
8277 * @param data Data to be passed to the handler in event.data when an event occurs.
8278 * @see \`{@link https://api.jquery.com/on/ }\`
8279 * @since 1.7
8280 */
8281 on<TData>(
8282 events: JQuery.TypeEventHandlers<TElement, TData, any, any>,
8283 selector: JQuery.Selector,
8284 data: TData,
8285 ): this;
8286 /**
8287 * Attach an event handler function for one or more events to the selected elements.
8288 * @param events An object in which the string keys represent one or more space-separated event types and optional
8289 * namespaces, and the values represent a handler function to be called for the event(s).
8290 * @param selector A selector string to filter the descendants of the selected elements that will call the handler. If
8291 * the selector is null or omitted, the handler is always called when it reaches the selected element.
8292 * @param data Data to be passed to the handler in event.data when an event occurs.
8293 * @see \`{@link https://api.jquery.com/on/ }\`
8294 * @since 1.7
8295 */
8296 on<TData>(
8297 events: JQuery.TypeEventHandlers<TElement, TData, TElement, TElement>,
8298 selector: null | undefined,
8299 data: TData,
8300 ): this;
8301 /**
8302 * Attach an event handler function for one or more events to the selected elements.
8303 * @param events An object in which the string keys represent one or more space-separated event types and optional
8304 * namespaces, and the values represent a handler function to be called for the event(s).
8305 * @param selector A selector string to filter the descendants of the selected elements that will call the handler. If
8306 * the selector is null or omitted, the handler is always called when it reaches the selected element.
8307 * @see \`{@link https://api.jquery.com/on/ }\`
8308 * @since 1.7
8309 */
8310 on(events: JQuery.TypeEventHandlers<TElement, undefined, any, any>, selector: JQuery.Selector): this;
8311 /**
8312 * Attach an event handler function for one or more events to the selected elements.
8313 * @param events An object in which the string keys represent one or more space-separated event types and optional
8314 * namespaces, and the values represent a handler function to be called for the event(s).
8315 * @param data Data to be passed to the handler in event.data when an event occurs.
8316 * @see \`{@link https://api.jquery.com/on/ }\`
8317 * @since 1.7
8318 */
8319 on<TData>(
8320 events: JQuery.TypeEventHandlers<TElement, TData, TElement, TElement>,
8321 data: TData,
8322 ): this;
8323 /**
8324 * Attach an event handler function for one or more events to the selected elements.
8325 * @param events An object in which the string keys represent one or more space-separated event types and optional
8326 * namespaces, and the values represent a handler function to be called for the event(s).
8327 * @see \`{@link https://api.jquery.com/on/ }\`
8328 * @since 1.7
8329 * @example ​ ````Attach multiple event handlers simultaneously using a plain object.
8330```html
8331<!doctype html>
8332<html lang="en">
8333<head>
8334 <meta charset="utf-8">
8335 <title>on demo</title>
8336 <style>
8337 .test {
8338 color: #000;
8339 padding: .5em;
8340 border: 1px solid #444;
8341 }
8342 .active {
8343 color: #900;
8344 }
8345 .inside {
8346 background-color: aqua;
8347 }
8348 </style>
8349 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
8350</head>
8351<body>
8352​
8353<div class="test">test div</div>
8354​
8355<script>
8356$( "div.test" ).on({
8357 click: function() {
8358 $( this ).toggleClass( "active" );
8359 }, mouseenter: function() {
8360 $( this ).addClass( "inside" );
8361 }, mouseleave: function() {
8362 $( this ).removeClass( "inside" );
8363 }
8364});
8365</script>
8366​
8367</body>
8368</html>
8369```
8370 */
8371 on(events: JQuery.TypeEventHandlers<TElement, undefined, TElement, TElement>): this;
8372 /**
8373 * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
8374 * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
8375 * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the
8376 * selector is null or omitted, the event is always triggered when it reaches the selected element.
8377 * @param data Data to be passed to the handler in event.data when an event is triggered.
8378 * @param handler A function to execute when the event is triggered.
8379 * @see \`{@link https://api.jquery.com/one/ }\`
8380 * @since 1.7
8381 */
8382 one<TType extends string, TData>(
8383 events: TType,
8384 selector: JQuery.Selector,
8385 data: TData,
8386 handler: JQuery.TypeEventHandler<TElement, TData, any, any, TType>,
8387 ): this;
8388 /**
8389 * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
8390 * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
8391 * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the
8392 * selector is null or omitted, the event is always triggered when it reaches the selected element.
8393 * @param data Data to be passed to the handler in event.data when an event is triggered.
8394 * @param handler A function to execute when the event is triggered.
8395 * @see \`{@link https://api.jquery.com/one/ }\`
8396 * @since 1.7
8397 */
8398 one<TType extends string, TData>(
8399 events: TType,
8400 selector: null | undefined,
8401 data: TData,
8402 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, TType>,
8403 ): this;
8404 /**
8405 * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
8406 * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
8407 * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the
8408 * selector is null or omitted, the event is always triggered when it reaches the selected element.
8409 * @param handler A function to execute when the event is triggered. The value false is also allowed as a shorthand
8410 * for a function that simply does return false.
8411 * @see \`{@link https://api.jquery.com/one/ }\`
8412 * @since 1.7
8413 */
8414 one<TType extends string>(
8415 events: TType,
8416 selector: JQuery.Selector,
8417 handler:
8418 | JQuery.TypeEventHandler<TElement, undefined, any, any, TType>
8419 | false,
8420 ): this;
8421 /**
8422 * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
8423 * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
8424 * @param data Data to be passed to the handler in event.data when an event is triggered.
8425 * @param handler A function to execute when the event is triggered.
8426 * @see \`{@link https://api.jquery.com/one/ }\`
8427 * @since 1.7
8428 */
8429 one<TType extends string, TData>(
8430 events: TType,
8431 data: TData,
8432 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, TType>,
8433 ): this;
8434 /**
8435 * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
8436 * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
8437 * @param handler A function to execute when the event is triggered. The value false is also allowed as a shorthand
8438 * for a function that simply does return false.
8439 * @see \`{@link https://api.jquery.com/one/ }\`
8440 * @since 1.7
8441 * @example ​ ````Tie a one-time click to each div.
8442```html
8443<!doctype html>
8444<html lang="en">
8445<head>
8446 <meta charset="utf-8">
8447 <title>one demo</title>
8448 <style>
8449 div {
8450 width: 60px;
8451 height: 60px;
8452 margin: 5px;
8453 float: left;
8454 background: green;
8455 border: 10px outset;
8456 cursor:pointer;
8457 }
8458 p {
8459 color: red;
8460 margin: 0;
8461 clear: left;
8462 }
8463 </style>
8464 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
8465</head>
8466<body>
8467​
8468<div></div>
8469<div></div>
8470<div></div>
8471<div></div>
8472<div></div>
8473<p>Click a green square...</p>
8474​
8475<script>
8476var n = 0;
8477$( "div" ).one( "click", function() {
8478 var index = $( "div" ).index( this );
8479 $( this ).css({
8480 borderStyle: "inset",
8481 cursor: "auto"
8482 });
8483 $( "p" ).text( "Div at index #" + index + " clicked." +
8484 " That's " + (++n) + " total clicks." );
8485});
8486</script>
8487​
8488</body>
8489</html>
8490```
8491 * @example ​ ````To display the text of all paragraphs in an alert box the first time each of them is clicked:
8492```javascript
8493$( "p" ).one( "click", function() {
8494 alert( $( this ).text() );
8495});
8496```
8497 * @example ​ ````Event handlers will trigger once per element per event type
8498```html
8499<!doctype html>
8500<html lang="en">
8501<head>
8502 <meta charset="utf-8">
8503 <title>one demo</title>
8504 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
8505</head>
8506<body>
8507​
8508<div class="count">0</div>
8509<div class="target">Hover/click me</div>
8510​
8511<script>
8512var n = 0;
8513$(".target").one("click mouseenter", function() {
8514 $(".count").html(++n);
8515});
8516</script>
8517​
8518</body>
8519</html>
8520```
8521 */
8522 one<TType extends string>(
8523 events: TType,
8524 handler:
8525 | JQuery.TypeEventHandler<TElement, undefined, TElement, TElement, TType>
8526 | false,
8527 ): this;
8528 /**
8529 * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
8530 * @param events An object in which the string keys represent one or more space-separated event types and optional
8531 * namespaces, and the values represent a handler function to be called for the event(s).
8532 * @param selector A selector string to filter the descendants of the selected elements that will call the handler. If
8533 * the selector is null or omitted, the handler is always called when it reaches the selected element.
8534 * @param data Data to be passed to the handler in event.data when an event occurs.
8535 * @see \`{@link https://api.jquery.com/one/ }\`
8536 * @since 1.7
8537 */
8538 one<TData>(
8539 events: JQuery.TypeEventHandlers<TElement, TData, any, any>,
8540 selector: JQuery.Selector,
8541 data: TData,
8542 ): this;
8543 /**
8544 * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
8545 * @param events An object in which the string keys represent one or more space-separated event types and optional
8546 * namespaces, and the values represent a handler function to be called for the event(s).
8547 * @param selector A selector string to filter the descendants of the selected elements that will call the handler. If
8548 * the selector is null or omitted, the handler is always called when it reaches the selected element.
8549 * @param data Data to be passed to the handler in event.data when an event occurs.
8550 * @see \`{@link https://api.jquery.com/one/ }\`
8551 * @since 1.7
8552 */
8553 one<TData>(
8554 events: JQuery.TypeEventHandlers<TElement, TData, TElement, TElement>,
8555 selector: null | undefined,
8556 data: TData,
8557 ): this;
8558 /**
8559 * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
8560 * @param events An object in which the string keys represent one or more space-separated event types and optional
8561 * namespaces, and the values represent a handler function to be called for the event(s).
8562 * @param selector A selector string to filter the descendants of the selected elements that will call the handler. If
8563 * the selector is null or omitted, the handler is always called when it reaches the selected element.
8564 * @see \`{@link https://api.jquery.com/one/ }\`
8565 * @since 1.7
8566 */
8567 one(events: JQuery.TypeEventHandlers<TElement, undefined, any, any>, selector: JQuery.Selector): this;
8568 /**
8569 * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
8570 * @param events An object in which the string keys represent one or more space-separated event types and optional
8571 * namespaces, and the values represent a handler function to be called for the event(s).
8572 * @param data Data to be passed to the handler in event.data when an event occurs.
8573 * @see \`{@link https://api.jquery.com/one/ }\`
8574 * @since 1.7
8575 */
8576 one<TData>(
8577 events: JQuery.TypeEventHandlers<TElement, TData, TElement, TElement>,
8578 data: TData,
8579 ): this;
8580 /**
8581 * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
8582 * @param events An object in which the string keys represent one or more space-separated event types and optional
8583 * namespaces, and the values represent a handler function to be called for the event(s).
8584 * @see \`{@link https://api.jquery.com/one/ }\`
8585 * @since 1.7
8586 */
8587 one(events: JQuery.TypeEventHandlers<TElement, undefined, TElement, TElement>): this;
8588 /**
8589 * Set the CSS outer height of each element in the set of matched elements.
8590 * @param value_function _&#x40;param_ `value_function`
8591 * <br>
8592 * * `value` — A number representing the number of pixels, or a number along with an optional unit of measure
8593 * appended (as a string). <br>
8594 * * `function` — A function returning the outer height to set. Receives the index position of the element in the set
8595 * and the old outer height as arguments. Within the function, `this` refers to the current element in
8596 * the set.
8597 * @see \`{@link https://api.jquery.com/outerHeight/ }\`
8598 * @since 1.8.0
8599 * @example ​ ````Change the outer height of each div the first time it is clicked (and change its color).
8600```html
8601<!doctype html>
8602<html lang="en">
8603<head>
8604 <meta charset="utf-8">
8605 <title>outerHeight demo</title>
8606 <style>
8607 div {
8608 width: 50px;
8609 padding: 10px;
8610 height: 60px;
8611 float: left;
8612 margin: 5px;
8613 background: red;
8614 cursor: pointer;
8615 }
8616 .mod {
8617 background: blue;
8618 cursor: default;
8619 }
8620 </style>
8621 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
8622</head>
8623<body>
8624​
8625<div>d</div>
8626<div>d</div>
8627<div>d</div>
8628<div>d</div>
8629<div>d</div>
8630​
8631<script>
8632var modHeight = 60;
8633$( "div" ).one( "click", function() {
8634 $( this ).outerHeight( modHeight ).addClass( "mod" );
8635 modHeight -= 8;
8636});
8637</script>
8638​
8639</body>
8640</html>
8641```
8642 */
8643 outerHeight(
8644 value_function: string | number | ((this: TElement, index: number, height: number) => string | number),
8645 includeMargin?: boolean,
8646 ): this;
8647 /**
8648 * Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements.
8649 * @param includeMargin A Boolean indicating whether to include the element's margin in the calculation.
8650 * @see \`{@link https://api.jquery.com/outerHeight/ }\`
8651 * @since 1.2.6
8652 * @example ​ ````Get the outerHeight of a paragraph.
8653```html
8654<!doctype html>
8655<html lang="en">
8656<head>
8657 <meta charset="utf-8">
8658 <title>outerHeight demo</title>
8659 <style>
8660 p {
8661 margin: 10px;
8662 padding: 5px;
8663 border: 2px solid #666;
8664 }
8665 </style>
8666 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
8667</head>
8668<body>
8669​
8670<p>Hello</p><p></p>
8671​
8672<script>
8673var p = $( "p:first" );
8674$( "p:last" ).text(
8675 "outerHeight:" + p.outerHeight() +
8676 " , outerHeight( true ):" + p.outerHeight( true ) );
8677</script>
8678​
8679</body>
8680</html>
8681```
8682 */
8683 outerHeight(includeMargin?: boolean): number | undefined;
8684 /**
8685 * Set the CSS outer width of each element in the set of matched elements.
8686 * @param value_function _&#x40;param_ `value_function`
8687 * <br>
8688 * * `value` — A number representing the number of pixels, or a number along with an optional unit of measure
8689 * appended (as a string). <br>
8690 * * `function` — A function returning the outer width to set. Receives the index position of the element in the set
8691 * and the old outer width as arguments. Within the function, `this` refers to the current element in
8692 * the set.
8693 * @see \`{@link https://api.jquery.com/outerWidth/ }\`
8694 * @since 1.8.0
8695 * @example ​ ````Change the outer width of each div the first time it is clicked (and change its color).
8696```html
8697<!doctype html>
8698<html lang="en">
8699<head>
8700 <meta charset="utf-8">
8701 <title>outerWidth demo</title>
8702 <style>
8703 div {
8704 width: 60px;
8705 padding: 10px;
8706 height: 50px;
8707 float: left;
8708 margin: 5px;
8709 background: red;
8710 cursor: pointer;
8711 }
8712 .mod {
8713 background: blue;
8714 cursor: default;
8715 }
8716 </style>
8717 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
8718</head>
8719<body>
8720​
8721<div>d</div>
8722<div>d</div>
8723<div>d</div>
8724<div>d</div>
8725<div>d</div>
8726​
8727<script>
8728var modWidth = 60;
8729$( "div" ).one( "click", function() {
8730 $( this ).outerWidth( modWidth ).addClass( "mod" );
8731 modWidth -= 8;
8732});
8733</script>
8734​
8735</body>
8736</html>
8737```
8738 */
8739 outerWidth(
8740 value_function: string | number | ((this: TElement, index: number, width: number) => string | number),
8741 includeMargin?: boolean,
8742 ): this;
8743 /**
8744 * Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements.
8745 * @param includeMargin A Boolean indicating whether to include the element's margin in the calculation.
8746 * @see \`{@link https://api.jquery.com/outerWidth/ }\`
8747 * @since 1.2.6
8748 * @example ​ ````Get the outerWidth of a paragraph.
8749```html
8750<!doctype html>
8751<html lang="en">
8752<head>
8753 <meta charset="utf-8">
8754 <title>outerWidth demo</title>
8755 <style>
8756 p {
8757 margin: 10px;
8758 padding: 5px;
8759 border: 2px solid #666;
8760 }
8761 </style>
8762 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
8763</head>
8764<body>
8765​
8766<p>Hello</p><p></p>
8767​
8768<script>
8769var p = $( "p:first" );
8770$( "p:last" ).text(
8771 "outerWidth:" + p.outerWidth() +
8772 " , outerWidth( true ):" + p.outerWidth( true ) );
8773</script>
8774​
8775</body>
8776</html>
8777```
8778 */
8779 outerWidth(includeMargin?: boolean): number | undefined;
8780 /**
8781 * Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
8782 * @param selector A string containing a selector expression to match elements against.
8783 * @see \`{@link https://api.jquery.com/parent/ }\`
8784 * @since 1.0
8785 * @example ​ ````Shows the parent of each element as (parent &gt; child). Check the View Source to see the raw html.
8786```html
8787<!doctype html>
8788<html lang="en">
8789<head>
8790 <meta charset="utf-8">
8791 <title>parent demo</title>
8792 <style>
8793 div, p {
8794 margin: 10px;
8795 }
8796 </style>
8797 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
8798</head>
8799<body>
8800​
8801<div>div,
8802 <span>span, </span>
8803 <b>b </b>
8804</div>
8805​
8806<p>p,
8807 <span>span,
8808 <em>em </em>
8809 </span>
8810</p>
8811​
8812<div>div,
8813 <strong>strong,
8814 <span>span, </span>
8815 <em>em,
8816 <b>b, </b>
8817 </em>
8818 </strong>
8819 <b>b </b>
8820</div>
8821​
8822<script>
8823$( "*", document.body ).each(function() {
8824 var parentTag = $( this ).parent().get( 0 ).tagName;
8825 $( this ).prepend( document.createTextNode( parentTag + " > " ) );
8826});
8827</script>
8828​
8829</body>
8830</html>
8831```
8832 * @example ​ ````Find the parent element of each paragraph with a class &quot;selected&quot;.
8833```html
8834<!doctype html>
8835<html lang="en">
8836<head>
8837 <meta charset="utf-8">
8838 <title>parent demo</title>
8839 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
8840</head>
8841<body>
8842​
8843<div><p>Hello</p></div>
8844<div class="selected"><p>Hello Again</p></div>
8845​
8846<script>
8847$( "p" ).parent( ".selected" ).css( "background", "yellow" );
8848</script>
8849​
8850</body>
8851</html>
8852```
8853 */
8854 parent<K extends keyof HTMLElementTagNameMap>(selector: K): JQuery<HTMLElementTagNameMap[K]>;
8855 parent<K extends keyof SVGElementTagNameMap>(selector: K): JQuery<SVGElementTagNameMap[K]>;
8856 // eslint-disable-next-line @definitelytyped/no-unnecessary-generics
8857 parent<E extends Element = HTMLElement>(selector?: JQuery.Selector): JQuery<E>;
8858 /**
8859 * Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
8860 * @param selector A string containing a selector expression to match elements against.
8861 * @see \`{@link https://api.jquery.com/parents/ }\`
8862 * @since 1.0
8863 * @example ​ ````Find all parent elements of each b.
8864```html
8865<!doctype html>
8866<html lang="en">
8867<head>
8868 <meta charset="utf-8">
8869 <title>parents demo</title>
8870 <style>
8871 b, span, p, html body {
8872 padding: .5em;
8873 border: 1px solid;
8874 }
8875 b {
8876 color: blue;
8877 }
8878 strong {
8879 color: red;
8880 }
8881 </style>
8882 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
8883</head>
8884<body>
8885​
8886<div>
8887 <p>
8888 <span>
8889 <b>My parents are: </b>
8890 </span>
8891 </p>
8892</div>
8893​
8894<script>
8895var parentEls = $( "b" ).parents()
8896 .map(function() {
8897 return this.tagName;
8898 })
8899 .get()
8900 .join( ", " );
8901$( "b" ).append( "<strong>" + parentEls + "</strong>" );
8902</script>
8903​
8904</body>
8905</html>
8906```
8907 * @example ​ ````Click to find all unique div parent elements of each span.
8908```html
8909<!doctype html>
8910<html lang="en">
8911<head>
8912 <meta charset="utf-8">
8913 <title>parents demo</title>
8914 <style>
8915 p, div, span {
8916 margin: 2px;
8917 padding: 1px;
8918 }
8919 div {
8920 border: 2px white solid;
8921 }
8922 span {
8923 cursor: pointer;
8924 font-size: 12px;
8925 }
8926 .selected {
8927 color: blue;
8928 }
8929 b {
8930 color: red;
8931 display: block;
8932 font-size: 14px;
8933 }
8934 </style>
8935 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
8936</head>
8937<body>
8938​
8939<p>
8940 <div>
8941 <div><span>Hello</span></div>
8942 <span>Hello Again</span>
8943 </div>
8944 <div>
8945 <span>And Hello Again</span>
8946 </div>
8947 </p>
8948 <b>Click Hellos to toggle their parents.</b>
8949​
8950<script>
8951function showParents() {
8952 $( "div" ).css( "border-color", "white" );
8953 var len = $( "span.selected" )
8954 .parents( "div" )
8955 .css( "border", "2px red solid" )
8956 .length;
8957 $( "b" ).text( "Unique div parents: " + len );
8958}
8959$( "span" ).click(function() {
8960 $( this ).toggleClass( "selected" );
8961 showParents();
8962});
8963</script>
8964​
8965</body>
8966</html>
8967```
8968 */
8969 parents<K extends keyof HTMLElementTagNameMap>(selector: K | JQuery<K>): JQuery<HTMLElementTagNameMap[K]>;
8970 parents<K extends keyof SVGElementTagNameMap>(selector: K | JQuery<K>): JQuery<SVGElementTagNameMap[K]>;
8971 // eslint-disable-next-line @definitelytyped/no-unnecessary-generics
8972 parents<E extends Element = HTMLElement>(selector?: JQuery.Selector): JQuery<E>;
8973 /**
8974 * Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.
8975 * @param selector_element _&#x40;param_ `selector_element`
8976 * <br>
8977 * * `selector` — A string containing a selector expression to indicate where to stop matching ancestor elements. <br>
8978 * * `element` — A DOM node or jQuery object indicating where to stop matching ancestor elements.
8979 * @param filter A string containing a selector expression to match elements against.
8980 * @see \`{@link https://api.jquery.com/parentsUntil/ }\`
8981 * @since 1.4
8982 * @since 1.6
8983 * @example ​ ````Find the ancestors of &lt;li class=&quot;item-a&quot;&gt; up to &lt;ul class=&quot;level-1&quot;&gt; and give them a red background color. Also, find ancestors of &lt;li class=&quot;item-2&quot;&gt; that have a class of &quot;yes&quot; up to &lt;ul class=&quot;level-1&quot;&gt; and give them a green border.
8984```html
8985<!doctype html>
8986<html lang="en">
8987<head>
8988 <meta charset="utf-8">
8989 <title>parentsUntil demo</title>
8990 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
8991</head>
8992<body>
8993​
8994<ul class="level-1 yes">
8995 <li class="item-i">I</li>
8996 <li class="item-ii">II
8997 <ul class="level-2 yes">
8998 <li class="item-a">A</li>
8999 <li class="item-b">B
9000 <ul class="level-3">
9001 <li class="item-1">1</li>
9002 <li class="item-2">2</li>
9003 <li class="item-3">3</li>
9004 </ul>
9005 </li>
9006 <li class="item-c">C</li>
9007 </ul>
9008 </li>
9009 <li class="item-iii">III</li>
9010</ul>
9011​
9012<script>
9013$( "li.item-a" )
9014 .parentsUntil( ".level-1" )
9015 .css( "background-color", "red" );
9016​
9017$( "li.item-2" )
9018 .parentsUntil( $( "ul.level-1" ), ".yes" )
9019 .css( "border", "3px solid green" );
9020</script>
9021​
9022</body>
9023</html>
9024```
9025 */
9026 parentsUntil<K extends keyof HTMLElementTagNameMap>(
9027 selector_element: JQuery.Selector | Element | JQuery,
9028 filter: K,
9029 ): JQuery<HTMLElementTagNameMap[K]>;
9030 parentsUntil<K extends keyof SVGElementTagNameMap>(
9031 selector_element: JQuery.Selector | Element | JQuery,
9032 filter: K,
9033 ): JQuery<SVGElementTagNameMap[K]>;
9034 // eslint-disable-next-line @definitelytyped/no-unnecessary-generics
9035 parentsUntil<E extends Element = HTMLElement>(
9036 selector_element?: JQuery.Selector | Element | JQuery,
9037 filter?: JQuery.Selector,
9038 ): JQuery<E>;
9039 /**
9040 * Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
9041 * @see \`{@link https://api.jquery.com/position/ }\`
9042 * @since 1.2
9043 * @example ​ ````Access the position of the second paragraph:
9044```html
9045<!doctype html>
9046<html lang="en">
9047<head>
9048 <meta charset="utf-8">
9049 <title>position demo</title>
9050 <style>
9051 div {
9052 padding: 15px;
9053 }
9054 p {
9055 margin-left: 10px;
9056 }
9057 </style>
9058 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9059</head>
9060<body>
9061​
9062<div>
9063 <p>Hello</p>
9064</div>
9065<p></p>
9066​
9067<script>
9068var p = $( "p:first" );
9069var position = p.position();
9070$( "p:last" ).text( "left: " + position.left + ", top: " + position.top );
9071</script>
9072​
9073</body>
9074</html>
9075```
9076 */
9077 position(): JQuery.Coordinates;
9078 /**
9079 * Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
9080 * @param contents One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or
9081 * jQuery objects to insert at the beginning of each element in the set of matched elements.
9082 * @see \`{@link https://api.jquery.com/prepend/ }\`
9083 * @since 1.0
9084 * @example ​ ````Prepends some HTML to all paragraphs.
9085```html
9086<!doctype html>
9087<html lang="en">
9088<head>
9089 <meta charset="utf-8">
9090 <title>prepend demo</title>
9091 <style>
9092 p {
9093 background: yellow;
9094 }
9095 </style>
9096 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9097</head>
9098<body>
9099​
9100<p>there, friend!</p>
9101<p>amigo!</p>
9102​
9103<script>
9104$( "p" ).prepend( "<b>Hello </b>" );
9105</script>
9106​
9107</body>
9108</html>
9109```
9110 * @example ​ ````Prepends a DOM Element to all paragraphs.
9111```html
9112<!doctype html>
9113<html lang="en">
9114<head>
9115 <meta charset="utf-8">
9116 <title>prepend demo</title>
9117 <style>
9118 p {
9119 background: yellow;
9120 }
9121 </style>
9122 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9123</head>
9124<body>
9125​
9126<p>is what I'd say</p>
9127<p>is what I said</p>
9128​
9129<script>
9130$( "p" ).prepend( document.createTextNode( "Hello " ) );
9131</script>
9132​
9133</body>
9134</html>
9135```
9136 * @example ​ ````Prepends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.
9137```html
9138<!doctype html>
9139<html lang="en">
9140<head>
9141 <meta charset="utf-8">
9142 <title>prepend demo</title>
9143 <style>
9144 p {
9145 background: yellow;
9146 }
9147 </style>
9148 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9149</head>
9150<body>
9151​
9152<p> is what was said.</p><b>Hello</b>
9153​
9154<script>
9155$( "p" ).prepend( $( "b" ) );
9156</script>
9157​
9158</body>
9159</html>
9160```
9161 */
9162 prepend(...contents: Array<JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>>): this;
9163 /**
9164 * Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
9165 * @param funсtion A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert at
9166 * the beginning of each element in the set of matched elements. Receives the index position of the
9167 * element in the set and the old HTML value of the element as arguments. Within the function, `this`
9168 * refers to the current element in the set.
9169 * @see \`{@link https://api.jquery.com/prepend/ }\`
9170 * @since 1.4
9171 */
9172 prepend(
9173 funсtion: (
9174 this: TElement,
9175 index: number,
9176 html: string,
9177 ) => JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>,
9178 ): this;
9179 /**
9180 * Insert every element in the set of matched elements to the beginning of the target.
9181 * @param target A selector, element, HTML string, array of elements, or jQuery object; the matched set of elements
9182 * will be inserted at the beginning of the element(s) specified by this parameter.
9183 * @see \`{@link https://api.jquery.com/prependTo/ }\`
9184 * @since 1.0
9185 * @example ​ ````Prepend all spans to the element with the ID &quot;foo&quot; (Check .prepend() documentation for more examples)
9186```html
9187<!doctype html>
9188<html lang="en">
9189<head>
9190 <meta charset="utf-8">
9191 <title>prependTo demo</title>
9192 <style>
9193 div {
9194 background: yellow;
9195 }
9196 </style>
9197 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9198</head>
9199<body>
9200​
9201<div id="foo">FOO!</div>
9202<span>I have something to say... </span>
9203​
9204<script>
9205$( "span" ).prependTo( "#foo" );
9206</script>
9207​
9208</body>
9209</html>
9210```
9211 */
9212 prependTo(
9213 target: JQuery.Selector | JQuery.htmlString | JQuery.TypeOrArray<Element | DocumentFragment> | JQuery,
9214 ): this;
9215 /**
9216 * 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.
9217 * @param selector A string containing a selector expression to match elements against.
9218 * @see \`{@link https://api.jquery.com/prev/ }\`
9219 * @since 1.0
9220 * @example ​ ````Find the very previous sibling of each div.
9221```html
9222<!doctype html>
9223<html lang="en">
9224<head>
9225 <meta charset="utf-8">
9226 <title>prev demo</title>
9227 <style>
9228 div {
9229 width: 40px;
9230 height: 40px;
9231 margin: 10px;
9232 float: left;
9233 border: 2px blue solid;
9234 padding: 2px;
9235 }
9236 span {
9237 font-size: 14px;
9238 }
9239 p {
9240 clear: left;
9241 margin: 10px;
9242 }
9243 </style>
9244 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9245</head>
9246<body>
9247​
9248<div></div>
9249<div></div>
9250<div><span>has child</span></div>
9251<div></div>
9252<div></div>
9253<div></div>
9254<div id="start"></div>
9255<div></div>
9256<p><button>Go to Prev</button></p>
9257​
9258<script>
9259var $curr = $( "#start" );
9260$curr.css( "background", "#f99" );
9261$( "button" ).click(function() {
9262 $curr = $curr.prev();
9263 $( "div" ).css( "background", "" );
9264 $curr.css( "background", "#f99" );
9265});
9266</script>
9267​
9268</body>
9269</html>
9270```
9271 * @example ​ ````For each paragraph, find the very previous sibling that has a class &quot;selected&quot;.
9272```html
9273<!doctype html>
9274<html lang="en">
9275<head>
9276 <meta charset="utf-8">
9277 <title>prev demo</title>
9278 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9279</head>
9280<body>
9281​
9282<div><span>Hello</span></div>
9283<p class="selected">Hello Again</p>
9284<p>And Again</p>
9285​
9286<script>
9287$( "p" ).prev( ".selected" ).css( "background", "yellow" );
9288</script>
9289​
9290</body>
9291</html>
9292```
9293 */
9294 prev<K extends keyof HTMLElementTagNameMap>(selector: K): JQuery<HTMLElementTagNameMap[K]>;
9295 prev<K extends keyof SVGElementTagNameMap>(selector: K): JQuery<SVGElementTagNameMap[K]>;
9296 // eslint-disable-next-line @definitelytyped/no-unnecessary-generics
9297 prev<E extends Element = HTMLElement>(selector?: JQuery.Selector): JQuery<E>;
9298 /**
9299 * Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.
9300 * @param selector A string containing a selector expression to match elements against.
9301 * @see \`{@link https://api.jquery.com/prevAll/ }\`
9302 * @since 1.2
9303 * @example ​ ````Locate all the divs preceding the last div and give them a class.
9304```html
9305<!doctype html>
9306<html lang="en">
9307<head>
9308 <meta charset="utf-8">
9309 <title>prevAll demo</title>
9310 <style>
9311 div {
9312 width: 70px;
9313 height: 70px;
9314 background: #abc;
9315 border: 2px solid black;
9316 margin: 10px;
9317 float: left;
9318 }
9319 div.before {
9320 border-color: red;
9321 }
9322 </style>
9323 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9324</head>
9325<body>
9326​
9327<div></div>
9328<div></div>
9329<div></div>
9330<div></div>
9331​
9332<script>
9333$( "div:last" ).prevAll().addClass( "before" );
9334</script>
9335​
9336</body>
9337</html>
9338```
9339 */
9340 prevAll<K extends keyof HTMLElementTagNameMap>(selector: K): JQuery<HTMLElementTagNameMap[K]>;
9341 prevAll<K extends keyof SVGElementTagNameMap>(selector: K): JQuery<SVGElementTagNameMap[K]>;
9342 // eslint-disable-next-line @definitelytyped/no-unnecessary-generics
9343 prevAll<E extends Element = HTMLElement>(selector?: JQuery.Selector): JQuery<E>;
9344 /**
9345 * Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.
9346 * @param selector_element _&#x40;param_ `selector_element`
9347 * <br>
9348 * * `selector` — A string containing a selector expression to indicate where to stop matching preceding sibling elements. <br>
9349 * * `element` — A DOM node or jQuery object indicating where to stop matching preceding sibling elements.
9350 * @param filter A string containing a selector expression to match elements against.
9351 * @see \`{@link https://api.jquery.com/prevUntil/ }\`
9352 * @since 1.4
9353 * @since 1.6
9354 * @example ​ ````Find the siblings that precede &lt;dt id=&quot;term-2&quot;&gt; up to the preceding &lt;dt&gt; and give them a red background color. Also, find previous &lt;dd&gt; siblings of &lt;dt id=&quot;term-3&quot;&gt; up to &lt;dt id=&quot;term-1&quot;&gt; and give them a green text color.
9355```html
9356<!doctype html>
9357<html lang="en">
9358<head>
9359 <meta charset="utf-8">
9360 <title>prevUntil demo</title>
9361 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9362</head>
9363<body>
9364​
9365<dl>
9366 <dt id="term-1">term 1</dt>
9367 <dd>definition 1-a</dd>
9368 <dd>definition 1-b</dd>
9369 <dd>definition 1-c</dd>
9370 <dd>definition 1-d</dd>
9371​
9372 <dt id="term-2">term 2</dt>
9373 <dd>definition 2-a</dd>
9374 <dd>definition 2-b</dd>
9375 <dd>definition 2-c</dd>
9376​
9377 <dt id="term-3">term 3</dt>
9378 <dd>definition 3-a</dd>
9379 <dd>definition 3-b</dd>
9380</dl>
9381​
9382<script>
9383$( "#term-2" ).prevUntil( "dt" )
9384 .css( "background-color", "red" );
9385​
9386var term1 = document.getElementById( "term-1" );
9387$( "#term-3" ).prevUntil( term1, "dd" )
9388 .css( "color", "green" );
9389</script>
9390​
9391</body>
9392</html>
9393```
9394 */
9395 prevUntil<K extends keyof HTMLElementTagNameMap>(
9396 selector_element: JQuery.Selector | Element | JQuery,
9397 filter: K,
9398 ): JQuery<HTMLElementTagNameMap[K]>;
9399 prevUntil<K extends keyof SVGElementTagNameMap>(
9400 selector_element: JQuery.Selector | Element | JQuery,
9401 filter: K,
9402 ): JQuery<SVGElementTagNameMap[K]>;
9403 // eslint-disable-next-line @definitelytyped/no-unnecessary-generics
9404 prevUntil<E extends Element = HTMLElement>(
9405 selector_element?: JQuery.Selector | Element | JQuery,
9406 filter?: JQuery.Selector,
9407 ): JQuery<E>;
9408 /**
9409 * Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.
9410 * @param type The type of queue that needs to be observed.
9411 * @param target Object onto which the promise methods have to be attached
9412 * @see \`{@link https://api.jquery.com/promise/ }\`
9413 * @since 1.6
9414 */
9415 promise<T extends object>(type: string, target: T): T & JQuery.Promise<this>;
9416 /**
9417 * Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.
9418 * @param target Object onto which the promise methods have to be attached
9419 * @see \`{@link https://api.jquery.com/promise/ }\`
9420 * @since 1.6
9421 */
9422 promise<T extends object>(target: T): T & JQuery.Promise<this>;
9423 /**
9424 * Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.
9425 * @param type The type of queue that needs to be observed.
9426 * @see \`{@link https://api.jquery.com/promise/ }\`
9427 * @since 1.6
9428 * @example ​ ````Using .promise() on a collection with no active animation returns a resolved Promise:
9429```javascript
9430var div = $( "<div>" );
9431​
9432div.promise().done(function( arg1 ) {
9433 // Will fire right away and alert "true"
9434 alert( this === div && arg1 === div );
9435});
9436```
9437 * @example ​ ````Resolve the returned Promise when all animations have ended (including those initiated in the animation callback or added later on):
9438```html
9439<!doctype html>
9440<html lang="en">
9441<head>
9442 <meta charset="utf-8">
9443 <title>promise demo</title>
9444 <style>
9445 div {
9446 height: 50px;
9447 width: 50px;
9448 float: left;
9449 margin-right: 10px;
9450 display: none;
9451 background-color: #090;
9452 }
9453 </style>
9454 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9455</head>
9456<body>
9457​
9458<button>Go</button>
9459<p>Ready...</p>
9460<div></div>
9461<div></div>
9462<div></div>
9463<div></div>
9464​
9465<script>
9466$( "button" ).on( "click", function() {
9467 $( "p" ).append( "Started..." );
9468​
9469 $( "div" ).each(function( i ) {
9470 $( this ).fadeIn().fadeOut( 1000 * ( i + 1 ) );
9471 });
9472​
9473 $( "div" ).promise().done(function() {
9474 $( "p" ).append( " Finished! " );
9475 });
9476});
9477</script>
9478​
9479</body>
9480</html>
9481```
9482 * @example ​ ````Resolve the returned Promise using a $.when() statement (the .promise() method makes it possible to do this with jQuery collections):
9483```html
9484<!doctype html>
9485<html lang="en">
9486<head>
9487 <meta charset="utf-8">
9488 <title>promise demo</title>
9489 <style>
9490 div {
9491 height: 50px;
9492 width: 50px;
9493 float: left;
9494 margin-right: 10px;
9495 display: none;
9496 background-color: #090;
9497 }
9498 </style>
9499 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9500</head>
9501<body>
9502​
9503<button>Go</button>
9504<p>Ready...</p>
9505<div></div>
9506<div></div>
9507<div></div>
9508<div></div>
9509​
9510<script>
9511var effect = function() {
9512 return $( "div" ).fadeIn( 800 ).delay( 1200 ).fadeOut();
9513};
9514​
9515$( "button" ).on( "click", function() {
9516 $( "p" ).append( " Started... " );
9517​
9518 $.when( effect() ).done(function() {
9519 $( "p" ).append( " Finished! " );
9520 });
9521});
9522</script>
9523​
9524</body>
9525</html>
9526```
9527 */
9528 promise(type?: string): JQuery.Promise<this>;
9529 /**
9530 * Set one or more properties for the set of matched elements.
9531 * @param propertyName The name of the property to set.
9532 * @param value_function _&#x40;param_ `value_function`
9533 * <br>
9534 * * `value` — A value to set for the property. <br>
9535 * * `function` — A function returning the value to set. Receives the index position of the element in the set and the
9536 * old property value as arguments. Within the function, the keyword `this` refers to the current element.
9537 * @see \`{@link https://api.jquery.com/prop/ }\`
9538 * @since 1.6
9539 */
9540 prop(
9541 propertyName: string,
9542 value_function:
9543 | string
9544 | number
9545 | boolean
9546 | symbol
9547 | object
9548 | null
9549 | undefined
9550 | ((this: TElement, index: number, oldPropertyValue: any) => any),
9551 ): this;
9552 /**
9553 * Set one or more properties for the set of matched elements.
9554 * @param properties An object of property-value pairs to set.
9555 * @see \`{@link https://api.jquery.com/prop/ }\`
9556 * @since 1.6
9557 * @example ​ ````Disable all checkboxes on the page.
9558```html
9559<!doctype html>
9560<html lang="en">
9561<head>
9562 <meta charset="utf-8">
9563 <title>prop demo</title>
9564 <style>
9565 img {
9566 padding: 10px;
9567 }
9568 div {
9569 color: red;
9570 font-size: 24px;
9571 }
9572 </style>
9573 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9574</head>
9575<body>
9576​
9577 <input type="checkbox" checked="checked">
9578 <input type="checkbox">
9579 <input type="checkbox">
9580 <input type="checkbox" checked="checked">
9581​
9582<script>
9583$( "input[type='checkbox']" ).prop({
9584 disabled: true
9585});
9586</script>
9587​
9588</body>
9589</html>
9590```
9591 */
9592 prop(properties: JQuery.PlainObject): this;
9593 /**
9594 * Get the value of a property for the first element in the set of matched elements.
9595 * @param propertyName The name of the property to get.
9596 * @see \`{@link https://api.jquery.com/prop/ }\`
9597 * @since 1.6
9598 * @example ​ ````Display the checked property and attribute of a checkbox as it changes.
9599```html
9600<!doctype html>
9601<html lang="en">
9602<head>
9603 <meta charset="utf-8">
9604 <title>prop demo</title>
9605 <style>
9606 p {
9607 margin: 20px 0 0;
9608 }
9609 b {
9610 color: blue;
9611 }
9612 </style>
9613 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9614</head>
9615<body>
9616​
9617<input id="check1" type="checkbox" checked="checked">
9618<label for="check1">Check me</label>
9619<p></p>
9620​
9621<script>
9622$( "input" ).change(function() {
9623 var $input = $( this );
9624 $( "p" ).html(
9625 ".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
9626 ".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
9627 ".is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
9628}).change();
9629</script>
9630​
9631</body>
9632</html>
9633```
9634 */
9635 prop(propertyName: string): any;
9636 /**
9637 * Add a collection of DOM elements onto the jQuery stack.
9638 * @param elements An array of elements to push onto the stack and make into a new jQuery object.
9639 * @param name The name of a jQuery method that generated the array of elements.
9640 * @param args The arguments that were passed in to the jQuery method (for serialization).
9641 * @see \`{@link https://api.jquery.com/pushStack/ }\`
9642 * @since 1.3
9643 */
9644 pushStack(elements: ArrayLike<Element>, name: string, args: any[]): this;
9645 /**
9646 * Add a collection of DOM elements onto the jQuery stack.
9647 * @param elements An array of elements to push onto the stack and make into a new jQuery object.
9648 * @see \`{@link https://api.jquery.com/pushStack/ }\`
9649 * @since 1.0
9650 * @example ​ ````Add some elements onto the jQuery stack, then pop back off again.
9651```javascript
9652jQuery([])
9653 .pushStack( document.getElementsByTagName( "div" ) )
9654 .remove()
9655 .end();
9656```
9657 */
9658 pushStack(elements: ArrayLike<Element>): this;
9659 /**
9660 * Manipulate the queue of functions to be executed, once for each matched element.
9661 * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
9662 * @param newQueue The new function to add to the queue, with a function to call that will dequeue the next item.
9663 * An array of functions to replace the current queue contents.
9664 * @see \`{@link https://api.jquery.com/queue/ }\`
9665 * @since 1.2
9666 * @example ​ ````Set a queue array to delete the queue.
9667```html
9668<!doctype html>
9669<html lang="en">
9670<head>
9671 <meta charset="utf-8">
9672 <title>queue demo</title>
9673 <style>
9674 div {
9675 margin: 3px;
9676 width: 40px;
9677 height: 40px;
9678 position: absolute;
9679 left: 0px;
9680 top: 30px;
9681 background: green;
9682 display: none;
9683 }
9684 div.newcolor {
9685 background: blue;
9686 }
9687 </style>
9688 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9689</head>
9690<body>
9691​
9692<button id="start">Start</button>
9693<button id="stop">Stop</button>
9694<div></div>
9695​
9696<script>
9697$( "#start" ).click(function() {
9698 $( "div" )
9699 .show( "slow" )
9700 .animate({ left: "+=200" }, 5000 )
9701 .queue(function() {
9702 $( this ).addClass( "newcolor" ).dequeue();
9703 })
9704 .animate({ left: '-=200' }, 1500 )
9705 .queue(function() {
9706 $( this ).removeClass( "newcolor" ).dequeue();
9707 })
9708 .slideUp();
9709});
9710$( "#stop" ).click(function() {
9711 $( "div" )
9712 .queue( "fx", [] )
9713 .stop();
9714});
9715</script>
9716​
9717</body>
9718</html>
9719```
9720 */
9721 queue(queueName: string, newQueue: JQuery.TypeOrArray<JQuery.QueueFunction<TElement>>): this;
9722 /**
9723 * Manipulate the queue of functions to be executed, once for each matched element.
9724 * @param newQueue The new function to add to the queue, with a function to call that will dequeue the next item.
9725 * An array of functions to replace the current queue contents.
9726 * @see \`{@link https://api.jquery.com/queue/ }\`
9727 * @since 1.2
9728 * @example ​ ````Queue a custom function.
9729```html
9730<!doctype html>
9731<html lang="en">
9732<head>
9733 <meta charset="utf-8">
9734 <title>queue demo</title>
9735 <style>
9736 div {
9737 margin: 3px;
9738 width: 40px;
9739 height: 40px;
9740 position: absolute;
9741 left: 0px;
9742 top: 30px;
9743 background: green;
9744 display: none;
9745 }
9746 div.newcolor {
9747 background: blue;
9748 }
9749 </style>
9750 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9751</head>
9752<body>
9753​
9754Click here...
9755<div></div>
9756​
9757<script>
9758$( document.body ).click(function() {
9759 $( "div" )
9760 .show( "slow" )
9761 .animate({ left: "+=200" }, 2000 )
9762 .queue(function() {
9763 $( this ).addClass( "newcolor" ).dequeue();
9764 })
9765 .animate({ left: "-=200" }, 500 )
9766 .queue(function() {
9767 $( this ).removeClass( "newcolor" ).dequeue();
9768 })
9769 .slideUp();
9770});
9771</script>
9772​
9773</body>
9774</html>
9775```
9776 */
9777 queue(newQueue: JQuery.TypeOrArray<JQuery.QueueFunction<TElement>>): this;
9778 /**
9779 * Show the queue of functions to be executed on the matched elements.
9780 * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
9781 * @see \`{@link https://api.jquery.com/queue/ }\`
9782 * @since 1.2
9783 * @example ​ ````Show the length of the queue.
9784```html
9785<!doctype html>
9786<html lang="en">
9787<head>
9788 <meta charset="utf-8">
9789 <title>queue demo</title>
9790 <style>
9791 div {
9792 margin: 3px;
9793 width: 40px;
9794 height: 40px;
9795 position: absolute;
9796 left: 0px;
9797 top: 60px;
9798 background: green;
9799 display: none;
9800 }
9801 div.newcolor {
9802 background: blue;
9803 }
9804 p {
9805 color: red;
9806 }
9807 </style>
9808 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9809</head>
9810<body>
9811​
9812<p>The queue length is: <span></span></p>
9813<div></div>
9814​
9815<script>
9816var div = $( "div" );
9817​
9818function runIt() {
9819 div
9820 .show( "slow" )
9821 .animate({ left: "+=200" }, 2000 )
9822 .slideToggle( 1000 )
9823 .slideToggle( "fast" )
9824 .animate({ left: "-=200" }, 1500 )
9825 .hide( "slow" )
9826 .show( 1200 )
9827 .slideUp( "normal", runIt );
9828}
9829​
9830function showIt() {
9831 var n = div.queue( "fx" );
9832 $( "span" ).text( n.length );
9833 setTimeout( showIt, 100 );
9834}
9835​
9836runIt();
9837showIt();
9838</script>
9839​
9840</body>
9841</html>
9842```
9843 */
9844 queue(queueName?: string): JQuery.Queue<Node>;
9845 /**
9846 * Specify a function to execute when the DOM is fully loaded.
9847 * @param handler A function to execute after the DOM is ready.
9848 * @see \`{@link https://api.jquery.com/ready/ }\`
9849 * @since 1.0
9850 * @deprecated ​ Deprecated since 3.0. Use `jQuery(function() { })`.
9851 * @example ​ ````Display a message when the DOM is loaded.
9852```html
9853<!doctype html>
9854<html lang="en">
9855<head>
9856 <meta charset="utf-8">
9857 <title>ready demo</title>
9858 <style>
9859 p {
9860 color: red;
9861 }
9862 </style>
9863 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9864 <script>
9865​
9866 $(function() {
9867 $( "p" ).text( "The DOM is now loaded and can be manipulated." );
9868 });
9869​
9870 </script>
9871</head>
9872<body>
9873​
9874<p>Not loaded yet.</p>
9875​
9876</body>
9877</html>
9878```
9879 */
9880 ready(handler: ($: JQueryStatic) => void): this;
9881 /**
9882 * Remove the set of matched elements from the DOM.
9883 * @param selector A selector expression that filters the set of matched elements to be removed.
9884 * @see \`{@link https://api.jquery.com/remove/ }\`
9885 * @since 1.0
9886 * @example ​ ````Removes all paragraphs from the DOM
9887```html
9888<!doctype html>
9889<html lang="en">
9890<head>
9891 <meta charset="utf-8">
9892 <title>remove demo</title>
9893 <style>
9894 p {
9895 background: yellow;
9896 margin: 6px 0;
9897 }
9898 </style>
9899 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9900</head>
9901<body>
9902​
9903<p>Hello</p>
9904how are
9905<p>you?</p>
9906<button>Call remove() on paragraphs</button>
9907​
9908<script>
9909$( "button" ).click(function() {
9910 $( "p" ).remove();
9911});
9912</script>
9913​
9914</body>
9915</html>
9916```
9917 * @example ​ ````Removes all paragraphs that contain &quot;Hello&quot; from the DOM. Analogous to doing $(&quot;p&quot;).filter(&quot;:contains(&#39;Hello&#39;)&quot;).remove().
9918```html
9919<!doctype html>
9920<html lang="en">
9921<head>
9922 <meta charset="utf-8">
9923 <title>remove demo</title>
9924 <style>
9925 p {
9926 background: yellow;
9927 margin: 6px 0;
9928 }
9929 </style>
9930 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9931</head>
9932<body>
9933​
9934<p class="hello">Hello</p>
9935how are
9936<p>you?</p>
9937<button>Call remove( ":contains('Hello')" ) on paragraphs</button>
9938​
9939<script>
9940$( "button" ).click(function() {
9941 $( "p" ).remove( ":contains('Hello')" );
9942});
9943</script>
9944​
9945</body>
9946</html>
9947```
9948 */
9949 remove(selector?: string): this;
9950 /**
9951 * Remove an attribute from each element in the set of matched elements.
9952 * @param attributeName An attribute to remove; as of version 1.7, it can be a space-separated list of attributes.
9953 * @see \`{@link https://api.jquery.com/removeAttr/ }\`
9954 * @since 1.0
9955 * @example ​ ````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.
9956```html
9957<!doctype html>
9958<html lang="en">
9959<head>
9960 <meta charset="utf-8">
9961 <title>removeAttr demo</title>
9962 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
9963</head>
9964<body>
9965​
9966<button>Change title</button>
9967<input type="text" title="hello there">
9968<div id="log"></div>
9969​
9970<script>
9971(function() {
9972 var inputTitle = $( "input" ).attr( "title" );
9973 $( "button" ).click(function() {
9974 var input = $( this ).next();
9975​
9976 if ( input.attr( "title" ) === inputTitle ) {
9977 input.removeAttr( "title" )
9978 } else {
9979 input.attr( "title", inputTitle );
9980 }
9981​
9982 $( "#log" ).html( "input title is now " + input.attr( "title" ) );
9983 });
9984})();
9985</script>
9986​
9987</body>
9988</html>
9989```
9990 */
9991 removeAttr(attributeName: string): this;
9992 /**
9993 * Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
9994 * @param className_function _&#x40;param_ `className_function`
9995 * <br>
9996 * * `className` — One or more space-separated classes to be removed from the class attribute of each matched element. <br>
9997 * * `function` — A function returning one or more space-separated class names to be removed. Receives the index
9998 * position of the element in the set and the old class value as arguments.
9999 * @see \`{@link https://api.jquery.com/removeClass/ }\`
10000 * @since 1.0
10001 * @since 1.4
10002 * @since 3.3
10003 * @example ​ ````Remove the class &#39;blue&#39; from the matched elements.
10004```html
10005<!doctype html>
10006<html lang="en">
10007<head>
10008 <meta charset="utf-8">
10009 <title>removeClass demo</title>
10010 <style>
10011 p {
10012 margin: 4px;
10013 font-size: 16px;
10014 font-weight: bolder;
10015 }
10016 .blue {
10017 color: blue;
10018 }
10019 .under {
10020 text-decoration: underline;
10021 }
10022 .highlight {
10023 background: yellow;
10024 }
10025 </style>
10026 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10027</head>
10028<body>
10029​
10030<p class="blue under">Hello</p>
10031<p class="blue under highlight">and</p>
10032<p class="blue under">then</p>
10033<p class="blue under">Goodbye</p>
10034​
10035<script>
10036$( "p:even" ).removeClass( "blue" );
10037</script>
10038​
10039</body>
10040</html>
10041```
10042 * @example ​ ````Remove the class &#39;blue&#39; and &#39;under&#39; from the matched elements.
10043```html
10044<!doctype html>
10045<html lang="en">
10046<head>
10047 <meta charset="utf-8">
10048 <title>removeClass demo</title>
10049 <style>
10050 p {
10051 margin: 4px;
10052 font-size: 16px;
10053 font-weight: bolder;
10054 }
10055 .blue {
10056 color: blue;
10057 }
10058 .under {
10059 text-decoration: underline;
10060 }
10061 .highlight {
10062 background: yellow;
10063 }
10064 </style>
10065 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10066</head>
10067<body>
10068​
10069<p class="blue under">Hello</p>
10070<p class="blue under highlight">and</p>
10071<p class="blue under">then</p>
10072<p class="blue under">Goodbye</p>
10073​
10074<script>
10075$( "p:odd" ).removeClass( "blue under" );
10076</script>
10077​
10078</body>
10079</html>
10080```
10081 * @example ​ ````Remove all the classes from the matched elements.
10082```html
10083<!doctype html>
10084<html lang="en">
10085<head>
10086 <meta charset="utf-8">
10087 <title>removeClass demo</title>
10088 <style>
10089 p {
10090 margin: 4px;
10091 font-size: 16px;
10092 font-weight: bolder;
10093 }
10094 .blue {
10095 color: blue;
10096 }
10097 .under {
10098 text-decoration: underline;
10099 }
10100 .highlight {
10101 background: yellow;
10102 }
10103 </style>
10104 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10105</head>
10106<body>
10107​
10108<p class="blue under">Hello</p>
10109<p class="blue under highlight">and</p>
10110<p class="blue under">then</p>
10111<p class="blue under">Goodbye</p>
10112​
10113<script>
10114$( "p:eq(1)" ).removeClass();
10115</script>
10116​
10117</body>
10118</html>
10119```
10120 */
10121 removeClass(
10122 className_function?:
10123 | JQuery.TypeOrArray<string>
10124 | ((this: TElement, index: number, className: string) => string),
10125 ): this;
10126 /**
10127 * Remove a previously-stored piece of data.
10128 * @param name A string naming the piece of data to delete.
10129 * An array or space-separated string naming the pieces of data to delete.
10130 * @see \`{@link https://api.jquery.com/removeData/ }\`
10131 * @since 1.2.3
10132 * @since 1.7
10133 * @example ​ ````Set a data store for 2 names then remove one of them.
10134```html
10135<!doctype html>
10136<html lang="en">
10137<head>
10138 <meta charset="utf-8">
10139 <title>removeData demo</title>
10140 <style>
10141 div {
10142 margin: 2px;
10143 color: blue;
10144 }
10145 span {
10146 color: red;
10147 }
10148 </style>
10149 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10150</head>
10151<body>
10152​
10153<div>value1 before creation: <span></span></div>
10154<div>value1 after creation: <span></span></div>
10155<div>value1 after removal: <span></span></div>
10156<div>value2 after removal: <span></span></div>
10157​
10158<script>
10159$( "span:eq(0)" ).text( "" + $( "div" ).data( "test1" ) );
10160$( "div" ).data( "test1", "VALUE-1" );
10161$( "div" ).data( "test2", "VALUE-2" );
10162$( "span:eq(1)" ).text( "" + $( "div").data( "test1" ) );
10163$( "div" ).removeData( "test1" );
10164$( "span:eq(2)" ).text( "" + $( "div" ).data( "test1" ) );
10165$( "span:eq(3)" ).text( "" + $( "div" ).data( "test2" ) );
10166</script>
10167​
10168</body>
10169</html>
10170```
10171 */
10172 removeData(name?: JQuery.TypeOrArray<string>): this;
10173 /**
10174 * Remove a property for the set of matched elements.
10175 * @param propertyName The name of the property to remove.
10176 * @see \`{@link https://api.jquery.com/removeProp/ }\`
10177 * @since 1.6
10178 * @example ​ ````Set a numeric property on a paragraph and then remove it.
10179```html
10180<!doctype html>
10181<html lang="en">
10182<head>
10183 <meta charset="utf-8">
10184 <title>removeProp demo</title>
10185 <style>
10186 img {
10187 padding: 10px;
10188 }
10189 div {
10190 color: red;
10191 font-size: 24px;
10192 }
10193 </style>
10194 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10195</head>
10196<body>
10197​
10198 <p></p>
10199​
10200<script>
10201para = $( "p" );
10202para
10203 .prop( "luggageCode", 1234 )
10204 .append( "The secret luggage code is: ", String( para.prop( "luggageCode" ) ), ". " )
10205 .removeProp( "luggageCode" )
10206 .append( "Now the secret luggage code is: ", String( para.prop( "luggageCode" ) ), ". " );
10207</script>
10208​
10209</body>
10210</html>
10211```
10212 */
10213 removeProp(propertyName: string): this;
10214 /**
10215 * Replace each target element with the set of matched elements.
10216 * @param target A selector string, jQuery object, DOM element, or array of elements indicating which element(s) to replace.
10217 * @see \`{@link https://api.jquery.com/replaceAll/ }\`
10218 * @since 1.2
10219 * @example ​ ````Replace all the paragraphs with bold words.
10220```html
10221<!doctype html>
10222<html lang="en">
10223<head>
10224 <meta charset="utf-8">
10225 <title>replaceAll demo</title>
10226 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10227</head>
10228<body>
10229​
10230<p>Hello</p>
10231<p>cruel</p>
10232<p>World</p>
10233​
10234<script>
10235$( "<b>Paragraph. </b>" ).replaceAll( "p" );
10236</script>
10237​
10238</body>
10239</html>
10240```
10241 */
10242 replaceAll(target: JQuery.Selector | JQuery | JQuery.TypeOrArray<Element>): this;
10243 /**
10244 * Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.
10245 * @param newContent_function _&#x40;param_ `newContent_function`
10246 * <br>
10247 * * `newContent` — The content to insert. May be an HTML string, DOM element, array of DOM elements, or jQuery object. <br>
10248 * * `function` — A function that returns content with which to replace the set of matched elements.
10249 * @see \`{@link https://api.jquery.com/replaceWith/ }\`
10250 * @since 1.2
10251 * @since 1.4
10252 * @example ​ ````On click, replace the button with a div containing the same word.
10253```html
10254<!doctype html>
10255<html lang="en">
10256<head>
10257 <meta charset="utf-8">
10258 <title>replaceWith demo</title>
10259 <style>
10260 button {
10261 display: block;
10262 margin: 3px;
10263 color: red;
10264 width: 200px;
10265 }
10266 div {
10267 color: red;
10268 border: 2px solid blue;
10269 width: 200px;
10270 margin: 3px;
10271 text-align: center;
10272 }
10273 </style>
10274 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10275</head>
10276<body>
10277​
10278<button>First</button>
10279<button>Second</button>
10280<button>Third</button>
10281​
10282<script>
10283$( "button" ).click(function() {
10284 $( this ).replaceWith( "<div>" + $( this ).text() + "</div>" );
10285});
10286</script>
10287​
10288</body>
10289</html>
10290```
10291 * @example ​ ````Replace all paragraphs with bold words.
10292```html
10293<!doctype html>
10294<html lang="en">
10295<head>
10296 <meta charset="utf-8">
10297 <title>replaceWith demo</title>
10298 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10299</head>
10300<body>
10301​
10302<p>Hello</p>
10303<p>cruel</p>
10304<p>World</p>
10305​
10306<script>
10307$( "p" ).replaceWith( "<b>Paragraph. </b>" );
10308</script>
10309​
10310</body>
10311</html>
10312```
10313 * @example ​ ````On click, replace each paragraph with a div that is already in the DOM and selected with the $() function. Notice it doesn&#39;t clone the object but rather moves it to replace the paragraph.
10314```html
10315<!doctype html>
10316<html lang="en">
10317<head>
10318 <meta charset="utf-8">
10319 <title>replaceWith demo</title>
10320 <style>
10321 div {
10322 border: 2px solid blue;
10323 color: red;
10324 margin: 3px;
10325 }
10326 p {
10327 border: 2px solid red;
10328 color: blue;
10329 margin: 3px;
10330 cursor: pointer;
10331 }
10332 </style>
10333 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10334</head>
10335<body>
10336​
10337 <p>Hello</p>
10338 <p>cruel</p>
10339 <p>World</p>
10340 <div>Replaced!</div>
10341​
10342<script>
10343$( "p" ).click(function() {
10344 $( this ).replaceWith( $( "div" ) );
10345});
10346</script>
10347​
10348</body>
10349</html>
10350```
10351 * @example ​ ````On button click, replace the containing div with its child divs and append the class name of the selected element to the paragraph.
10352```html
10353<!doctype html>
10354<html lang="en">
10355<head>
10356 <meta charset="utf-8">
10357 <title>replaceWith demo</title>
10358 <style>
10359 .container {
10360 background-color: #991;
10361 }
10362 .inner {
10363 color: #911;
10364 }
10365 </style>
10366 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10367</head>
10368<body>
10369​
10370<p>
10371 <button>Replace!</button>
10372</p>
10373<div class="container">
10374 <div class="inner">Scooby</div>
10375 <div class="inner">Dooby</div>
10376 <div class="inner">Doo</div>
10377</div>
10378​
10379<script>
10380$( "button" ).on( "click", function() {
10381 var $container = $( "div.container" ).replaceWith(function() {
10382 return $( this ).contents();
10383 });
10384​
10385 $( "p" ).append( $container.attr( "class" ) );
10386});
10387</script>
10388​
10389</body>
10390</html>
10391```
10392 */
10393 replaceWith(
10394 newContent_function:
10395 | JQuery.htmlString
10396 | JQuery<JQuery.Node>
10397 | JQuery.TypeOrArray<Element>
10398 | JQuery.Node
10399 | ((this: TElement, index: number, oldhtml: JQuery.htmlString) =>
10400 | JQuery.htmlString
10401 | JQuery<JQuery.Node>
10402 | JQuery.TypeOrArray<Element>
10403 | JQuery.Node),
10404 ): this;
10405 /**
10406 * Bind an event handler to the "resize" JavaScript event, or trigger that event on an element.
10407 * @param eventData An object containing data that will be passed to the event handler.
10408 * @param handler A function to execute each time the event is triggered.
10409 * @see \`{@link https://api.jquery.com/resize-shorthand/ }\`
10410 * @since 1.4.3
10411 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
10412 *
10413 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
10414 *
10415 * **Solution**: Instead of `.resize(fn)` use `.on("resize", fn)`. Instead of `.resize()` use `.trigger("resize")`.
10416 */
10417 resize<TData>(
10418 eventData: TData,
10419 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "resize">,
10420 ): this;
10421 /**
10422 * Bind an event handler to the "resize" JavaScript event, or trigger that event on an element.
10423 * @param handler A function to execute each time the event is triggered.
10424 * @see \`{@link https://api.jquery.com/resize-shorthand/ }\`
10425 * @since 1.0
10426 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
10427 *
10428 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
10429 *
10430 * **Solution**: Instead of `.resize(fn)` use `.on("resize", fn)`. Instead of `.resize()` use `.trigger("resize")`.
10431 * @example ​ ````To see the window width while (or after) it is resized, try:
10432```javascript
10433$( window ).resize(function() {
10434 $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
10435});
10436```
10437 */
10438 resize(
10439 handler?:
10440 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "resize">
10441 | false,
10442 ): this;
10443 /**
10444 * Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element.
10445 * @param eventData An object containing data that will be passed to the event handler.
10446 * @param handler A function to execute each time the event is triggered.
10447 * @see \`{@link https://api.jquery.com/scroll-shorthand/ }\`
10448 * @since 1.4.3
10449 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
10450 *
10451 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
10452 *
10453 * **Solution**: Instead of `.scroll(fn)` use `.on("scroll", fn)`. Instead of `.scroll()` use `.trigger("scroll")`.
10454 */
10455 scroll<TData>(
10456 eventData: TData,
10457 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "scroll">,
10458 ): this;
10459 /**
10460 * Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element.
10461 * @param handler A function to execute each time the event is triggered.
10462 * @see \`{@link https://api.jquery.com/scroll-shorthand/ }\`
10463 * @since 1.0
10464 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
10465 *
10466 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
10467 *
10468 * **Solution**: Instead of `.scroll(fn)` use `.on("scroll", fn)`. Instead of `.scroll()` use `.trigger("scroll")`.
10469 * @example ​ ````To do something when your page is scrolled:
10470```html
10471<!doctype html>
10472<html lang="en">
10473<head>
10474 <meta charset="utf-8">
10475 <title>scroll demo</title>
10476 <style>
10477 div {
10478 color: blue;
10479 }
10480 p {
10481 color: green;
10482 }
10483 span {
10484 color: red;
10485 display: none;
10486 }
10487 </style>
10488 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10489</head>
10490<body>
10491​
10492<div>Try scrolling the iframe.</div>
10493<p>Paragraph - <span>Scroll happened!</span></p>
10494​
10495<script>
10496$( "p" ).clone().appendTo( document.body );
10497$( "p" ).clone().appendTo( document.body );
10498$( "p" ).clone().appendTo( document.body );
10499$( window ).scroll(function() {
10500 $( "span" ).css( "display", "inline" ).fadeOut( "slow" );
10501});
10502</script>
10503​
10504</body>
10505</html>
10506```
10507 */
10508 scroll(
10509 handler?:
10510 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "scroll">
10511 | false,
10512 ): this;
10513 /**
10514 * Set the current horizontal position of the scroll bar for each of the set of matched elements.
10515 * @param value An integer indicating the new position to set the scroll bar to.
10516 * @see \`{@link https://api.jquery.com/scrollLeft/ }\`
10517 * @since 1.2.6
10518 * @example ​ ````Set the scrollLeft of a div.
10519```html
10520<!doctype html>
10521<html lang="en">
10522<head>
10523 <meta charset="utf-8">
10524 <title>scrollLeft demo</title>
10525 <style>
10526 div.demo {
10527 background: #ccc none repeat scroll 0 0;
10528 border: 3px solid #666;
10529 margin: 5px;
10530 padding: 5px;
10531 position: relative;
10532 width: 200px;
10533 height: 100px;
10534 overflow: auto;
10535 }
10536 p {
10537 margin: 10px;
10538 padding: 5px;
10539 border: 2px solid #666;
10540 width: 1000px;
10541 height: 1000px;
10542 }
10543 </style>
10544 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10545</head>
10546<body>
10547​
10548<div class="demo"><h1>lalala</h1><p>Hello</p></div>
10549​
10550<script>
10551$( "div.demo" ).scrollLeft( 300 );
10552</script>
10553​
10554</body>
10555</html>
10556```
10557 */
10558 scrollLeft(value: number): this;
10559 /**
10560 * Get the current horizontal position of the scroll bar for the first element in the set of matched elements.
10561 * @see \`{@link https://api.jquery.com/scrollLeft/ }\`
10562 * @since 1.2.6
10563 * @example ​ ````Get the scrollLeft of a paragraph.
10564```html
10565<!doctype html>
10566<html lang="en">
10567<head>
10568 <meta charset="utf-8">
10569 <title>scrollLeft demo</title>
10570 <style>
10571 p {
10572 margin: 10px;
10573 padding: 5px;
10574 border: 2px solid #666;
10575 }
10576 </style>
10577 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10578</head>
10579<body>
10580​
10581<p>Hello</p><p></p>
10582​
10583<script>
10584var p = $( "p:first" );
10585$( "p:last" ).text( "scrollLeft:" + p.scrollLeft() );
10586</script>
10587​
10588</body>
10589</html>
10590```
10591 */
10592 scrollLeft(): number | undefined;
10593 /**
10594 * Set the current vertical position of the scroll bar for each of the set of matched elements.
10595 * @param value A number indicating the new position to set the scroll bar to.
10596 * @see \`{@link https://api.jquery.com/scrollTop/ }\`
10597 * @since 1.2.6
10598 * @example ​ ````Set the scrollTop of a div.
10599```html
10600<!doctype html>
10601<html lang="en">
10602<head>
10603 <meta charset="utf-8">
10604 <title>scrollTop demo</title>
10605 <style>
10606 div.demo {
10607 background: #ccc none repeat scroll 0 0;
10608 border: 3px solid #666;
10609 margin: 5px;
10610 padding: 5px;
10611 position: relative;
10612 width: 200px;
10613 height: 100px;
10614 overflow: auto;
10615 }
10616 p {
10617 margin: 10px;
10618 padding: 5px;
10619 border: 2px solid #666;
10620 width: 1000px;
10621 height: 1000px;
10622 }
10623 </style>
10624 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10625</head>
10626<body>
10627​
10628<div class="demo"><h1>lalala</h1><p>Hello</p></div>
10629​
10630<script>
10631$( "div.demo" ).scrollTop( 300 );
10632</script>
10633​
10634</body>
10635</html>
10636```
10637 */
10638 scrollTop(value: number): this;
10639 /**
10640 * Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.
10641 * @see \`{@link https://api.jquery.com/scrollTop/ }\`
10642 * @since 1.2.6
10643 * @example ​ ````Get the scrollTop of a paragraph.
10644```html
10645<!doctype html>
10646<html lang="en">
10647<head>
10648 <meta charset="utf-8">
10649 <title>scrollTop demo</title>
10650 <style>
10651 p {
10652 margin: 10px;
10653 padding: 5px;
10654 border: 2px solid #666;
10655 }
10656 </style>
10657 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10658</head>
10659<body>
10660​
10661<p>Hello</p><p></p>
10662​
10663<script>
10664var p = $( "p:first" );
10665$( "p:last" ).text( "scrollTop:" + p.scrollTop() );
10666</script>
10667​
10668</body>
10669</html>
10670```
10671 */
10672 scrollTop(): number | undefined;
10673 /**
10674 * Bind an event handler to the "select" JavaScript event, or trigger that event on an element.
10675 * @param eventData An object containing data that will be passed to the event handler.
10676 * @param handler A function to execute each time the event is triggered.
10677 * @see \`{@link https://api.jquery.com/select-shorthand/ }\`
10678 * @since 1.4.3
10679 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
10680 *
10681 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
10682 *
10683 * **Solution**: Instead of `.select(fn)` use `.on("select", fn)`. Instead of `.select()` use `.trigger("select")`.
10684 */
10685 select<TData>(
10686 eventData: TData,
10687 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "select">,
10688 ): this;
10689 /**
10690 * Bind an event handler to the "select" JavaScript event, or trigger that event on an element.
10691 * @param handler A function to execute each time the event is triggered.
10692 * @see \`{@link https://api.jquery.com/select-shorthand/ }\`
10693 * @since 1.0
10694 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
10695 *
10696 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
10697 *
10698 * **Solution**: Instead of `.select(fn)` use `.on("select", fn)`. Instead of `.select()` use `.trigger("select")`.
10699 * @example ​ ````To do something when text in input boxes is selected:
10700```html
10701<!doctype html>
10702<html lang="en">
10703<head>
10704 <meta charset="utf-8">
10705 <title>select demo</title>
10706 <style>
10707 p {
10708 color: blue;
10709 }
10710 div {
10711 color: red;
10712 }
10713 </style>
10714 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10715</head>
10716<body>
10717​
10718 <p>Click and drag the mouse to select text in the inputs.</p>
10719 <input type="text" value="Some text">
10720 <input type="text" value="to test on">
10721 <div></div>
10722 ​
10723<script>
10724$( ":input" ).select(function() {
10725 $( "div" ).text( "Something was selected" ).show().fadeOut( 1000 );
10726});
10727</script>
10728​
10729</body>
10730</html>
10731```
10732 * @example ​ ````To trigger the select event on all input elements, try:
10733```javascript
10734$( "input" ).select();
10735```
10736 */
10737 select(
10738 handler?:
10739 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "select">
10740 | false,
10741 ): this;
10742 /**
10743 * Encode a set of form elements as a string for submission.
10744 * @see \`{@link https://api.jquery.com/serialize/ }\`
10745 * @since 1.0
10746 * @example ​ ````Serialize a form to a query string that could be sent to a server in an Ajax request.
10747```html
10748<!doctype html>
10749<html lang="en">
10750<head>
10751 <meta charset="utf-8">
10752 <title>serialize demo</title>
10753 <style>
10754 body, select {
10755 font-size: 12px;
10756 }
10757 form {
10758 margin: 5px;
10759 }
10760 p {
10761 color: red;
10762 margin: 5px;
10763 font-size: 14px;
10764 }
10765 b {
10766 color: blue;
10767 }
10768 </style>
10769 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10770</head>
10771<body>
10772​
10773<form>
10774 <select name="single">
10775 <option>Single</option>
10776 <option>Single2</option>
10777 </select>
10778​
10779 <br>
10780 <select name="multiple" multiple="multiple">
10781 <option selected="selected">Multiple</option>
10782 <option>Multiple2</option>
10783 <option selected="selected">Multiple3</option>
10784 </select>
10785​
10786 <br>
10787 <input type="checkbox" name="check" value="check1" id="ch1">
10788 <label for="ch1">check1</label>
10789 <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
10790 <label for="ch2">check2</label>
10791​
10792 <br>
10793 <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
10794 <label for="r1">radio1</label>
10795 <input type="radio" name="radio" value="radio2" id="r2">
10796 <label for="r2">radio2</label>
10797</form>
10798​
10799<p><tt id="results"></tt></p>
10800​
10801<script>
10802 function showValues() {
10803 var str = $( "form" ).serialize();
10804 $( "#results" ).text( str );
10805 }
10806 $( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
10807 $( "select" ).on( "change", showValues );
10808 showValues();
10809</script>
10810​
10811</body>
10812</html>
10813```
10814 */
10815 serialize(): string;
10816 /**
10817 * Encode a set of form elements as an array of names and values.
10818 * @see \`{@link https://api.jquery.com/serializeArray/ }\`
10819 * @since 1.2
10820 * @example ​ ````Get the values from a form, iterate through them, and append them to a results display.
10821```html
10822<!doctype html>
10823<html lang="en">
10824<head>
10825 <meta charset="utf-8">
10826 <title>serializeArray demo</title>
10827 <style>
10828 body, select {
10829 font-size: 14px;
10830 }
10831 form {
10832 margin: 5px;
10833 }
10834 p {
10835 color: red;
10836 margin: 5px;
10837 }
10838 b {
10839 color: blue;
10840 }
10841 </style>
10842 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10843</head>
10844<body>
10845​
10846<p><b>Results:</b> <span id="results"></span></p>
10847<form>
10848 <select name="single">
10849 <option>Single</option>
10850 <option>Single2</option>
10851 </select>
10852 <select name="multiple" multiple="multiple">
10853 <option selected="selected">Multiple</option>
10854 <option>Multiple2</option>
10855 <option selected="selected">Multiple3</option>
10856 </select>
10857 <br>
10858 <input type="checkbox" name="check" value="check1" id="ch1">
10859 <label for="ch1">check1</label>
10860 <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
10861 <label for="ch2">check2</label>
10862 <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
10863 <label for="r1">radio1</label>
10864 <input type="radio" name="radio" value="radio2" id="r2">
10865 <label for="r2">radio2</label>
10866</form>
10867​
10868<script>
10869 function showValues() {
10870 var fields = $( ":input" ).serializeArray();
10871 $( "#results" ).empty();
10872 jQuery.each( fields, function( i, field ) {
10873 $( "#results" ).append( field.value + " " );
10874 });
10875 }
10876​
10877 $( ":checkbox, :radio" ).click( showValues );
10878 $( "select" ).change( showValues );
10879 showValues();
10880</script>
10881​
10882</body>
10883</html>
10884```
10885 */
10886 serializeArray(): JQuery.NameValuePair[];
10887 /**
10888 * Display the matched elements.
10889 * @param duration A string or number determining how long the animation will run.
10890 * @param easing A string indicating which easing function to use for the transition.
10891 * @param complete A function to call once the animation is complete, called once per matched element.
10892 * @see \`{@link https://api.jquery.com/show/ }\`
10893 * @since 1.4.3
10894 */
10895 show(duration: JQuery.Duration, easing: string, complete: (this: TElement) => void): this;
10896 /**
10897 * Display the matched elements.
10898 * @param duration A string or number determining how long the animation will run.
10899 * @param easing_complete _&#x40;param_ `easing_complete`
10900 * <br>
10901 * * `easing` — A string indicating which easing function to use for the transition. <br>
10902 * * `complete` — A function to call once the animation is complete, called once per matched element.
10903 * @see \`{@link https://api.jquery.com/show/ }\`
10904 * @since 1.0
10905 * @since 1.4.3
10906 * @example ​ ````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&#39;s animation ends.
10907```html
10908<!doctype html>
10909<html lang="en">
10910<head>
10911 <meta charset="utf-8">
10912 <title>show demo</title>
10913 <style>
10914 div {
10915 background: #def3ca;
10916 margin: 3px;
10917 width: 80px;
10918 display: none;
10919 float: left;
10920 text-align: center;
10921 }
10922 </style>
10923 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10924</head>
10925<body>
10926​
10927<button id="showr">Show</button>
10928<button id="hidr">Hide</button>
10929<div>Hello 3,</div>
10930<div>how</div>
10931<div>are</div>
10932<div>you?</div>
10933​
10934<script>
10935$( "#showr" ).click(function() {
10936 $( "div" ).first().show( "fast", function showNext() {
10937 $( this ).next( "div" ).show( "fast", showNext );
10938 });
10939});
10940​
10941$( "#hidr" ).click(function() {
10942 $( "div" ).hide( 1000 );
10943});
10944</script>
10945​
10946</body>
10947</html>
10948```
10949 * @example ​ ````Show all span and input elements with an animation. Change the text once the animation is done.
10950```html
10951<!doctype html>
10952<html lang="en">
10953<head>
10954 <meta charset="utf-8">
10955 <title>show demo</title>
10956 <style>
10957 span {
10958 display: none;
10959 }
10960 div {
10961 display: none;
10962 }
10963 p {
10964 font-weight: bold;
10965 background-color: #fcd;
10966 }
10967 </style>
10968 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10969</head>
10970<body>
10971​
10972<button>Do it!</button>
10973<span>Are you sure? (type 'yes' if you are) </span>
10974<div>
10975 <form>
10976 <input type="text" value="as;ldkfjalsdf">
10977 </form>
10978</div>
10979<p style="display:none;">I'm hidden...</p>
10980​
10981<script>
10982function doIt() {
10983 $( "span,div" ).show( "slow" );
10984}
10985// Can pass in function name
10986$( "button" ).click( doIt );
10987​
10988$( "form" ).submit(function( event ) {
10989 if ( $( "input" ).val() === "yes" ) {
10990 $( "p" ).show( 4000, function() {
10991 $( this ).text( "Ok, DONE! (now showing)" );
10992 });
10993 }
10994 $( "span,div" ).hide( "fast" );
10995​
10996 // Prevent form submission
10997 event.preventDefault();
10998});
10999</script>
11000​
11001</body>
11002</html>
11003```
11004 */
11005 show(duration: JQuery.Duration, easing_complete: string | ((this: TElement) => void)): this;
11006 /**
11007 * Display the matched elements.
11008 * @param duration_complete_options _&#x40;param_ `duration_complete_options`
11009 * <br>
11010 * * `duration` — A string or number determining how long the animation will run. <br>
11011 * * `complete` — A function to call once the animation is complete, called once per matched element. <br>
11012 * * `options` — A map of additional options to pass to the method.
11013 * @see \`{@link https://api.jquery.com/show/ }\`
11014 * @since 1.0
11015 * @example ​ ````Animates all hidden paragraphs to show slowly, completing the animation within 600 milliseconds.
11016```html
11017<!doctype html>
11018<html lang="en">
11019<head>
11020 <meta charset="utf-8">
11021 <title>show demo</title>
11022 <style>
11023 p {
11024 background: yellow;
11025 }
11026 </style>
11027 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11028</head>
11029<body>
11030​
11031<button>Show it</button>
11032<p style="display: none">Hello 2</p>
11033​
11034<script>
11035$( "button" ).click(function() {
11036 $( "p" ).show( "slow" );
11037});
11038</script>
11039​
11040</body>
11041</html>
11042```
11043 */
11044 show(
11045 duration_complete_options?: JQuery.Duration | ((this: TElement) => void) | JQuery.EffectsOptions<TElement>,
11046 ): this;
11047 /**
11048 * Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
11049 * @param selector A string containing a selector expression to match elements against.
11050 * @see \`{@link https://api.jquery.com/siblings/ }\`
11051 * @since 1.0
11052 * @example ​ ````Find the unique siblings of all yellow li elements in the 3 lists (including other yellow li elements if appropriate).
11053```html
11054<!doctype html>
11055<html lang="en">
11056<head>
11057 <meta charset="utf-8">
11058 <title>siblings demo</title>
11059 <style>
11060 ul {
11061 float: left;
11062 margin: 5px;
11063 font-size: 16px;
11064 font-weight: bold;
11065 }
11066 p {
11067 color: blue;
11068 margin: 10px 20px;
11069 font-size: 16px;
11070 padding: 5px;
11071 font-weight: bolder;
11072 }
11073 .hilite {
11074 background: yellow;
11075 }
11076 </style>
11077 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11078</head>
11079<body>
11080​
11081<ul>
11082 <li>One</li>
11083 <li>Two</li>
11084 <li class="hilite">Three</li>
11085 <li>Four</li>
11086</ul>
11087​
11088<ul>
11089 <li>Five</li>
11090 <li>Six</li>
11091 <li>Seven</li>
11092</ul>
11093​
11094<ul>
11095 <li>Eight</li>
11096 <li class="hilite">Nine</li>
11097 <li>Ten</li>
11098 <li class="hilite">Eleven</li>
11099</ul>
11100​
11101<p>Unique siblings: <b></b></p>
11102​
11103<script>
11104var len = $( ".hilite" ).siblings()
11105 .css( "color", "red" )
11106 .length;
11107$( "b" ).text( len );
11108</script>
11109​
11110</body>
11111</html>
11112```
11113 * @example ​ ````Find all siblings with a class &quot;selected&quot; of each div.
11114```html
11115<!doctype html>
11116<html lang="en">
11117<head>
11118 <meta charset="utf-8">
11119 <title>siblings demo</title>
11120 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11121</head>
11122<body>
11123​
11124<div><span>Hello</span></div>
11125<p class="selected">Hello Again</p>
11126<p>And Again</p>
11127​
11128<script>
11129$( "p" ).siblings( ".selected" ).css( "background", "yellow" );
11130</script>
11131​
11132</body>
11133</html>
11134```
11135 */
11136 siblings<K extends keyof HTMLElementTagNameMap>(selector: K): JQuery<HTMLElementTagNameMap[K]>;
11137 siblings<K extends keyof SVGElementTagNameMap>(selector: K): JQuery<SVGElementTagNameMap[K]>;
11138 // eslint-disable-next-line @definitelytyped/no-unnecessary-generics
11139 siblings<E extends Element = HTMLElement>(selector?: JQuery.Selector): JQuery<E>;
11140 /**
11141 * Reduce the set of matched elements to a subset specified by a range of indices.
11142 * @param start An integer indicating the 0-based position at which the elements begin to be selected. If negative,
11143 * it indicates an offset from the end of the set.
11144 * @param end An integer indicating the 0-based position at which the elements stop being selected. If negative,
11145 * it indicates an offset from the end of the set. If omitted, the range continues until the end of the set.
11146 * @see \`{@link https://api.jquery.com/slice/ }\`
11147 * @since 1.1.4
11148 * @example ​ ````Turns divs yellow based on a random slice.
11149```html
11150<!doctype html>
11151<html lang="en">
11152<head>
11153 <meta charset="utf-8">
11154 <title>slice demo</title>
11155 <style>
11156 div {
11157 width: 40px;
11158 height: 40px;
11159 margin: 10px;
11160 float: left;
11161 border: 2px solid blue;
11162 }
11163 span {
11164 color: red;
11165 font-weight: bold;
11166 }
11167 button {
11168 margin: 5px;
11169 }
11170 </style>
11171 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11172</head>
11173<body>
11174​
11175<p><button>Turn slice yellow</button>
11176 <span>Click the button!</span></p>
11177 <div></div>
11178 <div></div>
11179 <div></div>
11180 <div></div>
11181 <div></div>
11182 <div></div>
11183 <div></div>
11184 <div></div>
11185 <div></div>
11186 ​
11187<script>
11188function colorEm() {
11189 var $div = $( "div" );
11190 var start = Math.floor( Math.random() * $div.length );
11191 var end = Math.floor( Math.random() * ( $div.length - start ) ) +
11192 start + 1;
11193 if ( end === $div.length ) {
11194 end = undefined;
11195 }
11196 $div.css( "background", "" );
11197 if ( end ) {
11198 $div.slice( start, end ).css( "background", "yellow" );
11199 } else {
11200 $div.slice( start ).css( "background", "yellow" );
11201 }
11202 $( "span" ).text( "$( 'div' ).slice( " + start +
11203 (end ? ", " + end : "") +
11204 ").css( 'background', 'yellow' );" );
11205}
11206​
11207$( "button" ).click( colorEm );
11208</script>
11209​
11210</body>
11211</html>
11212```
11213 * @example ​ ````Selects all paragraphs, then slices the selection to include only the first element.
11214```javascript
11215$( "p" ).slice( 0, 1 ).wrapInner( "<b></b>" );
11216```
11217 * @example ​ ````Selects all paragraphs, then slices the selection to include only the first and second element.
11218```javascript
11219$( "p" ).slice( 0, 2 ).wrapInner( "<b></b>" );
11220```
11221 * @example ​ ````Selects all paragraphs, then slices the selection to include only the second element.
11222```javascript
11223$( "p" ).slice( 1, 2 ).wrapInner( "<b></b>" );
11224```
11225 * @example ​ ````Selects all paragraphs, then slices the selection to include only the second and third element.
11226```javascript
11227$( "p" ).slice( 1 ).wrapInner( "<b></b>" );
11228```
11229 * @example ​ ````Selects all paragraphs, then slices the selection to include only the third element.
11230```javascript
11231$( "p" ).slice( -1 ).wrapInner( "<b></b>" );
11232```
11233 */
11234 slice(start: number, end?: number): this;
11235 /**
11236 * Display the matched elements with a sliding motion.
11237 * @param duration A string or number determining how long the animation will run.
11238 * @param easing A string indicating which easing function to use for the transition.
11239 * @param complete A function to call once the animation is complete, called once per matched element.
11240 * @see \`{@link https://api.jquery.com/slideDown/ }\`
11241 * @since 1.4.3
11242 */
11243 slideDown(duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
11244 /**
11245 * Display the matched elements with a sliding motion.
11246 * @param duration_easing _&#x40;param_ `duration_easing`
11247 * <br>
11248 * * `duration` — A string or number determining how long the animation will run. <br>
11249 * * `easing` — A string indicating which easing function to use for the transition.
11250 * @param complete A function to call once the animation is complete, called once per matched element.
11251 * @see \`{@link https://api.jquery.com/slideDown/ }\`
11252 * @since 1.0
11253 * @since 1.4.3
11254 * @example ​ ````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.
11255```html
11256<!doctype html>
11257<html lang="en">
11258<head>
11259 <meta charset="utf-8">
11260 <title>slideDown demo</title>
11261 <style>
11262 div {
11263 background: #cfd;
11264 margin: 3px;
11265 width: 50px;
11266 text-align: center;
11267 float: left;
11268 cursor: pointer;
11269 border: 2px outset black;
11270 font-weight: bolder;
11271 }
11272 input {
11273 display: none;
11274 width: 120px;
11275 float: left;
11276 margin: 10px;
11277 }
11278 </style>
11279 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11280</head>
11281<body>
11282​
11283<div>Push!</div>
11284<input type="text">
11285<input type="text" class="middle">
11286<input type="text">
11287 ​
11288<script>
11289$( "div" ).click(function() {
11290 $( this ).css({
11291 borderStyle: "inset",
11292 cursor: "wait"
11293 });
11294 $( "input" ).slideDown( 1000, function() {
11295 $( this )
11296 .css( "border", "2px red inset" )
11297 .filter( ".middle" )
11298 .css( "background", "yellow" )
11299 .focus();
11300 $( "div" ).css( "visibility", "hidden" );
11301 });
11302});
11303​
11304</script>
11305​
11306</body>
11307</html>
11308```
11309 */
11310 slideDown(duration_easing: JQuery.Duration | string, complete: (this: TElement) => void): this;
11311 /**
11312 * Display the matched elements with a sliding motion.
11313 * @param duration_easing_complete_options _&#x40;param_ `duration_easing_complete_options`
11314 * <br>
11315 * * `duration` — A string or number determining how long the animation will run. <br>
11316 * * `easing` — A string indicating which easing function to use for the transition. <br>
11317 * * `complete` — A function to call once the animation is complete, called once per matched element. <br>
11318 * * `options` — A map of additional options to pass to the method.
11319 * @see \`{@link https://api.jquery.com/slideDown/ }\`
11320 * @since 1.0
11321 * @since 1.4.3
11322 * @example ​ ````Animates all divs to slide down and show themselves over 600 milliseconds.
11323```html
11324<!doctype html>
11325<html lang="en">
11326<head>
11327 <meta charset="utf-8">
11328 <title>slideDown demo</title>
11329 <style>
11330 div {
11331 background: #de9a44;
11332 margin: 3px;
11333 width: 80px;
11334 height: 40px;
11335 display: none;
11336 float: left;
11337 }
11338 </style>
11339 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11340</head>
11341<body>
11342​
11343Click me!
11344<div></div>
11345<div></div>
11346<div></div>
11347​
11348<script>
11349$( document.body ).click(function () {
11350 if ( $( "div:first" ).is( ":hidden" ) ) {
11351 $( "div" ).slideDown( "slow" );
11352 } else {
11353 $( "div" ).hide();
11354 }
11355});
11356</script>
11357​
11358</body>
11359</html>
11360```
11361 */
11362 slideDown(
11363 duration_easing_complete_options?:
11364 | JQuery.Duration
11365 | string
11366 | ((this: TElement) => void)
11367 | JQuery.EffectsOptions<TElement>,
11368 ): this;
11369 /**
11370 * Display or hide the matched elements with a sliding motion.
11371 * @param duration A string or number determining how long the animation will run.
11372 * @param easing A string indicating which easing function to use for the transition.
11373 * @param complete A function to call once the animation is complete, called once per matched element.
11374 * @see \`{@link https://api.jquery.com/slideToggle/ }\`
11375 * @since 1.4.3
11376 */
11377 slideToggle(duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
11378 /**
11379 * Display or hide the matched elements with a sliding motion.
11380 * @param duration_easing _&#x40;param_ `duration_easing`
11381 * <br>
11382 * * `duration` — A string or number determining how long the animation will run. <br>
11383 * * `easing` — A string indicating which easing function to use for the transition.
11384 * @param complete A function to call once the animation is complete, called once per matched element.
11385 * @see \`{@link https://api.jquery.com/slideToggle/ }\`
11386 * @since 1.0
11387 * @since 1.4.3
11388 * @example ​ ````Animates divs between dividers with a toggle that makes some appear and some disappear.
11389```html
11390<!doctype html>
11391<html lang="en">
11392<head>
11393 <meta charset="utf-8">
11394 <title>slideToggle demo</title>
11395 <style>
11396 div {
11397 background: #b977d1;
11398 margin: 3px;
11399 width: 60px;
11400 height: 60px;
11401 float: left;
11402 }
11403 div.still {
11404 background: #345;
11405 width: 5px;
11406 }
11407 div.hider {
11408 display: none;
11409 }
11410 span {
11411 color: red;
11412 }
11413 p {
11414 clear: left;
11415 }
11416 </style>
11417 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11418</head>
11419<body>
11420​
11421<div></div>
11422<div class="still"></div>
11423<div style="display:none;">
11424</div><div class="still"></div>
11425<div></div>
11426<div class="still"></div>
11427<div class="hider"></div>
11428<div class="still"></div>
11429<div class="hider"></div>
11430<div class="still"></div>
11431<div></div>
11432<p><button id="aa">Toggle</button> There have been <span>0</span> toggled divs.</p>
11433​
11434<script>
11435$( "#aa" ).click(function() {
11436 $( "div:not(.still)" ).slideToggle( "slow", function() {
11437 var n = parseInt( $( "span" ).text(), 10 );
11438 $( "span" ).text( n + 1 );
11439 });
11440});
11441</script>
11442​
11443</body>
11444</html>
11445```
11446 */
11447 slideToggle(duration_easing: JQuery.Duration | string, complete: (this: TElement) => void): this;
11448 /**
11449 * Display or hide the matched elements with a sliding motion.
11450 * @param duration_easing_complete_options _&#x40;param_ `duration_easing_complete_options`
11451 * <br>
11452 * * `duration` — A string or number determining how long the animation will run. <br>
11453 * * `easing` — A string indicating which easing function to use for the transition. <br>
11454 * * `complete` — A function to call once the animation is complete, called once per matched element. <br>
11455 * * `options` — A map of additional options to pass to the method.
11456 * @see \`{@link https://api.jquery.com/slideToggle/ }\`
11457 * @since 1.0
11458 * @since 1.4.3
11459 * @example ​ ````Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.
11460```html
11461<!doctype html>
11462<html lang="en">
11463<head>
11464 <meta charset="utf-8">
11465 <title>slideToggle demo</title>
11466 <style>
11467 p {
11468 width: 400px;
11469 }
11470 </style>
11471 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11472</head>
11473<body>
11474​
11475<button>Toggle</button>
11476<p>
11477 This is the paragraph to end all paragraphs. You
11478 should feel <em>lucky</em> to have seen such a paragraph in
11479 your life. Congratulations!
11480</p>
11481​
11482<script>
11483$( "button" ).click(function() {
11484 $( "p" ).slideToggle( "slow" );
11485});
11486</script>
11487​
11488</body>
11489</html>
11490```
11491 */
11492 slideToggle(
11493 duration_easing_complete_options?:
11494 | JQuery.Duration
11495 | string
11496 | ((this: TElement) => void)
11497 | JQuery.EffectsOptions<TElement>,
11498 ): this;
11499 /**
11500 * Hide the matched elements with a sliding motion.
11501 * @param duration A string or number determining how long the animation will run.
11502 * @param easing A string indicating which easing function to use for the transition.
11503 * @param complete A function to call once the animation is complete, called once per matched element.
11504 * @see \`{@link https://api.jquery.com/slideUp/ }\`
11505 * @since 1.4.3
11506 */
11507 slideUp(duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
11508 /**
11509 * Hide the matched elements with a sliding motion.
11510 * @param duration_easing _&#x40;param_ `duration_easing`
11511 * <br>
11512 * * `duration` — A string or number determining how long the animation will run. <br>
11513 * * `easing` — A string indicating which easing function to use for the transition.
11514 * @param complete A function to call once the animation is complete, called once per matched element.
11515 * @see \`{@link https://api.jquery.com/slideUp/ }\`
11516 * @since 1.0
11517 * @since 1.4.3
11518 * @example ​ ````Animates the parent paragraph to slide up, completing the animation within 200 milliseconds. Once the animation is done, it displays an alert.
11519```html
11520<!doctype html>
11521<html lang="en">
11522<head>
11523 <meta charset="utf-8">
11524 <title>slideUp demo</title>
11525 <style>
11526 div {
11527 margin: 2px;
11528 }
11529 </style>
11530 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11531</head>
11532<body>
11533​
11534<div>
11535 <button>Hide One</button>
11536 <input type="text" value="One">
11537</div>
11538​
11539<div>
11540 <button>Hide Two</button>
11541 <input type="text" value="Two">
11542</div>
11543​
11544<div>
11545 <button>Hide Three</button>
11546 <input type="text" value="Three">
11547</div>
11548​
11549<div id="msg"></div>
11550​
11551<script>
11552$( "button" ).click(function() {
11553 $( this ).parent().slideUp( "slow", function() {
11554 $( "#msg" ).text( $( "button", this ).text() + " has completed." );
11555 });
11556});
11557</script>
11558​
11559</body>
11560</html>
11561```
11562 */
11563 slideUp(duration_easing: JQuery.Duration | string, complete: (this: TElement) => void): this;
11564 /**
11565 * Hide the matched elements with a sliding motion.
11566 * @param duration_easing_complete_options _&#x40;param_ `duration_easing_complete_options`
11567 * <br>
11568 * * `duration` — A string or number determining how long the animation will run. <br>
11569 * * `easing` — A string indicating which easing function to use for the transition. <br>
11570 * * `complete` — A function to call once the animation is complete, called once per matched element. <br>
11571 * * `options` — A map of additional options to pass to the method.
11572 * @see \`{@link https://api.jquery.com/slideUp/ }\`
11573 * @since 1.0
11574 * @since 1.4.3
11575 * @example ​ ````Animates all divs to slide up, completing the animation within 400 milliseconds.
11576```html
11577<!doctype html>
11578<html lang="en">
11579<head>
11580 <meta charset="utf-8">
11581 <title>slideUp demo</title>
11582 <style>
11583 div {
11584 background: #3d9a44;
11585 margin: 3px;
11586 width: 80px;
11587 height: 40px;
11588 float: left;
11589 }
11590 </style>
11591 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11592</head>
11593<body>
11594​
11595Click me!
11596<div></div>
11597<div></div>
11598<div></div>
11599<div></div>
11600<div></div>
11601​
11602<script>
11603$( document.body ).click(function() {
11604 if ( $( "div:first" ).is( ":hidden" ) ) {
11605 $( "div" ).show( "slow" );
11606 } else {
11607 $( "div" ).slideUp();
11608 }
11609});
11610</script>
11611​
11612</body>
11613</html>
11614```
11615 */
11616 slideUp(
11617 duration_easing_complete_options?:
11618 | JQuery.Duration
11619 | string
11620 | ((this: TElement) => void)
11621 | JQuery.EffectsOptions<TElement>,
11622 ): this;
11623 /**
11624 * Stop the currently-running animation on the matched elements.
11625 * @param queue The name of the queue in which to stop animations.
11626 * @param clearQueue A Boolean indicating whether to remove queued animation as well. Defaults to false.
11627 * @param jumpToEnd A Boolean indicating whether to complete the current animation immediately. Defaults to false.
11628 * @see \`{@link https://api.jquery.com/stop/ }\`
11629 * @since 1.7
11630 */
11631 stop(queue: string, clearQueue?: boolean, jumpToEnd?: boolean): this;
11632 /**
11633 * Stop the currently-running animation on the matched elements.
11634 * @param clearQueue A Boolean indicating whether to remove queued animation as well. Defaults to false.
11635 * @param jumpToEnd A Boolean indicating whether to complete the current animation immediately. Defaults to false.
11636 * @see \`{@link https://api.jquery.com/stop/ }\`
11637 * @since 1.2
11638 * @example ​ ````Click the Go button once to start the animation, then click the STOP button to stop it where it&#39;s currently positioned. Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.
11639```html
11640<!doctype html>
11641<html lang="en">
11642<head>
11643 <meta charset="utf-8">
11644 <title>stop demo</title>
11645 <style>
11646 div {
11647 position: absolute;
11648 background-color: #abc;
11649 left: 0px;
11650 top: 30px;
11651 width: 60px;
11652 height: 60px;
11653 margin: 5px;
11654 }
11655 </style>
11656 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11657</head>
11658<body>
11659​
11660<button id="go">Go</button>
11661<button id="stop">STOP!</button>
11662<button id="back">Back</button>
11663<div class="block"></div>
11664​
11665<script>
11666// Start animation
11667$( "#go" ).click(function() {
11668 $( ".block" ).animate({ left: "+=100px" }, 2000 );
11669});
11670​
11671// Stop animation when button is clicked
11672$( "#stop" ).click(function() {
11673 $( ".block" ).stop();
11674});
11675​
11676// Start animation in the opposite direction
11677$( "#back" ).click(function() {
11678 $( ".block" ).animate({ left: "-=100px" }, 2000 );
11679});
11680</script>
11681​
11682</body>
11683</html>
11684```
11685 * @example ​ ````Click the slideToggle button to start the animation, then click again before the animation is completed. The animation will toggle the other direction from the saved starting point.
11686```html
11687<!doctype html>
11688<html lang="en">
11689<head>
11690 <meta charset="utf-8">
11691 <title>stop demo</title>
11692 <style>
11693 .block {
11694 background-color: #abc;
11695 border: 2px solid black;
11696 width: 200px;
11697 height: 80px;
11698 margin: 10px;
11699 }
11700 </style>
11701 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11702</head>
11703<body>
11704​
11705<button id="toggle">slideToggle</button>
11706<div class="block"></div>
11707​
11708<script>
11709var $block = $( ".block" );
11710​
11711// Toggle a sliding animation animation
11712$( "#toggle" ).on( "click", function() {
11713 $block.stop().slideToggle( 1000 );
11714});
11715</script>
11716​
11717</body>
11718</html>
11719```
11720 */
11721 stop(clearQueue?: boolean, jumpToEnd?: boolean): this;
11722 /**
11723 * Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.
11724 * @param eventData An object containing data that will be passed to the event handler.
11725 * @param handler A function to execute each time the event is triggered.
11726 * @see \`{@link https://api.jquery.com/submit-shorthand/ }\`
11727 * @since 1.4.3
11728 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
11729 *
11730 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
11731 *
11732 * **Solution**: Instead of `.submit(fn)` use `.on("submit", fn)`. Instead of `.submit()` use `.trigger("submit")`.
11733 */
11734 submit<TData>(
11735 eventData: TData,
11736 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, "submit">,
11737 ): this;
11738 /**
11739 * Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.
11740 * @param handler A function to execute each time the event is triggered.
11741 * @see \`{@link https://api.jquery.com/submit-shorthand/ }\`
11742 * @since 1.0
11743 * @deprecated ​ Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
11744 *
11745 * **Cause**: The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.
11746 *
11747 * **Solution**: Instead of `.submit(fn)` use `.on("submit", fn)`. Instead of `.submit()` use `.trigger("submit")`.
11748 * @example ​ ````If you&#39;d like to prevent forms from being submitted unless a flag variable is set, try:
11749```html
11750<!doctype html>
11751<html lang="en">
11752<head>
11753 <meta charset="utf-8">
11754 <title>submit demo</title>
11755 <style>
11756 p {
11757 margin: 0;
11758 color: blue;
11759 }
11760 div,p {
11761 margin-left: 10px;
11762 }
11763 span {
11764 color: red;
11765 }
11766 </style>
11767 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11768</head>
11769<body>
11770​
11771<p>Type 'correct' to validate.</p>
11772<form action="javascript:alert( 'success!' );">
11773 <div>
11774 <input type="text">
11775 <input type="submit">
11776 </div>
11777</form>
11778<span></span>
11779​
11780<script>
11781$( "form" ).submit(function( event ) {
11782 if ( $( "input:first" ).val() === "correct" ) {
11783 $( "span" ).text( "Validated..." ).show();
11784 return;
11785 }
11786​
11787 $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
11788 event.preventDefault();
11789});
11790</script>
11791​
11792</body>
11793</html>
11794```
11795 * @example ​ ````If you&#39;d like to prevent forms from being submitted unless a flag variable is set, try:
11796```javascript
11797$( "form" ).submit(function() {
11798 return this.some_flag_variable;
11799});
11800```
11801 * @example ​ ````To trigger the submit event on the first form on the page, try:
11802```javascript
11803$( "form:first" ).submit();
11804```
11805 */
11806 submit(
11807 handler?:
11808 | JQuery.TypeEventHandler<TElement, null, TElement, TElement, "submit">
11809 | false,
11810 ): this;
11811 /**
11812 * Set the content of each element in the set of matched elements to the specified text.
11813 * @param text_function _&#x40;param_ `text_function`
11814 * <br>
11815 * * `text` — The text to set as the content of each matched element. When Number or Boolean is supplied, it will
11816 * be converted to a String representation. <br>
11817 * * `function` — A function returning the text content to set. Receives the index position of the element in the set
11818 * and the old text value as arguments.
11819 * @see \`{@link https://api.jquery.com/text/ }\`
11820 * @since 1.0
11821 * @since 1.4
11822 * @example ​ ````Add text to the paragraph (notice the bold tag is escaped).
11823```html
11824<!doctype html>
11825<html lang="en">
11826<head>
11827 <meta charset="utf-8">
11828 <title>text demo</title>
11829 <style>
11830 p {
11831 color: blue;
11832 margin: 8px;
11833 }
11834 </style>
11835 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11836</head>
11837<body>
11838​
11839<p>Test Paragraph.</p>
11840​
11841<script>
11842$( "p" ).text( "<b>Some</b> new text." );
11843</script>
11844​
11845</body>
11846</html>
11847```
11848 */
11849 text(
11850 text_function:
11851 | string
11852 | number
11853 | boolean
11854 | ((this: TElement, index: number, text: string) => string | number | boolean),
11855 ): this;
11856 /**
11857 * Get the combined text contents of each element in the set of matched elements, including their descendants.
11858 * @see \`{@link https://api.jquery.com/text/ }\`
11859 * @since 1.0
11860 * @example ​ ````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).
11861```html
11862<!doctype html>
11863<html lang="en">
11864<head>
11865 <meta charset="utf-8">
11866 <title>text demo</title>
11867 <style>
11868 p {
11869 color: blue;
11870 margin: 8px;
11871 }
11872 b {
11873 color: red;
11874 }
11875 </style>
11876 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11877</head>
11878<body>
11879​
11880<p><b>Test</b> Paragraph.</p>
11881<p></p>
11882​
11883<script>
11884var str = $( "p:first" ).text();
11885$( "p:last" ).html( str );
11886</script>
11887​
11888</body>
11889</html>
11890```
11891 */
11892 text(): string;
11893 /**
11894 * Retrieve all the elements contained in the jQuery set, as an array.
11895 * @see \`{@link https://api.jquery.com/toArray/ }\`
11896 * @since 1.4
11897 * @example ​ ````Select all divs in the document and return the DOM Elements as an Array; then use the built-in reverse() method to reverse that array.
11898```html
11899<!doctype html>
11900<html lang="en">
11901<head>
11902 <meta charset="utf-8">
11903 <title>toArray demo</title>
11904 <style>
11905 span {
11906 color: red;
11907 }
11908 </style>
11909 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11910</head>
11911<body>
11912​
11913Reversed - <span></span>
11914​
11915<div>One</div>
11916<div>Two</div>
11917<div>Three</div>​
11918<script>
11919function disp( divs ) {
11920 var a = [];
11921 for ( var i = 0; i < divs.length; i++ ) {
11922 a.push( divs[ i ].innerHTML );
11923 }
11924 $( "span" ).text( a.join( " " ) );
11925}
11926​
11927disp( $( "div" ).toArray().reverse() );
11928</script>
11929​
11930</body>
11931</html>
11932```
11933 */
11934 toArray(): TElement[];
11935 /**
11936 * Display or hide the matched elements.
11937 * @param duration A string or number determining how long the animation will run.
11938 * @param easing A string indicating which easing function to use for the transition.
11939 * @param complete A function to call once the animation is complete, called once per matched element.
11940 * @see \`{@link https://api.jquery.com/toggle/ }\`
11941 * @since 1.4.3
11942 */
11943 toggle(duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
11944 /**
11945 * Display or hide the matched elements.
11946 * @param duration A string or number determining how long the animation will run.
11947 * @param complete A function to call once the animation is complete, called once per matched element.
11948 * @see \`{@link https://api.jquery.com/toggle/ }\`
11949 * @since 1.0
11950 */
11951 toggle(duration: JQuery.Duration, complete: (this: TElement) => void): this;
11952 /**
11953 * Display or hide the matched elements.
11954 * @param duration_complete_options_display _&#x40;param_ `duration_complete_options_display`
11955 * <br>
11956 * * `duration` — A string or number determining how long the animation will run. <br>
11957 * * `complete` — A function to call once the animation is complete, called once per matched element. <br>
11958 * * `options` — A map of additional options to pass to the method. <br>
11959 * * `display` — Use true to show the element or false to hide it.
11960 * @see \`{@link https://api.jquery.com/toggle/ }\`
11961 * @since 1.0
11962 * @since 1.3
11963 * @example ​ ````Toggles all paragraphs.
11964```html
11965<!doctype html>
11966<html lang="en">
11967<head>
11968 <meta charset="utf-8">
11969 <title>toggle demo</title>
11970 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
11971</head>
11972<body>
11973​
11974<button>Toggle</button>
11975<p>Hello</p>
11976<p style="display: none">Good Bye</p>
11977​
11978<script>
11979$( "button" ).click(function() {
11980 $( "p" ).toggle();
11981});
11982</script>
11983​
11984</body>
11985</html>
11986```
11987 * @example ​ ````Animates all paragraphs to be shown if they are hidden and hidden if they are visible, completing the animation within 600 milliseconds.
11988```html
11989<!doctype html>
11990<html lang="en">
11991<head>
11992 <meta charset="utf-8">
11993 <title>toggle demo</title>
11994 <style>
11995 p {
11996 background: #dad;
11997 font-weight: bold;
11998 font-size: 16px;
11999 }
12000 </style>
12001 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12002</head>
12003<body>
12004​
12005<button>Toggle 'em</button>
12006<p>Hiya</p>
12007<p>Such interesting text, eh?</p>
12008​
12009<script>
12010$( "button" ).click(function() {
12011 $( "p" ).toggle( "slow" );
12012});
12013</script>
12014​
12015</body>
12016</html>
12017```
12018 * @example ​ ````Shows all paragraphs, then hides them all, back and forth.
12019```html
12020<!doctype html>
12021<html lang="en">
12022<head>
12023 <meta charset="utf-8">
12024 <title>toggle demo</title>
12025 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12026</head>
12027<body>
12028​
12029<button>Toggle</button>
12030<p>Hello</p>
12031<p style="display: none">Good Bye</p>
12032​
12033<script>
12034var flip = 0;
12035$( "button" ).click(function() {
12036 $( "p" ).toggle( flip++ % 2 === 0 );
12037});
12038</script>
12039​
12040</body>
12041</html>
12042```
12043 */
12044 toggle(
12045 duration_complete_options_display?:
12046 | JQuery.Duration
12047 | ((this: TElement) => void)
12048 | JQuery.EffectsOptions<TElement>
12049 | boolean,
12050 ): this;
12051 /**
12052 * 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.
12053 * @param className_function _&#x40;param_ `className_function`
12054 * <br>
12055 * * `className` — One or more class names (separated by spaces) to be toggled for each element in the matched set. <br>
12056 * * `function` — A function that returns class names to be toggled in the class attribute of each element in the
12057 * matched set. Receives the index position of the element in the set, the old class value, and the state as arguments.
12058 * @param state A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.
12059 * @see \`{@link https://api.jquery.com/toggleClass/ }\`
12060 * @since 1.0
12061 * @since 1.3
12062 * @since 1.4
12063 * @since 3.3
12064 * @example ​ ````Toggle the class &#39;highlight&#39; when a paragraph is clicked.
12065```html
12066<!doctype html>
12067<html lang="en">
12068<head>
12069 <meta charset="utf-8">
12070 <title>toggleClass demo</title>
12071 <style>
12072 p {
12073 margin: 4px;
12074 font-size: 16px;
12075 font-weight: bolder;
12076 cursor: pointer;
12077 }
12078 .blue {
12079 color: blue;
12080 }
12081 .highlight {
12082 background: yellow;
12083 }
12084 </style>
12085 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12086</head>
12087<body>
12088​
12089<p class="blue">Click to toggle</p>
12090<p class="blue highlight">highlight</p>
12091<p class="blue">on these</p>
12092<p class="blue">paragraphs</p>
12093​
12094<script>
12095$( "p" ).click(function() {
12096 $( this ).toggleClass( "highlight" );
12097});
12098</script>
12099​
12100</body>
12101</html>
12102```
12103 * @example ​ ````Add the &quot;highlight&quot; class to the clicked paragraph on every third click of that paragraph, remove it every first and second click.
12104```html
12105<!doctype html>
12106<html lang="en">
12107<head>
12108 <meta charset="utf-8">
12109 <title>toggleClass demo</title>
12110 <style>
12111 p {
12112 margin: 4px;
12113 font-size: 16px;
12114 font-weight: bolder;
12115 cursor: pointer;
12116 }
12117 .blue {
12118 color: blue;
12119 }
12120 .highlight {
12121 background: red;
12122 }
12123 </style>
12124 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12125</head>
12126<body>
12127​
12128<p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
12129<p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
12130<p class="blue">on these (<span>clicks: 0</span>)</p>
12131<p class="blue">paragraphs (<span>clicks: 0</span>)</p>
12132​
12133<script>
12134var count = 0;
12135$( "p" ).each(function() {
12136 var $thisParagraph = $( this );
12137 var count = 0;
12138 $thisParagraph.click(function() {
12139 count++;
12140 $thisParagraph.find( "span" ).text( "clicks: " + count );
12141 $thisParagraph.toggleClass( "highlight", count % 3 === 0 );
12142 });
12143});
12144</script>
12145​
12146</body>
12147</html>
12148```
12149 * @example ​ ````Toggle the class name(s) indicated on the buttons for each div.
12150```html
12151<!doctype html>
12152<html lang="en">
12153<head>
12154 <meta charset="utf-8">
12155 <title>toggleClass demo</title>
12156 <style>
12157 .wrap > div {
12158 float: left;
12159 width: 100px;
12160 margin: 1em 1em 0 0;
12161 padding-left: 3px;
12162 border: 1px solid #abc;
12163 }
12164 div.a {
12165 background-color: aqua;
12166 }
12167 div.b {
12168 background-color: burlywood;
12169 }
12170 div.c {
12171 background-color: cornsilk;
12172 }
12173 </style>
12174 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12175</head>
12176<body>
12177​
12178<div class="buttons">
12179 <button>toggle</button>
12180 <button class="a">toggle a</button>
12181 <button class="a b">toggle a b</button>
12182 <button class="a b c">toggle a b c</button>
12183 <a href="#">reset</a>
12184</div>
12185<div class="wrap">
12186 <div></div>
12187 <div class="b"></div>
12188 <div class="a b"></div>
12189 <div class="a c"></div>
12190</div>
12191​
12192<script>
12193var cls = [ "", "a", "a b", "a b c" ];
12194var divs = $( "div.wrap" ).children();
12195var appendClass = function() {
12196 divs.append(function() {
12197 return "<div>" + ( this.className || "none" ) + "</div>";
12198 });
12199};
12200​
12201appendClass();
12202​
12203$( "button" ).on( "click", function() {
12204 var tc = this.className || undefined;
12205 divs.toggleClass( tc );
12206 appendClass();
12207});
12208​
12209$( "a" ).on( "click", function( event ) {
12210 event.preventDefault();
12211 divs.empty().each(function( i ) {
12212 this.className = cls[ i ];
12213 });
12214 appendClass();
12215});
12216</script>
12217​
12218</body>
12219</html>
12220```
12221 */
12222 toggleClass<TState extends boolean>(
12223 className_function:
12224 | JQuery.TypeOrArray<string>
12225 | ((this: TElement, index: number, className: string, state: TState) => string),
12226 state?: TState,
12227 ): this;
12228 /**
12229 * 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.
12230 * @param state A boolean value to determine whether the class should be added or removed.
12231 * @see \`{@link https://api.jquery.com/toggleClass/ }\`
12232 * @since 1.4
12233 * @deprecated ​ Deprecated since 3.0. See \`{@link https://github.com/jquery/jquery/pull/2618 }\`.
12234 *
12235 * **Cause**: Calling `.toggleClass()` with no arguments, or with a single Boolean `true` or `false` argument, has been deprecated. Its behavior was poorly documented, but essentially the method saved away the current class value in a data item when the class was removed and restored the saved value when it was toggled back. If you do not believe you are specificially trying to use this form of the method, it is possible you are accidentally doing so via an inadvertent undefined value, as `.toggleClass( undefined )` toggles all classes.
12236 *
12237 * **Solution**: If this functionality is still needed, save the current full `.attr( "class" )` value in a data item and restore it when required.
12238 */
12239 toggleClass(state?: boolean): this;
12240 /**
12241 * Execute all handlers and behaviors attached to the matched elements for the given event type.
12242 * @param eventType_event _&#x40;param_ `eventType_event`
12243 * <br>
12244 * * `eventType` — A string containing a JavaScript event type, such as `click` or `submit`. <br>
12245 * * `event` — A \`{@link https://api.jquery.com/category/events/event-object/ jQuery.Event}\` object.
12246 * @param extraParameters Additional parameters to pass along to the event handler.
12247 * @see \`{@link https://api.jquery.com/trigger/ }\`
12248 * @since 1.0
12249 * @since 1.3
12250 * @example ​ ````Clicks to button #2 also trigger a click for button #1.
12251```html
12252<!doctype html>
12253<html lang="en">
12254<head>
12255 <meta charset="utf-8">
12256 <title>trigger demo</title>
12257 <style>
12258 button {
12259 margin: 10px;
12260 }
12261 div {
12262 color: blue;
12263 font-weight: bold;
12264 }
12265 span {
12266 color: red;
12267 }
12268 </style>
12269 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12270</head>
12271<body>
12272​
12273<button>Button #1</button>
12274<button>Button #2</button>
12275<div><span>0</span> button #1 clicks.</div>
12276<div><span>0</span> button #2 clicks.</div>
12277​
12278<script>
12279$( "button:first" ).click(function() {
12280 update( $( "span:first" ) );
12281});
12282​
12283$( "button:last" ).click(function() {
12284 $( "button:first" ).trigger( "click" );
12285 update( $( "span:last" ) );
12286});
12287​
12288function update( j ) {
12289 var n = parseInt( j.text(), 10 );
12290 j.text( n + 1 );
12291}
12292</script>
12293​
12294</body>
12295</html>
12296```
12297 * @example ​ ````To submit the first form without using the submit() function, try:
12298```javascript
12299$( "form:first" ).trigger( "submit" );
12300```
12301 * @example ​ ````To submit the first form without using the submit() function, try:
12302```javascript
12303var event = jQuery.Event( "submit" );
12304$( "form:first" ).trigger( event );
12305if ( event.isDefaultPrevented() ) {
12306 // Perform an action...
12307}
12308```
12309 * @example ​ ````To pass arbitrary data to an event:
12310```javascript
12311$( "p" )
12312 .click(function( event, a, b ) {
12313 // When a normal click fires, a and b are undefined
12314 // for a trigger like below a refers to "foo" and b refers to "bar"
12315 })
12316 .trigger( "click", [ "foo", "bar" ] );
12317```
12318 * @example ​ ````To pass arbitrary data through an event object:
12319```javascript
12320var event = jQuery.Event( "logged" );
12321event.user = "foo";
12322event.pass = "bar";
12323$( "body" ).trigger( event );
12324```
12325 * @example ​ ````Alternative way to pass data through an event object:
12326```javascript
12327$( "body" ).trigger({
12328 type:"logged",
12329 user:"foo",
12330 pass:"bar"
12331});
12332```
12333 */
12334 trigger(
12335 eventType_event: string | JQuery.Event,
12336 extraParameters?: any[] | JQuery.PlainObject | string | number | boolean,
12337 ): this;
12338 /**
12339 * Execute all handlers attached to an element for an event.
12340 * @param eventType_event _&#x40;param_ `eventType_event`
12341 * <br>
12342 * * `eventType` — A string containing a JavaScript event type, such as `click` or `submit`. <br>
12343 * * `event` — A \`{@link https://api.jquery.com/category/events/event-object/ jQuery.Event}\` object.
12344 * @param extraParameters Additional parameters to pass along to the event handler.
12345 * @see \`{@link https://api.jquery.com/triggerHandler/ }\`
12346 * @since 1.2
12347 * @since 1.3
12348 * @example ​ ````If you called .triggerHandler() on a focus event - the browser&#39;s default focus action would not be triggered, only the event handlers bound to the focus event.
12349```html
12350<!doctype html>
12351<html lang="en">
12352<head>
12353 <meta charset="utf-8">
12354 <title>triggerHandler demo</title>
12355 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12356</head>
12357<body>
12358​
12359<button id="old">.trigger( "focus" )</button>
12360<button id="new">.triggerHandler( "focus" )</button><br><br>
12361​
12362<input type="text" value="To Be Focused">
12363​
12364<script>
12365$( "#old" ).click(function() {
12366 $( "input" ).trigger( "focus" );
12367});
12368$( "#new" ).click(function() {
12369 $( "input" ).triggerHandler( "focus" );
12370});
12371$( "input" ).focus(function() {
12372 $( "<span>Focused!</span>" ).appendTo( "body" ).fadeOut( 1000 );
12373});
12374</script>
12375​
12376</body>
12377</html>
12378```
12379 */
12380 triggerHandler(
12381 eventType_event: string | JQuery.Event,
12382 extraParameters?: any[] | JQuery.PlainObject | string | number | boolean,
12383 ): any;
12384 /**
12385 * Remove a previously-attached event handler from the elements.
12386 * @param event A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
12387 * @param handler A function to execute each time the event is triggered.
12388 * @see \`{@link https://api.jquery.com/unbind/ }\`
12389 * @since 1.0
12390 * @since 1.4.3
12391 * @deprecated ​ Deprecated since 3.0. Use \`{@link off }\`.
12392 *
12393 * **Cause**: These event binding methods have been deprecated in favor of the `.on()` and `.off()` methods which can handle both delegated and direct event binding. Although the older methods are still present in jQuery 3.0, they may be removed as early as the next major-version update.
12394 *
12395 * **Solution**: Change the method call to use `.on()` or `.off()`, the documentation for the old methods include specific instructions. In general, the `.bind()` and `.unbind()` methods can be renamed directly to `.on()` and `.off()` respectively since the argument orders are identical.
12396 * @example ​ ````Can bind and unbind events to the colored button.
12397```html
12398<!doctype html>
12399<html lang="en">
12400<head>
12401 <meta charset="utf-8">
12402 <title>unbind demo</title>
12403 <style>
12404 button {
12405 margin: 5px;
12406 }
12407 button#theone {
12408 color: red;
12409 background: yellow;
12410 }
12411 </style>
12412 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12413</head>
12414<body>
12415​
12416<button id="theone">Does nothing...</button>
12417<button id="bind">Bind Click</button>
12418<button id="unbind">Unbind Click</button>
12419<div style="display:none;">Click!</div>
12420​
12421<script>
12422function aClick() {
12423 $( "div" ).show().fadeOut( "slow" );
12424}
12425$( "#bind" ).click(function() {
12426 $( "#theone" )
12427 .bind( "click", aClick )
12428 .text( "Can Click!" );
12429});
12430$( "#unbind" ).click(function() {
12431 $( "#theone" )
12432 .unbind( "click", aClick )
12433 .text( "Does nothing..." );
12434});
12435</script>
12436​
12437</body>
12438</html>
12439```
12440 * @example ​ ````To unbind just one previously bound handler, pass the function in as the second argument:
12441```javascript
12442var foo = function() {
12443 // Code to handle some kind of event
12444};
12445​
12446$( "p" ).bind( "click", foo ); // ... Now foo will be called when paragraphs are clicked ...
12447​
12448$( "p" ).unbind( "click", foo ); // ... foo will no longer be called.
12449```
12450 */
12451 unbind<TType extends string>(
12452 event: TType,
12453 handler:
12454 | JQuery.TypeEventHandler<TElement, any, TElement, TElement, TType>
12455 | false,
12456 ): this;
12457 /**
12458 * Remove a previously-attached event handler from the elements.
12459 * @param event A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
12460 * A jQuery.Event object.
12461 * @see \`{@link https://api.jquery.com/unbind/ }\`
12462 * @since 1.0
12463 * @deprecated ​ Deprecated since 3.0. Use \`{@link off }\`.
12464 *
12465 * **Cause**: These event binding methods have been deprecated in favor of the `.on()` and `.off()` methods which can handle both delegated and direct event binding. Although the older methods are still present in jQuery 3.0, they may be removed as early as the next major-version update.
12466 *
12467 * **Solution**: Change the method call to use `.on()` or `.off()`, the documentation for the old methods include specific instructions. In general, the `.bind()` and `.unbind()` methods can be renamed directly to `.on()` and `.off()` respectively since the argument orders are identical.
12468 * @example ​ ````To unbind all events from all paragraphs, write:
12469```javascript
12470$( "p" ).unbind();
12471```
12472 * @example ​ ````To unbind all click events from all paragraphs, write:
12473```javascript
12474$( "p" ).unbind( "click" );
12475```
12476 */
12477 unbind(event?: string | JQuery.TriggeredEvent<TElement>): this;
12478 /**
12479 * Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
12480 * @param selector A selector which will be used to filter the event results.
12481 * @param eventType A string containing a JavaScript event type, such as "click" or "keydown"
12482 * @param handler A function to execute each time the event is triggered.
12483 * @see \`{@link https://api.jquery.com/undelegate/ }\`
12484 * @since 1.4.2
12485 * @deprecated ​ Deprecated since 3.0. Use \`{@link off }\`.
12486 *
12487 * **Cause**: These event binding methods have been deprecated in favor of the `.on()` and `.off()` methods which can handle both delegated and direct event binding. Although the older methods are still present in jQuery 3.0, they may be removed as early as the next major-version update.
12488 *
12489 * **Solution**: Change the method call to use `.on()` or `.off()`, the documentation for the old methods include specific instructions. In general, the `.bind()` and `.unbind()` methods can be renamed directly to `.on()` and `.off()` respectively since the argument orders are identical.
12490 * @example ​ ````Can bind and unbind events to the colored button.
12491```html
12492<!doctype html>
12493<html lang="en">
12494<head>
12495 <meta charset="utf-8">
12496 <title>undelegate demo</title>
12497 <style>
12498 button {
12499 margin: 5px;
12500 }
12501 button#theone {
12502 color: red;
12503 background: yellow;
12504 }
12505 </style>
12506 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12507</head>
12508<body>
12509​
12510<button id="theone">Does nothing...</button>
12511<button id="bind">Bind Click</button>
12512<button id="unbind">Unbind Click</button>
12513<div style="display:none;">Click!</div>
12514​
12515<script>
12516function aClick() {
12517 $( "div" ).show().fadeOut( "slow" );
12518}
12519$( "#bind" ).click(function() {
12520 $( "body" )
12521 .delegate( "#theone", "click", aClick )
12522 .find( "#theone" ).text( "Can Click!" );
12523});
12524$( "#unbind" ).click(function() {
12525 $( "body" )
12526 .undelegate( "#theone", "click", aClick )
12527 .find( "#theone" ).text( "Does nothing..." );
12528});
12529</script>
12530​
12531</body>
12532</html>
12533```
12534 * @example ​ ````To undelegate just one previously bound handler, pass the function in as the third argument:
12535```javascript
12536var foo = function () {
12537 // Code to handle some kind of event
12538};
12539​
12540// ... Now foo will be called when paragraphs are clicked ...
12541$( "body" ).delegate( "p", "click", foo );
12542​
12543// ... foo will no longer be called.
12544$( "body" ).undelegate( "p", "click", foo );
12545```
12546 */
12547 undelegate<TType extends string>(
12548 selector: JQuery.Selector,
12549 eventType: TType,
12550 handler:
12551 | JQuery.TypeEventHandler<TElement, any, any, any, TType>
12552 | false,
12553 ): this;
12554 /**
12555 * Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
12556 * @param selector A selector which will be used to filter the event results.
12557 * @param eventType_events _&#x40;param_ `eventType_events`
12558 * <br>
12559 * * `eventType` — A string containing a JavaScript event type, such as "click" or "keydown" <br>
12560 * * `events` — An object of one or more event types and previously bound functions to unbind from them.
12561 * @see \`{@link https://api.jquery.com/undelegate/ }\`
12562 * @since 1.4.2
12563 * @since 1.4.3
12564 * @deprecated ​ Deprecated since 3.0. Use \`{@link off }\`.
12565 *
12566 * **Cause**: These event binding methods have been deprecated in favor of the `.on()` and `.off()` methods which can handle both delegated and direct event binding. Although the older methods are still present in jQuery 3.0, they may be removed as early as the next major-version update.
12567 *
12568 * **Solution**: Change the method call to use `.on()` or `.off()`, the documentation for the old methods include specific instructions. In general, the `.bind()` and `.unbind()` methods can be renamed directly to `.on()` and `.off()` respectively since the argument orders are identical.
12569 */
12570 undelegate(
12571 selector: JQuery.Selector,
12572 eventType_events:
12573 | string
12574 | JQuery.TypeEventHandlers<TElement, any, any, any>,
12575 ): this;
12576 /**
12577 * Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
12578 * @param namespace A selector which will be used to filter the event results.
12579 * @see \`{@link https://api.jquery.com/undelegate/ }\`
12580 * @since 1.4.2
12581 * @since 1.6
12582 * @deprecated ​ Deprecated since 3.0. Use \`{@link off }\`.
12583 *
12584 * **Cause**: These event binding methods have been deprecated in favor of the `.on()` and `.off()` methods which can handle both delegated and direct event binding. Although the older methods are still present in jQuery 3.0, they may be removed as early as the next major-version update.
12585 *
12586 * **Solution**: Change the method call to use `.on()` or `.off()`, the documentation for the old methods include specific instructions. In general, the `.bind()` and `.unbind()` methods can be renamed directly to `.on()` and `.off()` respectively since the argument orders are identical.
12587 * @example ​ ````To unbind all delegated events from all paragraphs, write:
12588```javascript
12589$( "p" ).undelegate();
12590```
12591 * @example ​ ````To unbind all delegated click events from all paragraphs, write:
12592```javascript
12593$( "p" ).undelegate( "click" );
12594```
12595 * @example ​ ````To unbind all delegated events by their namespace:
12596```javascript
12597var foo = function() {
12598 // Code to handle some kind of event
12599};
12600​
12601// Delegate events under the ".whatever" namespace
12602$( "form" ).delegate( ":button", "click.whatever", foo );
12603​
12604$( "form" ).delegate( "input[type='text'] ", "keypress.whatever", foo );
12605​
12606// Unbind all events delegated under the ".whatever" namespace
12607$( "form" ).undelegate( ".whatever" );
12608```
12609 */
12610 undelegate(namespace?: string): this;
12611 /**
12612 * Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.
12613 * @param selector A selector to check the parent element against. If an element's parent does not match the selector,
12614 * the element won't be unwrapped.
12615 * @see \`{@link https://api.jquery.com/unwrap/ }\`
12616 * @since 1.4
12617 * @since 3.0
12618 * @example ​ ````Wrap/unwrap a div around each of the paragraphs.
12619```html
12620<!doctype html>
12621<html lang="en">
12622<head>
12623 <meta charset="utf-8">
12624 <title>unwrap demo</title>
12625 <style>
12626 div {
12627 border: 2px solid blue;
12628 }
12629 p {
12630 background: yellow;
12631 margin: 4px;
12632 }
12633 </style>
12634 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12635</head>
12636<body>
12637​<button>wrap/unwrap</button>
12638<p>Hello</p>
12639<p>cruel</p>
12640<p>World</p>​
12641<script>
12642var pTags = $( "p" );
12643$( "button" ).click(function() {
12644 if ( pTags.parent().is( "div" ) ) {
12645 pTags.unwrap();
12646 } else {
12647 pTags.wrap( "<div></div>" );
12648 }
12649});
12650</script>
12651​
12652</body>
12653</html>
12654```
12655 */
12656 unwrap(selector?: string): this;
12657 /**
12658 * Set the value of each element in the set of matched elements.
12659 * @param value_function _&#x40;param_ `value_function`
12660 * <br>
12661 * * `value` — A string of text, a number, or an array of strings corresponding to the value of each matched
12662 * element to set as selected/checked. <br>
12663 * * `function` — A function returning the value to set. `this` is the current element. Receives the index position of
12664 * the element in the set and the old value as arguments.
12665 * @see \`{@link https://api.jquery.com/val/ }\`
12666 * @since 1.0
12667 * @since 1.4
12668 * @example ​ ````Set the value of an input box.
12669```html
12670<!doctype html>
12671<html lang="en">
12672<head>
12673 <meta charset="utf-8">
12674 <title>val demo</title>
12675 <style>
12676 button {
12677 margin: 4px;
12678 cursor: pointer;
12679 }
12680 input {
12681 margin: 4px;
12682 color: blue;
12683 }
12684 </style>
12685 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12686</head>
12687<body>
12688​
12689<div>
12690 <button>Feed</button>
12691 <button>the</button>
12692 <button>Input</button>
12693</div>
12694<input type="text" value="click a button">
12695​
12696<script>
12697$( "button" ).click(function() {
12698 var text = $( this ).text();
12699 $( "input" ).val( text );
12700});
12701</script>
12702​
12703</body>
12704</html>
12705```
12706 * @example ​ ````Use the function argument to modify the value of an input box.
12707```html
12708<!doctype html>
12709<html lang="en">
12710<head>
12711 <meta charset="utf-8">
12712 <title>val demo</title>
12713 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12714</head>
12715<body>
12716​
12717<p>Type something and then click or tab out of the input.</p>
12718<input type="text" value="type something">
12719​
12720<script>
12721$( "input" ).on( "blur", function() {
12722 $( this ).val(function( i, val ) {
12723 return val.toUpperCase();
12724 });
12725});
12726</script>
12727​
12728</body>
12729</html>
12730```
12731 * @example ​ ````Set a single select, a multiple select, checkboxes and a radio button .
12732```html
12733<!doctype html>
12734<html lang="en">
12735<head>
12736 <meta charset="utf-8">
12737 <title>val demo</title>
12738 <style>
12739 body {
12740 color: blue;
12741 }
12742 </style>
12743 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12744</head>
12745<body>
12746​
12747<select id="single">
12748 <option>Single</option>
12749 <option>Single2</option>
12750</select>
12751​
12752<select id="multiple" multiple="multiple">
12753 <option selected="selected">Multiple</option>
12754 <option>Multiple2</option>
12755 <option selected="selected">Multiple3</option>
12756</select>
12757​
12758<br>
12759<input type="checkbox" name="checkboxname" value="check1"> check1
12760<input type="checkbox" name="checkboxname" value="check2"> check2
12761<input type="radio" name="r" value="radio1"> radio1
12762<input type="radio" name="r" value="radio2"> radio2
12763​
12764<script>
12765$( "#single" ).val( "Single2" );
12766$( "#multiple" ).val([ "Multiple2", "Multiple3" ]);
12767$( "input").val([ "check1", "check2", "radio1" ]);
12768</script>
12769​
12770</body>
12771</html>
12772```
12773 */
12774 val(value_function: string | number | string[] | ((this: TElement, index: number, value: string) => string)): this;
12775 /**
12776 * Get the current value of the first element in the set of matched elements.
12777 * @see \`{@link https://api.jquery.com/val/ }\`
12778 * @since 1.0
12779 * @example ​ ````Get the single value from a single select and an array of values from a multiple select and display their values.
12780```html
12781<!doctype html>
12782<html lang="en">
12783<head>
12784 <meta charset="utf-8">
12785 <title>val demo</title>
12786 <style>
12787 p {
12788 color: red;
12789 margin: 4px;
12790 }
12791 b {
12792 color: blue;
12793 }
12794 </style>
12795 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12796</head>
12797<body>
12798​
12799<p></p>
12800​
12801<select id="single">
12802 <option>Single</option>
12803 <option>Single2</option>
12804</select>
12805​
12806<select id="multiple" multiple="multiple">
12807 <option selected="selected">Multiple</option>
12808 <option>Multiple2</option>
12809 <option selected="selected">Multiple3</option>
12810</select>
12811​
12812<script>
12813function displayVals() {
12814 var singleValues = $( "#single" ).val();
12815 var multipleValues = $( "#multiple" ).val() || [];
12816 // When using jQuery 3:
12817 // var multipleValues = $( "#multiple" ).val();
12818 $( "p" ).html( "<b>Single:</b> " + singleValues +
12819 " <b>Multiple:</b> " + multipleValues.join( ", " ) );
12820}
12821​
12822$( "select" ).change( displayVals );
12823displayVals();
12824</script>
12825​
12826</body>
12827</html>
12828```
12829 * @example ​ ````Find the value of an input box.
12830```html
12831<!doctype html>
12832<html lang="en">
12833<head>
12834 <meta charset="utf-8">
12835 <title>val demo</title>
12836 <style>
12837 p {
12838 color: blue;
12839 margin: 8px;
12840 }
12841 </style>
12842 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12843</head>
12844<body>
12845​
12846<input type="text" value="some text">
12847<p></p>
12848​
12849<script>
12850$( "input" )
12851 .keyup(function() {
12852 var value = $( this ).val();
12853 $( "p" ).text( value );
12854 })
12855 .keyup();
12856</script>
12857​
12858</body>
12859</html>
12860```
12861 */
12862 val():
12863 | (TElement extends HTMLSelectElement & { type: "select-one" } ? string
12864 : TElement extends HTMLSelectElement & { type: "select-multiple" } ? string[]
12865 : TElement extends HTMLSelectElement ? string | string[]
12866 : TElement extends { value: string | number } ? TElement["value"]
12867 : string | number | string[])
12868 | undefined;
12869 /**
12870 * Set the CSS width of each element in the set of matched elements.
12871 * @param value_function _&#x40;param_ `value_function`
12872 * <br>
12873 * * `value` — An integer representing the number of pixels, or an integer along with an optional unit of measure
12874 * appended (as a string). <br>
12875 * * `function` — A function returning the width to set. Receives the index position of the element in the set and the
12876 * old width as arguments. Within the function, `this` refers to the current element in the set.
12877 * @see \`{@link https://api.jquery.com/width/ }\`
12878 * @since 1.0
12879 * @since 1.4.1
12880 * @example ​ ````Change the width of each div the first time it is clicked (and change its color).
12881```html
12882<!doctype html>
12883<html lang="en">
12884<head>
12885 <meta charset="utf-8">
12886 <title>width demo</title>
12887 <style>
12888 div {
12889 width: 70px;
12890 height: 50px;
12891 float: left;
12892 margin: 5px;
12893 background: red;
12894 cursor: pointer;
12895 }
12896 .mod {
12897 background: blue;
12898 cursor: default;
12899 }
12900 </style>
12901 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12902</head>
12903<body>
12904​
12905<div>d</div>
12906<div>d</div>
12907<div>d</div>
12908<div>d</div>
12909<div>d</div>
12910​
12911<script>
12912var modWidth = 50;
12913$( "div" ).one( "click", function() {
12914 $( this ).width( modWidth ).addClass( "mod" );
12915 modWidth -= 8;
12916});
12917</script>
12918​
12919</body>
12920</html>
12921```
12922 */
12923 width(value_function: string | number | ((this: TElement, index: number, value: number) => string | number)): this;
12924 /**
12925 * Get the current computed width for the first element in the set of matched elements.
12926 * @see \`{@link https://api.jquery.com/width/ }\`
12927 * @since 1.0
12928 * @example ​ ````Show various widths. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.
12929```html
12930<!doctype html>
12931<html lang="en">
12932<head>
12933 <meta charset="utf-8">
12934 <title>width demo</title>
12935 <style>
12936 body {
12937 background: yellow;
12938 }
12939 button {
12940 font-size: 12px;
12941 margin: 2px;
12942 }
12943 p {
12944 width: 150px;
12945 border: 1px red solid;
12946 }
12947 div {
12948 color: red;
12949 font-weight: bold;
12950 }
12951 </style>
12952 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12953</head>
12954<body>
12955​
12956<button id="getp">Get Paragraph Width</button>
12957<button id="getd">Get Document Width</button>
12958<button id="getw">Get Window Width</button>
12959<div>&nbsp;</div>
12960<p>
12961 Sample paragraph to test width
12962</p>
12963​
12964<script>
12965function showWidth( ele, w ) {
12966 $( "div" ).text( "The width for the " + ele + " is " + w + "px." );
12967}
12968$( "#getp" ).click(function() {
12969 showWidth( "paragraph", $( "p" ).width() );
12970});
12971$( "#getd" ).click(function() {
12972 showWidth( "document", $( document ).width() );
12973});
12974$("#getw").click(function() {
12975 showWidth( "window", $( window ).width() );
12976});
12977</script>
12978​
12979</body>
12980</html>
12981```
12982 */
12983 width(): number | undefined;
12984 /**
12985 * Wrap an HTML structure around each element in the set of matched elements.
12986 * @param wrappingElement_function _&#x40;param_ `wrappingElement_function`
12987 * <br>
12988 * * `wrappingElement` — A selector, element, HTML string, or jQuery object specifying the structure to wrap around the
12989 * matched elements. When you pass a jQuery collection containing more than one element, or a selector
12990 * matching more than one element, the first element will be used. <br>
12991 * * `function` — A callback function returning the HTML content or jQuery object to wrap around the matched elements.
12992 * Receives the index position of the element in the set as an argument. Within the function, `this`
12993 * refers to the current element in the set.
12994 * @see \`{@link https://api.jquery.com/wrap/ }\`
12995 * @since 1.0
12996 * @since 1.4
12997 * @example ​ ````Wrap a new div around all of the paragraphs.
12998```html
12999<!doctype html>
13000<html lang="en">
13001<head>
13002 <meta charset="utf-8">
13003 <title>wrap demo</title>
13004 <style>
13005 div {
13006 border: 2px solid blue;
13007 }
13008 p {
13009 background: yellow;
13010 margin: 4px;
13011 }
13012 </style>
13013 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
13014</head>
13015<body>
13016​
13017<p>Hello</p>
13018<p>cruel</p>
13019<p>World</p>
13020​
13021<script>
13022$( "p" ).wrap( "<div></div>" );
13023</script>
13024​
13025</body>
13026</html>
13027```
13028 * @example ​ ````Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the &lt;strong&gt; (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html.&gt;
13029```html
13030<!doctype html>
13031<html lang="en">
13032<head>
13033 <meta charset="utf-8">
13034 <title>wrap demo</title>
13035 <style>
13036 div {
13037 border: 2px blue solid;
13038 margin: 2px;
13039 padding: 2px;
13040 }
13041 p {
13042 background: yellow;
13043 margin: 2px;
13044 padding: 2px;
13045 }
13046 strong {
13047 color: red;
13048 }
13049 </style>
13050 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
13051</head>
13052<body>
13053​
13054<span>Span Text</span>
13055<strong>What about me?</strong>
13056<span>Another One</span>
13057​
13058<script>
13059$( "span" ).wrap( "<div><div><p><em><b></b></em></p></div></div>" );
13060</script>
13061​
13062</body>
13063</html>
13064```
13065 * @example ​ ````Wrap a new div around all of the paragraphs.
13066```html
13067<!doctype html>
13068<html lang="en">
13069<head>
13070 <meta charset="utf-8">
13071 <title>wrap demo</title>
13072 <style>
13073 div {
13074 border: 2px solid blue;
13075 }
13076 p {
13077 background: yellow;
13078 margin: 4px;
13079 }
13080 </style>
13081 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
13082</head>
13083<body>
13084​
13085<p>Hello</p>
13086<p>cruel</p>
13087<p>World</p>
13088​
13089<script>
13090$( "p" ).wrap( document.createElement( "div" ) );
13091</script>
13092​
13093</body>
13094</html>
13095```
13096 * @example ​ ````Wrap a jQuery object double depth div around all of the paragraphs. Notice it doesn&#39;t move the object but just clones it to wrap around its target.
13097```html
13098<!doctype html>
13099<html lang="en">
13100<head>
13101 <meta charset="utf-8">
13102 <title>wrap demo</title>
13103 <style>
13104 div {
13105 border: 2px solid blue;
13106 margin: 2px;
13107 padding: 2px;
13108 }
13109 .doublediv {
13110 border-color: red;
13111 }
13112 p {
13113 background: yellow;
13114 margin: 4px;
13115 font-size: 14px;
13116 }
13117 </style>
13118 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
13119</head>
13120<body>
13121​
13122<p>Hello</p>
13123<p>cruel</p>
13124<p>World</p>
13125<div class="doublediv"><div></div></div>
13126​
13127<script>
13128$( "p" ).wrap( $( ".doublediv" ) );
13129</script>
13130​
13131</body>
13132</html>
13133```
13134 */
13135 wrap(
13136 wrappingElement_function:
13137 | JQuery.Selector
13138 | JQuery.htmlString
13139 | Element
13140 | JQuery
13141 | ((this: TElement, index: number) => string | JQuery),
13142 ): this;
13143 /**
13144 * Wrap an HTML structure around all elements in the set of matched elements.
13145 * @param wrappingElement_function _&#x40;param_ `wrappingElement_function`
13146 * <br>
13147 * * `wrappingElement` — A selector, element, HTML string, or jQuery object specifying the structure to wrap around the matched elements. <br>
13148 * * `function` — A callback function returning the HTML content or jQuery object to wrap around all the matched
13149 * elements. Within the function, `this` refers to the first element in the set. **Prior to jQuery
13150 * 3.0**, the callback was incorrectly called for every element in the set and received the index
13151 * position of the element in the set as an argument.
13152 * @see \`{@link https://api.jquery.com/wrapAll/ }\`
13153 * @since 1.2
13154 * @since 1.4
13155 * @example ​ ````Wrap a new div around all of the paragraphs.
13156```html
13157<!doctype html>
13158<html lang="en">
13159<head>
13160 <meta charset="utf-8">
13161 <title>wrapAll demo</title>
13162 <style>
13163 div {
13164 border: 2px solid blue;
13165 }
13166 p {
13167 background: yellow;
13168 margin: 4px;
13169 }
13170 </style>
13171 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
13172</head>
13173<body>
13174​
13175<p>Hello</p>
13176<p>cruel</p>
13177<p>World</p>
13178​
13179<script>
13180$( "p" ).wrapAll( "<div></div>" );
13181</script>
13182​
13183</body>
13184</html>
13185```
13186 * @example ​ ````Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the &lt;strong&gt; (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html.
13187```html
13188<!doctype html>
13189<html lang="en">
13190<head>
13191 <meta charset="utf-8">
13192 <title>wrapAll demo</title>
13193 <style>
13194 div {
13195 border: 2px blue solid;
13196 margin: 2px;
13197 padding: 2px;
13198 }
13199 p {
13200 background: yellow;
13201 margin: 2px;
13202 padding: 2px;
13203 }
13204 strong {
13205 color: red;
13206 }
13207 </style>
13208 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
13209</head>
13210<body>
13211​
13212<span>Span Text</span>
13213<strong>What about me?</strong>
13214<span>Another One</span>
13215​
13216<script>
13217$( "span").wrapAll( "<div><div><p><em><b></b></em></p></div></div>" );
13218</script>
13219​
13220</body>
13221</html>
13222```
13223 * @example ​ ````Wrap a new div around all of the paragraphs.
13224```html
13225<!doctype html>
13226<html lang="en">
13227<head>
13228 <meta charset="utf-8">
13229 <title>wrapAll demo</title>
13230 <style>
13231 div {
13232 border: 2px solid blue;
13233 }
13234 p {
13235 background: yellow;
13236 margin: 4px;
13237 }
13238 </style>
13239 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
13240</head>
13241<body>
13242​
13243<p>Hello</p>
13244<p>cruel</p>
13245<p>World</p>
13246​
13247<script>
13248$( "p" ).wrapAll( document.createElement( "div" ) );
13249</script>
13250​
13251</body>
13252</html>
13253```
13254 * @example ​ ````Wrap a jQuery object double depth div around all of the paragraphs. Notice it doesn&#39;t move the object but just clones it to wrap around its target.
13255```html
13256<!doctype html>
13257<html lang="en">
13258<head>
13259 <meta charset="utf-8">
13260 <title>wrapAll demo</title>
13261 <style>
13262 div {
13263 border: 2px solid blue;
13264 margin: 2px;
13265 padding: 2px;
13266 }
13267 .doublediv {
13268 border-color: red;
13269 }
13270 p {
13271 background: yellow;
13272 margin: 4px;
13273 font-size: 14px;
13274 }
13275 </style>
13276 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
13277</head>
13278<body>
13279​
13280<p>Hello</p>
13281<p>cruel</p>
13282<p>World</p>
13283<div class="doublediv"><div></div></div>
13284​
13285<script>
13286$( "p" ).wrapAll( $( ".doublediv" ) );
13287</script>
13288​
13289</body>
13290</html>
13291```
13292 */
13293 wrapAll(
13294 wrappingElement_function:
13295 | JQuery.Selector
13296 | JQuery.htmlString
13297 | Element
13298 | JQuery
13299 | ((this: TElement) => string | JQuery),
13300 ): this;
13301 /**
13302 * Wrap an HTML structure around the content of each element in the set of matched elements.
13303 * @param wrappingElement_function _&#x40;param_ `wrappingElement_function`
13304 * <br>
13305 * * `wrappingElement` — An HTML snippet, selector expression, jQuery object, or DOM element specifying the structure to wrap
13306 * around the content of the matched elements. <br>
13307 * * `function` — A callback function which generates a structure to wrap around the content of the matched elements.
13308 * Receives the index position of the element in the set as an argument. Within the function, `this`
13309 * refers to the current element in the set.
13310 * @see \`{@link https://api.jquery.com/wrapInner/ }\`
13311 * @since 1.2
13312 * @since 1.4
13313 * @example ​ ````Selects all paragraphs and wraps a bold tag around each of its contents.
13314```html
13315<!doctype html>
13316<html lang="en">
13317<head>
13318 <meta charset="utf-8">
13319 <title>wrapInner demo</title>
13320 <style>
13321 p {
13322 background: #bbf;
13323 }
13324 </style>
13325 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
13326</head>
13327<body>
13328​
13329<p>Hello</p>
13330<p>cruel</p>
13331<p>World</p>
13332​
13333<script>
13334$( "p" ).wrapInner( "<b></b>" );
13335</script>
13336​
13337</body>
13338</html>
13339```
13340 * @example ​ ````Wraps a newly created tree of objects around the inside of the body.
13341```html
13342<!doctype html>
13343<html lang="en">
13344<head>
13345 <meta charset="utf-8">
13346 <title>wrapInner demo</title>
13347 <style>
13348 div {
13349 border: 2px green solid;
13350 margin: 2px;
13351 padding: 2px;
13352 }
13353 p {
13354 background: yellow;
13355 margin: 2px;
13356 padding: 2px;
13357 }
13358 </style>
13359 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
13360</head>
13361<body>
13362​
13363Plain old text, or is it?
13364​
13365<script>
13366$( "body" ).wrapInner( "<div><div><p><em><b></b></em></p></div></div>" );
13367</script>
13368​
13369</body>
13370</html>
13371```
13372 * @example ​ ````Selects all paragraphs and wraps a bold tag around each of its contents.
13373```html
13374<!doctype html>
13375<html lang="en">
13376<head>
13377 <meta charset="utf-8">
13378 <title>wrapInner demo</title>
13379 <style>
13380 p {
13381 background: #9f9;
13382 }
13383 </style>
13384 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
13385</head>
13386<body>
13387​
13388<p>Hello</p>
13389<p>cruel</p>
13390<p>World</p>
13391​
13392<script>
13393$( "p" ).wrapInner( document.createElement( "b" ) );
13394</script>
13395​
13396</body>
13397</html>
13398```
13399 * @example ​ ````Selects all paragraphs and wraps a jQuery object around each of its contents.
13400```html
13401<!doctype html>
13402<html lang="en">
13403<head>
13404 <meta charset="utf-8">
13405 <title>wrapInner demo</title>
13406 <style>
13407 p {
13408 background: #9f9;
13409 }
13410 .red {
13411 color: red;
13412 }
13413 </style>
13414 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
13415</head>
13416<body>
13417​
13418<p>Hello</p>
13419<p>cruel</p>
13420<p>World</p>
13421​
13422<script>
13423$( "p" ).wrapInner( $( "<span class='red'></span>" ) );
13424</script>
13425​
13426</body>
13427</html>
13428```
13429 */
13430 wrapInner(
13431 wrappingElement_function:
13432 | JQuery.Selector
13433 | JQuery.htmlString
13434 | Element
13435 | JQuery
13436 | ((this: TElement, index: number) => string | JQuery | Element),
13437 ): this;
13438
13439 [n: number]: TElement;
13440}
13441
\No newline at end of file