cypress
Version:
Cypress is a next generation front end testing tool built for the modern web
1,615 lines (1,613 loc) • 385 kB
TypeScript
// tslint:disable:jsdoc-format
// tslint:disable:max-line-length
// tslint:disable:no-irregular-whitespace
interface JQuery<TElement = HTMLElement> extends Iterable<TElement> {
/**
* A string containing the jQuery version number.
* @see \`{@link https://api.jquery.com/jquery-2/#jquery1 }\`
* @since 1.0
* @example ````Determine if an object is a jQuery object
```javascript
var a = { what: "A regular JS object" },
b = $( "body" );
if ( a.jquery ) { // Falsy, since it's undefined
alert( "a is a jQuery object!" );
}
if ( b.jquery ) { // Truthy, since it's a string
alert( "b is a jQuery object!" );
}
```
* @example ````Get the current version of jQuery running on the page
```javascript
alert( "You are running jQuery version: " + $.fn.jquery );
```
*/
jquery: string;
/**
* The number of elements in the jQuery object.
* @see \`{@link https://api.jquery.com/length/ }\`
* @since 1.0
* @example ````Count the divs. Click to add more.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>length demo</title>
<style>
body {
cursor: pointer;
}
div {
width: 50px;
height: 30px;
margin: 5px;
float: left;
background: green;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<span></span>
<div></div>
<script>
$( document.body )
.click(function() {
$( document.body ).append( $( "<div>" ) );
var n = $( "div" ).length;
$( "span" ).text( "There are " + n + " divs." +
"Click to add more.");
})
// Trigger the click to start
.trigger( "click" );
</script>
</body>
</html>
```
*/
length: number;
/**
* Create a new jQuery object with elements added to the set of matched elements.
* @param selector A string representing a selector expression to find additional elements to add to the set of matched elements.
* @param context The point in the document at which the selector should begin matching; similar to the context
* argument of the $(selector, context) method.
* @see \`{@link https://api.jquery.com/add/ }\`
* @since 1.4
*/
add(selector: JQuery.Selector, context: Element): this;
// TODO: The return type should reflect newly selected types.
/**
* Create a new jQuery object with elements added to the set of matched elements.
* @param selector_elements_html_selection _@param_ `selector_elements_html_selection`
* <br>
* * `selector` — A string representing a selector expression to find additional elements to add to the set of matched elements. <br>
* * `elements` — One or more elements to add to the set of matched elements. <br>
* * `html` — An HTML fragment to add to the set of matched elements. <br>
* * `selection` — An existing jQuery object to add to the set of matched elements.
* @see \`{@link https://api.jquery.com/add/ }\`
* @since 1.0
* @since 1.3.2
* @example ````Finds all divs and makes a border. Then adds all paragraphs to the jQuery object to set their backgrounds yellow.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>add demo</title>
<style>
div {
width: 60px;
height: 60px;
margin: 10px;
float: left;
}
p {
clear: left;
font-weight: bold;
font-size: 16px;
color: blue;
margin: 0 10px;
padding: 2px;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>Added this... (notice no border)</p>
<script>
$( "div" ).css( "border", "2px solid red" )
.add( "p" )
.css( "background", "yellow" );
</script>
</body>
</html>
```
* @example ````Adds more elements, matched by the given expression, to the set of matched elements.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>add demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>Hello</p>
<span>Hello Again</span>
<script>
$( "p" ).add( "span" ).css( "background", "yellow" );
</script>
</body>
</html>
```
* @example ````Adds more elements, created on the fly, to the set of matched elements.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>add demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>Hello</p>
<script>
$( "p" ).clone().add( "<span>Again</span>" ).appendTo( document.body );
</script>
</body>
</html>
```
* @example ````Adds one or more Elements to the set of matched elements.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>add demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>Hello</p>
<span id="a">Hello Again</span>
<script>
$( "p" ).add( document.getElementById( "a" ) ).css( "background", "yellow" );
</script>
</body>
</html>
```
* @example ````Demonstrates how to add (or push) elements to an existing collection
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>add demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>Hello</p>
<span id="a">Hello Again</span>
<script>
var collection = $( "p" );
// Capture the new collection
collection = collection.add( document.getElementById( "a" ) );
collection.css( "background", "yellow" );
</script>
</body>
</html>
```
*/
add(selector_elements_html_selection: JQuery.Selector | JQuery.TypeOrArray<Element> | JQuery.htmlString | JQuery | JQuery.Node): this;
/**
* Add the previous set of elements on the stack to the current set, optionally filtered by a selector.
* @param selector A string containing a selector expression to match the current set of elements against.
* @see \`{@link https://api.jquery.com/addBack/ }\`
* @since 1.8
* @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("p"). In the second example, .addBack() adds the previous set of elements on the stack — in this case $("div.after-addback") — to the current set, selecting both the div and its enclosed paragraphs.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addBack demo</title>
<style>
p, div {
margin: 5px;
padding: 5px;
}
.border {
border: 2px solid red;
}
.background {
background: yellow;
}
.left, .right {
width: 45%;
float: left;
}
.right {
margin-left: 3%;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="left">
<p><strong>Before <code>addBack()</code></strong></p>
<div class="before-addback">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
</div>
<div class="right">
<p><strong>After <code>addBack()</code></strong></p>
<div class="after-addback">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
</div>
<script>
$( "div.left, div.right" ).find( "div, div > p" ).addClass( "border" );
// First Example
$( "div.before-addback" ).find( "p" ).addClass( "background" );
// Second Example
$( "div.after-addback" ).find( "p" ).addBack().addClass( "background" );
</script>
</body>
</html>
```
*/
addBack(selector?: JQuery.Selector): this;
/**
* Adds the specified class(es) to each element in the set of matched elements.
* @param className_function _@param_ `className_function`
* <br>
* * `className` — One or more space-separated classes to be added to the class attribute of each matched element. <br>
* * `function` — A function returning one or more space-separated class names to be added to the existing class
* name(s). Receives the index position of the element in the set and the existing class name(s) as
* arguments. Within the function, `this` refers to the current element in the set.
* @see \`{@link https://api.jquery.com/addClass/ }\`
* @since 1.0
* @since 1.4
* @since 3.3
* @example ````Add the class "selected" to the matched elements.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p" ).last().addClass( "selected" );
</script>
</body>
</html>
```
* @example ````Add the classes "selected" and "highlight" to the matched elements.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: red;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p:last" ).addClass( "selected highlight" );
</script>
</body>
</html>
```
* @example ````Pass in a function to .addClass() to add the "green" class to a div that already has a "red" class.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
div {
background: white;
}
.red {
background: red;
}
.red.green {
background: green;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div>This div should be white</div>
<div class="red">This div will be green because it now has the "green" and "red" classes.
It would be red if the addClass function failed.</div>
<div>This div should be white</div>
<p>There are zero green divs</p>
<script>
$( "div" ).addClass(function( index, currentClass ) {
var addedClass;
if ( currentClass === "red" ) {
addedClass = "green";
$( "p" ).text( "There is one green div" );
}
return addedClass;
});
</script>
</body>
</html>
```
*/
addClass(className_function: JQuery.TypeOrArray<string> | ((this: TElement, index: number, currentClassName: string) => string)): this;
/**
* Insert content, specified by the parameter, after each element in the set of matched elements.
* @param contents One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or
* jQuery objects to insert after each element in the set of matched elements.
* @see \`{@link https://api.jquery.com/after/ }\`
* @since 1.0
* @example ````Inserts some HTML after all paragraphs.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>after demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$( "p" ).after( "<b>Hello</b>" );
</script>
</body>
</html>
```
* @example ````Inserts a DOM element after all paragraphs.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>after demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$( "p" ).after( document.createTextNode( "Hello" ) );
</script>
</body>
</html>
```
* @example ````Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>after demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<b>Hello</b>
<p>I would like to say: </p>
<script>
$( "p" ).after( $( "b" ) );
</script>
</body>
</html>
```
*/
after(...contents: Array<JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>>): this;
/**
* Insert content, specified by the parameter, after each element in the set of matched elements.
* @param function_functionｰhtml _@param_ `function_functionｰhtml`
* <br>
* * `function` — A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert
* after each element in the set of matched elements. Receives the index position of the element in the
* set as an argument. Within the function, `this` refers to the current element in the set. <br>
* * `functionｰhtml` — A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert
* after each element in the set of matched elements. Receives the index position of the element in the
* set and the old HTML value of the element as arguments. Within the function, `this` refers to the
* current element in the set.
* @see \`{@link https://api.jquery.com/after/ }\`
* @since 1.4
* @since 1.10
*/
after(function_functionｰhtml: (this: TElement, index: number, html: string) => JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>): this;
/**
* Register a handler to be called when Ajax requests complete. This is an AjaxEvent.
* @param handler The function to be invoked.
* @see \`{@link https://api.jquery.com/ajaxComplete/ }\`
* @since 1.0
* @example ````Show a message when an Ajax request completes.
```javascript
$( document ).ajaxComplete(function( event, request, settings ) {
$( "#msg" ).append( "<li>Request Complete.</li>" );
});
```
*/
ajaxComplete(handler: (this: Document,
event: JQuery.TriggeredEvent<Document, undefined, Document, Document>,
jqXHR: JQuery.jqXHR,
ajaxOptions: JQuery.AjaxSettings) => void | false): this;
/**
* Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.
* @param handler The function to be invoked.
* @see \`{@link https://api.jquery.com/ajaxError/ }\`
* @since 1.0
* @example ````Show a message when an Ajax request fails.
```javascript
$( document ).ajaxError(function( event, request, settings ) {
$( "#msg" ).append( "<li>Error requesting page " + settings.url + "</li>" );
});
```
*/
ajaxError(handler: (this: Document,
event: JQuery.TriggeredEvent<Document, undefined, Document, Document>,
jqXHR: JQuery.jqXHR,
ajaxSettings: JQuery.AjaxSettings,
thrownError: string) => void | false): this;
/**
* Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.
* @param handler The function to be invoked.
* @see \`{@link https://api.jquery.com/ajaxSend/ }\`
* @since 1.0
* @example ````Show a message before an Ajax request is sent.
```javascript
$( document ).ajaxSend(function( event, request, settings ) {
$( "#msg" ).append( "<li>Starting request at " + settings.url + "</li>" );
});
```
*/
ajaxSend(handler: (this: Document,
event: JQuery.TriggeredEvent<Document, undefined, Document, Document>,
jqXHR: JQuery.jqXHR,
ajaxOptions: JQuery.AjaxSettings) => void | false): this;
/**
* Register a handler to be called when the first Ajax request begins. This is an Ajax Event.
* @param handler The function to be invoked.
* @see \`{@link https://api.jquery.com/ajaxStart/ }\`
* @since 1.0
* @example ````Show a loading message whenever an Ajax request starts (and none is already active).
```javascript
$( document ).ajaxStart(function() {
$( "#loading" ).show();
});
```
*/
ajaxStart(handler: (this: Document) => void | false): this;
/**
* Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.
* @param handler The function to be invoked.
* @see \`{@link https://api.jquery.com/ajaxStop/ }\`
* @since 1.0
* @example ````Hide a loading message after all the Ajax requests have stopped.
```javascript
$( document ).ajaxStop(function() {
$( "#loading" ).hide();
});
```
*/
ajaxStop(handler: (this: Document) => void | false): this;
/**
* Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event.
* @param handler The function to be invoked.
* @see \`{@link https://api.jquery.com/ajaxSuccess/ }\`
* @since 1.0
* @example ````Show a message when an Ajax request completes successfully.
```javascript
$( document ).ajaxSuccess(function( event, request, settings ) {
$( "#msg" ).append( "<li>Successful Request!</li>" );
});
```
*/
ajaxSuccess(handler: (this: Document,
event: JQuery.TriggeredEvent<Document, undefined, Document, Document>,
jqXHR: JQuery.jqXHR,
ajaxOptions: JQuery.AjaxSettings,
data: JQuery.PlainObject) => void | false): this;
/**
* Perform a custom animation of a set of CSS properties.
* @param properties An object of CSS properties and values that the animation will move toward.
* @param duration A string or number determining how long the animation will run.
* @param easing A string indicating which easing function to use for the transition.
* @param complete A function to call once the animation is complete, called once per matched element.
* @see \`{@link https://api.jquery.com/animate/ }\`
* @since 1.0
* @example ````An example of using an 'easing' 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.
```javascript
$( "p" ).animate({
opacity: "show"
}, "slow", "easein" );
```
* @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.
```javascript
$( "p" ).animate({
height: 200,
width: 400,
opacity: 0.5
}, 1000, "linear", function() {
alert( "all done" );
});
```
*/
animate(properties: JQuery.PlainObject,
duration: JQuery.Duration,
easing: string,
complete?: (this: TElement) => void): this;
/**
* Perform a custom animation of a set of CSS properties.
* @param properties An object of CSS properties and values that the animation will move toward.
* @param duration_easing _@param_ `duration_easing`
* <br>
* * `duration` — A string or number determining how long the animation will run. <br>
* * `easing` — A string indicating which easing function to use for the transition.
* @param complete A function to call once the animation is complete, called once per matched element.
* @see \`{@link https://api.jquery.com/animate/ }\`
* @since 1.0
* @example ````Click the button to animate the div with a number of different properties.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
div {
background-color: #bca;
width: 100px;
border: 1px solid green;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<button id="go">» Run</button>
<div id="block">Hello!</div>
<script>
// Using multiple unit types within one animation.
$( "#go" ).click(function() {
$( "#block" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
</script>
</body>
</html>
```
* @example ````Animates a div's left property with a relative value. Click several times on the buttons to see the relative animations queued up.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
div {
position: absolute;
background-color: #abc;
left: 50px;
width: 90px;
height: 90px;
margin: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<button id="left">«</button>
<button id="right">»</button>
<div class="block"></div>
<script>
$( "#right" ).click(function() {
$( ".block" ).animate({ "left": "+=50px" }, "slow" );
});
$( "#left" ).click(function(){
$( ".block" ).animate({ "left": "-=50px" }, "slow" );
});
</script>
</body>
</html>
```
* @example ````Animate all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.
```javascript
$( "p" ).animate({
height: "toggle",
opacity: "toggle"
}, "slow" );
```
* @example ````Animate all paragraphs to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.
```javascript
$( "p" ).animate({
left: 50,
opacity: 1
}, 500 );
```
*/
animate(properties: JQuery.PlainObject,
duration_easing: JQuery.Duration | string,
complete?: (this: TElement) => void): this;
/**
* Perform a custom animation of a set of CSS properties.
* @param properties An object of CSS properties and values that the animation will move toward.
* @param options A map of additional options to pass to the method.
* @see \`{@link https://api.jquery.com/animate/ }\`
* @since 1.0
* @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.
The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
div {
background-color: #bca;
width: 200px;
height: 1.1em;
text-align: center;
border: 2px solid green;
margin: 3px;
font-size: 14px;
}
button {
font-size: 14px;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<button id="go3">» Animate Both</button>
<button id="go4">» Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
<script>
$( "#go1" ).click(function() {
$( "#block1" )
.animate({
width: "90%"
}, {
queue: false,
duration: 3000
})
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
});
$( "#go2" ).click(function() {
$( "#block2" )
.animate({ width: "90%" }, 1000 )
.animate({ fontSize: "24px" }, 1000 )
.animate({ borderLeftWidth: "15px" }, 1000 );
});
$( "#go3" ).click(function() {
$( "#go1" ).add( "#go2" ).click();
});
$( "#go4" ).click(function() {
$( "div" ).css({
width: "",
fontSize: "",
borderWidth: ""
});
});
</script>
</body>
</html>
```
* @example ````Animates the first div's left property and synchronizes the remaining divs, using the step function to set their left properties at each stage of the animation.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
div {
position: relative;
background-color: #abc;
width: 40px;
height: 40px;
float: left;
margin: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p><button id="go">Run »</button></p>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<script>
$( "#go" ).click(function() {
$( ".block:first" ).animate({
left: 100
}, {
duration: 1000,
step: function( now, fx ){
$( ".block:gt(0)" ).css( "left", now );
}
});
});
</script>
</body>
</html>
```
* @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.
```javascript
$( "p" ).animate({
left: "50px",
opacity: 1
}, {
duration: 500,
queue: false
});
```
* @example ````Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.
```javascript
$( "p" ).animate({
height: "toggle",
opacity: "toggle"
}, {
duration: "slow"
});
```
* @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.
```javascript
$( "p" ).animate({
opacity: "show"
}, {
duration: "slow",
easing: "easein"
});
```
*/
animate(properties: JQuery.PlainObject,
options: JQuery.EffectsOptions<TElement>): this;
/**
* Perform a custom animation of a set of CSS properties.
* @param properties An object of CSS properties and values that the animation will move toward.
* @param complete A function to call once the animation is complete, called once per matched element.
* @see \`{@link https://api.jquery.com/animate/ }\`
* @since 1.0
*/
animate(properties: JQuery.PlainObject,
complete?: (this: TElement) => void): this;
/**
* Insert content, specified by the parameter, to the end of each element in the set of matched elements.
* @param contents One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or
* jQuery objects to insert at the end of each element in the set of matched elements.
* @see \`{@link https://api.jquery.com/append/ }\`
* @since 1.0
* @example ````Appends some HTML to all paragraphs.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$( "p" ).append( "<strong>Hello</strong>" );
</script>
</body>
</html>
```
* @example ````Appends an Element to all paragraphs.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$( "p" ).append( document.createTextNode( "Hello" ) );
</script>
</body>
</html>
```
* @example ````Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<strong>Hello world!!!</strong>
<p>I would like to say: </p>
<script>
$( "p" ).append( $( "strong" ) );
</script>
</body>
</html>
```
*/
append(...contents: Array<JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>>): this;
/**
* Insert content, specified by the parameter, to the end of each element in the set of matched elements.
* @param funсtion A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert at
* the end of each element in the set of matched elements. Receives the index position of the element
* in the set and the old HTML value of the element as arguments. Within the function, `this` refers to
* the current element in the set.
* @see \`{@link https://api.jquery.com/append/ }\`
* @since 1.4
*/
append(funсtion: (this: TElement, index: number, html: string) => JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>): this;
/**
* Insert every element in the set of matched elements to the end of the target.
* @param target A selector, element, HTML string, array of elements, or jQuery object; the matched set of elements
* will be inserted at the end of the element(s) specified by this parameter.
* @see \`{@link https://api.jquery.com/appendTo/ }\`
* @since 1.0
* @example ````Append all spans to the element with the ID "foo" (Check append() documentation for more examples)
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>appendTo demo</title>
<style>
#foo {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<span>I have nothing more to say... </span>
<div id="foo">FOO! </div>
<script>
$( "span" ).appendTo( "#foo" );
</script>
</body>
</html>
```
*/
appendTo(target: JQuery.Selector | JQuery.htmlString | JQuery.TypeOrArray<Element | DocumentFragment> | JQuery): this;
/**
* Set one or more attributes for the set of matched elements.
* @param attributeName The name of the attribute to set.
* @param value_function _@param_ `value_function`
* <br>
* * `value` — A value to set for the attribute. If `null`, the specified attribute will be removed (as in \`{@link removeAttr .removeAttr()}`). <br>
* * `function` — A function returning the value to set. `this` is the current element. Receives the index position of
* the element in the set and the old attribute value as arguments.
* @see \`{@link https://api.jquery.com/attr/ }\`
* @since 1.0
* @since 1.1
* @example ````Set the id for divs based on the position in the page.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
b {
font-weight: bolder;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div>Zero-th <span></span></div>
<div>First <span></span></div>
<div>Second <span></span></div>
<script>
$( "div" )
.attr( "id", function( arr ) {
return "div-id" + arr;
})
.each(function() {
$( "span", this ).html( "(id = '<b>" + this.id + "</b>')" );
});
</script>
</body>
</html>
```
* @example ````Set the src attribute from title attribute on the image.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<img title="hat.gif">
<script>
$( "img" ).attr( "src", function() {
return "/resources/" + this.title;
});
</script>
</body>
</html>
```
*/
attr(attributeName: string,
value_function: string | number | null | ((this: TElement, index: number, attr: string) => string | number | void | undefined)): this;
/**
* Set one or more attributes for the set of matched elements.
* @param attributes An object of attribute-value pairs to set.
* @see \`{@link https://api.jquery.com/attr/ }\`
* @since 1.0
* @example ````Set some attributes for all <img>s in the page.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<style>
img {
padding: 10px;
}
div {
color: red;
font-size: 24px;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<img>
<img>
<img>
<div><b>Attribute of Ajax</b></div>
<script>
$( "img" ).attr({
src: "/resources/hat.gif",
title: "jQuery",
alt: "jQuery Logo"
});
$( "div" ).text( $( "img" ).attr( "alt" ) );
</script>
</body>
</html>
```
*/
attr(attributes: JQuery.PlainObject): this;
/**
* Get the value of an attribute for the first element in the set of matched elements.
* @param attributeName The name of the attribute to get.
* @see \`{@link https://api.jquery.com/attr/ }\`
* @since 1.0
* @example ````Display the checked attribute and property of a checkbox as it changes.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<style>
p {
margin: 20px 0 0;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
<script>
$( "input" )
.change(function() {
var $input = $( this );
$( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
})
.change();
</script>
</body>
</html>
```
* @example ````Find the title attribute of the first <em> in the page.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<style>
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>
The title of the emphasis is:<div></div>
<script>
var title = $( "em" ).attr( "title" );
$( "div" ).text( title );
</script>
</body>
</html>
```
*/
attr(attributeName: string): string | undefined;
/**
* Insert content, specified by the parameter, before each element in the set of matched elements.
* @param contents One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or
* jQuery objects to insert before each element in the set of matched elements.
* @see \`{@link https://api.jquery.com/before/ }\`
* @since 1.0
* @example ````Inserts some HTML before all paragraphs.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>before demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p> is what I said...</p>
<script>
$( "p" ).before( "<b>Hello</b>" );
</script>
</body>
</html>
```
* @example ````Inserts a DOM element before all paragraphs.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>before demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p> is what I said...</p>
<script>
$( "p" ).before( document.createTextNode( "Hello" ) );
</script>
</body>
</html>
```
* @example ````Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>before demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p> is what I said...</p><b>Hello</b>
<script>
$( "p" ).before( $( "b" ) );
</script>
</body>
</html>
```
*/
before(...contents: Array<JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>>): this;
/**
* Insert content, specified by the parameter, before each element in the set of matched elements.
* @param function_functionｰhtml _@param_ `function_functionｰhtml`
* <br>
* * `function` — A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert
* before each element in the set of matched elements. Receives the index position of the element in
* the set as an argument. Within the function, `this` refers to the current element in the set. <br>
* * `functionｰhtml` — A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert
* before each element in the set of matched elements. Receives the index position of the element in
* the set and the old HTML value of the element as arguments. Within the function, `this` refers to the
* current element in the set.
* @see \`{@link https://api.jquery.com/before/ }\`
* @since 1.4
* @since 1.10
*/
before(function_functionｰhtml: (this: TElement, index: number, html: string) => JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>): this;
// [bind() overloads] https://github.com/jquery/api.jquery.com/issues/1048
/**
* Attach a handler to an event for the elements.
* @param eventType A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
* @param eventData An object containing data that will be passed to the event handler.
* @param handler A function to execute each time the event is triggered.
* @see \`{@link https://api.jquery.com/bind/ }\`
* @since 1.0
* @since 1.4.3
* @deprecated Deprecated since 3.0. Use \`{@link on }\`.
*
* **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.
*
* **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.
*/
bind<TType extends string,
TData>(
eventType: TType,
eventData: TData,
handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, TType>
): this;
/**
* Attach a handler to an event for the elements.
* @param eventType A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
* @param handler_preventBubble _@param_ `handler_preventBubble`
* <br>
* * `handler` — A function to execute each time the event is triggered. <br>
* * `preventBubble` — Setting the third argument to false will attach a function that prevents the default action from
* occurring and stops the event from bubbling. The default is `true`.
* @see \`{@link https://api.jquery.com/bind/ }\`
* @since 1.0
* @since 1.4.3
* @deprecated Deprecated since 3.0. Use \`{@link on }\`.
*
* **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.
*
* **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.
* @example ````Handle click and double-click for the paragraph. Note: the coordinates are window relative, so in this case relative to the demo iframe.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bind demo</title>
<style>
p {
background: yellow;
font-weight: bold;
cursor: pointer;
padding: 5px;
}
p.over {
background: #ccc;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>Click or double click here.</p>
<span></span>
<script>
$( "p" ).bind( "click", function( event ) {
var str = "( " + event.pageX + ", " + event.pageY + " )";
$( "span" ).text( "Click happened! " + str );
});
$( "p" ).bind( "dblclick", function() {
$( "span" ).text( "Double-click happened in " + this.nodeName );
});
$( "p" ).bind( "mouseenter mouseleave", function( event ) {
$( this ).toggleClass( "over" );
});
</script>
</body>
</html>
```
* @example ````To display each paragraph's text in an alert box whenever it is clicked:
```javascript
$( "p" ).bind( "click", function() {
alert( $( this ).text() );
});
```
* @example ````Cancel a default action and prevent it from bubbling up by returning false:
```javascript
$( "form" ).bind( "submit", function() {
return false;
})
```
* @example ````Cancel only the default action by using the .preventDefault() method.
```javascript
$( "form" ).bind( "submit", function( event ) {
event.preventDefault();
});
```
* @example ````Stop an event from bubbling without preventing the default action by using the .stopPropagation() method.
```javascript
$( "form" ).bind( "submit", function( event ) {
event.stopPropagation();
});
```
* @example ````Bind custom events.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bind demo</title>
<style>
p {
color: red;
}
span {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display: none;"></span>
<script>
$( "p" ).bind( "myCustomEvent", function( e, myName, myValue ) {
$( this ).text( myName + ", hi there!" );
$( "span" )
.stop()
.css( "opacity", 1 )
.text( "myName = " + myName )
.fadeIn( 30 )
.fadeOut( 1000 );
});
$( "button" ).click(function() {
$( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
</script>
</body>
</html>
```
*/
bind<TType extends string>(
eventType: TType,
handler_preventBubble: JQuery.TypeEventHandler<TElement, undefined, TElement, TElement, TType> |
false |
null |
undefined
): this;
/**
* Attach a handler to an event for the elements.
* @param events An object containing one or more DOM event types and functions to execute for them.
* @see \`{@link https://api.jquery.com/bind/ }\`
* @since 1.4
* @deprecated Deprecated since 3.0. Use \`{@link on }\`.
*
* **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.
*
* **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.
* @example ````Bind multiple events simultaneously.
```javascript
$( "div.test" ).bind({
click: function() {
$( this ).addClass( "active" );
},
mouseenter: function() {
$( this ).addClass( "inside" );
},
mouseleave: function() {
$( this ).removeClass( "inside" );
}
});
```
*/
bind(events: JQuery.TypeEventHandlers<TElement, undefined, TElement, TElement>): this;
/**
* Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.
* @param eventData An object containing data that will be passed to the event handler.
* @param handler A function to execute each time the event is triggered.
* @see \`{@link https://api.jquery.com/blur/ }\`
* @since 1.4.3
* @deprecated Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
*
* **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.
*
* **Solution**: Instead of `.click(fn)` use `.on("click", fn)`. Instead of `.click()` use `.trigger("click")`.
*/
blur<TData>(eventData: TData,
handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, 'blur'>): this;
/**
* Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.
* @param handler A function to execute each time the event is triggered.
* @see \`{@link https://api.jquery.com/blur/ }\`
* @since 1.0
* @deprecated Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
*
* **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.
*
* **Solution**: Instead of `.click(fn)` use `.on("click", fn)`. Instead of `.click()` use `.trigger("click")`.
* @example ````To trigger the blur event on all paragraphs:
```javascript
$( "p" ).blur();
```
*/
blur(handler?: JQuery.TypeEventHandler<TElement, null, TElement, TElement, 'blur'> |
false): this;
/**
* Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
* @param eventData An object containing data that will be passed to the event handler.
* @param handler A function to execute each time the event is triggered.
* @see \`{@link https://api.jquery.com/change/ }\`
* @since 1.4.3
* @deprecated Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
*
* **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.
*
* **Solution**: Instead of `.click(fn)` use `.on("click", fn)`. Instead of `.click()` use `.trigger("click")`.
*/
change<TData>(eventData: TData,
handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, 'change'>): this;
/**
* Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
* @param handler A function to execute each time the event is triggered.
* @see \`{@link https://api.jquery.com/change/ }\`
* @since 1.0
* @deprecated Deprecated since 3.3. Use \`{@link on }\` or \`{@link trigger }\`.
*
* **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.
*
* **Solution**: Instead of `.click(fn)` use `.on("click", fn)`. Instead of `.click()` use `.trigger("click")`.
* @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.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>change demo</title>
<style>
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<select name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div></div>
<script>
$( "select" )
.change(function () {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "div" ).text( str );
})
.change();
</script>
</body>
</html>
```
* @example ````To add a validity test to all text input elements:
```javascript
$( "input[type='text']" ).change(function() {
// Check input( $( this ).val() ) for validity here
});
```
*/
change(