Options
All
  • Public
  • Public/Protected
  • All
Menu

Type Parameters

  • TElement = HTMLElement

Hierarchy

Indexable

[n: number]: TElement

Index

Properties

Methods

Properties

jQuery: JQueryStatic
jquery: string

A string containing the jQuery version number.

see

``

since

1.0

example

​ ````Determine if an object is a jQuery object

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

alert( "You are running jQuery version: " + $.fn.jquery );
keyfilter: KeyfilterNamespace<TElement>

The main function of the key filter plugin that can be called on an input field to set up the key filter. Also contains some default and global configuration for the key filter.

length: number

The number of elements in the jQuery object.

see

``

since

1.0

example

​ ````Count the divs. Click to add more.

<!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>
menu: { active: boolean }

Type declaration

    • (): JQuery<HTMLElement>
    • (methodName: "blur"): void
    • (methodName: "collapse", event?: JQueryEventObject): void
    • (methodName: "collapseAll", event?: JQueryEventObject, all?: boolean): void
    • (methodName: "destroy"): void
    • (methodName: "disable"): void
    • (methodName: "enable"): void
    • (methodName: string, event: JQueryEventObject, item: JQuery<HTMLElement>): void
    • (methodName: "focus", event: JQueryEventObject, item: JQuery<HTMLElement>): void
    • (methodName: "isFirstItem"): boolean
    • (methodName: "isLastItem"): boolean
    • (methodName: "next", event?: JQueryEventObject): void
    • (methodName: "nextPage", event?: JQueryEventObject): void
    • (methodName: "previous", event?: JQueryEventObject): void
    • (methodName: "previousPage", event?: JQueryEventObject): void
    • (methodName: "refresh"): void
    • (methodName: "select", event?: JQueryEventObject): void
    • (methodName: "widget"): JQuery<HTMLElement>
    • (methodName: string): JQuery<HTMLElement>
    • (options: MenuOptions): JQuery<HTMLElement>
    • (optionLiteral: string, optionName: string): any
    • (optionLiteral: string, options: MenuOptions): any
    • (optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
    • Returns JQuery<HTMLElement>

    • Parameters

      • methodName: "blur"

      Returns void

    • Parameters

      • methodName: "collapse"
      • Optional event: JQueryEventObject

      Returns void

    • Parameters

      • methodName: "collapseAll"
      • Optional event: JQueryEventObject
      • Optional all: boolean

      Returns void

    • Parameters

      • methodName: "destroy"

      Returns void

    • Parameters

      • methodName: "disable"

      Returns void

    • Parameters

      • methodName: "enable"

      Returns void

    • Parameters

      • methodName: string
      • event: JQueryEventObject
      • item: JQuery<HTMLElement>

      Returns void

    • Parameters

      • methodName: "focus"
      • event: JQueryEventObject
      • item: JQuery<HTMLElement>

      Returns void

    • Parameters

      • methodName: "isFirstItem"

      Returns boolean

    • Parameters

      • methodName: "isLastItem"

      Returns boolean

    • Parameters

      • methodName: "next"
      • Optional event: JQueryEventObject

      Returns void

    • Parameters

      • methodName: "nextPage"
      • Optional event: JQueryEventObject

      Returns void

    • Parameters

      • methodName: "previous"
      • Optional event: JQueryEventObject

      Returns void

    • Parameters

      • methodName: "previousPage"
      • Optional event: JQueryEventObject

      Returns void

    • Parameters

      • methodName: "refresh"

      Returns void

    • Parameters

      • methodName: "select"
      • Optional event: JQueryEventObject

      Returns void

    • Parameters

      • methodName: "widget"

      Returns JQuery<HTMLElement>

    • Parameters

      • methodName: string

      Returns JQuery<HTMLElement>

    • Parameters

      Returns JQuery<HTMLElement>

    • Parameters

      • optionLiteral: string
      • optionName: string

      Returns any

    • Parameters

      Returns any

    • Parameters

      • optionLiteral: string
      • optionName: string
      • optionValue: any

      Returns JQuery<HTMLElement>

  • active: boolean
swipe: TouchSwipeNamespace<TElement>

The main function of the TouchSwipe plugin

Also contains some constants and the default settings.

widget: Widget

Methods

  • [iterator](): Iterator<TElement, any, undefined>
  • Returns Iterator<TElement, any, undefined>

  • accordion(): JQuery<HTMLElement>
  • accordion(methodName: "destroy"): void
  • accordion(methodName: "disable"): void
  • accordion(methodName: "enable"): void
  • accordion(methodName: "refresh"): void
  • accordion(methodName: "widget"): JQuery<HTMLElement>
  • accordion(methodName: string): JQuery<HTMLElement>
  • accordion(options: AccordionOptions): JQuery<HTMLElement>
  • accordion(optionLiteral: string, optionName: string): any
  • accordion(optionLiteral: string, options: AccordionOptions): any
  • accordion(optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
  • Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "destroy"

    Returns void

  • Parameters

    • methodName: "disable"

    Returns void

  • Parameters

    • methodName: "enable"

    Returns void

  • Parameters

    • methodName: "refresh"

    Returns void

  • Parameters

    • methodName: "widget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: string

    Returns JQuery<HTMLElement>

  • Parameters

    Returns JQuery<HTMLElement>

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery<HTMLElement>

  • add(selector: string, context: Element): JQuery<TElement>
  • add(selector_elements_html_selection: string | Element | JQuery<HTMLElement> | Document | Element[] | Text | DocumentFragment | Comment): JQuery<TElement>
  • Create a new jQuery object with elements added to the set of matched elements.

    see

    ``

    since

    1.4

    Parameters

    • selector: string

      A string representing a selector expression to find additional elements to add to the set of matched elements.

    • context: Element

      The point in the document at which the selector should begin matching; similar to the context argument of the $(selector, context) method.

    Returns JQuery<TElement>

  • Create a new jQuery object with elements added to the set of matched elements.

    see

    ``

    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.

    <!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.

    <!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.

    <!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.

    <!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

    <!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>

    Parameters

    • selector_elements_html_selection: string | Element | JQuery<HTMLElement> | Document | Element[] | Text | DocumentFragment | Comment

      @param selector_elements_html_selection

      • selector — A string representing a selector expression to find additional elements to add to the set of matched elements.
      • elements — One or more elements to add to the set of matched elements.
      • html — An HTML fragment to add to the set of matched elements.
      • selection — An existing jQuery object to add to the set of matched elements.

    Returns JQuery<TElement>

  • addBack(selector?: string): JQuery<TElement>
  • Add the previous set of elements on the stack to the current set, optionally filtered by a selector.

    see

    ``

    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.

    <!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>

    Parameters

    • Optional selector: string

      A string containing a selector expression to match the current set of elements against.

    Returns JQuery<TElement>

  • addClass(className_function: TypeOrArray<string> | ((this: TElement, index: number, currentClassName: string) => string)): JQuery<TElement>
  • addClass(classNames: string, speed?: number, callback?: Function): JQuery<TElement>
  • addClass(classNames: string, speed?: string, callback?: Function): JQuery<TElement>
  • addClass(classNames: string, speed?: number, easing?: string, callback?: Function): JQuery<TElement>
  • addClass(classNames: string, speed?: string, easing?: string, callback?: Function): JQuery<TElement>
  • Adds the specified class(es) to each element in the set of matched elements.

    see

    ``

    since

    1.0

    since

    1.4

    since

    3.3

    example

    ​ ````Add the class "selected" to the matched elements.

    <!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.

    <!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.

    <!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>

    Parameters

    • className_function: TypeOrArray<string> | ((this: TElement, index: number, currentClassName: string) => string)

      @param className_function

      • className — One or more space-separated classes to be added to the class attribute of each matched element.
      • 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.

    Returns JQuery<TElement>

  • Parameters

    • classNames: string
    • Optional speed: number
    • Optional callback: Function

    Returns JQuery<TElement>

  • Parameters

    • classNames: string
    • Optional speed: string
    • Optional callback: Function

    Returns JQuery<TElement>

  • Parameters

    • classNames: string
    • Optional speed: number
    • Optional easing: string
    • Optional callback: Function

    Returns JQuery<TElement>

  • Parameters

    • classNames: string
    • Optional speed: string
    • Optional easing: string
    • Optional callback: Function

    Returns JQuery<TElement>

  • Insert content, specified by the parameter, after each element in the set of matched elements.

    see

    ``

    since

    1.0

    example

    ​ ````Inserts some HTML after all paragraphs.

    <!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.

    <!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.

    <!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>

    Parameters

    • Rest ...contents: (string | TypeOrArray<Node | JQuery<Node>>)[]

      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.

    Returns JQuery<TElement>

  • Insert content, specified by the parameter, after each element in the set of matched elements.

    see

    ``

    since

    1.4

    since

    1.10

    Parameters

    • function_functionーhtml: ((this: TElement, index: number, html: string) => string | TypeOrArray<Node | JQuery<Node>>)

      @param function_functionーhtml

      • 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.
      • 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.

    Returns JQuery<TElement>

  • ajaxComplete(handler: ((this: Document, event: TriggeredEvent<Document, undefined, Document, Document>, jqXHR: jqXHR<any>, ajaxOptions: AjaxSettings<any>) => false | void)): JQuery<TElement>
  • Register a handler to be called when Ajax requests complete. This is an AjaxEvent.

    see

    ``

    since

    1.0

    example

    ​ ````Show a message when an Ajax request completes.

    $( document ).ajaxComplete(function( event, request, settings ) {
    $( "#msg" ).append( "<li>Request Complete.</li>" );
    });

    Parameters

    • handler: ((this: Document, event: TriggeredEvent<Document, undefined, Document, Document>, jqXHR: jqXHR<any>, ajaxOptions: AjaxSettings<any>) => false | void)

      The function to be invoked.

    Returns JQuery<TElement>

  • ajaxError(handler: ((this: Document, event: TriggeredEvent<Document, undefined, Document, Document>, jqXHR: jqXHR<any>, ajaxSettings: AjaxSettings<any>, thrownError: string) => false | void)): JQuery<TElement>
  • Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.

    see

    ``

    since

    1.0

    example

    ​ ````Show a message when an Ajax request fails.

    $( document ).ajaxError(function( event, request, settings ) {
    $( "#msg" ).append( "<li>Error requesting page " + settings.url + "</li>" );
    });

    Parameters

    • handler: ((this: Document, event: TriggeredEvent<Document, undefined, Document, Document>, jqXHR: jqXHR<any>, ajaxSettings: AjaxSettings<any>, thrownError: string) => false | void)

      The function to be invoked.

        • (this: Document, event: TriggeredEvent<Document, undefined, Document, Document>, jqXHR: jqXHR<any>, ajaxSettings: AjaxSettings<any>, thrownError: string): false | void
        • Parameters

          Returns false | void

    Returns JQuery<TElement>

  • ajaxSend(handler: ((this: Document, event: TriggeredEvent<Document, undefined, Document, Document>, jqXHR: jqXHR<any>, ajaxOptions: AjaxSettings<any>) => false | void)): JQuery<TElement>
  • Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.

    see

    ``

    since

    1.0

    example

    ​ ````Show a message before an Ajax request is sent.

    $( document ).ajaxSend(function( event, request, settings ) {
    $( "#msg" ).append( "<li>Starting request at " + settings.url + "</li>" );
    });

    Parameters

    • handler: ((this: Document, event: TriggeredEvent<Document, undefined, Document, Document>, jqXHR: jqXHR<any>, ajaxOptions: AjaxSettings<any>) => false | void)

      The function to be invoked.

    Returns JQuery<TElement>

  • ajaxStart(handler: ((this: Document) => false | void)): JQuery<TElement>
  • Register a handler to be called when the first Ajax request begins. This is an Ajax Event.

    see

    ``

    since

    1.0

    example

    ​ ````Show a loading message whenever an Ajax request starts (and none is already active).

    $( document ).ajaxStart(function() {
    $( "#loading" ).show();
    });

    Parameters

    • handler: ((this: Document) => false | void)

      The function to be invoked.

        • (this: Document): false | void
        • Parameters

          • this: Document

          Returns false | void

    Returns JQuery<TElement>

  • ajaxStop(handler: ((this: Document) => false | void)): JQuery<TElement>
  • Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.

    see

    ``

    since

    1.0

    example

    ​ ````Hide a loading message after all the Ajax requests have stopped.

    $( document ).ajaxStop(function() {
    $( "#loading" ).hide();
    });

    Parameters

    • handler: ((this: Document) => false | void)

      The function to be invoked.

        • (this: Document): false | void
        • Parameters

          • this: Document

          Returns false | void

    Returns JQuery<TElement>

  • Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event.

    see

    ``

    since

    1.0

    example

    ​ ````Show a message when an Ajax request completes successfully.

    $( document ).ajaxSuccess(function( event, request, settings ) {
    $( "#msg" ).append( "<li>Successful Request!</li>" );
    });

    Parameters

    Returns JQuery<TElement>

  • Perform a custom animation of a set of CSS properties.

    see

    ``

    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.

    $( "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.

    $( "p" ).animate({
    height: 200,
    width: 400,
    opacity: 0.5
    }, 1000, "linear", function() {
    alert( "all done" );
    });

    Parameters

    • properties: PlainObject<any>

      An object of CSS properties and values that the animation will move toward.

    • duration: JQuery.Duration

      A string or number determining how long the animation will run.

    • easing: string

      A string indicating which easing function to use for the transition.

    • Optional complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Perform a custom animation of a set of CSS properties.

    see

    ``

    since

    1.0

    example

    ​ ````Click the button to animate the div with a number of different properties.

    <!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">&raquo; 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.

    <!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">&laquo;</button>
    <button id="right">&raquo;</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.

    $( "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.

    $( "p" ).animate({
    left: 50,
    opacity: 1
    }, 500 );

    Parameters

    • properties: PlainObject<any>

      An object of CSS properties and values that the animation will move toward.

    • duration_easing: string | number

      @param duration_easing

      • duration — A string or number determining how long the animation will run.
      • easing — A string indicating which easing function to use for the transition.
    • Optional complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Perform a custom animation of a set of CSS properties.

    see

    ``

    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.

    <!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">&raquo; Animate Block1</button>
    <button id="go2">&raquo; Animate Block2</button>
    <button id="go3">&raquo; Animate Both</button>
    <button id="go4">&raquo; 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.

    <!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.

    $( "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.

    $( "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.

    $( "p" ).animate({
    opacity: "show"
    }, {
    duration: "slow",
    easing: "easein"
    });

    Parameters

    • properties: PlainObject<any>

      An object of CSS properties and values that the animation will move toward.

    • options: EffectsOptions<TElement>

      A map of additional options to pass to the method.

    Returns JQuery<TElement>

  • Perform a custom animation of a set of CSS properties.

    see

    ``

    since

    1.0

    Parameters

    • properties: PlainObject<any>

      An object of CSS properties and values that the animation will move toward.

    • Optional complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Insert content, specified by the parameter, to the end of each element in the set of matched elements.

    see

    ``

    since

    1.0

    example

    ​ ````Appends some HTML to all paragraphs.

    <!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.

    <!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.

    <!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>

    Parameters

    • Rest ...contents: (string | TypeOrArray<Node | JQuery<Node>>)[]

      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.

    Returns JQuery<TElement>

  • Insert content, specified by the parameter, to the end of each element in the set of matched elements.

    see

    ``

    since

    1.4

    Parameters

    • funсtion: ((this: TElement, index: number, html: string) => string | TypeOrArray<Node | JQuery<Node>>)

      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.

    Returns JQuery<TElement>

  • Insert every element in the set of matched elements to the end of the target.

    see

    ``

    since

    1.0

    example

    ​ ````Append all spans to the element with the ID "foo" (Check append() documentation for more examples)

    <!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>

    Parameters

    • target: string | JQuery<HTMLElement> | TypeOrArray<Element | DocumentFragment>

      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.

    Returns JQuery<TElement>

  • attr(attributeName: string, value_function: null | string | number | ((this: TElement, index: number, attr: string) => undefined | string | number | void)): JQuery<TElement>
  • attr(attributes: PlainObject<any>): JQuery<TElement>
  • attr(attributeName: string): undefined | string
  • Set one or more attributes for the set of matched elements.

    see

    ``

    since

    1.0

    since

    1.1

    example

    ​ ````Set the id for divs based on the position in the page.

    <!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.

    <!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>

    Parameters

    • attributeName: string

      The name of the attribute to set.

    • value_function: null | string | number | ((this: TElement, index: number, attr: string) => undefined | string | number | void)

      @param value_function

      • value — A value to set for the attribute. If null, the specified attribute will be removed (as in `.removeAttr()`).
      • 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.

    Returns JQuery<TElement>

  • Set one or more attributes for the set of matched elements.

    see

    ``

    since

    1.0

    example

    ​ ````Set some attributes for all <img>s in the page.

    <!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>

    Parameters

    • attributes: PlainObject<any>

      An object of attribute-value pairs to set.

    Returns JQuery<TElement>

  • Get the value of an attribute for the first element in the set of matched elements.

    see

    ``

    since

    1.0

    example

    ​ ````Display the checked attribute and property of a checkbox as it changes.

    <!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.

    <!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>

    Parameters

    • attributeName: string

      The name of the attribute to get.

    Returns undefined | string

  • autocomplete(): JQuery<HTMLElement>
  • autocomplete(methodName: "close"): void
  • autocomplete(methodName: "destroy"): void
  • autocomplete(methodName: "disable"): void
  • autocomplete(methodName: "enable"): void
  • autocomplete(methodName: "search", value?: string): void
  • autocomplete(methodName: "widget"): JQuery<HTMLElement>
  • autocomplete(methodName: string): JQuery<HTMLElement>
  • autocomplete(options: JQueryUI.AutocompleteOptions): JQuery<HTMLElement>
  • autocomplete(optionLiteral: string, optionName: string): any
  • autocomplete(optionLiteral: string, options: JQueryUI.AutocompleteOptions): any
  • autocomplete(optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
  • Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "close"

    Returns void

  • Parameters

    • methodName: "destroy"

    Returns void

  • Parameters

    • methodName: "disable"

    Returns void

  • Parameters

    • methodName: "enable"

    Returns void

  • Parameters

    • methodName: "search"
    • Optional value: string

    Returns void

  • Parameters

    • methodName: "widget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: string

    Returns JQuery<HTMLElement>

  • Parameters

    Returns JQuery<HTMLElement>

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery<HTMLElement>

  • Insert content, specified by the parameter, before each element in the set of matched elements.

    see

    ``

    since

    1.0

    example

    ​ ````Inserts some HTML before all paragraphs.

    <!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.

    <!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.

    <!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>

    Parameters

    • Rest ...contents: (string | TypeOrArray<Node | JQuery<Node>>)[]

      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.

    Returns JQuery<TElement>

  • Insert content, specified by the parameter, before each element in the set of matched elements.

    see

    ``

    since

    1.4

    since

    1.10

    Parameters

    • function_functionーhtml: ((this: TElement, index: number, html: string) => string | TypeOrArray<Node | JQuery<Node>>)

      @param function_functionーhtml

      • 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.
      • 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.

    Returns JQuery<TElement>

  • bind<TType, TData>(eventType: TType, eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, TType>): JQuery<TElement>
  • bind<TType>(eventType: TType, handler_preventBubble: undefined | null | false | TypeEventHandler<TElement, undefined, TElement, TElement, TType>): JQuery<TElement>
  • bind(events: TypeEventHandlers<TElement, undefined, TElement, TElement>): JQuery<TElement>
  • Attach a handler to an event for the elements.

    see

    ``

    since

    1.0

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.0. Use ``.

    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.

    Type Parameters

    • TType extends string

    • TData

    Parameters

    • eventType: TType

      A string containing one or more DOM event types, such as "click" or "submit," or custom event names.

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, TType>

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Attach a handler to an event for the elements.

    see

    ``

    since

    1.0

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.0. Use ``.

    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.

    <!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:

    $( "p" ).bind( "click", function() {
    alert( $( this ).text() );
    });
    example

    ​ ````Cancel a default action and prevent it from bubbling up by returning false:

    $( "form" ).bind( "submit", function() {
    return false;
    })
    example

    ​ ````Cancel only the default action by using the .preventDefault() method.

    $( "form" ).bind( "submit", function( event ) {
    event.preventDefault();
    });
    example

    ​ ````Stop an event from bubbling without preventing the default action by using the .stopPropagation() method.

    $( "form" ).bind( "submit", function( event ) {
    event.stopPropagation();
    });
    example

    ​ ````Bind custom events.

    <!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>

    Type Parameters

    • TType extends string

    Parameters

    • eventType: TType

      A string containing one or more DOM event types, such as "click" or "submit," or custom event names.

    • handler_preventBubble: undefined | null | false | TypeEventHandler<TElement, undefined, TElement, TElement, TType>

      @param handler_preventBubble

      • handler — A function to execute each time the event is triggered.
      • 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.

    Returns JQuery<TElement>

  • Attach a handler to an event for the elements.

    see

    ``

    since

    1.4

    deprecated

    ​ Deprecated since 3.0. Use ``.

    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.

    $( "div.test" ).bind({
    click: function() {
    $( this ).addClass( "active" );
    },
    mouseenter: function() {
    $( this ).addClass( "inside" );
    },
    mouseleave: function() {
    $( this ).removeClass( "inside" );
    }
    });

    Parameters

    • events: TypeEventHandlers<TElement, undefined, TElement, TElement>

      An object containing one or more DOM event types and functions to execute for them.

    Returns JQuery<TElement>

  • blur<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "blur">): JQuery<TElement>
  • blur(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "blur">): JQuery<TElement>
  • Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "blur">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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:

    $( "p" ).blur();
    

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "blur">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • button(): JQuery<HTMLElement>
  • button(methodName: "destroy"): void
  • button(methodName: "disable"): void
  • button(methodName: "enable"): void
  • button(methodName: "refresh"): void
  • button(methodName: "widget"): JQuery<HTMLElement>
  • button(methodName: string): JQuery<HTMLElement>
  • button(options: ButtonOptions): JQuery<HTMLElement>
  • button(optionLiteral: string, optionName: string): any
  • button(optionLiteral: string, options: ButtonOptions): any
  • button(optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
  • Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "destroy"

    Returns void

  • Parameters

    • methodName: "disable"

    Returns void

  • Parameters

    • methodName: "enable"

    Returns void

  • Parameters

    • methodName: "refresh"

    Returns void

  • Parameters

    • methodName: "widget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: string

    Returns JQuery<HTMLElement>

  • Parameters

    Returns JQuery<HTMLElement>

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery<HTMLElement>

  • buttonset(): JQuery<HTMLElement>
  • buttonset(methodName: "destroy"): void
  • buttonset(methodName: "disable"): void
  • buttonset(methodName: "enable"): void
  • buttonset(methodName: "refresh"): void
  • buttonset(methodName: "widget"): JQuery<HTMLElement>
  • buttonset(methodName: string): JQuery<HTMLElement>
  • buttonset(options: ButtonOptions): JQuery<HTMLElement>
  • buttonset(optionLiteral: string, optionName: string): any
  • buttonset(optionLiteral: string, options: ButtonOptions): any
  • buttonset(optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
  • Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "destroy"

    Returns void

  • Parameters

    • methodName: "disable"

    Returns void

  • Parameters

    • methodName: "enable"

    Returns void

  • Parameters

    • methodName: "refresh"

    Returns void

  • Parameters

    • methodName: "widget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: string

    Returns JQuery<HTMLElement>

  • Parameters

    Returns JQuery<HTMLElement>

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery<HTMLElement>

  • change<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "change">): JQuery<TElement>
  • change(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "change">): JQuery<TElement>
  • Bind an event handler to the "change" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "change">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "change" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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.

    <!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:

    $( "input[type='text']" ).change(function() {
    // Check input( $( this ).val() ) for validity here
    });

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "change">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • children<K>(selector: K): JQuery<HTMLElementTagNameMap[K]>
  • children<K>(selector: K): JQuery<SVGElementTagNameMap[K]>
  • children(selector?: string): JQuery<HTMLElement>
  • Get the children of each element in the set of matched elements, optionally filtered by a selector.

    see

    ``

    since

    1.0

    example

    ​ ````Find all children of the clicked element.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>children demo</title>
    <style>
    body {
    font-size: 16px;
    font-weight: bolder;
    }
    div {
    width: 130px;
    height: 82px;
    margin: 10px;
    float: left;
    border: 1px solid blue;
    padding: 4px;
    }
    #container {
    width: auto;
    height: 105px;
    margin: 0;
    float: none;
    border: none;
    }
    .hilite {
    border-color: red;
    }
    #results {
    display: block;
    color: red;
    }
    p, span, em, a, b, button {
    border: 1px solid transparent;
    }
    p {
    margin: 10px;
    }
    span {
    color: blue;
    }
    input {
    width: 100px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div id="container">
    <div>
    <p>This <span>is the <em>way</em> we</span>
    write <em>the</em> demo,</p>
    </div>

    <div>
    <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write
    the</button> demo,
    </div>

    <div>
    This <span>the way we <em>write</em> the <em>demo</em> so</span>
    <input type="text" value="early"> in
    </div>

    <p>
    <span>t</span>he <span>m</span>orning.
    <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
    </p>
    </div>

    <script>
    $( "#container" ).click(function ( event ) {
    $( "*" ).removeClass( "hilite" );
    var kids = $( event.target ).children();
    var len = kids.addClass( "hilite" ).length;

    $( "#results span:first" ).text( len );
    $( "#results span:last" ).text( event.target.tagName );

    event.preventDefault();
    });
    </script>

    </body>
    </html>
    example

    ​ ````Find all children of each div.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>children demo</title>
    <style>
    body {
    font-size: 16px;
    font-weight: bolder;
    }
    span {
    color: blue;
    }
    p {
    margin: 5px 0;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello (this is a paragraph)</p>

    <div><span>Hello Again (this span is a child of the a div)</span></div>
    <p>And <span>Again</span> (in another paragraph)</p>

    <div>And One Last <span>Time</span> (most text directly in a div)</div>

    <script>
    $( "div" ).children().css( "border-bottom", "3px double red" );
    </script>

    </body>
    </html>
    example

    ​ ````Find all children with a class "selected" of each div.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>children demo</title>
    <style>
    body {
    font-size: 16px;
    font-weight: bolder;
    }
    p {
    margin: 5px 0;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>
    <span>Hello</span>
    <p class="selected">Hello Again</p>
    <div class="selected">And Again</div>
    <p>And One Last Time</p>
    </div>

    <script>
    $( "div" ).children( ".selected" ).css( "color", "blue" );
    </script>

    </body>
    </html>

    Type Parameters

    • K extends keyof HTMLElementTagNameMap

    Parameters

    • selector: K

      A string containing a selector expression to match elements against.

    Returns JQuery<HTMLElementTagNameMap[K]>

  • Type Parameters

    • K extends keyof SVGElementTagNameMap

    Parameters

    • selector: K

    Returns JQuery<SVGElementTagNameMap[K]>

  • Parameters

    • Optional selector: string

    Returns JQuery<HTMLElement>

  • clearQueue(queueName?: string): JQuery<TElement>
  • Remove from the queue all items that have not yet been run.

    see

    ``

    since

    1.4

    example

    ​ ````Empty the queue.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>clearQueue demo</title>
    <style>
    div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
    }
    div.newcolor {
    background: blue;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <div></div>

    <script>
    $( "#start" ).click(function() {
    var myDiv = $( "div" );
    myDiv.show( "slow" );
    myDiv.animate({
    left:"+=200"
    }, 5000 );

    myDiv.queue(function() {
    var that = $( this );
    that.addClass( "newcolor" );
    that.dequeue();
    });

    myDiv.animate({
    left:"-=200"
    }, 1500 );
    myDiv.queue(function() {
    var that = $( this );
    that.removeClass( "newcolor" );
    that.dequeue();
    });
    myDiv.slideUp();
    });

    $( "#stop" ).click(function() {
    var myDiv = $( "div" );
    myDiv.clearQueue();
    myDiv.stop();
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional queueName: string

      A string containing the name of the queue. Defaults to fx, the standard effects queue.

    Returns JQuery<TElement>

  • click<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "click">): JQuery<TElement>
  • click(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "click">): JQuery<TElement>
  • Bind an event handler to the "click" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "click">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "click" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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

    ​ ````Hide paragraphs on a page when they are clicked:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>click demo</title>
    <style>
    p {
    color: red;
    margin: 5px;
    cursor: pointer;
    }
    p:hover {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>First Paragraph</p>
    <p>Second Paragraph</p>
    <p>Yet one more Paragraph</p>

    <script>
    $( "p" ).click(function() {
    $( this ).slideUp();
    });
    </script>

    </body>
    </html>
    example

    ​ ````Trigger the click event on all of the paragraphs on the page:

    $( "p" ).click();
    

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "click">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • clone(withDataAndEvents?: boolean, deepWithDataAndEvents?: boolean): JQuery<TElement>
  • Create a deep copy of the set of matched elements.

    see

    ``

    since

    1.0

    since

    1.5

    example

    ​ ````Clones all b elements (and selects the clones) and prepends them to all paragraphs.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>clone demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <b>Hello</b><p>, how are you?</p>

    <script>
    $( "b" ).clone().prependTo( "p" );
    </script>

    </body>
    </html>

    Parameters

    • Optional withDataAndEvents: boolean

      A Boolean indicating whether event handlers and data should be copied along with the elements. The default value is false. *In jQuery 1.5.0 the default value was incorrectly true; it was changed back to false in 1.5.1 and up.

    • Optional deepWithDataAndEvents: boolean

      A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument's value (which defaults to false).

    Returns JQuery<TElement>

  • cloneAllStyle(target: HTMLElement | JQuery<HTMLElement>): void
  • Copies all CSS style properties from this element to the target element

    Parameters

    • target: HTMLElement | JQuery<HTMLElement>

      Target element to which to copy the CSS style properties.

    Returns void

  • cloneStyle(target: HTMLElement | JQuery<HTMLElement>, styleName: string): void
  • Copies the given CSS style property from this element to the target element.

    Parameters

    • target: HTMLElement | JQuery<HTMLElement>

      Target element to which to copy the style.

    • styleName: string

      Name of the CSS style property.

    Returns void

  • closest(selector: string, context: Element): JQuery<TElement>
  • closest(selector_selection_element: string | Element | JQuery<HTMLElement>): JQuery<TElement>
  • 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.

    see

    ``

    since

    1.4

    Parameters

    • selector: string

      A string containing a selector expression to match elements against.

    • context: Element

      A DOM element within which a matching element may be found.

    Returns JQuery<TElement>

  • 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.

    see

    ``

    since

    1.3

    since

    1.6

    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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>closest demo</title>
    <style>
    li {
    margin: 3px;
    padding: 3px;
    background: #EEEEEE;
    }
    li.highlight {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <ul>
    <li><b>Click me!</b></li>
    <li>You can also <b>Click me!</b></li>
    </ul>

    <script>
    $( document ).on( "click", function( event ) {
    $( event.target ).closest( "li" ).toggleClass( "highlight" );
    });
    </script>

    </body>
    </html>
    example

    ​ ````Pass a jQuery object to closest. The closest list element toggles a yellow background when it or its descendent is clicked.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>closest demo</title>
    <style>
    li {
    margin: 3px;
    padding: 3px;
    background: #EEEEEE;
    }
    li.highlight {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <ul>
    <li><b>Click me!</b></li>
    <li>You can also <b>Click me!</b></li>
    </ul>

    <script>
    var listElements = $( "li" ).css( "color", "blue" );
    $( document ).on( "click", function( event ) {
    $( event.target ).closest( listElements ).toggleClass( "highlight" );
    });
    </script>

    </body>
    </html>

    Parameters

    • selector_selection_element: string | Element | JQuery<HTMLElement>

      @param selector_selection_element

      • selector — A string containing a selector expression to match elements against.
      • selection — A jQuery object to match elements against.
      • element — An element to match elements against.

    Returns JQuery<TElement>

  • collapseSelection(): JQuery<TElement>
  • Unselects all selected text of an INPUT or TEXTAREA element.

    Returns JQuery<TElement>

    this for chaining.

  • contents(): JQuery<TElement | Document | Text | Comment>
  • Get the children of each element in the set of matched elements, including text and comment nodes.

    see

    ``

    since

    1.2

    example

    ​ ````Find all the text nodes inside a paragraph and wrap them with a bold tag.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>contents demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello <a href="https://johnresig.com/">John</a>, how are you doing?</p>

    <script>
    $( "p" )
    .contents()
    .filter(function(){
    return this.nodeType !== 1;
    })
    .wrap( "<b></b>" );
    </script>

    </body>
    </html>
    example

    ​ ````Change the background color of links inside of an iframe.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>contents demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <iframe src="https://api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe>

    <script>
    $( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );
    </script>

    </body>
    </html>

    Returns JQuery<TElement | Document | Text | Comment>

  • contextmenu<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "contextmenu">): JQuery<TElement>
  • contextmenu(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "contextmenu">): JQuery<TElement>
  • Bind an event handler to the "contextmenu" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "contextmenu">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "contextmenu" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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 show a "Hello World!" alert box when the contextmenu event is triggered on a paragraph on the page:

    $( "p" ).contextmenu(function() {
    alert( "Hello World!" );
    });
    example

    ​ ````Right click to toggle background color.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>contextmenu demo</title>
    <style>
    div {
    background: blue;
    color: white;
    height: 100px;
    width: 150px;
    }
    div.contextmenu {
    background: yellow;
    color: black;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div></div>
    <span>Right click the block</span>

    <script>
    var div = $( "div:first" );
    div.contextmenu(function() {
    div.toggleClass( "contextmenu" );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "contextmenu">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Creates a new image Cropper on the current elements.

    Parameters

    • Optional options: Cropper.Options<EventTarget>

      Optional settings for the image cropper.

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • Invokes a method on the Cropper instance and returns the result.

    Type Parameters

    Parameters

    • method: K

      Name of a method that exists on the Cropper instance.

    • Rest ...args: Parameters<Cropper[K]>

      Arguments required by the given cropper method.

    Returns ToJQueryUIWidgetReturnType<Cropper, ReturnType<Cropper[K]>, JQuery<TElement>>

    The value as it returned by the cropper instance method.

  • css(propertyName: string, value_function: string | number | ((this: TElement, index: number, value: string) => undefined | string | number | void)): JQuery<TElement>
  • css(properties: PlainObject<string | number | ((this: TElement, index: number, value: string) => undefined | string | number | void)>): JQuery<TElement>
  • css(propertyName: string): string
  • css(propertyNames: string[]): PlainObject<string>
  • Set one or more CSS properties for the set of matched elements.

    see

    ``

    since

    1.0

    since

    1.4

    example

    ​ ````Change the color of any paragraph to red on mouseover event.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>css demo</title>
    <style>
    p {
    color: blue;
    width: 200px;
    font-size: 14px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Just roll the mouse over me.</p>

    <p>Or me to see a color change.</p>

    <script>
    $( "p" ).on( "mouseover", function() {
    $( this ).css( "color", "red" );
    });
    </script>

    </body>
    </html>
    example

    ​ ````Increase the width of #box by 200 pixels the first time it is clicked.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>css demo</title>
    <style>
    #box {
    background: black;
    color: snow;
    width: 100px;
    padding: 10px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div id="box">Click me to grow</div>

    <script>
    $( "#box" ).one( "click", function() {
    $( this ).css( "width", "+=200" );
    });
    </script>

    </body>
    </html>
    example

    ​ ````Highlight a clicked word in the paragraph.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>css demo</title>
    <style>
    p {
    color: blue;
    font-weight: bold;
    cursor: pointer;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>
    Once upon a time there was a man
    who lived in a pizza parlor. This
    man just loved pizza and ate it all
    the time. He went on to be the
    happiest man in the world. The end.
    </p>

    <script>
    var words = $( "p" ).first().text().split( /\s+/ );
    var text = words.join( "</span> <span>" );
    $( "p" ).first().html( "<span>" + text + "</span>" );
    $( "span" ).on( "click", function() {
    $( this ).css( "background-color", "yellow" );
    });
    </script>

    </body>
    </html>

    Parameters

    • propertyName: string

      A CSS property name.

    • value_function: string | number | ((this: TElement, index: number, value: string) => undefined | string | number | void)

      @param value_function

      • value — A value to set for the property.
      • 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 value as arguments.

    Returns JQuery<TElement>

  • Set one or more CSS properties for the set of matched elements.

    see

    ``

    since

    1.0

    example

    ​ ````Change the font weight and background color on mouseenter and mouseleave.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>css demo</title>
    <style>
    p {
    color: green;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Move the mouse over a paragraph.</p>
    <p>Like this one or the one above.</p>

    <script>
    $( "p" )
    .on( "mouseenter", function() {
    $( this ).css({
    "background-color": "yellow",
    "font-weight": "bolder"
    });
    })
    .on( "mouseleave", function() {
    var styles = {
    backgroundColor : "#ddd",
    fontWeight: ""
    };
    $( this ).css( styles );
    });
    </script>

    </body>
    </html>
    example

    ​ ````Increase the size of a div when you click it.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>css demo</title>
    <style>
    div {
    width: 20px;
    height: 15px;
    background-color: #f33;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>click</div>
    <div>click</div>

    <script>
    $( "div" ).on( "click", function() {
    $( this ).css({
    width: function( index, value ) {
    return parseFloat( value ) * 1.2;
    },
    height: function( index, value ) {
    return parseFloat( value ) * 1.2;
    }
    });
    });
    </script>

    </body>
    </html>

    Parameters

    • properties: PlainObject<string | number | ((this: TElement, index: number, value: string) => undefined | string | number | void)>

      An object of property-value pairs to set.

    Returns JQuery<TElement>

  • Get the computed style properties for the first element in the set of matched elements.

    see

    ``

    since

    1.0

    example

    ​ ````Get the background color of a clicked div.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>css demo</title>
    <style>
    div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <span id="result">&nbsp;</span>
    <div style="background-color:blue;"></div>
    <div style="background-color:rgb(15,99,30);"></div>
    <div style="background-color:#123456;"></div>
    <div style="background-color:#f11;"></div>

    <script>
    $( "div" ).click(function() {
    var color = $( this ).css( "background-color" );
    $( "#result" ).html( "That div is <span style='color:" +
    color + ";'>" + color + "</span>." );
    });
    </script>

    </body>
    </html>

    Parameters

    • propertyName: string

      A CSS property.

    Returns string

  • Get the computed style properties for the first element in the set of matched elements.

    see

    ``

    since

    1.9

    example

    ​ ````Get the width, height, text color, and background color of a clicked div.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>css demo</title>
    <style>
    div {
    height: 50px;
    margin: 5px;
    padding: 5px;
    float: left;
    }
    #box1 {
    width: 50px;
    color: yellow;
    background-color: blue;
    }
    #box2 {
    width: 80px;
    color: rgb(255, 255, 255);
    background-color: rgb(15, 99, 30);
    }
    #box3 {
    width: 40px;
    color: #fcc;
    background-color: #123456;
    }
    #box4 {
    width: 70px;
    background-color: #f11;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p id="result">&nbsp;</p>
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
    <div id="box4">4</div>

    <script>
    $( "div" ).click(function() {
    var html = [ "The clicked div has the following styles:" ];

    var styleProps = $( this ).css([
    "width", "height", "color", "background-color"
    ]);
    $.each( styleProps, function( prop, value ) {
    html.push( prop + ": " + value );
    });

    $( "#result" ).html( html.join( "<br>" ) );
    });
    </script>

    </body>
    </html>

    Parameters

    • propertyNames: string[]

      An array of one or more CSS properties.

    Returns PlainObject<string>

  • Parameters

    Returns JQuery<TElement>

  • Starts slideshow mode.

    Parameters

    • method: "resume"

      Name of the method to invoke on the image cycle instance.

    Returns JQuery<TElement>

    this for chaining.

  • Stops slideshow mode.

    Parameters

    • method: "stop"

      Name of the method to invoke on the image cycle instance.

    Returns JQuery<TElement>

    this for chaining.

  • Stops or starts slideshow mode.

    Parameters

    • method: "toggle"

      Name of the method to invoke on the image cycle instance.

    Returns JQuery<TElement>

    this for chaining.

  • Switches to the next image.

    Parameters

    • method: "next"

      Name of the method to invoke on the image cycle instance.

    Returns JQuery<TElement>

    this for chaining.

  • Pauses slideshow mode.

    Parameters

    • method: "pause"

      Name of the method to invoke on the image cycle instance.

    Returns JQuery<TElement>

    this for chaining.

  • Switches to the previous image.

    Parameters

    • method: "prev"

      Name of the method to invoke on the image cycle instance.

    Returns JQuery<TElement>

    this for chaining.

  • Removes the slideshow from this element.

    Parameters

    • method: "destroy"

      Name of the method to invoke on the image cycle instance.

    Returns JQuery<TElement>

    this for chaining.

  • Switches to the image with given index.

    Parameters

    • index: number

      0-based index of the image to switch to.

    Returns JQuery<TElement>

    this for chaining.

  • data(key: string, value: null | string | number | boolean | symbol | object): JQuery<TElement>
  • data(obj: PlainObject<any>): JQuery<TElement>
  • data(key: string, value: undefined): any
  • data(key: string): any
  • data(): PlainObject<any>
  • Store arbitrary data associated with the matched elements.

    see

    ``

    since

    1.2.3

    example

    ​ ````Store then retrieve a value from the div element.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>data demo</title>
    <style>
    div {
    color: blue;
    }
    span {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>
    The values stored were
    <span></span>
    and
    <span></span>
    </div>

    <script>
    $( "div" ).data( "test", { first: 16, last: "pizza!" } );
    $( "span:first" ).text( $( "div" ).data( "test" ).first );
    $( "span:last" ).text( $( "div" ).data( "test" ).last );
    </script>

    </body>
    </html>

    Parameters

    • key: string

      A string naming the piece of data to set.

    • value: null | string | number | boolean | symbol | object

      The new data value; this can be any Javascript type except undefined.

    Returns JQuery<TElement>

  • Store arbitrary data associated with the matched elements.

    see

    ``

    since

    1.4.3

    Parameters

    • obj: PlainObject<any>

      An object of key-value pairs of data to update.

    Returns JQuery<TElement>

  • 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.

    see

    ``

    since

    1.2.3

    Parameters

    • key: string

      Name of the data stored.

    • value: undefined

      undefined is not recognized as a data value. Calls such as .data( "name", undefined ) will return the jQuery object that it was called on, allowing for chaining.

    Returns any

  • 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.

    see

    ``

    since

    1.2.3

    example

    ​ ````Get the data named "blah" stored at for an element.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>data demo</title>
    <style>
    div {
    margin: 5px;
    background: yellow;
    }
    button {
    margin: 5px;
    font-size: 14px;
    }
    p {
    margin: 5px;
    color: blue;
    }
    span {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>A div</div>
    <button>Get "blah" from the div</button>
    <button>Set "blah" to "hello"</button>
    <button>Set "blah" to 86</button>
    <button>Remove "blah" from the div</button>
    <p>The "blah" value of this div is <span>?</span></p>

    <script>
    $( "button" ).click(function() {
    var value;

    switch ( $( "button" ).index( this ) ) {
    case 0 :
    value = $( "div" ).data( "blah" );
    break;
    case 1 :
    $( "div" ).data( "blah", "hello" );
    value = "Stored!";
    break;
    case 2 :
    $( "div" ).data( "blah", 86 );
    value = "Stored!";
    break;
    case 3 :
    $( "div" ).removeData( "blah" );
    value = "Removed!";
    break;
    }

    $( "span" ).text( "" + value );
    });
    </script>

    </body>
    </html>

    Parameters

    • key: string

      Name of the data stored.

    Returns any

  • 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.

    see

    ``

    since

    1.4

    Returns PlainObject<any>

  • Initializes the date picker on the current elements.

    Parameters

    • Rest ...options: Partial<PickerOptions>[]

      Optional settings for configuring the date picker.

    Returns JQuery<TElement>

    This JQuery instance for chaining.

  • Retrieves the current date picker instance.

    Parameters

    • method: "instance"

      Name of the method to call on the widget.

    Returns undefined | PickerInstance

    The current date picker instance, or undefined if the widget was not yet initialized.

  • Removes the widget functionality completely. This will return the element back to its pre-init state.

    Parameters

    • method: "destroy"

      Name of the method to call on the widget.

    Returns JQuery<TElement>

    This JQuery instance for chaining.

  • Returns a JQuery object containing the original element or other relevant generated elements.

    Parameters

    • method: "widget"

      Name of the method to call on the widget.

    Returns JQuery<HTMLElement>

    A JQuery object with the original element or other relevant generated elements.

  • Finds the current option of the date picker widget.

    Parameters

    • method: "option"

      Name of the method to call on the widget.

    Returns PickerOptions

    The current options of this date picker widget.

  • Updates the current options with the given options.

    Parameters

    • method: "option"

      Name of the method to call on the widget.

    • options: Partial<PickerOptions>

    Returns JQuery<TElement>

    This JQuery instance for chaining.

  • Finds the value of the given option.

    Type Parameters

    Parameters

    • method: "option"

      Name of the method to call on the widget.

    • optionName: K

      Name of an option to retrieve.

    Returns PickerOptions[K]

    The value of the given option.

  • Sets the value of the given option to the given value.

    Type Parameters

    Parameters

    • method: "option"

      Name of the method to call on the widget.

    • optionName: K

      Name of an option to set.

    • optionValue: PickerOptions[K]

      Value of the option to set.

    Returns JQuery<TElement>

    This JQuery instance for chaining.

  • Calls a method of the JQueryPrimeDatePicker.PickerInstance and return the result.

    see

    PickerWidgetMethods

    Type Parameters

    Parameters

    Returns ToJQueryUIWidgetReturnType<PickerInstance, ReturnType<PickerWidgetMethods[K]>, JQuery<TElement>>

    The value as returned by the JQueryPrimeDatePicker.PickerInstance method. Return this JQuery instance for chaining when the instance method has no return value.

  • datepicker(): JQuery<HTMLElement>
  • datepicker(methodName: "destroy"): JQuery<HTMLElement>
  • datepicker(methodName: "dialog", date: Date, onSelect?: (() => void), settings?: DatepickerOptions, pos?: number[]): JQuery<HTMLElement>
  • datepicker(methodName: "dialog", date: Date, onSelect?: (() => void), settings?: DatepickerOptions, pos?: MouseEvent): JQuery<HTMLElement>
  • datepicker(methodName: "dialog", date: string, onSelect?: (() => void), settings?: DatepickerOptions, pos?: number[]): JQuery<HTMLElement>
  • datepicker(methodName: "dialog", date: string, onSelect?: (() => void), settings?: DatepickerOptions, pos?: MouseEvent): JQuery<HTMLElement>
  • datepicker(methodName: "getDate"): Date
  • datepicker(methodName: "hide"): JQuery<HTMLElement>
  • datepicker(methodName: "isDisabled"): boolean
  • datepicker(methodName: "refresh"): JQuery<HTMLElement>
  • datepicker(methodName: "setDate", date: Date): JQuery<HTMLElement>
  • datepicker(methodName: "setDate", date: string): JQuery<HTMLElement>
  • datepicker(methodName: "show"): JQuery<HTMLElement>
  • datepicker(methodName: "widget"): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "altField"): any
  • datepicker(methodName: "option", optionName: "altField", altFieldValue: string): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "altField", altFieldValue: JQuery<HTMLElement>): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "altField", altFieldValue: Element): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "altFormat"): string
  • datepicker(methodName: "option", optionName: "altFormat", altFormatValue: string): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "appendText"): string
  • datepicker(methodName: "option", optionName: "appendText", appendTextValue: string): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "autoSize"): boolean
  • datepicker(methodName: "option", optionName: "autoSize", autoSizeValue: boolean): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "beforeShow"): ((input: Element, inst: any) => DatepickerOptions)
  • datepicker(methodName: "option", optionName: "beforeShow", beforeShowValue: ((input: Element, inst: any) => DatepickerOptions)): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "beforeShowDay"): ((date: Date) => any[])
  • datepicker(methodName: "option", optionName: "beforeShowDay", beforeShowDayValue: ((date: Date) => any[])): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "buttonImage"): string
  • datepicker(methodName: "option", optionName: "buttonImage", buttonImageValue: string): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "buttonImageOnly"): boolean
  • datepicker(methodName: "option", optionName: "buttonImageOnly", buttonImageOnlyValue: boolean): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "buttonText"): string
  • datepicker(methodName: "option", optionName: "autohide"): boolean
  • datepicker(methodName: "option", optionName: "endDate"): Date
  • datepicker(methodName: "option", optionName: "buttonText", buttonTextValue: string): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "calculateWeek"): ((date: Date) => string)
  • datepicker(methodName: "option", optionName: "calculateWeek", calculateWeekValue: ((date: Date) => string)): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "changeMonth"): boolean
  • datepicker(methodName: "option", optionName: "changeMonth", changeMonthValue: boolean): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "changeYear"): boolean
  • datepicker(methodName: "option", optionName: "changeYear", changeYearValue: boolean): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "closeText"): string
  • datepicker(methodName: "option", optionName: "closeText", closeTextValue: string): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "constrainInput"): boolean
  • datepicker(methodName: "option", optionName: "constrainInput", constrainInputValue: boolean): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "currentText"): string
  • datepicker(methodName: "option", optionName: "currentText", currentTextValue: string): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "dateFormat"): string
  • datepicker(methodName: "option", optionName: "dateFormat", dateFormatValue: string): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "dayNames"): string[]
  • datepicker(methodName: "option", optionName: "dayNames", dayNamesValue: string[]): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "dayNamesMin"): string[]
  • datepicker(methodName: "option", optionName: "dayNamesMin", dayNamesMinValue: string[]): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "dayNamesShort"): string[]
  • datepicker(methodName: "option", optionName: "dayNamesShort", dayNamesShortValue: string[]): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "defaultDate"): any
  • datepicker(methodName: "option", optionName: "defaultDate", defaultDateValue: Date): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "defaultDate", defaultDateValue: number): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "defaultDate", defaultDateValue: string): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "duration"): string
  • datepicker(methodName: "option", optionName: "duration", durationValue: string): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "firstDay"): number
  • datepicker(methodName: "option", optionName: "firstDay", firstDayValue: number): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: "gotoCurrent"): boolean
  • datepicker(methodName: "option", optionName: "gotoCurrent", gotoCurrentValue: boolean): JQuery<HTMLElement>
  • datepicker(methodName: "option", optionName: string): any
  • datepicker(methodName: "option", optionName: string, ...otherParams: any[]): any
  • datepicker(methodName: string, ...otherParams: any[]): any
  • datepicker(options: DatepickerOptions): JQuery<HTMLElement>
  • Initialize a datepicker

    Returns JQuery<HTMLElement>

  • Removes the datepicker functionality completely. This will return the element back to its pre-init state.

    Parameters

    • methodName: "destroy"

      'destroy'

    Returns JQuery<HTMLElement>

  • Opens the datepicker in a dialog box.

    Parameters

    • methodName: "dialog"

      'dialog'

    • date: Date

      The initial date.

    • Optional onSelect: (() => void)

      A callback function when a date is selected. The function receives the date text and date picker instance as parameters.

        • (): void
        • Returns void

    • Optional settings: DatepickerOptions

      The new settings for the date picker.

    • Optional pos: number[]

      The position of the top/left of the dialog as [x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.

    Returns JQuery<HTMLElement>

  • Opens the datepicker in a dialog box.

    Parameters

    • methodName: "dialog"

      'dialog'

    • date: Date

      The initial date.

    • Optional onSelect: (() => void)

      A callback function when a date is selected. The function receives the date text and date picker instance as parameters.

        • (): void
        • Returns void

    • Optional settings: DatepickerOptions

      The new settings for the date picker.

    • Optional pos: MouseEvent

      The position of the top/left of the dialog as [x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.

    Returns JQuery<HTMLElement>

  • Opens the datepicker in a dialog box.

    Parameters

    • methodName: "dialog"

      'dialog'

    • date: string

      The initial date.

    • Optional onSelect: (() => void)

      A callback function when a date is selected. The function receives the date text and date picker instance as parameters.

        • (): void
        • Returns void

    • Optional settings: DatepickerOptions

      The new settings for the date picker.

    • Optional pos: number[]

      The position of the top/left of the dialog as [x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.

    Returns JQuery<HTMLElement>

  • Opens the datepicker in a dialog box.

    Parameters

    • methodName: "dialog"

      'dialog'

    • date: string

      The initial date.

    • Optional onSelect: (() => void)

      A callback function when a date is selected. The function receives the date text and date picker instance as parameters.

        • (): void
        • Returns void

    • Optional settings: DatepickerOptions

      The new settings for the date picker.

    • Optional pos: MouseEvent

      The position of the top/left of the dialog as [x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.

    Returns JQuery<HTMLElement>

  • Returns the current date for the datepicker or null if no date has been selected.

    Parameters

    • methodName: "getDate"

      'getDate'

    Returns Date

  • Close a previously opened date picker.

    Parameters

    • methodName: "hide"

      'hide'

    Returns JQuery<HTMLElement>

  • Determine whether a date picker has been disabled.

    Parameters

    • methodName: "isDisabled"

      'isDisabled'

    Returns boolean

  • Redraw the date picker, after having made some external modifications.

    Parameters

    • methodName: "refresh"

      'refresh'

    Returns JQuery<HTMLElement>

  • Sets the date for the datepicker. The new date may be a Date object or a string in the current date format (e.g., "01/26/2009"), a number of days from today (e.g., +7) or a string of values and periods ("y" for years, "m" for months, "w" for weeks, "d" for days, e.g., "+1m +7d"), or null to clear the selected date.

    Parameters

    • methodName: "setDate"

      'setDate'

    • date: Date

      The new date.

    Returns JQuery<HTMLElement>

  • Sets the date for the datepicker. The new date may be a Date object or a string in the current date format (e.g., "01/26/2009"), a number of days from today (e.g., +7) or a string of values and periods ("y" for years, "m" for months, "w" for weeks, "d" for days, e.g., "+1m +7d"), or null to clear the selected date.

    Parameters

    • methodName: "setDate"

      'setDate'

    • date: string

      The new date.

    Returns JQuery<HTMLElement>

  • Open the date picker. If the datepicker is attached to an input, the input must be visible for the datepicker to be shown.

    Parameters

    • methodName: "show"

      'show'

    Returns JQuery<HTMLElement>

  • Returns a jQuery object containing the datepicker.

    Parameters

    • methodName: "widget"

      'widget'

    Returns JQuery<HTMLElement>

  • Get the altField option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "altField"

      'altField'

    Returns any

  • Set the altField option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "altField"

      'altField'

    • altFieldValue: string

      An input element that is to be updated with the selected date from the datepicker. Use the altFormat option to change the format of the date within this field. Leave as blank for no alternate field.

    Returns JQuery<HTMLElement>

  • Set the altField option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "altField"

      'altField'

    • altFieldValue: JQuery<HTMLElement>

      An input element that is to be updated with the selected date from the datepicker. Use the altFormat option to change the format of the date within this field. Leave as blank for no alternate field.

    Returns JQuery<HTMLElement>

  • Set the altField option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "altField"

      'altField'

    • altFieldValue: Element

      An input element that is to be updated with the selected date from the datepicker. Use the altFormat option to change the format of the date within this field. Leave as blank for no alternate field.

    Returns JQuery<HTMLElement>

  • Get the altFormat option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "altFormat"

      'altFormat'

    Returns string

  • Set the altFormat option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "altFormat"

      'altFormat'

    • altFormatValue: string

      The dateFormat to be used for the altField option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the formatDate function

    Returns JQuery<HTMLElement>

  • Get the appendText option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "appendText"

      'appendText'

    Returns string

  • Set the appendText option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "appendText"

      'appendText'

    • appendTextValue: string

      The text to display after each date field, e.g., to show the required format.

    Returns JQuery<HTMLElement>

  • Get the autoSize option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "autoSize"

      'autoSize'

    Returns boolean

  • Set the autoSize option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "autoSize"

      'autoSize'

    • autoSizeValue: boolean

      Set to true to automatically resize the input field to accommodate dates in the current dateFormat.

    Returns JQuery<HTMLElement>

  • Get the beforeShow option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "beforeShow"

      'beforeShow'

    Returns ((input: Element, inst: any) => DatepickerOptions)

  • Set the beforeShow option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "beforeShow"

      'beforeShow'

    • beforeShowValue: ((input: Element, inst: any) => DatepickerOptions)

      A function that takes an input field and current datepicker instance and returns an options object to update the datepicker with. It is called just before the datepicker is displayed.

    Returns JQuery<HTMLElement>

  • Get the beforeShow option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "beforeShowDay"

      'beforeShowDay'

    Returns ((date: Date) => any[])

      • Get the beforeShow option, after initialization

        Parameters

        Returns any[]

  • Set the beforeShow option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "beforeShowDay"

      'beforeShowDay'

    • beforeShowDayValue: ((date: Date) => any[])

      A function that takes a date as a parameter and must return an array with: [0]: true/false indicating whether or not this date is selectable [1]: a CSS class name to add to the date's cell or "" for the default presentation [2]: an optional popup tooltip for this date The function is called for each day in the datepicker before it is displayed.

        • Parameters

          Returns any[]

    Returns JQuery<HTMLElement>

  • Get the buttonImage option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "buttonImage"

      'buttonImage'

    Returns string

  • Set the buttonImage option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "buttonImage"

      'buttonImage'

    • buttonImageValue: string

      A URL of an image to use to display the datepicker when the showOn option is set to "button" or "both". If set, the buttonText option becomes the alt value and is not directly displayed.

    Returns JQuery<HTMLElement>

  • Get the buttonImageOnly option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "buttonImageOnly"

      'buttonImageOnly'

    Returns boolean

  • Set the buttonImageOnly option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "buttonImageOnly"

      'buttonImageOnly'

    • buttonImageOnlyValue: boolean

      Whether the button image should be rendered by itself instead of inside a button element. This option is only relevant if the buttonImage option has also been set.

    Returns JQuery<HTMLElement>

  • Get the buttonText option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "buttonText"

      'buttonText'

    Returns string

  • Get the autohide option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "autohide"

      'autohide'

    Returns boolean

  • Get the endDate after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "endDate"

      'endDate'

    Returns Date

  • Set the buttonText option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "buttonText"

      'buttonText'

    • buttonTextValue: string

      The text to display on the trigger button. Use in conjunction with the showOn option set to "button" or "both".

    Returns JQuery<HTMLElement>

  • Get the calculateWeek option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "calculateWeek"

      'calculateWeek'

    Returns ((date: Date) => string)

      • (date: Date): string
      • Get the calculateWeek option, after initialization

        Parameters

        Returns string

  • Set the calculateWeek option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "calculateWeek"

      'calculateWeek'

    • calculateWeekValue: ((date: Date) => string)

      A function to calculate the week of the year for a given date. The default implementation uses the ISO 8601 definition: weeks start on a Monday; the first week of the year contains the first Thursday of the year.

        • (date: Date): string
        • Parameters

          Returns string

    Returns JQuery<HTMLElement>

  • Get the changeMonth option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "changeMonth"

      'changeMonth'

    Returns boolean

  • Set the changeMonth option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "changeMonth"

      'changeMonth'

    • changeMonthValue: boolean

      Whether the month should be rendered as a dropdown instead of text.

    Returns JQuery<HTMLElement>

  • Get the changeYear option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "changeYear"

      'changeYear'

    Returns boolean

  • Set the changeYear option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "changeYear"

      'changeYear'

    • changeYearValue: boolean

      Whether the year should be rendered as a dropdown instead of text. Use the yearRange option to control which years are made available for selection.

    Returns JQuery<HTMLElement>

  • Get the closeText option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "closeText"

      'closeText'

    Returns string

  • Set the closeText option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "closeText"

      'closeText'

    • closeTextValue: string

      The text to display for the close link. Use the showButtonPanel option to display this button.

    Returns JQuery<HTMLElement>

  • Get the constrainInput option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "constrainInput"

      'constrainInput'

    Returns boolean

  • Set the constrainInput option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "constrainInput"

      'constrainInput'

    • constrainInputValue: boolean

      When true, entry in the input field is constrained to those characters allowed by the current dateFormat option.

    Returns JQuery<HTMLElement>

  • Get the currentText option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "currentText"

      'currentText'

    Returns string

  • Set the currentText option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "currentText"

      'currentText'

    • currentTextValue: string

      The text to display for the current day link. Use the showButtonPanel option to display this button.

    Returns JQuery<HTMLElement>

  • Get the dateFormat option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "dateFormat"

      'dateFormat'

    Returns string

  • Set the dateFormat option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "dateFormat"

      'dateFormat'

    • dateFormatValue: string

      The format for parsed and displayed dates. For a full list of the possible formats see the formatDate function.

    Returns JQuery<HTMLElement>

  • Get the dayNames option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "dayNames"

      'dayNames'

    Returns string[]

  • Set the dayNames option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "dayNames"

      'dayNames'

    • dayNamesValue: string[]

      The list of long day names, starting from Sunday, for use as requested via the dateFormat option.

    Returns JQuery<HTMLElement>

  • Get the dayNamesMin option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "dayNamesMin"

      'dayNamesMin'

    Returns string[]

  • Set the dayNamesMin option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "dayNamesMin"

      'dayNamesMin'

    • dayNamesMinValue: string[]

      The list of minimised day names, starting from Sunday, for use as column headers within the datepicker.

    Returns JQuery<HTMLElement>

  • Get the dayNamesShort option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "dayNamesShort"

      'dayNamesShort'

    Returns string[]

  • Set the dayNamesShort option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "dayNamesShort"

      'dayNamesShort'

    • dayNamesShortValue: string[]

      The list of abbreviated day names, starting from Sunday, for use as requested via the dateFormat option.

    Returns JQuery<HTMLElement>

  • Get the defaultDate option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "defaultDate"

      'defaultDate'

    Returns any

  • Set the defaultDate option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "defaultDate"

      'defaultDate'

    • defaultDateValue: Date

      A date object containing the default date.

    Returns JQuery<HTMLElement>

  • Set the defaultDate option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "defaultDate"

      'defaultDate'

    • defaultDateValue: number

      A number of days from today. For example 2 represents two days from today and -1 represents yesterday.

    Returns JQuery<HTMLElement>

  • Set the defaultDate option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "defaultDate"

      'defaultDate'

    • defaultDateValue: string

      A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.

    Returns JQuery<HTMLElement>

  • Get the duration option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "duration"

      'duration'

    Returns string

  • Set the duration option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "duration"

      'duration'

    • durationValue: string

      Control the speed at which the datepicker appears, it may be a time in milliseconds or a string representing one of the three predefined speeds ("slow", "normal", "fast").

    Returns JQuery<HTMLElement>

  • Get the firstDay option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "firstDay"

      'firstDay'

    Returns number

  • Set the firstDay option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "firstDay"

      'firstDay'

    • firstDayValue: number

      Set the first day of the week: Sunday is 0, Monday is 1, etc.

    Returns JQuery<HTMLElement>

  • Get the gotoCurrent option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "gotoCurrent"

      'gotoCurrent'

    Returns boolean

  • Set the gotoCurrent option, after initialization

    Parameters

    • methodName: "option"

      'option'

    • optionName: "gotoCurrent"

      'gotoCurrent'

    • gotoCurrentValue: boolean

      When true, the current day link moves to the currently selected date instead of today.

    Returns JQuery<HTMLElement>

  • Gets the value currently associated with the specified optionName.

    Parameters

    • methodName: "option"

      'option'

    • optionName: string

      The name of the option to get.

    Returns any

  • Parameters

    • methodName: "option"
    • optionName: string
    • Rest ...otherParams: any[]

    Returns any

  • Parameters

    • methodName: string
    • Rest ...otherParams: any[]

    Returns any

  • Initialize a datepicker with the given options

    Parameters

    Returns JQuery<HTMLElement>

  • datetimepicker(cfg?: Partial<DatetimepickerOptions>): JQuery<TElement>
  • datetimepicker(methodName: "setDate", date?: Date): JQuery<TElement>
  • datetimepicker(methodName: "getDate"): null | Date
  • datetimepicker(methodName: "enable"): JQuery<TElement>
  • datetimepicker(methodName: "disable"): JQuery<TElement>
  • datetimepicker(methodName: "option", optionName: "minDate", date: Date): JQuery<TElement>
  • datetimepicker(methodName: "option", optionName: "maxDate", date: Date): JQuery<TElement>
  • Initializes the datetimepicker on this element. It lets the user select both a date and a time (hour and minute).

    Parameters

    Returns JQuery<TElement>

    this for chaining.

  • Sets and selects the given date.

    Parameters

    • methodName: "setDate"

      Name of the method to invoke.

    • Optional date: Date

      The new date to select. When not given, unselects the date.

    Returns JQuery<TElement>

    this for chaining.

  • Finds the currently selected date of the datetimepicker.

    Parameters

    • methodName: "getDate"

      Name of the method to invoke.

    Returns null | Date

    The currently selected date, or null if no date is selected.

  • Enables the datetimepicker so that the user can now select a date.

    Parameters

    • methodName: "enable"

      Name of the method to invoke.

    Returns JQuery<TElement>

    this for chaining.

  • Disables the datetimepicker so that the user cannot select a date anymore.

    Parameters

    • methodName: "disable"

      Name of the method to invoke.

    Returns JQuery<TElement>

    this for chaining.

  • Sets the minimum allowed date the user may select.

    Parameters

    • methodName: "option"

      Name of the method to invoke.

    • optionName: "minDate"

      Name of the option to set.

    • date: Date

      New value for the option.

    Returns JQuery<TElement>

    this for chaining.

  • Sets the maximum allowed date the user may select.

    Parameters

    • methodName: "option"

      Name of the method to invoke.

    • optionName: "maxDate"

      Name of the option to set.

    • date: Date

      New value for the option.

    Returns JQuery<TElement>

    this for chaining.

  • dblclick<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "dblclick">): JQuery<TElement>
  • dblclick(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "dblclick">): JQuery<TElement>
  • Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "dblclick">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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 bind a "Hello World!" alert box to the dblclick event on every paragraph on the page:

    $( "p" ).dblclick(function() {
    alert( "Hello World!" );
    });
    example

    ​ ````Double click to toggle background color.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>dblclick demo</title>
    <style>
    div {
    background: blue;
    color: white;
    height: 100px;
    width: 150px;
    }
    div.dbl {
    background: yellow;
    color: black;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div></div>
    <span>Double click the block</span>

    <script>
    var divdbl = $( "div:first" );
    divdbl.dblclick(function() {
    divdbl.toggleClass( "dbl" );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "dblclick">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Set a timer to delay execution of subsequent items in the queue.

    see

    ``

    since

    1.4

    example

    ​ ````Animate the hiding and showing of two divs, delaying the first before showing it.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>delay demo</title>
    <style>
    div {
    position: absolute;
    width: 60px;
    height: 60px;
    float: left;
    }
    .first {
    background-color: #3f3;
    left: 0;
    }
    .second {
    background-color: #33f;
    left: 80px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p><button>Run</button></p>
    <div class="first"></div>
    <div class="second"></div>

    <script>
    $( "button" ).click(function() {
    $( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
    $( "div.second" ).slideUp( 300 ).fadeIn( 400 );
    });
    </script>

    </body>
    </html>

    Parameters

    • duration: JQuery.Duration

      An integer indicating the number of milliseconds to delay execution of the next item in the queue.

    • Optional queueName: string

      A string containing the name of the queue. Defaults to fx, the standard effects queue.

    Returns JQuery<TElement>

  • delegate<TType, TData>(selector: string, eventType: TType, eventData: TData, handler: TypeEventHandler<TElement, TData, any, any, TType>): JQuery<TElement>
  • delegate<TType>(selector: string, eventType: TType, handler: false | TypeEventHandler<TElement, undefined, any, any, TType>): JQuery<TElement>
  • delegate(selector: string, events: TypeEventHandlers<TElement, undefined, any, any>): JQuery<TElement>
  • 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.

    see

    ``

    since

    1.4.2

    deprecated

    ​ Deprecated since 3.0. Use ``.

    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.

    Type Parameters

    • TType extends string

    • TData

    Parameters

    • selector: string

      A selector to filter the elements that trigger the event.

    • eventType: TType

      A string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, any, any, TType>

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • 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.

    see

    ``

    since

    1.4.2

    deprecated

    ​ Deprecated since 3.0. Use ``.

    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

    ​ ````Click a paragraph to add another. Note that .delegate() attaches a click event handler to all paragraphs - even new ones.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>delegate 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 me!</p>

    <span></span>

    <script>
    $( "body" ).delegate( "p", "click", function() {
    $( this ).after( "<p>Another paragraph!</p>" );
    });
    </script>

    </body>
    </html>
    example

    ​ ````To display each paragraph's text in an alert box whenever it is clicked:

    $( "body" ).delegate( "p", "click", function() {
    alert( $( this ).text() );
    });
    example

    ​ ````To cancel a default action and prevent it from bubbling up, return false:

    $( "body" ).delegate( "a", "click", function() {
    return false;
    });
    example

    ​ ````To cancel only the default action by using the preventDefault method.

    $( "body" ).delegate( "a", "click", function( event ) {
    event.preventDefault();
    });
    example

    ​ ````Can bind custom events too.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>delegate 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>
    $( "body" ).delegate( "p", "myCustomEvent", function( e, myName, myValue ) {
    $( this ).text( "Hi there!" );
    $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
    });
    $( "button" ).click(function() {
    $( "p" ).trigger( "myCustomEvent" );
    });
    </script>

    </body>
    </html>

    Type Parameters

    • TType extends string

    Parameters

    • selector: string

      A selector to filter the elements that trigger the event.

    • eventType: TType

      A string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.

    • handler: false | TypeEventHandler<TElement, undefined, any, any, TType>

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • 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.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.0. Use ``.

    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.

    Parameters

    • selector: string

      A selector to filter the elements that trigger the event.

    • events: TypeEventHandlers<TElement, undefined, any, any>

      A plain object of one or more event types and functions to execute for them.

    Returns JQuery<TElement>

  • deleteSelectedText(): JQuery<TElement>
  • Deletes the currently selected text of an INPUT or TEXTAREA element.

    Returns JQuery<TElement>

    this for chaining.

  • deleteText(startOffset: number, endOffset: number, moveSelection?: boolean): JQuery<TElement>
  • Deletes the text at the given range of an INPUT or TEXTAREA element, optionally moving the cursor to the start of the range.

    Parameters

    • startOffset: number

      0-based index pointing to the start of the range to select (inclusive).

    • endOffset: number

      0-based index pointing to the end of the range to select (exclusive).

    • Optional moveSelection: boolean

      true to position the cursor at the start of the given range, or false otherwise.

    Returns JQuery<TElement>

    this for chaining.

  • dequeue(queueName?: string): JQuery<TElement>
  • Execute the next function on the queue for the matched elements.

    see

    ``

    since

    1.2

    example

    ​ ````Use dequeue to end a custom queue function which allows the queue to keep going.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>dequeue demo</title>
    <style>
    div {
    margin: 3px;
    width: 50px;
    position: absolute;
    height: 50px;
    left: 10px;
    top: 30px;
    background-color: yellow;
    }
    div.red {
    background-color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>Start</button>
    <div></div>

    <script>
    $( "button" ).click(function() {
    $( "div" )
    .animate({ left:"+=200px" }, 2000 )
    .animate({ top:"0px" }, 600 )
    .queue(function() {
    $( this ).toggleClass( "red" ).dequeue();
    })
    .animate({ left:"10px", top:"30px" }, 700 );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional queueName: string

      A string containing the name of the queue. Defaults to fx, the standard effects queue.

    Returns JQuery<TElement>

  • detach(selector?: string): JQuery<TElement>
  • Remove the set of matched elements from the DOM.

    see

    ``

    since

    1.4

    example

    ​ ````Detach all paragraphs from the DOM

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>detach demo</title>
    <style>
    p {
    background: yellow;
    margin: 6px 0;
    }
    p.off {
    background: black;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    how are
    <p>you?</p>
    <button>Attach/detach paragraphs</button>

    <script>
    $( "p" ).click(function() {
    $( this ).toggleClass( "off" );
    });
    var p;
    $( "button" ).click(function() {
    if ( p ) {
    p.appendTo( "body" );
    p = null;
    } else {
    p = $( "p" ).detach();
    }
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional selector: string

      A selector expression that filters the set of matched elements to be removed.

    Returns JQuery<TElement>

  • dialog(): JQuery<HTMLElement>
  • dialog(methodName: "close"): JQuery<HTMLElement>
  • dialog(methodName: "destroy"): JQuery<HTMLElement>
  • dialog(methodName: "isOpen"): boolean
  • dialog(methodName: "moveToTop"): JQuery<HTMLElement>
  • dialog(methodName: "open"): JQuery<HTMLElement>
  • dialog(methodName: "widget"): JQuery<HTMLElement>
  • dialog(methodName: string): JQuery<HTMLElement>
  • dialog(options: DialogOptions): JQuery<HTMLElement>
  • dialog(optionLiteral: string, optionName: string): any
  • dialog(optionLiteral: string, options: DialogOptions): any
  • dialog(optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
  • Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "close"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "destroy"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "isOpen"

    Returns boolean

  • Parameters

    • methodName: "moveToTop"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "open"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "widget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: string

    Returns JQuery<HTMLElement>

  • Parameters

    Returns JQuery<HTMLElement>

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery<HTMLElement>

  • disableSelection(): JQuery<HTMLElement>
  • disableSelection(): JQuery<TElement>
  • Returns JQuery<HTMLElement>

  • Prevents the user from selection any text of this element.

    Returns JQuery<TElement>

    this for chaining.

  • draggable(): JQuery<HTMLElement>
  • draggable(methodName: "destroy"): void
  • draggable(methodName: "disable"): void
  • draggable(methodName: "enable"): void
  • draggable(methodName: "widget"): JQuery<HTMLElement>
  • draggable(methodName: string): JQuery<HTMLElement>
  • draggable(options: DraggableOptions): JQuery<HTMLElement>
  • draggable(optionLiteral: string, optionName: string): any
  • draggable(optionLiteral: string, options: DraggableOptions): any
  • draggable(optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
  • Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "destroy"

    Returns void

  • Parameters

    • methodName: "disable"

    Returns void

  • Parameters

    • methodName: "enable"

    Returns void

  • Parameters

    • methodName: "widget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: string

    Returns JQuery<HTMLElement>

  • Parameters

    Returns JQuery<HTMLElement>

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery<HTMLElement>

  • droppable(): JQuery<HTMLElement>
  • droppable(methodName: "destroy"): void
  • droppable(methodName: "disable"): void
  • droppable(methodName: "enable"): void
  • droppable(methodName: "widget"): JQuery<HTMLElement>
  • droppable(methodName: string): JQuery<HTMLElement>
  • droppable(options: DroppableOptions): JQuery<HTMLElement>
  • droppable(optionLiteral: string, optionName: string): any
  • droppable(optionLiteral: string, options: DraggableOptions): any
  • droppable(optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
  • Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "destroy"

    Returns void

  • Parameters

    • methodName: "disable"

    Returns void

  • Parameters

    • methodName: "enable"

    Returns void

  • Parameters

    • methodName: "widget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: string

    Returns JQuery<HTMLElement>

  • Parameters

    Returns JQuery<HTMLElement>

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery<HTMLElement>

  • each(funсtion: ((this: TElement, index: number, element: TElement) => false | void)): JQuery<TElement>
  • Iterate over a jQuery object, executing a function for each matched element.

    see

    ``

    since

    1.0

    example

    ​ ````Iterate over three divs and sets their color property.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>each demo</title>
    <style>
    div {
    color: red;
    text-align: center;
    cursor: pointer;
    font-weight: bolder;
    width: 300px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>Click here</div>
    <div>to iterate through</div>
    <div>these divs.</div>

    <script>
    $( document.body ).click(function() {
    $( "div" ).each(function( i ) {
    if ( this.style.color !== "blue" ) {
    this.style.color = "blue";
    } else {
    this.style.color = "";
    }
    });
    });
    </script>

    </body>
    </html>
    example

    ​ ````To access a jQuery object instead of the regular DOM element, use $( this ). For example:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>each demo</title>
    <style>
    ul {
    font-size: 18px;
    margin: 0;
    }
    span {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
    }
    .example {
    font-style: italic;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    To do list: <span>(click here to change)</span>
    <ul>
    <li>Eat</li>
    <li>Sleep</li>
    <li>Be merry</li>
    </ul>

    <script>
    $( "span" ).click(function() {
    $( "li" ).each(function() {
    $( this ).toggleClass( "example" );
    });
    });
    </script>

    </body>
    </html>
    example

    ​ ````Use return false to break out of each() loops early.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>each demo</title>
    <style>
    div {
    width: 40px;
    height: 40px;
    margin: 5px;
    float: left;
    border: 2px blue solid;
    text-align: center;
    }
    span {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>Change colors</button>
    <span></span>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div id="stop">Stop here</div>
    <div></div>
    <div></div>
    <div></div>

    <script>
    $( "button" ).click(function() {
    $( "div" ).each(function( index, element ) {
    // element == this
    $( element ).css( "backgroundColor", "yellow" );
    if ( $( this ).is( "#stop" ) ) {
    $( "span" ).text( "Stopped at div index #" + index );
    return false;
    }
    });
    });
    </script>

    </body>
    </html>

    Parameters

    • funсtion: ((this: TElement, index: number, element: TElement) => false | void)

      A function to execute for each matched element.

        • (this: TElement, index: number, element: TElement): false | void
        • Parameters

          • this: TElement
          • index: number
          • element: TElement

          Returns false | void

    Returns JQuery<TElement>

  • effect(options: any): JQuery<TElement>
  • effect(effect: string, options?: any, duration?: number, complete?: Function): JQuery<TElement>
  • effect(effect: string, options?: any, duration?: string, complete?: Function): JQuery<TElement>
  • Parameters

    • options: any

    Returns JQuery<TElement>

  • Parameters

    • effect: string
    • Optional options: any
    • Optional duration: number
    • Optional complete: Function

    Returns JQuery<TElement>

  • Parameters

    • effect: string
    • Optional options: any
    • Optional duration: string
    • Optional complete: Function

    Returns JQuery<TElement>

  • Remove all child nodes of the set of matched elements from the DOM.

    see

    ``

    since

    1.0

    example

    ​ ````Removes all child nodes (including text nodes) from all paragraphs

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>empty demo</title>
    <style>
    p {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>
    Hello, <span>Person</span> <em>and person</em>.
    </p>

    <button>Call empty() on above paragraph</button>

    <script>
    $( "button" ).click(function() {
    $( "p" ).empty();
    });
    </script>

    </body>
    </html>

    Returns JQuery<TElement>

  • enableSelection(): JQuery<HTMLElement>
  • enableSelection(): JQuery<TElement>
  • Returns JQuery<HTMLElement>

  • Allows the user to select text of this element again.

    Returns JQuery<TElement>

    this for chaining.

  • End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

    see

    ``

    since

    1.0

    example

    ​ ````Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>end demo</title>
    <style>
    p, div {
    margin: 1px;
    padding: 1px;
    font-weight: bold;
    font-size: 16px;
    }
    div {
    color: blue;
    }
    b {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>
    Hi there <span>how</span> are you <span>doing</span>?
    </p>

    <p>
    This <span>span</span> is one of
    several <span>spans</span> in this
    <span>sentence</span>.
    </p>

    <div>
    Tags in jQuery object initially: <b></b>
    </div>

    <div>
    Tags in jQuery object after find: <b></b>
    </div>

    <div>
    Tags in jQuery object after end: <b></b>
    </div>

    <script>
    jQuery.fn.showTags = function( n ) {
    var tags = this.map(function() {
    return this.tagName;
    })
    .get()
    .join( ", " );
    $( "b:eq( " + n + " )" ).text( tags );
    return this;
    };

    $( "p" )
    .showTags( 0 )
    .find( "span" )
    .showTags( 1 )
    .css( "background", "yellow" )
    .end()
    .showTags( 2 )
    .css( "font-style", "italic" );
    </script>

    </body>
    </html>
    example

    ​ ````Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>end demo</title>
    <style>
    p {
    margin: 10px;
    padding: 10px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p><span>Hello</span>, how are you?</p>

    <script>
    $( "p" )
    .find( "span" )
    .end()
    .css( "border", "2px red solid" );
    </script>

    </body>
    </html>

    Returns JQuery<TElement>

  • eq(index: number): JQuery<TElement>
  • Reduce the set of matched elements to the one at the specified index.

    see

    ``

    since

    1.1.2

    since

    1.4

    example

    ​ ````Turn the div with index 2 blue by adding an appropriate class.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>eq demo</title>
    <style>
    div {
    width: 60px;
    height: 60px;
    margin: 10px;
    float: left;
    border: 2px solid blue;
    }
    .blue {
    background: blue;
    }
    </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>

    <script>
    $( "body" ).find( "div" ).eq( 2 ).addClass( "blue" );
    </script>

    </body>
    </html>

    Parameters

    • index: number

      An integer indicating the 0-based position of the element. An integer indicating the position of the element, counting backwards from the last element in the set.

    Returns JQuery<TElement>

  • Reduce the set of matched elements to the even ones in the set, numbered from zero.

    see

    ``

    since

    3.5

    example

    ​ ````Highlight the even items in a list.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>even demo</title>
    <style>
    .highlight {
    background-color: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    </head>
    <body>

    <ul>
    <li>Look:</li>
    <li>This is some text in a list.</li>
    <li>This is a note about it.</li>
    <li>This is another note about it.</li>
    </ul>

    <script>
    $( "ul li" ).even().addClass( "highlight" );
    </script>

    </body>
    </html>

    Returns JQuery<TElement>

  • extend(obj: object): JQuery<TElement>
  • Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.

    see

    ``

    since

    1.0

    example

    ​ ````Add two methods to the jQuery prototype ($.fn) object and then use one of them.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery.fn.extend demo</title>
    <style>
    label {
    display: block;
    margin: .5em;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <label><input type="checkbox" name="foo"> Foo</label>
    <label><input type="checkbox" name="bar"> Bar</label>

    <script>
    jQuery.fn.extend({
    check: function() {
    return this.each(function() {
    this.checked = true;
    });
    },
    uncheck: function() {
    return this.each(function() {
    this.checked = false;
    });
    }
    });

    // Use the newly created .check() method
    $( "input[type='checkbox']" ).check();
    </script>

    </body>
    </html>

    Parameters

    • obj: object

      An object to merge onto the jQuery prototype.

    Returns JQuery<TElement>

  • extractSelectedText(): undefined | string
  • Removes and returns the currently selected text of an INPUT or TEXTAREA element.

    Returns undefined | string

    The text that was selected. Empty string if no text is selected. undefined if this DOM element is not supported.

  • fadeIn(duration: JQuery.Duration, easing: string, complete?: ((this: TElement) => void)): JQuery<TElement>
  • fadeIn(duration_easing: string | number, complete: ((this: TElement) => void)): JQuery<TElement>
  • fadeIn(duration_easing_complete_options?: string | number | EffectsOptions<TElement> | ((this: TElement) => void)): JQuery<TElement>
  • Display the matched elements by fading them to opaque.

    see

    ``

    since

    1.4.3

    Parameters

    • duration: JQuery.Duration

      A string or number determining how long the animation will run.

    • easing: string

      A string indicating which easing function to use for the transition.

    • Optional complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Display the matched elements by fading them to opaque.

    see

    ``

    since

    1.0

    since

    1.4.3

    example

    ​ ````Fades a red block in over the text. Once the animation is done, it quickly fades in more text on top.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>fadeIn demo</title>
    <style>
    p {
    position: relative;
    width: 400px;
    height: 90px;
    }
    div {
    position: absolute;
    width: 400px;
    height: 65px;
    font-size: 36px;
    text-align: center;
    color: yellow;
    background: red;
    padding-top: 25px;
    top: 0;
    left: 0;
    display: none;
    }
    span {
    display: none;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>
    Let it be known that the party of the first part
    and the party of the second part are henceforth
    and hereto directed to assess the allegations
    for factual correctness... (<a href="#">click!</a>)
    <div><span>CENSORED!</span></div>
    </p>

    <script>
    $( "a" ).click(function() {
    $( "div" ).fadeIn( 3000, function() {
    $( "span" ).fadeIn( 100 );
    });
    return false;
    });
    </script>

    </body>
    </html>

    Parameters

    • duration_easing: string | number

      @param duration_easing

      • duration — A string or number determining how long the animation will run.
      • easing — A string indicating which easing function to use for the transition.
    • complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Display the matched elements by fading them to opaque.

    see

    ``

    since

    1.0

    since

    1.4.3

    example

    ​ ````Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>fadeIn demo</title>
    <style>
    span {
    color: red;
    cursor: pointer;
    }
    div {
    margin: 3px;
    width: 80px;
    display: none;
    height: 80px;
    float: left;
    }
    #one {
    background: #f00;
    }
    #two {
    background: #0f0;
    }
    #three {
    background: #00f;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <span>Click here...</span>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>

    <script>
    $( document.body ).click(function() {
    $( "div:hidden:first" ).fadeIn( "slow" );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional duration_easing_complete_options: string | number | EffectsOptions<TElement> | ((this: TElement) => void)

      @param duration_easing_complete_options

      • duration — A string or number determining how long the animation will run.
      • easing — A string indicating which easing function to use for the transition.
      • complete — A function to call once the animation is complete, called once per matched element.
      • options — A map of additional options to pass to the method.

    Returns JQuery<TElement>

  • fadeOut(duration: JQuery.Duration, easing: string, complete?: ((this: TElement) => void)): JQuery<TElement>
  • fadeOut(duration_easing: string | number, complete: ((this: TElement) => void)): JQuery<TElement>
  • fadeOut(duration_easing_complete_options?: string | number | EffectsOptions<TElement> | ((this: TElement) => void)): JQuery<TElement>
  • Hide the matched elements by fading them to transparent.

    see

    ``

    since

    1.4.3

    example

    ​ ````Fades out two divs, one with a "linear" easing and one with the default, "swing," easing.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>fadeOut demo</title>
    <style>
    .box,
    button {
    float: left;
    margin: 5px 10px 5px 0;
    }
    .box {
    height: 80px;
    width: 80px;
    background: #090;
    }
    #log {
    clear: left;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button id="btn1">fade out</button>
    <button id="btn2">show</button>

    <div id="log"></div>

    <div id="box1" class="box">linear</div>
    <div id="box2" class="box">swing</div>

    <script>
    $( "#btn1" ).click(function() {
    function complete() {
    $( "<div>" ).text( this.id ).appendTo( "#log" );
    }
    $( "#box1" ).fadeOut( 1600, "linear", complete );
    $( "#box2" ).fadeOut( 1600, complete );
    });

    $( "#btn2" ).click(function() {
    $( "div" ).show();
    $( "#log" ).empty();
    });
    </script>

    </body>
    </html>

    Parameters

    • duration: JQuery.Duration

      A string or number determining how long the animation will run.

    • easing: string

      A string indicating which easing function to use for the transition.

    • Optional complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Hide the matched elements by fading them to transparent.

    see

    ``

    since

    1.0

    since

    1.4.3

    example

    ​ ````Fades out spans in one section that you click on.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>fadeOut demo</title>
    <style>
    span {
    cursor: pointer;
    }
    span.hilite {
    background: yellow;
    }
    div {
    display: inline;
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <h3>Find the modifiers - <div></div></h3>
    <p>
    If you <span>really</span> want to go outside
    <span>in the cold</span> then make sure to wear
    your <span>warm</span> jacket given to you by
    your <span>favorite</span> teacher.
    </p>

    <script>
    $( "span" ).click(function() {
    $( this ).fadeOut( 1000, function() {
    $( "div" ).text( "'" + $( this ).text() + "' has faded!" );
    $( this ).remove();
    });
    });
    $( "span" ).hover(function() {
    $( this ).addClass( "hilite" );
    }, function() {
    $( this ).removeClass( "hilite" );
    });
    </script>

    </body>
    </html>

    Parameters

    • duration_easing: string | number

      @param duration_easing

      • duration — A string or number determining how long the animation will run.
      • easing — A string indicating which easing function to use for the transition.
    • complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Hide the matched elements by fading them to transparent.

    see

    ``

    since

    1.0

    since

    1.4.3

    example

    ​ ````Animates all paragraphs to fade out, completing the animation within 600 milliseconds.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>fadeOut demo</title>
    <style>
    p {
    font-size: 150%;
    cursor: pointer;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>
    If you click on this paragraph
    you'll see it just fade away.
    </p>

    <script>
    $( "p" ).click(function() {
    $( "p" ).fadeOut( "slow" );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional duration_easing_complete_options: string | number | EffectsOptions<TElement> | ((this: TElement) => void)

      @param duration_easing_complete_options

      • duration — A string or number determining how long the animation will run.
      • easing — A string indicating which easing function to use for the transition.
      • complete — A function to call once the animation is complete, called once per matched element.
      • options — A map of additional options to pass to the method.

    Returns JQuery<TElement>

  • fadeTo(duration: JQuery.Duration, opacity: number, easing: string, complete?: ((this: TElement) => void)): JQuery<TElement>
  • fadeTo(duration: JQuery.Duration, opacity: number, complete?: ((this: TElement) => void)): JQuery<TElement>
  • Adjust the opacity of the matched elements.

    see

    ``

    since

    1.4.3

    Parameters

    • duration: JQuery.Duration

      A string or number determining how long the animation will run.

    • opacity: number

      A number between 0 and 1 denoting the target opacity.

    • easing: string

      A string indicating which easing function to use for the transition.

    • Optional complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Adjust the opacity of the matched elements.

    see

    ``

    since

    1.0

    example

    ​ ````Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>fadeTo demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>
    Click this paragraph to see it fade.
    </p>

    <p>
    Compare to this one that won't fade.
    </p>

    <script>
    $( "p:first" ).click(function() {
    $( this ).fadeTo( "slow", 0.33 );
    });
    </script>

    </body>
    </html>
    example

    ​ ````Fade div to a random opacity on each click, completing the animation within 200 milliseconds.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>fadeTo demo</title>
    <style>
    p {
    width: 80px;
    margin: 0;
    padding: 5px;
    }
    div {
    width: 40px;
    height: 40px;
    position: absolute;
    }
    #one {
    top: 0;
    left: 0;
    background: #f00;
    }
    #two {
    top: 20px;
    left: 20px;
    background: #0f0;
    }
    #three {
    top: 40px;
    left:40px;
    background:#00f;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>And this is the library that John built...</p>

    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>

    <script>
    $( "div" ).click(function() {
    $( this ).fadeTo( "fast", Math.random() );
    });
    </script>

    </body>
    </html>
    example

    ​ ````Find the right answer! The fade will take 250 milliseconds and change various styles when it completes.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>fadeTo demo</title>
    <style>
    div, p {
    width: 80px;
    height: 40px;
    top: 0;
    margin: 0;
    position: absolute;
    padding-top: 8px;
    }
    p {
    background: #fcc;
    text-align: center;
    }
    div {
    background: blue;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Wrong</p>
    <div></div>
    <p>Wrong</p>
    <div></div>
    <p>Right!</p>
    <div></div>

    <script>
    var getPos = function( n ) {
    return (Math.floor( n ) * 90) + "px";
    };
    $( "p" ).each(function( n ) {
    var r = Math.floor( Math.random() * 3 );
    var tmp = $( this ).text();
    $( this ).text( $( "p:eq(" + r + ")" ).text() );
    $( "p:eq(" + r + ")" ).text( tmp );
    $( this ).css( "left", getPos( n ) );
    });
    $( "div" )
    .each(function( n ) {
    $( this ).css( "left", getPos( n ) );
    })
    .css( "cursor", "pointer" )
    .click( function() {
    $( this ).fadeTo( 250, 0.25, function() {
    $( this )
    .css( "cursor", "" )
    .prev()
    .css({
    "font-weight": "bolder",
    "font-style": "italic"
    });
    });
    });
    </script>

    </body>
    </html>

    Parameters

    • duration: JQuery.Duration

      A string or number determining how long the animation will run.

    • opacity: number

      A number between 0 and 1 denoting the target opacity.

    • Optional complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • fadeToggle(duration: JQuery.Duration, easing: string, complete?: ((this: TElement) => void)): JQuery<TElement>
  • fadeToggle(duration_easing: string | number, complete: ((this: TElement) => void)): JQuery<TElement>
  • fadeToggle(duration_easing_complete_options?: string | number | EffectsOptions<TElement> | ((this: TElement) => void)): JQuery<TElement>
  • Display or hide the matched elements by animating their opacity.

    see

    ``

    since

    1.4.4

    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 "finished" message upon completion.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>fadeToggle demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>fadeToggle p1</button>
    <button>fadeToggle p2</button>
    <p>This paragraph has a slow, linear fade.</p>
    <p>This paragraph has a fast animation.</p>
    <div id="log"></div>

    <script>
    $( "button:first" ).click(function() {
    $( "p:first" ).fadeToggle( "slow", "linear" );
    });
    $( "button:last" ).click(function() {
    $( "p:last" ).fadeToggle( "fast", function() {
    $( "#log" ).append( "<div>finished</div>" );
    });
    });
    </script>

    </body>
    </html>

    Parameters

    • duration: JQuery.Duration

      A string or number determining how long the animation will run.

    • easing: string

      A string indicating which easing function to use for the transition.

    • Optional complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Display or hide the matched elements by animating their opacity.

    see

    ``

    since

    1.0

    since

    1.4.3

    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 "finished" message upon completion.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>fadeToggle demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>fadeToggle p1</button>
    <button>fadeToggle p2</button>
    <p>This paragraph has a slow, linear fade.</p>
    <p>This paragraph has a fast animation.</p>
    <div id="log"></div>

    <script>
    $( "button:first" ).click(function() {
    $( "p:first" ).fadeToggle( "slow", "linear" );
    });
    $( "button:last" ).click(function() {
    $( "p:last" ).fadeToggle( "fast", function() {
    $( "#log" ).append( "<div>finished</div>" );
    });
    });
    </script>

    </body>
    </html>

    Parameters

    • duration_easing: string | number

      @param duration_easing

      • duration — A string or number determining how long the animation will run.
      • easing — A string indicating which easing function to use for the transition.
    • complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Display or hide the matched elements by animating their opacity.

    see

    ``

    since

    1.0

    since

    1.4.3

    Parameters

    • Optional duration_easing_complete_options: string | number | EffectsOptions<TElement> | ((this: TElement) => void)

      @param duration_easing_complete_options

      • duration — A string or number determining how long the animation will run.
      • easing — A string indicating which easing function to use for the transition.
      • complete — A function to call once the animation is complete, called once per matched element.
      • options — A map of additional options to pass to the method.

    Returns JQuery<TElement>

  • The file upload widget is initialized by calling the fileupload method on a jQuery collection with the target HTML element.

    The target element is usually a container element holding the file upload form, or the file upload form itself, but it can also be just the file input element itself for a customized UI and if a URL is provided as options parameter.

    Parameters

    • Optional settings: Partial<FileUploadOptions>

      Options for configuring the file upload.

    Returns JQuery<TElement>

    This JQuery instance for chaining.

  • Sets the given option to the given value.

    Type Parameters

    Parameters

    • method: "option"

      The method to call on this file upload instance.

    • optionName: K

      Name of an option to set.

    • optionValue: FileUploadOptions[K]

    Returns JQuery<TElement>

    The value of the given option

  • Retrieves the value of the given option.

    Type Parameters

    Parameters

    • method: "option"

      The method to call on this file upload instance.

    • optionName: K

      Name of an option to retrieve.

    Returns FileUploadOptions[K]

    The value of the given option.

  • Sets the given options on this file upload instance.

    Parameters

    • method: "option"

      The method to call on this file upload instance.

    • options: Partial<FileUploadOptions>

      Options to apply.

    Returns JQuery<TElement>

    This JQuery instance for chaining.

  • Return the current set of options. This includes default options.

    Parameters

    • method: "option"

      The method to call on this file upload instance.

    Returns FileUploadOptions

    An object with all options.

  • To remove the file upload widget functionality from the element node, call the destroy method. This will also remove any added event listeners.

    Parameters

    • method: "destroy"

      The method to call on this file upload instance.

    Returns JQuery<TElement>

    This JQuery instance for chaining.

  • As other widgets based on jQuery UI Widget, the file upload widget can also be enabled.

    Parameters

    • method: "enable"

      The method to call on this file upload instance.

    Returns JQuery<TElement>

  • As other widgets based on jQuery UI Widget, the file upload widget can also be disabled.

    Parameters

    • method: "disable"

      The method to call on this file upload instance.

    Returns JQuery<TElement>

  • Finds the overall progress of all uploads.

    Parameters

    • method: "progress"

      The method to call on this file upload instance.

    Returns UploadProgress

    The overall progress of all uploads.

  • Finds the number of currently active uploads.

    Parameters

    • method: "active"

      The method to call on this file upload instance.

    Returns number

    The number of active uploads.

  • Usually, file uploads are invoked by selecting files via file input button or by dropping files on the drop zone.

    However it is also possible to upload files programmatically for browsers with support for XHR file uploads.

    This uploads files by adding them to the upload queue, the same way that files are added via the file input button or drag & drop.

    Parameters

    • method: "add"

      The method to call on this file upload instance.

    • filesAndOptions: FileUploadData

      A list of files to add to this widget. You can also override options of this widget.

    Returns JQuery<TElement>

    This JQuery instance for chaining.

  • Usually, file uploads are invoked by selecting files via file input button or by dropping files on the drop zone.

    However it is also possible to upload files programmatically for browsers with support for XHR file uploads.

    This sends the file directly to the server.

    Note: The send API method sends the given files directly, without splitting them up into multiple requests. So if your files argument is made up of 3 files, it will still only send one request. If the multipart option is true, it will still send all 3 files as part of one multipart request, else it will only send the first file. So if you need to send files with multiple requests, either call the send API method multiple times, or use the add API method instead.

    Parameters

    • method: "send"

      The method to call on this file upload instance.

    • filesAndOptions: FileUploadData

      A list of files to add to this widget. You can also override options of this widget.

    Returns jqXHR<any>

    A jqXHR object that allows to bind callbacks to the AJAX file upload requests.

  • filter(selector_elements_selection_function: string | JQuery<HTMLElement> | TypeOrArray<Element> | ((this: TElement, index: number, element: TElement) => boolean)): JQuery<TElement>
  • Reduce the set of matched elements to those that match the selector or pass the function's test.

    see

    ``

    since

    1.0

    since

    1.4

    example

    ​ ````Change the color of all divs; then add a border to those with a "middle" class.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>filter demo</title>
    <style>
    div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    border: 2px white solid;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div></div>
    <div class="middle"></div>
    <div class="middle"></div>
    <div class="middle"></div>
    <div class="middle"></div>
    <div></div>

    <script>
    $( "div" )
    .css( "background", "#c8ebcc" )
    .filter( ".middle" )
    .css( "border-color", "red" );
    </script>

    </body>
    </html>
    example

    ​ ````Change the color of all divs; then add a border to the second one (index == 1) and the div with an id of "fourth."

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>filter demo</title>
    <style>
    div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    border: 3px white solid;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
    <div id="fourth"></div>
    <div id="fifth"></div>
    <div id="sixth"></div>

    <script>
    $( "div" )
    .css( "background", "#b4b0da" )
    .filter(function( index ) {
    return index === 1 || $( this ).attr( "id" ) === "fourth";
    })
    .css( "border", "3px double red" );
    </script>

    </body>
    </html>
    example

    ​ ````Select all divs and filter the selection with a DOM element, keeping only the one with an id of "unique".

    $( "div" ).filter( document.getElementById( "unique" ) );
    
    example

    ​ ````Select all divs and filter the selection with a jQuery object, keeping only the one with an id of "unique".

    $( "div" ).filter( $( "#unique" ) );
    

    Parameters

    • selector_elements_selection_function: string | JQuery<HTMLElement> | TypeOrArray<Element> | ((this: TElement, index: number, element: TElement) => boolean)

      @param selector_elements_selection_function

      • selector — A string containing a selector expression to match the current set of elements against.
      • elements — One or more DOM elements to match the current set of elements against.
      • selection — An existing jQuery object to match the current set of elements against.
      • function — A function used as a test for each element in the set. this is the current DOM element.

    Returns JQuery<TElement>

  • find<K>(selector_element: K | JQuery<K>): JQuery<HTMLElementTagNameMap[K]>
  • find<K>(selector_element: K | JQuery<K>): JQuery<SVGElementTagNameMap[K]>
  • find<E>(selector_element: string | Element | E | JQuery<E>): JQuery<E>
  • Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

    see

    ``

    since

    1.0

    since

    1.6

    example

    ​ ````Starts with all paragraphs and searches for descendant span elements, same as $( "p span" )

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>find demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p><span>Hello</span>, how are you?</p>
    <p>Me? I'm <span>good</span>.</p>

    <script>
    $( "p" ).find( "span" ).css( "color", "red" );
    </script>

    </body>
    </html>
    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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>find demo</title>
    <style>
    span {
    color: blue;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p><span>Hello</span>, how are you?</p>
    <p>Me? I'm <span>good</span>.</p>
    <div>Did you <span>eat</span> yet?</div>

    <script>
    var spans = $( "span" );
    $( "p" ).find( spans ).css( "color", "red" );
    </script>

    </body>
    </html>
    example

    ​ ````Add spans around each word then add a hover and italicize words with the letter t.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>find demo</title>
    <style>
    p {
    font-size: 20px;
    width: 200px;
    color: blue;
    font-weight: bold;
    margin: 0 10px;
    }
    .hilite {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>
    When the day is short
    find that which matters to you
    or stop believing
    </p>

    <script>
    var newText = $( "p" ).text().split( " " ).join( "</span> <span>" );
    newText = "<span>" + newText + "</span>";

    $( "p" )
    .html( newText )
    .find( "span" )
    .hover(function() {
    $( this ).addClass( "hilite" );
    }, function() {
    $( this ).removeClass( "hilite" );
    })
    .end()
    .find( ":contains('t')" )
    .css({
    "font-style": "italic",
    "font-weight": "bolder"
    });
    </script>

    </body>
    </html>

    Type Parameters

    • K extends keyof HTMLElementTagNameMap

    Parameters

    • selector_element: K | JQuery<K>

      @param selector_element

      • selector — A string containing a selector expression to match elements against.
      • element — An element or a jQuery object to match elements against.

    Returns JQuery<HTMLElementTagNameMap[K]>

  • Type Parameters

    • K extends keyof SVGElementTagNameMap

    Parameters

    • selector_element: K | JQuery<K>

    Returns JQuery<SVGElementTagNameMap[K]>

  • Type Parameters

    • E extends HTMLElement

    Parameters

    • selector_element: string | Element | E | JQuery<E>

    Returns JQuery<E>

  • finish(queue?: string): JQuery<TElement>
  • Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.

    see

    ``

    since

    1.9

    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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>finish demo</title>
    <style>
    .box {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 15px;
    height: 15px;
    background: black;
    }
    #path {
    height: 244px;
    font-size: 70%;
    border-left: 2px dashed red;
    border-bottom: 2px dashed green;
    border-right: 2px dashed blue;
    }
    button {
    width: 12em;
    display: block;
    text-align: left;
    margin: 0 auto;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div class="box"></div>
    <div id="path">
    <button id="go">Go</button>
    <br>
    <button id="bstt" class="b">.stop( true,true )</button>
    <button id="bcf" class="b">.clearQueue().finish()</button>
    <br>
    <button id="bstf" class="b">.stop( true, false )</button>
    <button id="bcs" class="b">.clearQueue().stop()</button>
    <br>
    <button id="bsff" class="b">.stop( false, false )</button>
    <button id="bs" class="b">.stop()</button>
    <br>
    <button id="bsft" class="b">.stop( false, true )</button>
    <br>
    <button id="bf" class="b">.finish()</button>
    </div>

    <script>
    var horiz = $( "#path" ).width() - 20,
    vert = $( "#path" ).height() - 20;

    var btns = {
    bstt: function() {
    $( "div.box" ).stop( true, true );
    },
    bs: function() {
    $( "div.box" ).stop();
    },
    bsft: function() {
    $( "div.box" ).stop( false, true );
    },
    bf: function() {
    $( "div.box" ).finish();
    },
    bcf: function() {
    $( "div.box" ).clearQueue().finish();
    },
    bsff: function() {
    $( "div.box" ).stop( false, false );
    },
    bstf: function() {
    $( "div.box" ).stop( true, false );
    },
    bcs: function() {
    $( "div.box" ).clearQueue().stop();
    }
    };

    $( "button.b" ).on( "click", function() {
    btns[ this.id ]();
    });

    $( "#go" ).on( "click", function() {
    $( ".box" )
    .clearQueue()
    .stop()
    .css({
    left: 10,
    top: 10
    })
    .animate({
    top: vert
    }, 3000 )
    .animate({
    left: horiz
    }, 3000 )
    .animate({
    top: 10
    }, 3000 );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional queue: string

      The name of the queue in which to stop animations.

    Returns JQuery<TElement>

  • Reduce the set of matched elements to the first in the set.

    see

    ``

    since

    1.4

    example

    ​ ````Highlight the first span in a paragraph.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>first demo</title>
    <style>
    .highlight{
    background-color: yellow
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>
    <span>Look:</span>
    <span>This is some text in a paragraph.</span>
    <span>This is a note about it.</span>
    </p>

    <script>
    $( "p span" ).first().addClass( "highlight" );
    </script>

    </body>
    </html>

    Returns JQuery<TElement>

  • focus<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "focus">): JQuery<TElement>
  • focus(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "focus">): JQuery<TElement>
  • focus(delay: number, callback?: Function): JQuery<HTMLElement>
  • Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "focus">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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

    ​ ````Fire focus.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>focus demo</title>
    <style>
    span {
    display: none;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p><input type="text"> <span>focus fire</span></p>
    <p><input type="password"> <span>focus fire</span></p>

    <script>
    $( "input" ).focus(function() {
    $( this ).next( "span" ).css( "display", "inline" ).fadeOut( 1000 );
    });
    </script>

    </body>
    </html>
    example

    ​ ````To stop people from writing in text input boxes, try:

    $( "input[type=text]" ).focus(function() {
    $( this ).blur();
    });
    example

    ​ ````To focus on a login input box with id 'login' on page startup, try:

    $( document ).ready(function() {
    $( "#login" ).focus();
    });

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "focus">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Parameters

    • delay: number
    • Optional callback: Function

    Returns JQuery<HTMLElement>

  • focusin<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "focusin">): JQuery<TElement>
  • focusin(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "focusin">): JQuery<TElement>
  • Bind an event handler to the "focusin" event.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "focusin">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "focusin" event.

    see

    ``

    since

    1.4

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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

    ​ ````Watch for a focus to occur within the paragraphs on the page.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>focusin demo</title>
    <style>
    span {
    display: none;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p><input type="text"> <span>focusin fire</span></p>
    <p><input type="password"> <span>focusin fire</span></p>

    <script>
    $( "p" ).focusin(function() {
    $( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "focusin">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • focusout<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "focusout">): JQuery<TElement>
  • focusout(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "focusout">): JQuery<TElement>
  • Bind an event handler to the "focusout" JavaScript event.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "focusout">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "focusout" JavaScript event.

    see

    ``

    since

    1.4

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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

    ​ ````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.)

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>focusout demo</title>
    <style>
    .inputs {
    float: left;
    margin-right: 1em;
    }
    .inputs p {
    margin-top: 0;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div class="inputs">
    <p>
    <input type="text"><br>
    <input type="text">
    </p>
    <p>
    <input type="password">
    </p>
    </div>
    <div id="focus-count">focusout fire</div>
    <div id="blur-count">blur fire</div>

    <script>
    var focus = 0,
    blur = 0;
    $( "p" )
    .focusout(function() {
    focus++;
    $( "#focus-count" ).text( "focusout fired: " + focus + "x" );
    })
    .blur(function() {
    blur++;
    $( "#blur-count" ).text( "blur fired: " + blur + "x" );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "focusout">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • get(index: number): undefined | TElement
  • get(): TElement[]
  • Retrieve one of the elements matched by the jQuery object.

    see

    ``

    since

    1.0

    example

    ​ ````Display the tag name of the click element.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>get demo</title>
    <style>
    span {
    color: red;
    }
    div {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <span>&nbsp;</span>
    <p>In this paragraph is an <span>important</span> section</p>
    <div><input type="text"></div>

    <script>
    $( "*", document.body ).click(function( event ) {
    event.stopPropagation();
    var domElement = $( this ).get( 0 );
    $( "span:first" ).text( "Clicked on - " + domElement.nodeName );
    });
    </script>

    </body>
    </html>

    Parameters

    • index: number

      A zero-based integer indicating which element to retrieve.

    Returns undefined | TElement

  • 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.

    see

    ``

    since

    1.0

    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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>get demo</title>
    <style>
    span {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    Reversed - <span></span>

    <div>One</div>
    <div>Two</div>
    <div>Three</div>

    <script>
    function display( divs ) {
    var a = [];
    for ( var i = 0; i < divs.length; i++ ) {
    a.push( divs[ i ].innerHTML );
    }
    $( "span" ).text( a.join(" ") );
    }
    display( $( "div" ).get().reverse() );
    </script>

    </body>
    </html>

    Returns TElement[]

  • Finds the position of the cursor for an INPUT or TEXTAREA element in pixels, relative to the top left corner of the INPUT or TEXTAREA element.

    Returns CaretPosition

    The current position of the cursor in pixels, relative to the top left of the element.

  • getComputedStyle(styleName: string): string
  • Finds the computed value of a CSS style property.

    Parameters

    • styleName: string

      Name of a style.

    Returns string

    The value of the given style.

  • getCursorPosition(): number
  • Finds the position of the cursor for an INPUT or TEXTAREA element.

    Returns number

    The current position of the cursor, in characters from the first character of the first line.

  • Returns the selected text of an INPUT or TEXTAREA element.

    Returns undefined | JQueryRangy.Range

    The selected range, or undefined if this DOM element is not supported.

  • has(selector_contained: string | Element): JQuery<TElement>
  • Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.

    see

    ``

    since

    1.4

    example

    ​ ````Check if an element is inside another.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>has demo</title>
    <style>
    .full {
    border: 1px solid red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <ul><li>Does the UL contain an LI?</li></ul>

    <script>
    $( "ul" ).append( "<li>" +
    ( $( "ul" ).has( "li" ).length ? "Yes" : "No" ) +
    "</li>" );
    $( "ul" ).has( "li" ).addClass( "full" );
    </script>

    </body>
    </html>

    Parameters

    • selector_contained: string | Element

      @param selector_contained

      • selector — A string containing a selector expression to match elements against.
      • contained — A DOM element to match elements against.

    Returns JQuery<TElement>

  • hasClass(className: string): boolean
  • Determine whether any of the matched elements are assigned the given class.

    see

    ``

    since

    1.2

    example

    ​ ````Looks for the paragraph that contains 'selected' as a class.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>hasClass demo</title>
    <style>
    p {
    margin: 8px;
    font-size: 16px;
    }
    .selected {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>This paragraph is black and is the first paragraph.</p>
    <p class="selected">This paragraph is red and is the second paragraph.</p>
    <div id="result1">First paragraph has selected class: </div>
    <div id="result2">Second paragraph has selected class: </div>
    <div id="result3">At least one paragraph has selected class: </div>

    <script>
    $( "#result1" ).append( $( "p:first" ).hasClass( "selected" ).toString() );
    $( "#result2" ).append( $( "p:last" ).hasClass( "selected" ).toString() );
    $( "#result3" ).append( $( "p" ).hasClass( "selected" ).toString() ) ;
    </script>

    </body>
    </html>

    Parameters

    • className: string

      The class name to search for.

    Returns boolean

  • height(value_function: string | number | ((this: TElement, index: number, height: number) => string | number)): JQuery<TElement>
  • height(): undefined | number
  • Set the CSS height of every matched element.

    see

    ``

    since

    1.0

    since

    1.4.1

    example

    ​ ````To set the height of each div on click to 30px plus a color change.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>height demo</title>
    <style>
    div {
    width: 50px;
    height: 70px;
    float: left;
    margin: 5px;
    background: rgb(255,140,0);
    cursor: pointer;
    }
    </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>

    <script>
    $( "div" ).one( "click", function() {
    $( this ).height( 30 ).css({
    cursor: "auto",
    backgroundColor: "green"
    });
    });
    </script>

    </body>
    </html>

    Parameters

    • value_function: string | number | ((this: TElement, index: number, height: number) => string | number)

      @param value_function

      • value — An integer representing the number of pixels, or an integer with an optional unit of measure appended (as a string).
      • function — A function returning the height to set. Receives the index position of the element in the set and the old height as arguments. Within the function, this refers to the current element in the set.

    Returns JQuery<TElement>

  • Get the current computed height for the first element in the set of matched elements.

    see

    ``

    since

    1.0

    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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>height demo</title>
    <style>
    body {
    background: yellow;
    }
    button {
    font-size: 12px;
    margin: 2px;
    }
    p {
    width: 150px;
    border: 1px red solid;
    }
    div {
    color: red;
    font-weight: bold;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button id="getp">Get Paragraph Height</button>
    <button id="getd">Get Document Height</button>
    <button id="getw">Get Window Height</button>

    <div>&nbsp;</div>
    <p>
    Sample paragraph to test height
    </p>

    <script>
    function showHeight( element, height ) {
    $( "div" ).text( "The height for the " + element + " is " + height + "px." );
    }
    $( "#getp" ).click(function() {
    showHeight( "paragraph", $( "p" ).height() );
    });
    $( "#getd" ).click(function() {
    showHeight( "document", $( document ).height() );
    });
    $( "#getw" ).click(function() {
    showHeight( "window", $( window ).height() );
    });
    </script>

    </body>
    </html>

    Returns undefined | number

  • hide(duration: JQuery.Duration, easing: string, complete: ((this: TElement) => void)): JQuery<TElement>
  • hide(duration: JQuery.Duration, easing_complete: string | ((this: TElement) => void)): JQuery<TElement>
  • hide(duration_complete_options?: JQuery.Duration | EffectsOptions<TElement> | ((this: TElement) => void)): JQuery<TElement>
  • hide(options: any): JQuery<TElement>
  • hide(effect: string, options?: any, duration?: number, complete?: Function): JQuery<TElement>
  • hide(effect: string, options?: any, duration?: string, complete?: Function): JQuery<TElement>
  • Hide the matched elements.

    see

    ``

    since

    1.4.3

    Parameters

    • duration: JQuery.Duration

      A string or number determining how long the animation will run.

    • easing: string

      A string indicating which easing function to use for the transition.

    • complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Hide the matched elements.

    see

    ``

    since

    1.0

    since

    1.4.3

    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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>hide demo</title>
    <style>
    span {
    background: #def3ca;
    padding: 3px;
    float: left;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button id="hider">Hide</button>
    <button id="shower">Show</button>
    <div>
    <span>Once</span> <span>upon</span> <span>a</span>
    <span>time</span> <span>there</span> <span>were</span>
    <span>three</span> <span>programmers...</span>
    </div>

    <script>
    $( "#hider" ).click(function() {
    $( "span:last-child" ).hide( "fast", function() {
    // Use arguments.callee so we don't need a named function
    $( this ).prev().hide( "fast", arguments.callee );
    });
    });
    $( "#shower" ).click(function() {
    $( "span" ).show( 2000 );
    });
    </script>

    </body>
    </html>
    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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>hide demo</title>
    <style>
    div {
    background: #ece023;
    width: 30px;
    height: 40px;
    margin: 2px;
    float: left;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div></div>

    <script>
    for ( var i = 0; i < 5; i++ ) {
    $( "<div>" ).appendTo( document.body );
    }
    $( "div" ).click(function() {
    $( this ).hide( 2000, function() {
    $( this ).remove();
    });
    });
    </script>

    </body>
    </html>

    Parameters

    • duration: JQuery.Duration

      A string or number determining how long the animation will run.

    • easing_complete: string | ((this: TElement) => void)

      @param easing_complete

      • easing — A string indicating which easing function to use for the transition.
      • complete — A function to call once the animation is complete, called once per matched element.

    Returns JQuery<TElement>

  • Hide the matched elements.

    see

    ``

    since

    1.0

    example

    ​ ````Hides all paragraphs then the link on click.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>hide demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    <a href="#">Click to hide me too</a>
    <p>Here is another paragraph</p>

    <script>
    $( "p" ).hide();
    $( "a" ).click(function( event ) {
    event.preventDefault();
    $( this ).hide();
    });
    </script>

    </body>
    </html>
    example

    ​ ````Animates all shown paragraphs to hide slowly, completing the animation within 600 milliseconds.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>hide demo</title>
    <style>
    p {
    background: #dad;
    font-weight: bold;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>Hide 'em</button>
    <p>Hiya</p>
    <p>Such interesting text, eh?</p>

    <script>
    $( "button" ).click(function() {
    $( "p" ).hide( "slow" );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional duration_complete_options: JQuery.Duration | EffectsOptions<TElement> | ((this: TElement) => void)

      @param duration_complete_options

      • duration — A string or number determining how long the animation will run.
      • complete — A function to call once the animation is complete, called once per matched element.
      • options — A map of additional options to pass to the method.

    Returns JQuery<TElement>

  • Parameters

    • options: any

    Returns JQuery<TElement>

  • Parameters

    • effect: string
    • Optional options: any
    • Optional duration: number
    • Optional complete: Function

    Returns JQuery<TElement>

  • Parameters

    • effect: string
    • Optional options: any
    • Optional duration: string
    • Optional complete: Function

    Returns JQuery<TElement>

  • hover(handlerIn: false | TypeEventHandler<TElement, null, TElement, TElement, "mouseenter">, handlerOut: false | TypeEventHandler<TElement, null, TElement, TElement, "mouseleave">): JQuery<TElement>
  • hover(handlerInOut: false | TypeEventHandler<TElement, null, TElement, TElement, "mouseenter" | "mouseleave">): JQuery<TElement>
  • Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated.

    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 `hoverIntent plugin`.

    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).

    example

    ​ ````To add a special style to list items that are being hovered over, try:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>hover demo</title>
    <style>
    ul {
    margin-left: 20px;
    color: blue;
    }
    li {
    cursor: default;
    }
    span {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class="fade">Chips</li>
    <li class="fade">Socks</li>
    </ul>

    <script>
    $( "li" ).hover(
    function() {
    $( this ).append( $( "<span> ***</span>" ) );
    }, function() {
    $( this ).find( "span:last" ).remove();
    }
    );

    $( "li.fade" ).hover(function() {
    $( this ).fadeOut( 100 );
    $( this ).fadeIn( 500 );
    });
    </script>

    </body>
    </html>
    example

    ​ ````To add a special style to table cells that are being hovered over, try:

    $( "td" ).hover(
    function() {
    $( this ).addClass( "hover" );
    }, function() {
    $( this ).removeClass( "hover" );
    }
    );
    example

    ​ ````To unbind the above example use:

    $( "td" ).off( "mouseenter mouseleave" );
    

    Parameters

    • handlerIn: false | TypeEventHandler<TElement, null, TElement, TElement, "mouseenter">

      A function to execute when the mouse pointer enters the element.

    • handlerOut: false | TypeEventHandler<TElement, null, TElement, TElement, "mouseleave">

      A function to execute when the mouse pointer leaves the element.

    Returns JQuery<TElement>

  • Bind a single handler to the matched elements, to be executed when the mouse pointer enters or leaves the elements.

    see

    ``

    since

    1.4

    deprecated

    ​ Deprecated.

    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 `hoverIntent plugin`.

    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).

    example

    ​ ````Slide the next sibling LI up or down on hover, and toggle a class.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>hover demo</title>
    <style>
    ul {
    margin-left: 20px;
    color: blue;
    }
    li {
    cursor: default;
    }
    li.active {
    background: black;
    color: white;
    }
    span {
    color:red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <ul>
    <li>Milk</li>
    <li>White</li>
    <li>Carrots</li>
    <li>Orange</li>
    <li>Broccoli</li>
    <li>Green</li>
    </ul>

    <script>
    $( "li" )
    .filter( ":odd" )
    .hide()
    .end()
    .filter( ":even" )
    .hover(function() {
    $( this )
    .toggleClass( "active" )
    .next()
    .stop( true, true )
    .slideToggle();
    });
    </script>

    </body>
    </html>

    Parameters

    • handlerInOut: false | TypeEventHandler<TElement, null, TElement, TElement, "mouseenter" | "mouseleave">

      A function to execute when the mouse pointer enters or leaves the element.

    Returns JQuery<TElement>

  • html(htmlString_function: string | Node | ((this: TElement, index: number, oldhtml: string) => string | Node)): JQuery<TElement>
  • html(): string
  • Set the HTML contents of each element in the set of matched elements.

    see

    ``

    since

    1.0

    since

    1.4

    example

    ​ ````Add some html to each div.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>html demo</title>
    <style>
    .red {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <span>Hello</span>
    <div></div>
    <div></div>
    <div></div>

    <script>
    $( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );
    </script>

    </body>
    </html>
    example

    ​ ````Add some html to each div then immediately do further manipulations to the inserted html.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>html demo</title>
    <style>
    div {
    color: blue;
    font-size: 18px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div></div>
    <div></div>
    <div></div>

    <script>
    $( "div" ).html( "<b>Wow!</b> Such excitement..." );
    $( "div b" )
    .append( document.createTextNode( "!!!" ) )
    .css( "color", "red" );
    </script>

    </body>
    </html>

    Parameters

    • htmlString_function: string | Node | ((this: TElement, index: number, oldhtml: string) => string | Node)

      @param htmlString_function

      • htmlString — A string of HTML to set as the content of each matched element.
      • function — A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments. jQuery empties the element before calling the function; use the oldhtml argument to reference the previous content. Within the function, this refers to the current element in the set.

    Returns JQuery<TElement>

  • Get the HTML contents of the first element in the set of matched elements.

    see

    ``

    since

    1.0

    example

    ​ ````Click a paragraph to convert it from html to text.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>html demo</title>
    <style>
    p {
    margin: 8px;
    font-size: 20px;
    color: blue;
    cursor: pointer;
    }
    b {
    text-decoration: underline;
    }
    button {
    cursor: pointer;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>
    <b>Click</b> to change the <span id="tag">html</span>
    </p>
    <p>
    to a <span id="text">text</span> node.
    </p>
    <p>
    This <button name="nada">button</button> does nothing.
    </p>

    <script>
    $( "p" ).click(function() {
    var htmlString = $( this ).html();
    $( this ).text( htmlString );
    });
    </script>

    </body>
    </html>

    Returns string

  • idleTimer(element?: HTMLElement | Document, id?: string): JQuery<TElement>
  • idleTimer(idleTimeoutMillis: number, element?: HTMLElement | Document, id?: string): JQuery<TElement>
  • idleTimer(options: Partial<IdleTimerOptions>, element?: HTMLElement | Document, id?: string): JQuery<TElement>
  • idleTimer(method: "destroy", element?: HTMLElement | Document, id?: string): JQuery<TElement>
  • idleTimer(method: "pause", element?: HTMLElement | Document, id?: string): JQuery<TElement>
  • idleTimer(method: "resume", element?: HTMLElement | Document, id?: string): JQuery<TElement>
  • idleTimer(method: "reset", element?: HTMLElement | Document, id?: string): JQuery<TElement>
  • idleTimer(method: "getRemainingTime", element?: HTMLElement | Document, id?: string): number
  • idleTimer(method: "getElapsedTime", element?: HTMLElement | Document, id?: string): number
  • idleTimer(method: "getLastActiveTime", element?: HTMLElement | Document, id?: string): number
  • idleTimer(method: "isIdle", element?: HTMLElement | Document, id?: string): boolean
  • There are two ways to instantiate. Either statically, or on an element. Element bound timers will only watch for events inside of them. You may just want page-level activity, in which case you may set up your timers on document, document.documentElement, and document.body.

    $(function() {
    // binds to document - shorthand
    $.idleTimer();

    // binds to document - explicit
    $( document ).idleTimer();

    // bind to different element
    $( "#myTextArea" ).idleTimer();
    });

    Parameters

    • Optional element: HTMLElement | Document

      Element to watch, defaults to the document.

    • Optional id: string

      Unique ID for this idle timer, to support multiple timers on the same page.

    Returns JQuery<TElement>

    this JQuery instance for chaining.

  • There are two ways to instantiate. Either statically, or on an element. Element bound timers will only watch for events inside of them. You may just want page-level activity, in which case you may set up your timers on document, document.documentElement, and document.body.

    $(function() {
    // binds to document - shorthand
    $.idleTimer(1000);

    // binds to document - explicit
    $( document ).idleTimer(1000);

    // bind to different element
    $( "#myTextArea" ).idleTimer(1000);
    });

    Parameters

    • idleTimeoutMillis: number

      The timeout period in milliseconds.

    • Optional element: HTMLElement | Document

      Element to watch, defaults to the document.

    • Optional id: string

      Unique ID for this idle timer, to support multiple timers on the same page.

    Returns JQuery<TElement>

    this JQuery instance for chaining.

  • There are two ways to instantiate. Either statically, or on an element. Element bound timers will only watch for events inside of them. You may just want page-level activity, in which case you may set up your timers on document, document.documentElement, and document.body.

    $(function() {
    // binds to document - shorthand
    $.idleTimer({
    timeout:10000,
    idle:true
    });

    // binds to document - explicit
    $( document ).idleTimer({
    timeout:10000,
    idle:true
    });

    // bind to different element
    $( "#myTextArea" ).idleTimer({
    timeout:10000,
    idle:true
    });
    });

    Parameters

    • options: Partial<IdleTimerOptions>

      The options for this idle timer. Any options not specified explicitly are set to their default values.

    • Optional element: HTMLElement | Document

      Element to watch, defaults to the document.

    • Optional id: string

      Unique ID for this idle timer, to support multiple timers on the same page.

    Returns JQuery<TElement>

    this JQuery instance for chaining.

  • Stop the timer, removes data, removes event bindings to come back from this you will need to instantiate again.

    Parameters

    • method: "destroy"

      The method to be invoked on this idle timer instance.

    • Optional element: HTMLElement | Document

      Element to watch, defaults to the document.

    • Optional id: string

      Unique ID for this idle timer, to support multiple timers on the same page.

    Returns JQuery<TElement>

    this JQuery instance for chaining.

  • Saves the remaining time, and stops the timer.

    Parameters

    • method: "pause"

      The method to be invoked on this idle timer instance.

    • Optional element: HTMLElement | Document

      Element to watch, defaults to the document.

    • Optional id: string

      Unique ID for this idle timer, to support multiple timers on the same page.

    Returns JQuery<TElement>

    this JQuery instance for chaining.

  • Starts the timer with remaining time saved when pause was called.

    Parameters

    • method: "resume"

      The method to be invoked on this idle timer instance.

    • Optional element: HTMLElement | Document

      Element to watch, defaults to the document.

    • Optional id: string

      Unique ID for this idle timer, to support multiple timers on the same page.

    Returns JQuery<TElement>

    this JQuery instance for chaining.

  • Restore initial idle state, and restart the timer.

    Parameters

    • method: "reset"

      The method to be invoked on this idle timer instance.

    • Optional element: HTMLElement | Document

      Element to watch, defaults to the document.

    • Optional id: string

      Unique ID for this idle timer, to support multiple timers on the same page.

    Returns JQuery<TElement>

    this JQuery instance for chaining.

  • Get time left until idle. If currently idle, returns 0.

    Parameters

    • method: "getRemainingTime"

      The method to be invoked on this idle timer instance.

    • Optional element: HTMLElement | Document

      Element to watch, defaults to the document.

    • Optional id: string

      Unique ID for this idle timer, to support multiple timers on the same page.

    Returns number

    The time in milliseconds until the user goes idle. If user is already idle, returns 0.

  • Get time elapsed since the user went idle or active.

    • If currently idle, how long the user has been idle.
    • If currently active, how long the user has been active.

    Parameters

    • method: "getElapsedTime"

      The method to be invoked on this idle timer instance.

    • Optional element: HTMLElement | Document

      Element to watch, defaults to the document.

    • Optional id: string

      Unique ID for this idle timer, to support multiple timers on the same page.

    Returns number

    How long the user has been idle or active, in milliseconds.

  • Get time the last active.idleTimer event was fired.

    Parameters

    • method: "getLastActiveTime"

      The method to be invoked on this idle timer instance.

    • Optional element: HTMLElement | Document

      Element to watch, defaults to the document.

    • Optional id: string

      Unique ID for this idle timer, to support multiple timers on the same page.

    Returns number

    A timestamp (milliseconds since 1 January 1970 UTC) for when the most recent time the user went from idle to active.

  • Get whether the user is currently idle.

    Parameters

    • method: "isIdle"

      The method to be invoked on this idle timer instance.

    • Optional element: HTMLElement | Document

      Element to watch, defaults to the document.

    • Optional id: string

      Unique ID for this idle timer, to support multiple timers on the same page.

    Returns boolean

    true if the user is currently idle, or false if the user is currently active.

  • index(selector_element?: string | Element | JQuery<HTMLElement>): number
  • Search for a given element from among the matched elements.

    see

    ``

    since

    1.0

    since

    1.4

    example

    ​ ````On click, returns the index (zero-based) of that div in the page.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>index demo</title>
    <style>
    div {
    background: yellow;
    margin: 5px;
    }
    span {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <span>Click a div!</span>
    <div>First div</div>
    <div>Second div</div>
    <div>Third div</div>

    <script>
    $( "div" ).click(function() {
    // `this` is the DOM element that was clicked
    var index = $( "div" ).index( this );
    $( "span" ).text( "That was div index #" + index );
    });
    </script>

    </body>
    </html>
    example

    ​ ````Returns the index for the element with ID bar.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>index demo</title>
    <style>
    div {
    font-weight: bold;
    color: #090;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <ul>
    <li id="foo">foo</li>
    <li id="bar">bar</li>
    <li id="baz">baz</li>
    </ul>
    <div></div>

    <script>
    var listItem = $( "#bar" );
    $( "div" ).html( "Index: " + $( "li" ).index( listItem ) );
    </script>

    </body>
    </html>
    example

    ​ ````Returns the index for the first item in the jQuery collection.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>index demo</title>
    <style>
    div {
    font-weight: bold;
    color: #090;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <ul>
    <li id="foo">foo</li>
    <li id="bar">bar</li>
    <li id="baz">baz</li>
    </ul>
    <div></div>

    <script>
    var listItems = $( "li:gt(0)" );
    $( "div" ).html( "Index: " + $( "li" ).index( listItems ) );
    </script>

    </body>
    </html>
    example

    ​ ````Returns the index for the element with ID bar in relation to all <li> elements.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>index demo</title>
    <style>
    div {
    font-weight: bold;
    color: #090;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <ul>
    <li id="foo">foo</li>
    <li id="bar">bar</li>
    <li id="baz">baz</li>
    </ul>
    <div></div>

    <script>
    $( "div" ).html( "Index: " + $( "#bar" ).index( "li" ) );
    </script>

    </body>
    </html>
    example

    ​ ````Returns the index for the element with ID bar in relation to its siblings.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>index demo</title>
    <style>
    div {
    font-weight: bold;
    color: #090;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <ul>
    <li id="foo">foo</li>
    <li id="bar">bar</li>
    <li id="baz">baz</li>
    </ul>
    <div></div>

    <script>
    var barIndex = $( "#bar" ).index();
    $( "div" ).html( "Index: " + barIndex );
    </script>

    </body>
    </html>
    example

    ​ ````Returns -1, as there is no element with ID foobar.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>index demo</title>
    <style>
    div {
    font-weight: bold;
    color: #090;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <ul>
    <li id="foo">foo</li>
    <li id="bar">bar</li>
    <li id="baz">baz</li>
    </ul>
    <div></div>

    <script>
    var foobar = $( "li" ).index( $( "#foobar" ) );
    $( "div" ).html( "Index: " + foobar );
    </script>

    </body>
    </html>

    Parameters

    • Optional selector_element: string | Element | JQuery<HTMLElement>

      @param selector_element

      • selector — A selector representing a jQuery collection in which to look for an element.
      • element — The DOM element or first element within the jQuery object to look for.

    Returns number

  • innerHeight(value_function: string | number | ((this: TElement, index: number, height: number) => string | number)): JQuery<TElement>
  • innerHeight(): undefined | number
  • Set the CSS inner height of each element in the set of matched elements.

    see

    ``

    since

    1.8.0

    example

    ​ ````Change the inner height of each div the first time it is clicked (and change its color).

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>innerHeight demo</title>
    <style>
    div {
    width: 60px;
    padding: 10px;
    height: 70px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
    }
    .mod {
    background: blue;
    cursor: default;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>d</div>
    <div>d</div>
    <div>d</div>
    <div>d</div>
    <div>d</div>

    <script>
    var modHeight = 70;
    $( "div" ).one( "click", function() {
    $( this ).innerHeight( modHeight ).addClass( "mod" );
    modHeight -= 8;
    });
    </script>

    </body>
    </html>

    Parameters

    • value_function: string | number | ((this: TElement, index: number, height: number) => string | number)

      @param value_function

      • value — A number representing the number of pixels, or a number along with an optional unit of measure appended (as a string).
      • function — A function returning the inner height (including padding but not border) to set. Receives the index position of the element in the set and the old inner height as arguments. Within the function, this refers to the current element in the set.

    Returns JQuery<TElement>

  • Get the current computed height for the first element in the set of matched elements, including padding but not border.

    see

    ``

    since

    1.2.6

    example

    ​ ````Get the innerHeight of a paragraph.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>innerHeight demo</title>
    <style>
    p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    <p></p>

    <script>
    var p = $( "p:first" );
    $( "p:last" ).text( "innerHeight:" + p.innerHeight() );
    </script>

    </body>
    </html>

    Returns undefined | number

  • innerWidth(value_function: string | number | ((this: TElement, index: number, width: number) => string | number)): JQuery<TElement>
  • innerWidth(): undefined | number
  • Set the CSS inner width of each element in the set of matched elements.

    see

    ``

    since

    1.8.0

    example

    ​ ````Change the inner width of each div the first time it is clicked (and change its color).

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>innerWidth demo</title>
    <style>
    div {
    width: 60px;
    padding: 10px;
    height: 50px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
    }
    .mod {
    background: blue;
    cursor: default;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>d</div>
    <div>d</div>
    <div>d</div>
    <div>d</div>
    <div>d</div>

    <script>
    var modWidth = 60;
    $( "div" ).one( "click", function() {
    $( this ).innerWidth( modWidth ).addClass( "mod" );
    modWidth -= 8;
    });
    </script>

    </body>
    </html>

    Parameters

    • value_function: string | number | ((this: TElement, index: number, width: number) => string | number)

      @param value_function

      • value — A number representing the number of pixels, or a number along with an optional unit of measure appended (as a string).
      • function — A function returning the inner width (including padding but not border) to set. Receives the index position of the element in the set and the old inner width as arguments. Within the function, this refers to the current element in the set.

    Returns JQuery<TElement>

  • Get the current computed inner width for the first element in the set of matched elements, including padding but not border.

    see

    ``

    since

    1.2.6

    example

    ​ ````Get the innerWidth of a paragraph.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>innerWidth demo</title>
    <style>
    p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    <p></p>

    <script>
    var p = $( "p:first" );
    $( "p:last" ).text( "innerWidth:" + p.innerWidth() );
    </script>

    </body>
    </html>

    Returns undefined | number

  • inputmask(method: "getemptymask"): string
  • inputmask(method: "getmetadata"): any
  • inputmask(method: "hasMaskedValue"): boolean
  • inputmask(method: "isComplete"): boolean
  • inputmask(method: "isValid"): boolean
  • inputmask(method: "option", key: string): any
  • inputmask(method: "option", opts: default.Options, noremask?: boolean): Instance
  • inputmask(method: "remove"): void
  • inputmask(method: "setValue", value: string): void
  • inputmask(method: "unmaskedvalue"): string
  • inputmask(maskOrAlias: string, opts?: default.Options): Instance
  • inputmask(opts?: default.Options): Instance
  • Return the default (empty) mask value.

    Parameters

    • method: "getemptymask"

    Returns string

  • The metadata of the actual mask provided in the mask definitions can be obtained by calling getmetadata. If only a mask is provided the mask definition will be returned by the getmetadata.

    Parameters

    • method: "getmetadata"

    Returns any

  • Check whether the returned value is masked or not; currently only works reliably when using jquery.val fn to retrieve the value

    Parameters

    • method: "hasMaskedValue"

    Returns boolean

  • Verify whether the current value is complete or not.

    Parameters

    • method: "isComplete"

    Returns boolean

  • Validate a given value against the mask.

    Parameters

    • method: "isValid"

    Returns boolean

  • Get an option on an existing inputmask.

    Parameters

    • method: "option"
    • key: string

      Name of option to retrieve.

    Returns any

  • Set an option on an existing inputmask. The option method is intented for adding extra options like callbacks, etc at a later time to the mask.

    When extra options are set the mask is automatically reapplied, unless you pas true for the noremask argument.

    Parameters

    Returns Instance

  • Remove the inputmask.

    Parameters

    • method: "remove"

    Returns void

  • The setvalue functionality is to set a value to the inputmask like you would do with jQuery.val, BUT it will trigger the internal event used by the inputmask always, whatever the case. This is particular useful when cloning an inputmask with jQuery.clone. Cloning an inputmask is not a fully functional clone. On the first event (mouseenter, focus, ...) the inputmask can detect if it where cloned and can reactivate the masking. However when setting the value with jQuery.val there is none of the events triggered in that case. The setvalue functionality does this for you.

    Parameters

    • method: "setValue"
    • value: string

    Returns void

  • Gets the unmasked value.

    Parameters

    • method: "unmaskedvalue"

    Returns string

  • Creates a new Inputmask instance.

    Parameters

    • maskOrAlias: string

      A mask pattern or a reference to a predefined alias.

    • Optional opts: default.Options

      Mask options.

    Returns Instance

  • Creates a new Inputmask instance.

    Parameters

    Returns Instance

  • Insert every element in the set of matched elements after the target.

    see

    ``

    since

    1.0

    example

    ​ ````Insert all paragraphs after an element with id of "foo". Same as $( "#foo" ).after( "p" )

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>insertAfter demo</title>
    <style>
    #foo {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p> is what I said... </p>
    <div id="foo">FOO!</div>

    <script>
    $( "p" ).insertAfter( "#foo" );
    </script>

    </body>
    </html>

    Parameters

    • target: string | TypeOrArray<Node> | JQuery<Node>

      A selector, element, array of elements, HTML string, or jQuery object; the matched set of elements will be inserted after the element(s) specified by this parameter.

    Returns JQuery<TElement>

  • Insert every element in the set of matched elements before the target.

    see

    ``

    since

    1.0

    example

    ​ ````Insert all paragraphs before an element with id of "foo". Same as $( "#foo" ).before( "p" )

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>insertBefore demo</title>
    <style>
    #foo {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div id="foo">FOO!</div>
    <p>I would like to say: </p>

    <script>
    $( "p" ).insertBefore( "#foo" );
    </script>

    </body>
    </html>

    Parameters

    • target: string | TypeOrArray<Node> | JQuery<Node>

      A selector, element, array of elements, HTML string, or jQuery object; the matched set of elements will be inserted before the element(s) specified by this parameter.

    Returns JQuery<TElement>

  • insertText(text: string, index: number, moveSelection?: boolean): JQuery<TElement>
  • Inserts the text at the given position of an INPUT or TEXTAREA element, optionally moving the cursor to the end if the inserted text.

    Parameters

    • text: string

      Text to insert.

    • index: number

      0-based index where to insert the text.

    • Optional moveSelection: boolean

      true to move the cursor to the end of the inserted text, or false otherwise.

    Returns JQuery<TElement>

    this for chaining.

  • is(selector_function_selection_elements: string | JQuery<HTMLElement> | TypeOrArray<Element> | ((this: TElement, index: number, element: TElement) => boolean)): boolean
  • 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.

    see

    ``

    since

    1.0

    since

    1.6

    example

    ​ ````Shows a few ways is() can be used inside an event handler.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>is demo</title>
    <style>
    div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    border: 4px outset;
    background: green;
    text-align: center;
    font-weight: bolder;
    cursor: pointer;
    }
    .blue {
    background: blue;
    }
    .red {
    background: red;
    }
    span {
    color: white;
    font-size: 16px;
    }
    p {
    color: red;
    font-weight: bolder;
    background: yellow;
    margin: 3px;
    clear: left;
    display: none;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div></div>
    <div class="blue"></div>
    <div></div>
    <div class="red"></div>
    <div><br/><span>Peter</span></div>
    <div class="blue"></div>
    <p>&nbsp;</p>

    <script>
    $( "div" ).one( "click", function() {
    if ( $( this ).is( ":first-child" ) ) {
    $( "p" ).text( "It's the first div." );
    } else if ( $( this ).is( ".blue,.red" ) ) {
    $( "p" ).text( "It's a blue or red div." );
    } else if ( $( this ).is( ":contains('Peter')" ) ) {
    $( "p" ).text( "It's Peter!" );
    } else {
    $( "p" ).html( "It's nothing <em>special</em>." );
    }
    $( "p" ).hide().slideDown( "slow" );
    $( this ).css({
    "border-style": "inset",
    cursor: "default"
    });
    });
    </script>

    </body>
    </html>
    example

    ​ ````Returns true, because the parent of the input is a form element.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>is demo</title>
    <style>
    div {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <form>
    <input type="checkbox">
    </form>
    <div></div>

    <script>
    var isFormParent = $( "input[type='checkbox']" ).parent().is( "form" );
    $( "div" ).text( "isFormParent = " + isFormParent );
    </script>

    </body>
    </html>
    example

    ​ ````Returns false, because the parent of the input is a p element.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>is demo</title>
    <style>
    div {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <form>
    <p><input type="checkbox"></p>
    </form>
    <div></div>

    <script>
    var isFormParent = $( "input[type='checkbox']" ).parent().is( "form" );
    $( "div" ).text( "isFormParent = " + isFormParent );
    </script>

    </body>
    </html>
    example

    ​ ````Checks against an existing collection of alternating list elements. Blue, alternating list elements slide up while others turn red.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>is demo</title>
    <style>
    li {
    cursor: pointer;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <ul id="browsers">
    <li>Chrome</li>
    <li>Safari</li>
    <li>Firefox</li>
    <li>Opera</li>
    </ul>

    <script>
    var alt = $( "#browsers li:nth-child(2n)" ).css( "background", "#0ff" );
    $( "li" ).click(function() {
    var li = $( this );
    if ( li.is( alt ) ) {
    li.slideUp();
    } else {
    li.css( "background", "red" );
    }
    });
    </script>

    </body>
    </html>
    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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>is demo</title>
    <style>
    li {
    cursor: pointer;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <ul id="browsers">
    <li>Chrome</li>
    <li>Safari</li>
    <li>Firefox</li>
    <li>Opera</li>
    </ul>

    <script>
    var alt = $( "#browsers li:nth-child(2n)" ).css( "background", "#0ff" );
    $( "li" ).click(function() {
    if ( alt.is( this ) ) {
    $( this ).slideUp();
    } else {
    $( this ).css( "background", "red" );
    }
    });
    </script>

    </body>
    </html>

    Parameters

    • selector_function_selection_elements: string | JQuery<HTMLElement> | TypeOrArray<Element> | ((this: TElement, index: number, element: TElement) => boolean)

      @param selector_function_selection_elements

      • selector — A string containing a selector expression to match elements against.
      • function — A function used as a test for every element in the set. It accepts two arguments, index, which is the element's index in the jQuery collection, and element, which is the DOM element. Within the function, this refers to the current DOM element.
      • selection — An existing jQuery object to match the current set of elements against.
      • elements — One or more elements to match the current set of elements against.

    Returns boolean

  • Initializes the JScrollPane on the JQuery object.

    Parameters

    • Optional settings: Partial<JScrollPaneSettings>

      Optional settings for configuring the scroll pane.

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • keydown<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "keydown">): JQuery<TElement>
  • keydown(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "keydown">): JQuery<TElement>
  • Bind an event handler to the "keydown" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "keydown">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "keydown" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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

    ​ ````Show the event object for the keydown handler when a key is pressed in the input.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>keydown demo</title>
    <style>
    fieldset {
    margin-bottom: 1em;
    }
    input {
    display: block;
    margin-bottom: .25em;
    }
    #print-output {
    width: 100%;
    }
    .print-output-line {
    white-space: pre;
    padding: 5px;
    font-family: monaco, monospace;
    font-size: .7em;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <form>
    <fieldset>
    <label for="target">Type Something:</label>
    <input id="target" type="text">
    </fieldset>
    </form>
    <button id="other">
    Trigger the handler
    </button>
    <script type="text/javascript" src="/resources/events.js"></script>

    <script>
    var xTriggered = 0;
    $( "#target" ).keydown(function( event ) {
    if ( event.which == 13 ) {
    event.preventDefault();
    }
    xTriggered++;
    var msg = "Handler for .keydown() called " + xTriggered + " time(s).";
    $.print( msg, "html" );
    $.print( event );
    });

    $( "#other" ).click(function() {
    $( "#target" ).keydown();
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "keydown">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Initializes the keypad on the currently select elements.

    Parameters

    • Optional settings: Partial<KeypadSettings>

      Optional settings for customizing the keypad.

    Returns JQuery<TElement>

    This jQuery instance for chaining.

  • Determine whether the keypad functionality has been disabled for the first of the given field(s).

    Parameters

    • method: "isDisabled"

      The method to call on the existing keypad instance.

    Returns boolean

    Whether the input field is disabled.

  • Disable the keypad for the given field(s) as well as the field itself. Note that a field that is disabled when the keypad is applied to it causes the keypad to become disabled as well.

    Parameters

    • method: "disable"

      The method to call on the existing keypad instance.

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • Enable the keypad for the given field(s) as well as the field itself.

    Parameters

    • method: "enable"

      The method to call on the existing keypad instance.

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • Hide the keypad for the given field.

    Parameters

    • method: "hide"

      The method to call on the existing keypad instance.

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • Pop up the keypad for the given field.

    Parameters

    • method: "show"

      The method to call on the existing keypad instance.

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • Remove the keypad functionality from the given field(s).

    Parameters

    • method: "destroy"

      The method to call on the existing keypad instance.

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • Retrieve all of the current settings for the first keypad instance attached to the given field(s).

    var settings = $(selector).keypad("option");
    var prompt = $(selector).keypad("option").prompt;
    since

    1.5.0.

    Parameters

    • method: "option"

      The method to call on the existing keypad instance.

    Returns KeypadSettings

    this jQuery instance for chaining.

  • Retrieve one of the current settings for the first keypad instance attached to the given field(s).

    since

    1.5.0.

    Type Parameters

    Parameters

    • method: "option"

      The method to call on the existing keypad instance.

    • optionName: K

      The name of the setting to retrieve.

      var settings = $(selector).keypad("option");
      var prompt = $(selector).keypad("option", "prompt");

    Returns KeypadSettings[K]

    this jQuery instance for chaining.

  • Update the settings for the keypad instance(s) attached to the given field(s).

    $(selector).keypad("option", {
    prompt: "Keypad",
    keypadOnly: false
    });
    since

    1.5.0 - previously you used the change command.

    Parameters

    • method: "option"

      The method to call on the existing keypad instance.

    • options: Partial<KeypadSettings>

      The new options to set on the keypad instance.

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • Update a particular setting for the keypad instance(s) attached to the given field(s).

    $(selector).keypad("option", "prompt", "Keypad");
    
    since

    1.5.0 - previously you used the change command.

    Type Parameters

    Parameters

    • method: "option"

      The method to call on the existing keypad instance.

    • optionName: K

      Name of the option to update.

    • optionValue: undefined | KeypadSettings[K]

      The new value for the option

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • keypress<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "keypress">): JQuery<TElement>
  • keypress(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "keypress">): JQuery<TElement>
  • Bind an event handler to the "keypress" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "keypress">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "keypress" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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

    ​ ````Show the event object when a key is pressed in the input. Note: This demo relies on a simple $.print() plugin (https://api.jquery.com/resources/events.js) for the event object's output.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>keypress demo</title>
    <style>
    fieldset {
    margin-bottom: 1em;
    }
    input {
    display: block;
    margin-bottom: .25em;
    }
    #print-output {
    width: 100%;
    }
    .print-output-line {
    white-space: pre;
    padding: 5px;
    font-family: monaco, monospace;
    font-size: .7em;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <form>
    <fieldset>
    <label for="target">Type Something:</label>
    <input id="target" type="text">
    </fieldset>
    </form>
    <button id="other">
    Trigger the handler
    </button>
    <script src="/resources/events.js"></script>

    <script>
    var xTriggered = 0;
    $( "#target" ).keypress(function( event ) {
    if ( event.which == 13 ) {
    event.preventDefault();
    }
    xTriggered++;
    var msg = "Handler for .keypress() called " + xTriggered + " time(s).";
    $.print( msg, "html" );
    $.print( event );
    });

    $( "#other" ).click(function() {
    $( "#target" ).keypress();
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "keypress">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • keyup<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "keyup">): JQuery<TElement>
  • keyup(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "keyup">): JQuery<TElement>
  • Bind an event handler to the "keyup" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "keyup">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "keyup" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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

    ​ ````Show the event object for the keyup handler (using a simple $.print plugin) when a key is released in the input.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>keyup demo</title>
    <style>
    fieldset {
    margin-bottom: 1em;
    }
    input {
    display: block;
    margin-bottom: .25em;
    }
    #print-output {
    width: 100%;
    }
    .print-output-line {
    white-space: pre;
    padding: 5px;
    font-family: monaco, monospace;
    font-size: .7em;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <form>
    <fieldset>
    <label for="target">Type Something:</label>
    <input id="target" type="text">
    </fieldset>
    </form>
    <button id="other">
    Trigger the handler
    </button>
    <script type="text/javascript" src="/resources/events.js"></script>

    <script>
    var xTriggered = 0;
    $( "#target" ).keyup(function( event ) {
    xTriggered++;
    var msg = "Handler for .keyup() called " + xTriggered + " time(s).";
    $.print( msg, "html" );
    $.print( event );
    }).keydown(function( event ) {
    if ( event.which == 13 ) {
    event.preventDefault();
    }
    });

    $( "#other").click(function() {
    $( "#target" ).keyup();
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "keyup">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Initializes the knob on the current input element. Creates the canvas with the rendered knob.

    Options can also be provided as data attributes, e.g.:

    <input type="text" class="dial" data-min="-50" data-max="50">
    

    Parameters

    • Optional settings: Partial<KnobSettings>

      Optional settings for the knob.

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • Reduce the set of matched elements to the final one in the set.

    see

    ``

    since

    1.4

    example

    ​ ````Highlight the last span in a paragraph.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>last demo</title>
    <style>
    .highlight {
    background-color: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p><span>Look:</span> <span>This is some text in a paragraph.</span> <span>This is a note about it.</span></p>

    <script>
    $( "p span" ).last().addClass( "highlight" );
    </script>

    </body>
    </html>

    Returns JQuery<TElement>

  • load(url: string, data: string | PlainObject<any>, complete: ((this: TElement, responseText: string, textStatus: TextStatus, jqXHR: jqXHR<any>) => void)): JQuery<TElement>
  • load(url: string, complete_data?: string | PlainObject<any> | ((this: TElement, responseText: string, textStatus: TextStatus, jqXHR: jqXHR<any>) => void)): JQuery<TElement>
  • Load data from the server and place the returned HTML into the matched element.

    see

    ``

    since

    1.0

    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.

    $( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
    alert( "The last 25 entries in the feed have been loaded" );
    });

    Parameters

    • url: string

      A string containing the URL to which the request is sent.

    • data: string | PlainObject<any>

      A plain object or string that is sent to the server with the request.

    • complete: ((this: TElement, responseText: string, textStatus: TextStatus, jqXHR: jqXHR<any>) => void)

      A callback function that is executed when the request completes.

        • (this: TElement, responseText: string, textStatus: TextStatus, jqXHR: jqXHR<any>): void
        • Parameters

          Returns void

    Returns JQuery<TElement>

  • Load data from the server and place the returned HTML into the matched element.

    see

    ``

    since

    1.0

    example

    ​ ````Load another page's list items into an ordered list.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>load demo</title>
    <style>
    body {
    font-size: 12px;
    font-family: Arial;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <b>Projects:</b>
    <ol id="new-projects"></ol>

    <script>
    $( "#new-projects" ).load( "/resources/load.html #projects li" );
    </script>

    </body>
    </html>
    example

    ​ ````Display a notice if the Ajax request encounters an error.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>load demo</title>
    <style>
    body {
    font-size: 12px;
    font-family: Arial;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <b>Successful Response (should be blank):</b>
    <div id="success"></div>
    <b>Error Response:</b>
    <div id="error"></div>

    <script>
    $( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
    if ( status == "error" ) {
    var msg = "Sorry but there was an error: ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
    }
    });
    </script>

    </body>
    </html>
    example

    ​ ````Load the feeds.html file into the div with the ID of feeds.

    $( "#feeds" ).load( "feeds.html" );
    
    example

    ​ ````pass arrays of data to the server.

    $( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } );
    

    Parameters

    • url: string

      A string containing the URL to which the request is sent.

    • Optional complete_data: string | PlainObject<any> | ((this: TElement, responseText: string, textStatus: TextStatus, jqXHR: jqXHR<any>) => void)

      @param complete_data

      • complete — A callback function that is executed when the request completes.
      • data — A plain object or string that is sent to the server with the request.

    Returns JQuery<TElement>

  • map<TReturn>(callback: ((this: TElement, index: number, domElement: TElement) => undefined | null | TypeOrArray<TReturn>)): JQuery<TReturn>
  • Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.

    see

    ``

    since

    1.2

    example

    ​ ````Build a list of all the values within a form.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>map demo</title>
    <style>
    p {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p><b>Values: </b></p>
    <form>
    <input type="text" name="name" value="John">
    <input type="text" name="password" value="password">
    <input type="text" name="url" value="https://johnresig.com/">
    </form>

    <script>
    $( "p" )
    .append( $( "input" ).map(function() {
    return $( this ).val();
    })
    .get()
    .join( ", " ) );
    </script>

    </body>
    </html>
    example

    ​ ````A contrived example to show some functionality.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>map demo</title>
    <style>
    body {
    font-size: 16px;
    }
    ul {
    float: left;
    margin: 0 30px;
    color: blue;
    }
    #results {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth</li>
    </ul>
    <ul id="results">
    </ul>

    <script>
    var mappedItems = $( "li" ).map(function( index ) {
    var replacement = $( "<li>" ).text( $( this ).text() ).get( 0 );
    if ( index === 0 ) {

    // Make the first item all caps
    $( replacement ).text( $( replacement ).text().toUpperCase() );
    } else if ( index === 1 || index === 3 ) {

    // Delete the second and fourth items
    replacement = null;
    } else if ( index === 2 ) {

    // Make two of the third item and add some text
    replacement = [ replacement, $( "<li>" ).get( 0 ) ];
    $( replacement[ 0 ] ).append( "<b> - A</b>" );
    $( replacement[ 1 ] ).append( "Extra <b> - B</b>" );
    }

    // Replacement will be a dom element, null,
    // or an array of dom elements
    return replacement;
    });
    $( "#results" ).append( mappedItems );
    </script>

    </body>
    </html>
    example

    ​ ````Equalize the heights of the divs.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>map demo</title>
    <style>
    div {
    width: 40px;
    float: left;
    }
    input {
    clear: left;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <input type="button" value="equalize div heights">
    <div style="background: red; height: 40px; "></div>
    <div style="background: green; height: 70px;"></div>
    <div style="background: blue; height: 50px; "></div>

    <script>
    $.fn.equalizeHeights = function() {
    var maxHeight = this.map(function( i, e ) {
    return $( e ).height();
    }).get();
    return this.height( Math.max.apply( this, maxHeight ) );
    };

    $( "input" ).click(function() {
    $( "div" ).equalizeHeights();
    });
    </script>

    </body>
    </html>

    Type Parameters

    • TReturn

    Parameters

    • callback: ((this: TElement, index: number, domElement: TElement) => undefined | null | TypeOrArray<TReturn>)

      A function object that will be invoked for each element in the current set.

        • (this: TElement, index: number, domElement: TElement): undefined | null | TypeOrArray<TReturn>
        • Parameters

          • this: TElement
          • index: number
          • domElement: TElement

          Returns undefined | null | TypeOrArray<TReturn>

    Returns JQuery<TReturn>

  • mousedown<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "mousedown">): JQuery<TElement>
  • mousedown(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "mousedown">): JQuery<TElement>
  • Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "mousedown">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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

    ​ ````Show texts when mouseup and mousedown event triggering.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>mousedown demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Press mouse and release here.</p>

    <script>
    $( "p" )
    .mouseup(function() {
    $( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
    })
    .mousedown(function() {
    $( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "mousedown">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • mouseenter<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "mouseenter">): JQuery<TElement>
  • mouseenter(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "mouseenter">): JQuery<TElement>
  • Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "mouseenter">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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

    ​ ````Show texts when mouseenter and mouseout event triggering. mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>mouseenter demo</title>
    <style>
    div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
    }
    div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
    }
    p {
    line-height: 1em;
    margin: 0;
    padding: 0;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div class="out overout">
    <p>move your mouse</p>
    <div class="in overout"><p>move your mouse</p><p>0</p></div>
    <p>0</p>
    </div>

    <div class="out enterleave">
    <p>move your mouse</p>
    <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
    <p>0</p>
    </div>

    <script>
    var i = 0;
    $( "div.overout" )
    .mouseover(function() {
    $( "p:first", this ).text( "mouse over" );
    $( "p:last", this ).text( ++i );
    })
    .mouseout(function() {
    $( "p:first", this ).text( "mouse out" );
    });

    var n = 0;
    $( "div.enterleave" )
    .mouseenter(function() {
    $( "p:first", this ).text( "mouse enter" );
    $( "p:last", this ).text( ++n );
    })
    .mouseleave(function() {
    $( "p:first", this ).text( "mouse leave" );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "mouseenter">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • mouseleave<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "mouseleave">): JQuery<TElement>
  • mouseleave(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "mouseleave">): JQuery<TElement>
  • Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "mouseleave">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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

    ​ ````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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>mouseleave demo</title>
    <style>
    div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
    }
    div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
    }
    p {
    line-height: 1em;
    margin: 0;
    padding: 0;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div class="out overout">
    <p>move your mouse</p>
    <div class="in overout"><p>move your mouse</p><p>0</p></div>
    <p>0</p>
    </div>
    <div class="out enterleave">
    <p>move your mouse</p>
    <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
    <p>0</p>
    </div>

    <script>
    var i = 0;
    $( "div.overout" )
    .mouseover(function() {
    $( "p:first", this ).text( "mouse over" );
    })
    .mouseout(function() {
    $( "p:first", this ).text( "mouse out" );
    $( "p:last", this ).text( ++i );
    });

    var n = 0;
    $( "div.enterleave" )
    .mouseenter(function() {
    $( "p:first", this ).text( "mouse enter" );
    })
    .mouseleave(function() {
    $( "p:first", this ).text( "mouse leave" );
    $( "p:last", this ).text( ++n );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "mouseleave">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • mousemove<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "mousemove">): JQuery<TElement>
  • mousemove(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "mousemove">): JQuery<TElement>
  • Bind an event handler to the "mousemove" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "mousemove">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "mousemove" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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

    ​ ````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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>mousemove demo</title>
    <style>
    div {
    width: 220px;
    height: 170px;
    margin: 10px 50px 10px 10px;
    background: yellow;
    border: 2px groove;
    float: right;
    }
    p {
    margin: 0;
    margin-left: 10px;
    color: red;
    width: 220px;
    height: 120px;
    padding-top: 70px;
    float: left;
    font-size: 14px;
    }
    span {
    display: block;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>
    <span>Move the mouse over the div.</span>
    <span>&nbsp;</span>
    </p>
    <div></div>

    <script>
    $( "div" ).mousemove(function( event ) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
    var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
    $( "span:first" ).text( "( event.pageX, event.pageY ) : " + pageCoords );
    $( "span:last" ).text( "( event.clientX, event.clientY ) : " + clientCoords );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "mousemove">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • mouseout<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "mouseout">): JQuery<TElement>
  • mouseout(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "mouseout">): JQuery<TElement>
  • Bind an event handler to the "mouseout" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "mouseout">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "mouseout" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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

    ​ ````Show the number of times mouseout and mouseleave events are triggered. 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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>mouseout demo</title>
    <style>
    div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
    }
    div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
    }
    p {
    line-height: 1em;
    margin: 0;
    padding: 0;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div class="out overout">
    <p>move your mouse</p>
    <div class="in overout"><p>move your mouse</p><p>0</p></div>
    <p>0</p>
    </div>

    <div class="out enterleave">
    <p>move your mouse</p>
    <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
    <p>0</p>
    </div>

    <script>
    var i = 0;
    $( "div.overout" )
    .mouseout(function() {
    $( "p:first", this ).text( "mouse out" );
    $( "p:last", this ).text( ++i );
    })
    .mouseover(function() {
    $( "p:first", this ).text( "mouse over" );
    });

    var n = 0;
    $( "div.enterleave" )
    .on( "mouseenter", function() {
    $( "p:first", this ).text( "mouse enter" );
    })
    .on( "mouseleave", function() {
    $( "p:first", this ).text( "mouse leave" );
    $( "p:last", this ).text( ++n );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "mouseout">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • mouseover<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "mouseover">): JQuery<TElement>
  • mouseover(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "mouseover">): JQuery<TElement>
  • Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "mouseover">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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

    ​ ````Show the number of times mouseover and mouseenter events are triggered. mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>mouseover demo</title>
    <style>
    div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
    }
    div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
    }
    p {
    line-height: 1em;
    margin: 0;
    padding: 0;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div class="out overout">
    <span>move your mouse</span>
    <div class="in">
    </div>
    </div>

    <div class="out enterleave">
    <span>move your mouse</span>
    <div class="in">
    </div>
    </div>

    <script>
    var i = 0;
    $( "div.overout" )
    .mouseover(function() {
    i += 1;
    $( this ).find( "span" ).text( "mouse over x " + i );
    })
    .mouseout(function() {
    $( this ).find( "span" ).text( "mouse out " );
    });

    var n = 0;
    $( "div.enterleave" )
    .mouseenter(function() {
    n += 1;
    $( this ).find( "span" ).text( "mouse enter x " + n );
    })
    .mouseleave(function() {
    $( this ).find( "span" ).text( "mouse leave" );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "mouseover">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • mouseup<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "mouseup">): JQuery<TElement>
  • mouseup(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "mouseup">): JQuery<TElement>
  • Bind an event handler to the "mouseup" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "mouseup">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "mouseup" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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

    ​ ````Show texts when mouseup and mousedown event triggering.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>mouseup demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Press mouse and release here.</p>

    <script>
    $( "p" )
    .mouseup(function() {
    $( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
    })
    .mousedown(function() {
    $( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "mouseup">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • mousewheel(): JQuery<TElement>
  • mousewheel(handler: TypeEventHandler<HTMLElement, undefined, HTMLElement, HTMLElement, "mousewheel">): JQuery<TElement>
  • Triggers a mousewheel event on this element.

    Returns JQuery<TElement>

    this for chaining.

  • Registers the given event listener for the mousewheel event.

    Parameters

    • handler: TypeEventHandler<HTMLElement, undefined, HTMLElement, HTMLElement, "mousewheel">

      Callback to invoke when the event occurs.

    Returns JQuery<TElement>

    this for chaining.

  • next(selector?: string): JQuery<TElement>
  • 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.

    see

    ``

    since

    1.0

    example

    ​ ````Find the very next sibling of each disabled button and change its text "this button is disabled".

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>next demo</title>
    <style>
    span {
    color: blue;
    font-weight: bold;
    }
    button {
    width: 100px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div><button disabled="disabled">First</button> - <span></span></div>
    <div><button>Second</button> - <span></span></div>
    <div><button disabled="disabled">Third</button> - <span></span></div>

    <script>
    $( "button[disabled]" ).next().text( "this button is disabled" );
    </script>

    </body>
    </html>
    example

    ​ ````Find the very next sibling of each paragraph. Keep only the ones with a class "selected".

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>next demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    <p class="selected">Hello Again</p>
    <div><span>And Again</span></div>

    <script>
    $( "p" ).next( ".selected" ).css( "background", "yellow" );
    </script>

    </body>
    </html>

    Parameters

    • Optional selector: string

      A string containing a selector expression to match elements against.

    Returns JQuery<TElement>

  • nextAll(selector?: string): JQuery<TElement>
  • Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

    see

    ``

    since

    1.2

    example

    ​ ````Locate all the divs after the first and give them a class.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>nextAll demo</title>
    <style>
    div {
    width: 80px;
    height: 80px;
    background: #abc;
    border: 2px solid black;
    margin: 10px;
    float: left;
    }
    div.after {
    border-color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>first</div>
    <div>sibling<div>child</div></div>
    <div>sibling</div>
    <div>sibling</div>
    <script>
    $( "div:first" ).nextAll().addClass( "after" );
    </script>

    </body>
    </html>
    example

    ​ ````Locate all the paragraphs after the second child in the body and give them a class.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>nextAll demo</title>
    <style>
    div, p {
    width: 60px;
    height: 60px;
    background: #abc;
    border: 2px solid black;
    margin: 10px;
    float: left;
    }
    .after {
    border-color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>p</p>
    <div>div</div>
    <p>p</p>
    <p>p</p>
    <div>div</div>
    <p>p</p>
    <div>div</div>

    <script>
    $( ":nth-child(1)" ).nextAll( "p" ).addClass( "after" );
    </script>

    </body>
    </html>

    Parameters

    • Optional selector: string

      A string containing a selector expression to match elements against.

    Returns JQuery<TElement>

  • nextUntil(selector_element?: string | Element | JQuery<HTMLElement>, filter?: string): JQuery<TElement>
  • Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

    see

    ``

    since

    1.4

    since

    1.6

    example

    ​ ````Find the siblings that follow <dt id="term-2"> up to the next <dt> and give them a red background color. Also, find <dd> siblings that follow <dt id="term-1"> up to <dt id="term-3"> and give them a green text color.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>nextUntil demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <dl>
    <dt id="term-1">term 1</dt>
    <dd>definition 1-a</dd>
    <dd>definition 1-b</dd>
    <dd>definition 1-c</dd>
    <dd>definition 1-d</dd>
    <dt id="term-2">term 2</dt>
    <dd>definition 2-a</dd>
    <dd>definition 2-b</dd>
    <dd>definition 2-c</dd>
    <dt id="term-3">term 3</dt>
    <dd>definition 3-a</dd>
    <dd>definition 3-b</dd>
    </dl>

    <script>
    $( "#term-2" )
    .nextUntil( "dt" )
    .css( "background-color", "red" );
    var term3 = document.getElementById( "term-3" );
    $( "#term-1" )
    .nextUntil( term3, "dd" )
    .css( "color", "green" );
    </script>

    </body>
    </html>

    Parameters

    • Optional selector_element: string | Element | JQuery<HTMLElement>

      @param selector_element

      • selector — A string containing a selector expression to indicate where to stop matching following sibling elements.
      • element — A DOM node or jQuery object indicating where to stop matching following sibling elements.
    • Optional filter: string

      A string containing a selector expression to match elements against.

    Returns JQuery<TElement>

  • not(selector_function_selection: string | JQuery<HTMLElement> | TypeOrArray<Element> | ((this: TElement, index: number, element: TElement) => boolean)): JQuery<TElement>
  • Remove elements from the set of matched elements.

    see

    ``

    since

    1.0

    since

    1.4

    example

    ​ ````Adds a border to divs that are not green or blue.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>not demo</title>
    <style>
    div {
    width: 50px;
    height: 50px;
    margin: 10px;
    float: left;
    background: yellow;
    border: 2px solid white;
    }
    .green {
    background: #8f8;
    }
    .gray {
    background: #ccc;
    }
    #blueone {
    background: #99f;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div></div>
    <div id="blueone"></div>
    <div></div>
    <div class="green"></div>
    <div class="green"></div>
    <div class="gray"></div>
    <div></div>

    <script>
    $( "div" ).not( ".green, #blueone" )
    .css( "border-color", "red" );
    </script>

    </body>
    </html>
    example

    ​ ````Removes the element with the ID "selected" from the set of all paragraphs.

    $( "p" ).not( $( "#selected" )[ 0 ] );
    
    example

    ​ ````Removes the element with the ID "selected" from the set of all paragraphs.

    $( "p" ).not( "#selected" );
    
    example

    ​ ````Removes all elements that match "div p.selected" from the total set of all paragraphs.

    $( "p" ).not( $( "div p.selected" ) );
    

    Parameters

    • selector_function_selection: string | JQuery<HTMLElement> | TypeOrArray<Element> | ((this: TElement, index: number, element: TElement) => boolean)

      @param selector_function_selection

      • selector — A string containing a selector expression, a DOM element, or an array of elements to match against the set.
      • function — A function used as a test for each element in the set. It accepts two arguments, index, which is the element's index in the jQuery collection, and element, which is the DOM element. Within the function, this refers to the current DOM element.
      • selection — An existing jQuery object to match the current set of elements against.

    Returns JQuery<TElement>

  • Reduce the set of matched elements to the odd ones in the set, numbered from zero.

    see

    ``

    since

    3.5

    example

    ​ ````Highlight the odd items in a list.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>odd demo</title>
    <style>
    .highlight {
    background-color: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    </head>
    <body>

    <ul>
    <li>Look:</li>
    <li>This is some text in a list.</li>
    <li>This is a note about it.</li>
    <li>This is another note about it.</li>
    </ul>

    <script>
    $( "ul li" ).odd().addClass( "highlight" );
    </script>

    </body>
    </html>

    Returns JQuery<TElement>

  • Remove an event handler.

    see

    ``

    since

    1.7

    example

    ​ ````Add and remove event handlers on the colored button.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>off demo</title>
    <style>
    button {
    margin: 5px;
    }
    button#theone {
    color: red;
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button id="theone">Does nothing...</button>
    <button id="bind">Add Click</button>
    <button id="unbind">Remove Click</button>
    <div style="display:none;">Click!</div>

    <script>
    function flash() {
    $( "div" ).show().fadeOut( "slow" );
    }
    $( "#bind" ).click(function() {
    $( "body" )
    .on( "click", "#theone", flash )
    .find( "#theone" )
    .text( "Can Click!" );
    });
    $( "#unbind" ).click(function() {
    $( "body" )
    .off( "click", "#theone", flash )
    .find( "#theone" )
    .text( "Does nothing..." );
    });
    </script>

    </body>
    </html>
    example

    ​ ````Remove just one previously bound handler by passing it as the third argument:

    var foo = function() {
    // Code to handle some kind of event
    };

    // ... Now foo will be called when paragraphs are clicked ...
    $( "body" ).on( "click", "p", foo );

    // ... Foo will no longer be called.
    $( "body" ).off( "click", "p", foo );

    Type Parameters

    • TType extends string

    Parameters

    • events: TType

      One or more space-separated event types and optional namespaces, or just namespaces, such as "click", "keydown.myPlugin", or ".myPlugin".

    • selector: string

      A selector which should match the one originally passed to .on() when attaching event handlers.

    • handler: false | TypeEventHandler<TElement, any, any, any, TType>

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Remove an event handler.

    see

    ``

    since

    1.7

    example

    ​ ````Remove all delegated click handlers from all paragraphs:

    $( "p" ).off( "click", "**" );
    
    example

    ​ ````Unbind all delegated event handlers by their namespace:

    var validate = function() {
    // Code to validate form entries
    };

    // Delegate events under the ".validator" namespace
    $( "form" ).on( "click.validator", "button", validate );

    $( "form" ).on( "keypress.validator", "input[type='text']", validate );

    // Remove event handlers in the ".validator" namespace
    $( "form" ).off( ".validator" );

    Type Parameters

    • TType extends string

    Parameters

    • events: TType

      One or more space-separated event types and optional namespaces, or just namespaces, such as "click", "keydown.myPlugin", or ".myPlugin".

    • Optional selector_handler: string | false | TypeEventHandler<TElement, any, any, any, TType>

      @param selector_handler

      • selector — A selector which should match the one originally passed to .on() when attaching event handlers.
      • handler — A handler function previously attached for the event(s), or the special value false.

    Returns JQuery<TElement>

  • Remove an event handler.

    see

    ``

    since

    1.7

    Parameters

    • events: TypeEventHandlers<TElement, any, any, any>

      An object where the string keys represent one or more space-separated event types and optional namespaces, and the values represent handler functions previously attached for the event(s).

    • Optional selector: string

      A selector which should match the one originally passed to .on() when attaching event handlers.

    Returns JQuery<TElement>

  • Remove an event handler.

    see

    ``

    since

    1.7

    example

    ​ ````Remove all event handlers from all paragraphs:

    $( "p" ).off();
    

    Parameters

    • Optional event: TriggeredEvent<TElement, any, any, any>

      A jQuery.Event object.

    Returns JQuery<TElement>

  • Set the current coordinates of every element in the set of matched elements, relative to the document.

    see

    ``

    since

    1.4

    example

    ​ ````Set the offset of the second paragraph:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>offset demo</title>
    <style>
    p {
    margin-left: 10px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p><p>2nd Paragraph</p>

    <script>
    $( "p:last" ).offset({ top: 10, left: 30 });
    </script>

    </body>
    </html>

    Parameters

    • coordinates_function: CoordinatesPartial | ((this: TElement, index: number, coords: Coordinates) => CoordinatesPartial)

      @param coordinates_function

      • coordinates — An object containing the properties top and left, which are numbers indicating the new top and left coordinates for the elements.
      • function — A function to return the coordinates to set. Receives the index of the element in the collection as the first argument and the current coordinates as the second argument. The function should return an object with the new top and left properties.

    Returns JQuery<TElement>

  • Get the current coordinates of the first element in the set of matched elements, relative to the document.

    see

    ``

    since

    1.2

    example

    ​ ````Access the offset of the second paragraph:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>offset demo</title>
    <style>
    p {
    margin-left: 10px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p><p>2nd Paragraph</p>

    <script>
    var p = $( "p:last" );
    var offset = p.offset();
    p.html( "left: " + offset.left + ", top: " + offset.top );
    </script>

    </body>
    </html>
    example

    ​ ````Click to see the offset.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>offset demo</title>
    <style>
    p {
    margin-left: 10px;
    color: blue;
    width: 200px;
    cursor: pointer;
    }
    span {
    color: red;
    cursor: pointer;
    }
    div.abs {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 220px;
    top: 35px;
    background-color: green;
    cursor: pointer;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div id="result">Click an element.</div>
    <p>
    This is the best way to <span>find</span> an offset.
    </p>
    <div class="abs">
    </div>

    <script>
    $( "*", document.body ).click(function( event ) {
    var offset = $( this ).offset();
    event.stopPropagation();
    $( "#result" ).text( this.tagName +
    " coords ( " + offset.left + ", " + offset.top + " )" );
    });
    </script>

    </body>
    </html>

    Returns undefined | Coordinates

  • offsetParent(): JQuery<TElement>
  • Get the closest ancestor element that is positioned.

    see

    ``

    since

    1.2.6

    example

    ​ ````Find the offsetParent of item "A."

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>offsetParent demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <ul class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii" style="position: relative;">II
    <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
    <ul class="level-3">
    <li class="item-1">1</li>
    <li class="item-2">2</li>
    <li class="item-3">3</li>
    </ul>
    </li>
    <li class="item-c">C</li>
    </ul>
    </li>
    <li class="item-iii">III</li>
    </ul>

    <script>$( "li.item-a" ).offsetParent().css( "background-color", "red" );</script>

    </body>
    </html>

    Returns JQuery<TElement>

  • on<TType, TData>(events: TType, selector: string, data: TData, handler: TypeEventHandler<TElement, TData, any, any, TType>): JQuery<TElement>
  • on<TType, TData>(events: TType, selector: undefined | null, data: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, TType>): JQuery<TElement>
  • on(events: string, selector: undefined | null | string, data: any, handler: ((event: JQueryEventObject) => void)): JQuery<TElement>
  • on<TType>(events: TType, selector: string, handler: false | TypeEventHandler<TElement, undefined, any, any, TType>): JQuery<TElement>
  • on<TType, TData>(events: TType, data: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, TType>): JQuery<TElement>
  • on(events: string, selector_data: any, handler: ((event: JQueryEventObject) => void)): JQuery<TElement>
  • on<TType>(events: TType, handler: false | TypeEventHandler<TElement, undefined, TElement, TElement, TType>): JQuery<TElement>
  • on(events: string, handler: ((event: JQueryEventObject) => void)): JQuery<TElement>
  • on<TData>(events: TypeEventHandlers<TElement, TData, any, any>, selector: string, data: TData): JQuery<TElement>
  • on<TData>(events: TypeEventHandlers<TElement, TData, TElement, TElement>, selector: undefined | null, data: TData): JQuery<TElement>
  • on(events: TypeEventHandlers<TElement, undefined, any, any>, selector: string): JQuery<TElement>
  • on<TData>(events: TypeEventHandlers<TElement, TData, TElement, TElement>, data: TData): JQuery<TElement>
  • on(events: TypeEventHandlers<TElement, undefined, TElement, TElement>): JQuery<TElement>
  • Attach an event handler function for one or more events to the selected elements.

    see

    ``

    since

    1.7

    Type Parameters

    • TType extends string

    • TData

    Parameters

    • events: TType

      One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

    • selector: string

      A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

    • data: TData

      Data to be passed to the handler in event.data when an event is triggered.

    • handler: TypeEventHandler<TElement, TData, any, any, TType>

      A function to execute when the event is triggered.

    Returns JQuery<TElement>

  • Attach an event handler function for one or more events to the selected elements.

    see

    ``

    since

    1.7

    Type Parameters

    • TType extends string

    • TData

    Parameters

    • events: TType

      One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

    • selector: undefined | null

      A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

    • data: TData

      Data to be passed to the handler in event.data when an event is triggered.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, TType>

      A function to execute when the event is triggered.

    Returns JQuery<TElement>

  • Attach an event handler function for one or more events to the selected elements.

    see

    ``

    since

    1.7

    deprecated

    ​ Deprecated. Use `` in place of `{@link JQueryEventObject }`.

    Parameters

    • events: string

      One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

    • selector: undefined | null | string

      A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

    • data: any

      Data to be passed to the handler in event.data when an event is triggered.

    • handler: ((event: JQueryEventObject) => void)

      A function to execute when the event is triggered.

        • (event: JQueryEventObject): void
        • Parameters

          • event: JQueryEventObject

          Returns void

    Returns JQuery<TElement>

  • Attach an event handler function for one or more events to the selected elements.

    see

    ``

    since

    1.7

    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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>on 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 me!</p>
    <span></span>

    <script>
    var count = 0;
    $( "body" ).on( "click", "p", function() {
    $( this ).after( "<p>Another paragraph! " + (++count) + "</p>" );
    });
    </script>

    </body>
    </html>
    example

    ​ ````Display each paragraph's text in an alert box whenever it is clicked:

    $( "body" ).on( "click", "p", function() {
    alert( $( this ).text() );
    });
    example

    ​ ````Cancel a link's default action using the .preventDefault() method:

    $( "body" ).on( "click", "a", function( event ) {
    event.preventDefault();
    });

    Type Parameters

    • TType extends string

    Parameters

    • events: TType

      One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

    • selector: string

      A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

    • handler: false | TypeEventHandler<TElement, undefined, any, any, TType>

      A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.

    Returns JQuery<TElement>

  • Attach an event handler function for one or more events to the selected elements.

    see

    ``

    since

    1.7

    example

    ​ ````Pass data to the event handler, which is specified here by name:

    function myHandler( event ) {
    alert( event.data.foo );
    }
    $( "p" ).on( "click", { foo: "bar" }, myHandler );

    Type Parameters

    • TType extends string

    • TData

    Parameters

    • events: TType

      One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

    • data: TData

      Data to be passed to the handler in event.data when an event is triggered.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, TType>

      A function to execute when the event is triggered.

    Returns JQuery<TElement>

  • Attach an event handler function for one or more events to the selected elements.

    see

    ``

    since

    1.7

    deprecated

    ​ Deprecated. Use `` in place of `{@link JQueryEventObject }`.

    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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>on 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 me!</p>
    <span></span>

    <script>
    var count = 0;
    $( "body" ).on( "click", "p", function() {
    $( this ).after( "<p>Another paragraph! " + (++count) + "</p>" );
    });
    </script>

    </body>
    </html>
    example

    ​ ````Display each paragraph's text in an alert box whenever it is clicked:

    $( "body" ).on( "click", "p", function() {
    alert( $( this ).text() );
    });
    example

    ​ ````Cancel a link's default action using the .preventDefault() method:

    $( "body" ).on( "click", "a", function( event ) {
    event.preventDefault();
    });
    example

    ​ ````Pass data to the event handler, which is specified here by name:

    function myHandler( event ) {
    alert( event.data.foo );
    }
    $( "p" ).on( "click", { foo: "bar" }, myHandler );

    Parameters

    • events: string

      One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

    • selector_data: any

      @param selector_data

      • selector — A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
      • data — Data to be passed to the handler in event.data when an event is triggered.
    • handler: ((event: JQueryEventObject) => void)

      A function to execute when the event is triggered.

        • (event: JQueryEventObject): void
        • Parameters

          • event: JQueryEventObject

          Returns void

    Returns JQuery<TElement>

  • Attach an event handler function for one or more events to the selected elements.

    see

    ``

    since

    1.7

    example

    ​ ````Display a paragraph's text in an alert when it is clicked:

    $( "p" ).on( "click", function() {
    alert( $( this ).text() );
    });
    example

    ​ ````Cancel a form submit action and prevent the event from bubbling up by returning false:

    $( "form" ).on( "submit", false );
    
    example

    ​ ````Cancel only the default action by using .preventDefault().

    $( "form" ).on( "submit", function( event ) {
    event.preventDefault();
    });
    example

    ​ ````Stop submit events from bubbling without preventing form submit, using .stopPropagation().

    $( "form" ).on( "submit", function( event ) {
    event.stopPropagation();
    });
    example

    ​ ````Pass data to the event handler using the second argument to .trigger()

    $( "div" ).on( "click", function( event, person ) {
    alert( "Hello, " + person.name );
    });
    $( "div" ).trigger( "click", { name: "Jim" } );
    example

    ​ ````Use the the second argument of .trigger() to pass an array of data to the event handler

    $( "div" ).on( "click", function( event, salutation, name ) {
    alert( salutation + ", " + name );
    });
    $( "div" ).trigger( "click", [ "Goodbye", "Jim" ] );
    example

    ​ ````Attach and trigger custom (non-browser) events.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>on 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" ).on( "myCustomEvent", function( event, myName ) {
    $( 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>
    example

    ​ ````Attach multiple events—one on mouseenter and one on mouseleave to the same element:

    $( "#cart" ).on( "mouseenter mouseleave", function( event ) {
    $( this ).toggleClass( "active" );
    });

    Type Parameters

    • TType extends string

    Parameters

    • events: TType

      One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

    • handler: false | TypeEventHandler<TElement, undefined, TElement, TElement, TType>

      A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.

    Returns JQuery<TElement>

  • Attach an event handler function for one or more events to the selected elements.

    see

    ``

    since

    1.7

    deprecated

    ​ Deprecated. Use `` in place of `{@link JQueryEventObject }`.

    example

    ​ ````Display a paragraph's text in an alert when it is clicked:

    $( "p" ).on( "click", function() {
    alert( $( this ).text() );
    });
    example

    ​ ````Cancel a form submit action and prevent the event from bubbling up by returning false:

    $( "form" ).on( "submit", false );
    
    example

    ​ ````Cancel only the default action by using .preventDefault().

    $( "form" ).on( "submit", function( event ) {
    event.preventDefault();
    });
    example

    ​ ````Stop submit events from bubbling without preventing form submit, using .stopPropagation().

    $( "form" ).on( "submit", function( event ) {
    event.stopPropagation();
    });
    example

    ​ ````Pass data to the event handler using the second argument to .trigger()

    $( "div" ).on( "click", function( event, person ) {
    alert( "Hello, " + person.name );
    });
    $( "div" ).trigger( "click", { name: "Jim" } );
    example

    ​ ````Use the the second argument of .trigger() to pass an array of data to the event handler

    $( "div" ).on( "click", function( event, salutation, name ) {
    alert( salutation + ", " + name );
    });
    $( "div" ).trigger( "click", [ "Goodbye", "Jim" ] );
    example

    ​ ````Attach and trigger custom (non-browser) events.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>on 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" ).on( "myCustomEvent", function( event, myName ) {
    $( 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>
    example

    ​ ````Attach multiple events—one on mouseenter and one on mouseleave to the same element:

    $( "#cart" ).on( "mouseenter mouseleave", function( event ) {
    $( this ).toggleClass( "active" );
    });

    Parameters

    • events: string

      One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

    • handler: ((event: JQueryEventObject) => void)

      A function to execute when the event is triggered.

        • (event: JQueryEventObject): void
        • Parameters

          • event: JQueryEventObject

          Returns void

    Returns JQuery<TElement>

  • Attach an event handler function for one or more events to the selected elements.

    see

    ``

    since

    1.7

    Type Parameters

    • TData

    Parameters

    • events: TypeEventHandlers<TElement, TData, any, any>

      An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

    • selector: string

      A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.

    • data: TData

      Data to be passed to the handler in event.data when an event occurs.

    Returns JQuery<TElement>

  • Attach an event handler function for one or more events to the selected elements.

    see

    ``

    since

    1.7

    Type Parameters

    • TData

    Parameters

    • events: TypeEventHandlers<TElement, TData, TElement, TElement>

      An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

    • selector: undefined | null

      A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.

    • data: TData

      Data to be passed to the handler in event.data when an event occurs.

    Returns JQuery<TElement>

  • Attach an event handler function for one or more events to the selected elements.

    see

    ``

    since

    1.7

    Parameters

    • events: TypeEventHandlers<TElement, undefined, any, any>

      An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

    • selector: string

      A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.

    Returns JQuery<TElement>

  • Attach an event handler function for one or more events to the selected elements.

    see

    ``

    since

    1.7

    Type Parameters

    • TData

    Parameters

    • events: TypeEventHandlers<TElement, TData, TElement, TElement>

      An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

    • data: TData

      Data to be passed to the handler in event.data when an event occurs.

    Returns JQuery<TElement>

  • Attach an event handler function for one or more events to the selected elements.

    see

    ``

    since

    1.7

    example

    ​ ````Attach multiple event handlers simultaneously using a plain object.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>on demo</title>
    <style>
    .test {
    color: #000;
    padding: .5em;
    border: 1px solid #444;
    }
    .active {
    color: #900;
    }
    .inside {
    background-color: aqua;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div class="test">test div</div>

    <script>
    $( "div.test" ).on({
    click: function() {
    $( this ).toggleClass( "active" );
    }, mouseenter: function() {
    $( this ).addClass( "inside" );
    }, mouseleave: function() {
    $( this ).removeClass( "inside" );
    }
    });
    </script>

    </body>
    </html>

    Parameters

    • events: TypeEventHandlers<TElement, undefined, TElement, TElement>

      An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

    Returns JQuery<TElement>

  • one<TType, TData>(events: TType, selector: string, data: TData, handler: TypeEventHandler<TElement, TData, any, any, TType>): JQuery<TElement>
  • one<TType, TData>(events: TType, selector: undefined | null, data: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, TType>): JQuery<TElement>
  • one<TType>(events: TType, selector: string, handler: false | TypeEventHandler<TElement, undefined, any, any, TType>): JQuery<TElement>
  • one<TType, TData>(events: TType, data: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, TType>): JQuery<TElement>
  • one<TType>(events: TType, handler: false | TypeEventHandler<TElement, undefined, TElement, TElement, TType>): JQuery<TElement>
  • one<TData>(events: TypeEventHandlers<TElement, TData, any, any>, selector: string, data: TData): JQuery<TElement>
  • one<TData>(events: TypeEventHandlers<TElement, TData, TElement, TElement>, selector: undefined | null, data: TData): JQuery<TElement>
  • one(events: TypeEventHandlers<TElement, undefined, any, any>, selector: string): JQuery<TElement>
  • one<TData>(events: TypeEventHandlers<TElement, TData, TElement, TElement>, data: TData): JQuery<TElement>
  • one(events: TypeEventHandlers<TElement, undefined, TElement, TElement>): JQuery<TElement>
  • Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

    see

    ``

    since

    1.7

    Type Parameters

    • TType extends string

    • TData

    Parameters

    • events: TType

      One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

    • selector: string

      A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

    • data: TData

      Data to be passed to the handler in event.data when an event is triggered.

    • handler: TypeEventHandler<TElement, TData, any, any, TType>

      A function to execute when the event is triggered.

    Returns JQuery<TElement>

  • Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

    see

    ``

    since

    1.7

    Type Parameters

    • TType extends string

    • TData

    Parameters

    • events: TType

      One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

    • selector: undefined | null

      A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

    • data: TData

      Data to be passed to the handler in event.data when an event is triggered.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, TType>

      A function to execute when the event is triggered.

    Returns JQuery<TElement>

  • Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

    see

    ``

    since

    1.7

    Type Parameters

    • TType extends string

    Parameters

    • events: TType

      One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

    • selector: string

      A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

    • handler: false | TypeEventHandler<TElement, undefined, any, any, TType>

      A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.

    Returns JQuery<TElement>

  • Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

    see

    ``

    since

    1.7

    Type Parameters

    • TType extends string

    • TData

    Parameters

    • events: TType

      One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

    • data: TData

      Data to be passed to the handler in event.data when an event is triggered.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, TType>

      A function to execute when the event is triggered.

    Returns JQuery<TElement>

  • Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

    see

    ``

    since

    1.7

    example

    ​ ````Tie a one-time click to each div.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>one demo</title>
    <style>
    div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    background: green;
    border: 10px outset;
    cursor:pointer;
    }
    p {
    color: red;
    margin: 0;
    clear: left;
    }
    </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>
    <p>Click a green square...</p>

    <script>
    var n = 0;
    $( "div" ).one( "click", function() {
    var index = $( "div" ).index( this );
    $( this ).css({
    borderStyle: "inset",
    cursor: "auto"
    });
    $( "p" ).text( "Div at index #" + index + " clicked." +
    " That's " + (++n) + " total clicks." );
    });
    </script>

    </body>
    </html>
    example

    ​ ````To display the text of all paragraphs in an alert box the first time each of them is clicked:

    $( "p" ).one( "click", function() {
    alert( $( this ).text() );
    });
    example

    ​ ````Event handlers will trigger once per element per event type

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>one demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div class="count">0</div>
    <div class="target">Hover/click me</div>

    <script>
    var n = 0;
    $(".target").one("click mouseenter", function() {
    $(".count").html(++n);
    });
    </script>

    </body>
    </html>

    Type Parameters

    • TType extends string

    Parameters

    • events: TType

      One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

    • handler: false | TypeEventHandler<TElement, undefined, TElement, TElement, TType>

      A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.

    Returns JQuery<TElement>

  • Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

    see

    ``

    since

    1.7

    Type Parameters

    • TData

    Parameters

    • events: TypeEventHandlers<TElement, TData, any, any>

      An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

    • selector: string

      A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.

    • data: TData

      Data to be passed to the handler in event.data when an event occurs.

    Returns JQuery<TElement>

  • Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

    see

    ``

    since

    1.7

    Type Parameters

    • TData

    Parameters

    • events: TypeEventHandlers<TElement, TData, TElement, TElement>

      An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

    • selector: undefined | null

      A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.

    • data: TData

      Data to be passed to the handler in event.data when an event occurs.

    Returns JQuery<TElement>

  • Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

    see

    ``

    since

    1.7

    Parameters

    • events: TypeEventHandlers<TElement, undefined, any, any>

      An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

    • selector: string

      A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.

    Returns JQuery<TElement>

  • Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

    see

    ``

    since

    1.7

    Type Parameters

    • TData

    Parameters

    • events: TypeEventHandlers<TElement, TData, TElement, TElement>

      An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

    • data: TData

      Data to be passed to the handler in event.data when an event occurs.

    Returns JQuery<TElement>

  • Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

    see

    ``

    since

    1.7

    Parameters

    • events: TypeEventHandlers<TElement, undefined, TElement, TElement>

      An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

    Returns JQuery<TElement>

  • outerHeight(value_function: string | number | ((this: TElement, index: number, height: number) => string | number), includeMargin?: boolean): JQuery<TElement>
  • outerHeight(includeMargin?: boolean): undefined | number
  • Set the CSS outer height of each element in the set of matched elements.

    see

    ``

    since

    1.8.0

    example

    ​ ````Change the outer height of each div the first time it is clicked (and change its color).

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>outerHeight demo</title>
    <style>
    div {
    width: 50px;
    padding: 10px;
    height: 60px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
    }
    .mod {
    background: blue;
    cursor: default;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>d</div>
    <div>d</div>
    <div>d</div>
    <div>d</div>
    <div>d</div>

    <script>
    var modHeight = 60;
    $( "div" ).one( "click", function() {
    $( this ).outerHeight( modHeight ).addClass( "mod" );
    modHeight -= 8;
    });
    </script>

    </body>
    </html>

    Parameters

    • value_function: string | number | ((this: TElement, index: number, height: number) => string | number)

      @param value_function

      • value — A number representing the number of pixels, or a number along with an optional unit of measure appended (as a string).
      • function — A function returning the outer height to set. Receives the index position of the element in the set and the old outer height as arguments. Within the function, this refers to the current element in the set.
    • Optional includeMargin: boolean

    Returns JQuery<TElement>

  • Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements.

    see

    ``

    since

    1.2.6

    example

    ​ ````Get the outerHeight of a paragraph.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>outerHeight demo</title>
    <style>
    p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p><p></p>

    <script>
    var p = $( "p:first" );
    $( "p:last" ).text(
    "outerHeight:" + p.outerHeight() +
    " , outerHeight( true ):" + p.outerHeight( true ) );
    </script>

    </body>
    </html>

    Parameters

    • Optional includeMargin: boolean

      A Boolean indicating whether to include the element's margin in the calculation.

    Returns undefined | number

  • outerWidth(value_function: string | number | ((this: TElement, index: number, width: number) => string | number), includeMargin?: boolean): JQuery<TElement>
  • outerWidth(includeMargin?: boolean): undefined | number
  • Set the CSS outer width of each element in the set of matched elements.

    see

    ``

    since

    1.8.0

    example

    ​ ````Change the outer width of each div the first time it is clicked (and change its color).

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>outerWidth demo</title>
    <style>
    div {
    width: 60px;
    padding: 10px;
    height: 50px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
    }
    .mod {
    background: blue;
    cursor: default;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>d</div>
    <div>d</div>
    <div>d</div>
    <div>d</div>
    <div>d</div>

    <script>
    var modWidth = 60;
    $( "div" ).one( "click", function() {
    $( this ).outerWidth( modWidth ).addClass( "mod" );
    modWidth -= 8;
    });
    </script>

    </body>
    </html>

    Parameters

    • value_function: string | number | ((this: TElement, index: number, width: number) => string | number)

      @param value_function

      • value — A number representing the number of pixels, or a number along with an optional unit of measure appended (as a string).
      • function — A function returning the outer width to set. Receives the index position of the element in the set and the old outer width as arguments. Within the function, this refers to the current element in the set.
    • Optional includeMargin: boolean

    Returns JQuery<TElement>

  • Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements.

    see

    ``

    since

    1.2.6

    example

    ​ ````Get the outerWidth of a paragraph.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>outerWidth demo</title>
    <style>
    p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p><p></p>

    <script>
    var p = $( "p:first" );
    $( "p:last" ).text(
    "outerWidth:" + p.outerWidth() +
    " , outerWidth( true ):" + p.outerWidth( true ) );
    </script>

    </body>
    </html>

    Parameters

    • Optional includeMargin: boolean

      A Boolean indicating whether to include the element's margin in the calculation.

    Returns undefined | number

  • parent(selector?: string): JQuery<TElement>
  • Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

    see

    ``

    since

    1.0

    example

    ​ ````Shows the parent of each element as (parent > child). Check the View Source to see the raw html.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>parent demo</title>
    <style>
    div, p {
    margin: 10px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>div,
    <span>span, </span>
    <b>b </b>
    </div>

    <p>p,
    <span>span,
    <em>em </em>
    </span>
    </p>

    <div>div,
    <strong>strong,
    <span>span, </span>
    <em>em,
    <b>b, </b>
    </em>
    </strong>
    <b>b </b>
    </div>

    <script>
    $( "*", document.body ).each(function() {
    var parentTag = $( this ).parent().get( 0 ).tagName;
    $( this ).prepend( document.createTextNode( parentTag + " > " ) );
    });
    </script>

    </body>
    </html>
    example

    ​ ````Find the parent element of each paragraph with a class "selected".

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>parent demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div><p>Hello</p></div>
    <div class="selected"><p>Hello Again</p></div>

    <script>
    $( "p" ).parent( ".selected" ).css( "background", "yellow" );
    </script>

    </body>
    </html>

    Parameters

    • Optional selector: string

      A string containing a selector expression to match elements against.

    Returns JQuery<TElement>

  • parents<K>(selector: K | JQuery<K>): JQuery<HTMLElementTagNameMap[K]>
  • parents<K>(selector: K | JQuery<K>): JQuery<SVGElementTagNameMap[K]>
  • parents<E>(selector?: string): JQuery<E>
  • Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

    see

    ``

    since

    1.0

    example

    ​ ````Find all parent elements of each b.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>parents demo</title>
    <style>
    b, span, p, html body {
    padding: .5em;
    border: 1px solid;
    }
    b {
    color: blue;
    }
    strong {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>
    <p>
    <span>
    <b>My parents are: </b>
    </span>
    </p>
    </div>

    <script>
    var parentEls = $( "b" ).parents()
    .map(function() {
    return this.tagName;
    })
    .get()
    .join( ", " );
    $( "b" ).append( "<strong>" + parentEls + "</strong>" );
    </script>

    </body>
    </html>
    example

    ​ ````Click to find all unique div parent elements of each span.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>parents demo</title>
    <style>
    p, div, span {
    margin: 2px;
    padding: 1px;
    }
    div {
    border: 2px white solid;
    }
    span {
    cursor: pointer;
    font-size: 12px;
    }
    .selected {
    color: blue;
    }
    b {
    color: red;
    display: block;
    font-size: 14px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>
    <div>
    <div><span>Hello</span></div>
    <span>Hello Again</span>
    </div>
    <div>
    <span>And Hello Again</span>
    </div>
    </p>
    <b>Click Hellos to toggle their parents.</b>

    <script>
    function showParents() {
    $( "div" ).css( "border-color", "white" );
    var len = $( "span.selected" )
    .parents( "div" )
    .css( "border", "2px red solid" )
    .length;
    $( "b" ).text( "Unique div parents: " + len );
    }
    $( "span" ).click(function() {
    $( this ).toggleClass( "selected" );
    showParents();
    });
    </script>

    </body>
    </html>

    Type Parameters

    • K extends keyof HTMLElementTagNameMap

    Parameters

    • selector: K | JQuery<K>

      A string containing a selector expression to match elements against.

    Returns JQuery<HTMLElementTagNameMap[K]>

  • Type Parameters

    • K extends keyof SVGElementTagNameMap

    Parameters

    Returns JQuery<SVGElementTagNameMap[K]>

  • Type Parameters

    • E extends HTMLElement

    Parameters

    • Optional selector: string

    Returns JQuery<E>

  • parentsUntil(selector_element?: string | Element | JQuery<HTMLElement>, filter?: string): JQuery<TElement>
  • 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.

    see

    ``

    since

    1.4

    since

    1.6

    example

    ​ ````Find the ancestors of <li class="item-a"> up to <ul class="level-1"> and give them a red background color. Also, find ancestors of <li class="item-2"> that have a class of "yes" up to <ul class="level-1"> and give them a green border.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>parentsUntil demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <ul class="level-1 yes">
    <li class="item-i">I</li>
    <li class="item-ii">II
    <ul class="level-2 yes">
    <li class="item-a">A</li>
    <li class="item-b">B
    <ul class="level-3">
    <li class="item-1">1</li>
    <li class="item-2">2</li>
    <li class="item-3">3</li>
    </ul>
    </li>
    <li class="item-c">C</li>
    </ul>
    </li>
    <li class="item-iii">III</li>
    </ul>

    <script>
    $( "li.item-a" )
    .parentsUntil( ".level-1" )
    .css( "background-color", "red" );

    $( "li.item-2" )
    .parentsUntil( $( "ul.level-1" ), ".yes" )
    .css( "border", "3px solid green" );
    </script>

    </body>
    </html>

    Parameters

    • Optional selector_element: string | Element | JQuery<HTMLElement>

      @param selector_element

      • selector — A string containing a selector expression to indicate where to stop matching ancestor elements.
      • element — A DOM node or jQuery object indicating where to stop matching ancestor elements.
    • Optional filter: string

      A string containing a selector expression to match elements against.

    Returns JQuery<TElement>

  • Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

    see

    ``

    since

    1.2

    example

    ​ ````Access the position of the second paragraph:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>position demo</title>
    <style>
    div {
    padding: 15px;
    }
    p {
    margin-left: 10px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>
    <p>Hello</p>
    </div>
    <p></p>

    <script>
    var p = $( "p:first" );
    var position = p.position();
    $( "p:last" ).text( "left: " + position.left + ", top: " + position.top );
    </script>

    </body>
    </html>

    Returns Coordinates

  • Parameters

    Returns JQuery<HTMLElement>

  • Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

    see

    ``

    since

    1.0

    example

    ​ ````Prepends some HTML to all paragraphs.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>prepend demo</title>
    <style>
    p {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>there, friend!</p>
    <p>amigo!</p>

    <script>
    $( "p" ).prepend( "<b>Hello </b>" );
    </script>

    </body>
    </html>
    example

    ​ ````Prepends a DOM Element to all paragraphs.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>prepend 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'd say</p>
    <p>is what I said</p>

    <script>
    $( "p" ).prepend( document.createTextNode( "Hello " ) );
    </script>

    </body>
    </html>
    example

    ​ ````Prepends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>prepend demo</title>
    <style>
    p {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p> is what was said.</p><b>Hello</b>

    <script>
    $( "p" ).prepend( $( "b" ) );
    </script>

    </body>
    </html>

    Parameters

    • Rest ...contents: (string | TypeOrArray<Node | JQuery<Node>>)[]

      One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or jQuery objects to insert at the beginning of each element in the set of matched elements.

    Returns JQuery<TElement>

  • Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

    see

    ``

    since

    1.4

    Parameters

    • funсtion: ((this: TElement, index: number, html: string) => string | TypeOrArray<Node | JQuery<Node>>)

      A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert at the beginning of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, this refers to the current element in the set.

    Returns JQuery<TElement>

  • Insert every element in the set of matched elements to the beginning of the target.

    see

    ``

    since

    1.0

    example

    ​ ````Prepend all spans to the element with the ID "foo" (Check .prepend() documentation for more examples)

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>prependTo demo</title>
    <style>
    div {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div id="foo">FOO!</div>
    <span>I have something to say... </span>

    <script>
    $( "span" ).prependTo( "#foo" );
    </script>

    </body>
    </html>

    Parameters

    • target: string | JQuery<HTMLElement> | TypeOrArray<Element | DocumentFragment>

      A selector, element, HTML string, array of elements, or jQuery object; the matched set of elements will be inserted at the beginning of the element(s) specified by this parameter.

    Returns JQuery<TElement>

  • prev(selector?: string): JQuery<TElement>
  • 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.

    see

    ``

    since

    1.0

    example

    ​ ````Find the very previous sibling of each div.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>prev demo</title>
    <style>
    div {
    width: 40px;
    height: 40px;
    margin: 10px;
    float: left;
    border: 2px blue solid;
    padding: 2px;
    }
    span {
    font-size: 14px;
    }
    p {
    clear: left;
    margin: 10px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div></div>
    <div></div>
    <div><span>has child</span></div>
    <div></div>
    <div></div>
    <div></div>
    <div id="start"></div>
    <div></div>
    <p><button>Go to Prev</button></p>

    <script>
    var $curr = $( "#start" );
    $curr.css( "background", "#f99" );
    $( "button" ).click(function() {
    $curr = $curr.prev();
    $( "div" ).css( "background", "" );
    $curr.css( "background", "#f99" );
    });
    </script>

    </body>
    </html>
    example

    ​ ````For each paragraph, find the very previous sibling that has a class "selected".

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>prev demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div><span>Hello</span></div>
    <p class="selected">Hello Again</p>
    <p>And Again</p>

    <script>
    $( "p" ).prev( ".selected" ).css( "background", "yellow" );
    </script>

    </body>
    </html>

    Parameters

    • Optional selector: string

      A string containing a selector expression to match elements against.

    Returns JQuery<TElement>

  • prevAll(selector?: string): JQuery<TElement>
  • Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.

    see

    ``

    since

    1.2

    example

    ​ ````Locate all the divs preceding the last div and give them a class.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>prevAll demo</title>
    <style>
    div {
    width: 70px;
    height: 70px;
    background: #abc;
    border: 2px solid black;
    margin: 10px;
    float: left;
    }
    div.before {
    border-color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
    $( "div:last" ).prevAll().addClass( "before" );
    </script>

    </body>
    </html>

    Parameters

    • Optional selector: string

      A string containing a selector expression to match elements against.

    Returns JQuery<TElement>

  • prevUntil(selector_element?: string | Element | JQuery<HTMLElement>, filter?: string): JQuery<TElement>
  • Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

    see

    ``

    since

    1.4

    since

    1.6

    example

    ​ ````Find the siblings that precede <dt id="term-2"> up to the preceding <dt> and give them a red background color. Also, find previous <dd> siblings of <dt id="term-3"> up to <dt id="term-1"> and give them a green text color.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>prevUntil demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <dl>
    <dt id="term-1">term 1</dt>
    <dd>definition 1-a</dd>
    <dd>definition 1-b</dd>
    <dd>definition 1-c</dd>
    <dd>definition 1-d</dd>

    <dt id="term-2">term 2</dt>
    <dd>definition 2-a</dd>
    <dd>definition 2-b</dd>
    <dd>definition 2-c</dd>

    <dt id="term-3">term 3</dt>
    <dd>definition 3-a</dd>
    <dd>definition 3-b</dd>
    </dl>

    <script>
    $( "#term-2" ).prevUntil( "dt" )
    .css( "background-color", "red" );

    var term1 = document.getElementById( "term-1" );
    $( "#term-3" ).prevUntil( term1, "dd" )
    .css( "color", "green" );
    </script>

    </body>
    </html>

    Parameters

    • Optional selector_element: string | Element | JQuery<HTMLElement>

      @param selector_element

      • selector — A string containing a selector expression to indicate where to stop matching preceding sibling elements.
      • element — A DOM node or jQuery object indicating where to stop matching preceding sibling elements.
    • Optional filter: string

      A string containing a selector expression to match elements against.

    Returns JQuery<TElement>

  • Prints the currently selected element.

    Parameters

    • Optional settings: Partial<PrintSettings>

      Optional settings for printing.

    Returns JQuery<TElement>

    This jQuery instance for chaining.

  • progressbar(): JQuery<HTMLElement>
  • progressbar(methodName: "destroy"): void
  • progressbar(methodName: "disable"): void
  • progressbar(methodName: "enable"): void
  • progressbar(methodName: "refresh"): void
  • progressbar(methodName: "value"): any
  • progressbar(methodName: "value", value: number): void
  • progressbar(methodName: "value", value: boolean): void
  • progressbar(methodName: "widget"): JQuery<HTMLElement>
  • progressbar(methodName: string): JQuery<HTMLElement>
  • progressbar(options: ProgressbarOptions): JQuery<HTMLElement>
  • progressbar(optionLiteral: string, optionName: string): any
  • progressbar(optionLiteral: string, options: ProgressbarOptions): any
  • progressbar(optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
  • Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "destroy"

    Returns void

  • Parameters

    • methodName: "disable"

    Returns void

  • Parameters

    • methodName: "enable"

    Returns void

  • Parameters

    • methodName: "refresh"

    Returns void

  • Parameters

    • methodName: "value"

    Returns any

  • Parameters

    • methodName: "value"
    • value: number

    Returns void

  • Parameters

    • methodName: "value"
    • value: boolean

    Returns void

  • Parameters

    • methodName: "widget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: string

    Returns JQuery<HTMLElement>

  • Parameters

    Returns JQuery<HTMLElement>

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery<HTMLElement>

  • promise<T>(type: string, target: T): T & Promise<JQuery<TElement>, any, any>
  • promise<T>(target: T): T & Promise<JQuery<TElement>, any, any>
  • promise(type?: string): Promise<JQuery<TElement>, any, any>
  • Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.

    see

    ``

    since

    1.6

    Type Parameters

    • T extends object

    Parameters

    • type: string

      The type of queue that needs to be observed.

    • target: T

      Object onto which the promise methods have to be attached

    Returns T & Promise<JQuery<TElement>, any, any>

  • Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.

    see

    ``

    since

    1.6

    Type Parameters

    • T extends object

    Parameters

    • target: T

      Object onto which the promise methods have to be attached

    Returns T & Promise<JQuery<TElement>, any, any>

  • Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.

    see

    ``

    since

    1.6

    example

    ​ ````Using .promise() on a collection with no active animation returns a resolved Promise:

    var div = $( "<div>" );

    div.promise().done(function( arg1 ) {
    // Will fire right away and alert "true"
    alert( this === div && arg1 === div );
    });
    example

    ​ ````Resolve the returned Promise when all animations have ended (including those initiated in the animation callback or added later on):

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>promise demo</title>
    <style>
    div {
    height: 50px;
    width: 50px;
    float: left;
    margin-right: 10px;
    display: none;
    background-color: #090;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>Go</button>
    <p>Ready...</p>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
    $( "button" ).on( "click", function() {
    $( "p" ).append( "Started..." );

    $( "div" ).each(function( i ) {
    $( this ).fadeIn().fadeOut( 1000 * ( i + 1 ) );
    });

    $( "div" ).promise().done(function() {
    $( "p" ).append( " Finished! " );
    });
    });
    </script>

    </body>
    </html>
    example

    ​ ````Resolve the returned Promise using a $.when() statement (the .promise() method makes it possible to do this with jQuery collections):

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>promise demo</title>
    <style>
    div {
    height: 50px;
    width: 50px;
    float: left;
    margin-right: 10px;
    display: none;
    background-color: #090;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>Go</button>
    <p>Ready...</p>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
    var effect = function() {
    return $( "div" ).fadeIn( 800 ).delay( 1200 ).fadeOut();
    };

    $( "button" ).on( "click", function() {
    $( "p" ).append( " Started... " );

    $.when( effect() ).done(function() {
    $( "p" ).append( " Finished! " );
    });
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional type: string

      The type of queue that needs to be observed.

    Returns Promise<JQuery<TElement>, any, any>

  • prop(propertyName: string, value_function: undefined | null | string | number | boolean | symbol | object | ((this: TElement, index: number, oldPropertyValue: any) => any)): JQuery<TElement>
  • prop(properties: PlainObject<any>): JQuery<TElement>
  • prop(propertyName: string): any
  • Set one or more properties for the set of matched elements.

    see

    ``

    since

    1.6

    Parameters

    • propertyName: string

      The name of the property to set.

    • value_function: undefined | null | string | number | boolean | symbol | object | ((this: TElement, index: number, oldPropertyValue: any) => any)

      @param value_function

      • value — A value to set for the property.
      • function — A function returning the value to set. Receives the index position of the element in the set and the old property value as arguments. Within the function, the keyword this refers to the current element.

    Returns JQuery<TElement>

  • Set one or more properties for the set of matched elements.

    see

    ``

    since

    1.6

    example

    ​ ````Disable all checkboxes on the page.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>prop 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>

    <input type="checkbox" checked="checked">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox" checked="checked">

    <script>
    $( "input[type='checkbox']" ).prop({
    disabled: true
    });
    </script>

    </body>
    </html>

    Parameters

    • properties: PlainObject<any>

      An object of property-value pairs to set.

    Returns JQuery<TElement>

  • Get the value of a property for the first element in the set of matched elements.

    see

    ``

    since

    1.6

    example

    ​ ````Display the checked property and attribute of a checkbox as it changes.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>prop 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>

    Parameters

    • propertyName: string

      The name of the property to get.

    Returns any

  • pushStack(elements: ArrayLike<Element>, name: string, args: any[]): JQuery<TElement>
  • pushStack(elements: ArrayLike<Element>): JQuery<TElement>
  • Add a collection of DOM elements onto the jQuery stack.

    see

    ``

    since

    1.3

    Parameters

    • elements: ArrayLike<Element>

      An array of elements to push onto the stack and make into a new jQuery object.

    • name: string

      The name of a jQuery method that generated the array of elements.

    • args: any[]

      The arguments that were passed in to the jQuery method (for serialization).

    Returns JQuery<TElement>

  • Add a collection of DOM elements onto the jQuery stack.

    see

    ``

    since

    1.0

    example

    ​ ````Add some elements onto the jQuery stack, then pop back off again.

    jQuery([])
    .pushStack( document.getElementsByTagName( "div" ) )
    .remove()
    .end();

    Parameters

    • elements: ArrayLike<Element>

      An array of elements to push onto the stack and make into a new jQuery object.

    Returns JQuery<TElement>

  • Manipulate the queue of functions to be executed, once for each matched element.

    see

    ``

    since

    1.2

    example

    ​ ````Set a queue array to delete the queue.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>queue demo</title>
    <style>
    div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
    }
    div.newcolor {
    background: blue;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <div></div>

    <script>
    $( "#start" ).click(function() {
    $( "div" )
    .show( "slow" )
    .animate({ left: "+=200" }, 5000 )
    .queue(function() {
    $( this ).addClass( "newcolor" ).dequeue();
    })
    .animate({ left: '-=200' }, 1500 )
    .queue(function() {
    $( this ).removeClass( "newcolor" ).dequeue();
    })
    .slideUp();
    });
    $( "#stop" ).click(function() {
    $( "div" )
    .queue( "fx", [] )
    .stop();
    });
    </script>

    </body>
    </html>

    Parameters

    • queueName: string

      A string containing the name of the queue. Defaults to fx, the standard effects queue.

    • newQueue: TypeOrArray<QueueFunction<TElement>>

      The new function to add to the queue, with a function to call that will dequeue the next item. An array of functions to replace the current queue contents.

    Returns JQuery<TElement>

  • Manipulate the queue of functions to be executed, once for each matched element.

    see

    ``

    since

    1.2

    example

    ​ ````Queue a custom function.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>queue demo</title>
    <style>
    div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
    }
    div.newcolor {
    background: blue;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    Click here...
    <div></div>

    <script>
    $( document.body ).click(function() {
    $( "div" )
    .show( "slow" )
    .animate({ left: "+=200" }, 2000 )
    .queue(function() {
    $( this ).addClass( "newcolor" ).dequeue();
    })
    .animate({ left: "-=200" }, 500 )
    .queue(function() {
    $( this ).removeClass( "newcolor" ).dequeue();
    })
    .slideUp();
    });
    </script>

    </body>
    </html>

    Parameters

    • newQueue: TypeOrArray<QueueFunction<TElement>>

      The new function to add to the queue, with a function to call that will dequeue the next item. An array of functions to replace the current queue contents.

    Returns JQuery<TElement>

  • Show the queue of functions to be executed on the matched elements.

    see

    ``

    since

    1.2

    example

    ​ ````Show the length of the queue.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>queue demo</title>
    <style>
    div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 60px;
    background: green;
    display: none;
    }
    div.newcolor {
    background: blue;
    }
    p {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>The queue length is: <span></span></p>
    <div></div>

    <script>
    var div = $( "div" );

    function runIt() {
    div
    .show( "slow" )
    .animate({ left: "+=200" }, 2000 )
    .slideToggle( 1000 )
    .slideToggle( "fast" )
    .animate({ left: "-=200" }, 1500 )
    .hide( "slow" )
    .show( 1200 )
    .slideUp( "normal", runIt );
    }

    function showIt() {
    var n = div.queue( "fx" );
    $( "span" ).text( n.length );
    setTimeout( showIt, 100 );
    }

    runIt();
    showIt();
    </script>

    </body>
    </html>

    Parameters

    • Optional queueName: string

      A string containing the name of the queue. Defaults to fx, the standard effects queue.

    Returns JQuery.Queue<Node>

  • Specify a function to execute when the DOM is fully loaded.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.0. Use jQuery(function() { }).

    example

    ​ ````Display a message when the DOM is loaded.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>ready demo</title>
    <style>
    p {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script>

    $(function() {
    $( "p" ).text( "The DOM is now loaded and can be manipulated." );
    });

    </script>
    </head>
    <body>

    <p>Not loaded yet.</p>

    </body>
    </html>

    Parameters

    Returns JQuery<TElement>

  • remove(selector?: string): JQuery<TElement>
  • Remove the set of matched elements from the DOM.

    see

    ``

    since

    1.0

    example

    ​ ````Removes all paragraphs from the DOM

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>remove demo</title>
    <style>
    p {
    background: yellow;
    margin: 6px 0;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    how are
    <p>you?</p>
    <button>Call remove() on paragraphs</button>

    <script>
    $( "button" ).click(function() {
    $( "p" ).remove();
    });
    </script>

    </body>
    </html>
    example

    ​ ````Removes all paragraphs that contain "Hello" from the DOM. Analogous to doing $("p").filter(":contains('Hello')").remove().

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>remove demo</title>
    <style>
    p {
    background: yellow;
    margin: 6px 0;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p class="hello">Hello</p>
    how are
    <p>you?</p>
    <button>Call remove( ":contains('Hello')" ) on paragraphs</button>

    <script>
    $( "button" ).click(function() {
    $( "p" ).remove( ":contains('Hello')" );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional selector: string

      A selector expression that filters the set of matched elements to be removed.

    Returns JQuery<TElement>

  • removeAttr(attributeName: string): JQuery<TElement>
  • Remove an attribute from each element in the set of matched elements.

    see

    ``

    since

    1.0

    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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>removeAttr demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>Change title</button>
    <input type="text" title="hello there">
    <div id="log"></div>

    <script>
    (function() {
    var inputTitle = $( "input" ).attr( "title" );
    $( "button" ).click(function() {
    var input = $( this ).next();

    if ( input.attr( "title" ) === inputTitle ) {
    input.removeAttr( "title" )
    } else {
    input.attr( "title", inputTitle );
    }

    $( "#log" ).html( "input title is now " + input.attr( "title" ) );
    });
    })();
    </script>

    </body>
    </html>

    Parameters

    • attributeName: string

      An attribute to remove; as of version 1.7, it can be a space-separated list of attributes.

    Returns JQuery<TElement>

  • removeClass(className_function?: TypeOrArray<string> | ((this: TElement, index: number, className: string) => string)): JQuery<TElement>
  • removeClass(classNames: string, speed?: number, callback?: Function): JQuery<TElement>
  • removeClass(classNames: string, speed?: string, callback?: Function): JQuery<TElement>
  • removeClass(classNames: string, speed?: number, easing?: string, callback?: Function): JQuery<TElement>
  • removeClass(classNames: string, speed?: string, easing?: string, callback?: Function): JQuery<TElement>
  • Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

    see

    ``

    since

    1.0

    since

    1.4

    since

    3.3

    example

    ​ ````Remove the class 'blue' from the matched elements.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>removeClass demo</title>
    <style>
    p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
    }
    .blue {
    color: blue;
    }
    .under {
    text-decoration: underline;
    }
    .highlight {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p class="blue under">Hello</p>
    <p class="blue under highlight">and</p>
    <p class="blue under">then</p>
    <p class="blue under">Goodbye</p>

    <script>
    $( "p:even" ).removeClass( "blue" );
    </script>

    </body>
    </html>
    example

    ​ ````Remove the class 'blue' and 'under' from the matched elements.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>removeClass demo</title>
    <style>
    p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
    }
    .blue {
    color: blue;
    }
    .under {
    text-decoration: underline;
    }
    .highlight {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p class="blue under">Hello</p>
    <p class="blue under highlight">and</p>
    <p class="blue under">then</p>
    <p class="blue under">Goodbye</p>

    <script>
    $( "p:odd" ).removeClass( "blue under" );
    </script>

    </body>
    </html>
    example

    ​ ````Remove all the classes from the matched elements.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>removeClass demo</title>
    <style>
    p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
    }
    .blue {
    color: blue;
    }
    .under {
    text-decoration: underline;
    }
    .highlight {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p class="blue under">Hello</p>
    <p class="blue under highlight">and</p>
    <p class="blue under">then</p>
    <p class="blue under">Goodbye</p>

    <script>
    $( "p:eq(1)" ).removeClass();
    </script>

    </body>
    </html>

    Parameters

    • Optional className_function: TypeOrArray<string> | ((this: TElement, index: number, className: string) => string)

      @param className_function

      • className — One or more space-separated classes to be removed from the class attribute of each matched element.
      • function — A function returning one or more space-separated class names to be removed. Receives the index position of the element in the set and the old class value as arguments.

    Returns JQuery<TElement>

  • Parameters

    • classNames: string
    • Optional speed: number
    • Optional callback: Function

    Returns JQuery<TElement>

  • Parameters

    • classNames: string
    • Optional speed: string
    • Optional callback: Function

    Returns JQuery<TElement>

  • Parameters

    • classNames: string
    • Optional speed: number
    • Optional easing: string
    • Optional callback: Function

    Returns JQuery<TElement>

  • Parameters

    • classNames: string
    • Optional speed: string
    • Optional easing: string
    • Optional callback: Function

    Returns JQuery<TElement>

  • Remove a previously-stored piece of data.

    see

    ``

    since

    1.2.3

    since

    1.7

    example

    ​ ````Set a data store for 2 names then remove one of them.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>removeData demo</title>
    <style>
    div {
    margin: 2px;
    color: blue;
    }
    span {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>value1 before creation: <span></span></div>
    <div>value1 after creation: <span></span></div>
    <div>value1 after removal: <span></span></div>
    <div>value2 after removal: <span></span></div>

    <script>
    $( "span:eq(0)" ).text( "" + $( "div" ).data( "test1" ) );
    $( "div" ).data( "test1", "VALUE-1" );
    $( "div" ).data( "test2", "VALUE-2" );
    $( "span:eq(1)" ).text( "" + $( "div").data( "test1" ) );
    $( "div" ).removeData( "test1" );
    $( "span:eq(2)" ).text( "" + $( "div" ).data( "test1" ) );
    $( "span:eq(3)" ).text( "" + $( "div" ).data( "test2" ) );
    </script>

    </body>
    </html>

    Parameters

    • Optional name: TypeOrArray<string>

      A string naming the piece of data to delete. An array or space-separated string naming the pieces of data to delete.

    Returns JQuery<TElement>

  • removeProp(propertyName: string): JQuery<TElement>
  • Remove a property for the set of matched elements.

    see

    ``

    since

    1.6

    example

    ​ ````Set a numeric property on a paragraph and then remove it.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>removeProp 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>

    <p></p>

    <script>
    para = $( "p" );
    para
    .prop( "luggageCode", 1234 )
    .append( "The secret luggage code is: ", String( para.prop( "luggageCode" ) ), ". " )
    .removeProp( "luggageCode" )
    .append( "Now the secret luggage code is: ", String( para.prop( "luggageCode" ) ), ". " );
    </script>

    </body>
    </html>

    Parameters

    • propertyName: string

      The name of the property to remove.

    Returns JQuery<TElement>

  • removeUniqueId(): JQuery<HTMLElement>
  • Replace each target element with the set of matched elements.

    see

    ``

    since

    1.2

    example

    ​ ````Replace all the paragraphs with bold words.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>replaceAll demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

    <script>
    $( "<b>Paragraph. </b>" ).replaceAll( "p" );
    </script>

    </body>
    </html>

    Parameters

    • target: string | JQuery<HTMLElement> | TypeOrArray<Element>

      A selector string, jQuery object, DOM element, or array of elements indicating which element(s) to replace.

    Returns JQuery<TElement>

  • replaceSelectedText(text: string): JQuery<TElement>
  • Replaces the currently selected text of an INPUT or TEXTAREA element with the given text. When no text is selected, insert the given text at the current cursor position.

    Parameters

    • text: string

      Text to replace the current selection.

    Returns JQuery<TElement>

    this for chaining.

  • replaceWith(newContent_function: string | Element | Document | Element[] | Text | DocumentFragment | Comment | JQuery<Node> | ((this: TElement, index: number, oldhtml: string) => string | Element | Document | Element[] | Text | DocumentFragment | Comment | JQuery<Node>)): JQuery<TElement>
  • Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

    see

    ``

    since

    1.2

    since

    1.4

    example

    ​ ````On click, replace the button with a div containing the same word.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>replaceWith demo</title>
    <style>
    button {
    display: block;
    margin: 3px;
    color: red;
    width: 200px;
    }
    div {
    color: red;
    border: 2px solid blue;
    width: 200px;
    margin: 3px;
    text-align: center;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>First</button>
    <button>Second</button>
    <button>Third</button>

    <script>
    $( "button" ).click(function() {
    $( this ).replaceWith( "<div>" + $( this ).text() + "</div>" );
    });
    </script>

    </body>
    </html>
    example

    ​ ````Replace all paragraphs with bold words.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>replaceWith demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

    <script>
    $( "p" ).replaceWith( "<b>Paragraph. </b>" );
    </script>

    </body>
    </html>
    example

    ​ ````On click, replace each paragraph with a div that is already in the DOM and selected with the $() function. Notice it doesn't clone the object but rather moves it to replace the paragraph.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>replaceWith demo</title>
    <style>
    div {
    border: 2px solid blue;
    color: red;
    margin: 3px;
    }
    p {
    border: 2px solid red;
    color: blue;
    margin: 3px;
    cursor: pointer;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
    <div>Replaced!</div>

    <script>
    $( "p" ).click(function() {
    $( this ).replaceWith( $( "div" ) );
    });
    </script>

    </body>
    </html>
    example

    ​ ````On button click, replace the containing div with its child divs and append the class name of the selected element to the paragraph.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>replaceWith demo</title>
    <style>
    .container {
    background-color: #991;
    }
    .inner {
    color: #911;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>
    <button>Replace!</button>
    </p>
    <div class="container">
    <div class="inner">Scooby</div>
    <div class="inner">Dooby</div>
    <div class="inner">Doo</div>
    </div>

    <script>
    $( "button" ).on( "click", function() {
    var $container = $( "div.container" ).replaceWith(function() {
    return $( this ).contents();
    });

    $( "p" ).append( $container.attr( "class" ) );
    });
    </script>

    </body>
    </html>

    Parameters

    • newContent_function: string | Element | Document | Element[] | Text | DocumentFragment | Comment | JQuery<Node> | ((this: TElement, index: number, oldhtml: string) => string | Element | Document | Element[] | Text | DocumentFragment | Comment | JQuery<Node>)

      @param newContent_function

      • newContent — The content to insert. May be an HTML string, DOM element, array of DOM elements, or jQuery object.
      • function — A function that returns content with which to replace the set of matched elements.

    Returns JQuery<TElement>

  • resizable(): JQuery<HTMLElement>
  • resizable(methodName: "destroy"): void
  • resizable(methodName: "disable"): void
  • resizable(methodName: "enable"): void
  • resizable(methodName: "widget"): JQuery<HTMLElement>
  • resizable(methodName: string): JQuery<HTMLElement>
  • resizable(options: ResizableOptions): JQuery<HTMLElement>
  • resizable(optionLiteral: string, optionName: string): any
  • resizable(optionLiteral: string, options: ResizableOptions): any
  • resizable(optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
  • Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "destroy"

    Returns void

  • Parameters

    • methodName: "disable"

    Returns void

  • Parameters

    • methodName: "enable"

    Returns void

  • Parameters

    • methodName: "widget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: string

    Returns JQuery<HTMLElement>

  • Parameters

    Returns JQuery<HTMLElement>

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery<HTMLElement>

  • resize<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "resize">): JQuery<TElement>
  • resize(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "resize">): JQuery<TElement>
  • Bind an event handler to the "resize" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "resize">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "resize" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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 see the window width while (or after) it is resized, try:

    $( window ).resize(function() {
    $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
    });

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "resize">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • scroll<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "scroll">): JQuery<TElement>
  • scroll(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "scroll">): JQuery<TElement>
  • Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "scroll">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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 do something when your page is scrolled:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>scroll demo</title>
    <style>
    div {
    color: blue;
    }
    p {
    color: green;
    }
    span {
    color: red;
    display: none;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>Try scrolling the iframe.</div>
    <p>Paragraph - <span>Scroll happened!</span></p>

    <script>
    $( "p" ).clone().appendTo( document.body );
    $( "p" ).clone().appendTo( document.body );
    $( "p" ).clone().appendTo( document.body );
    $( window ).scroll(function() {
    $( "span" ).css( "display", "inline" ).fadeOut( "slow" );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "scroll">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • scrollLeft(value: number): JQuery<TElement>
  • scrollLeft(): undefined | number
  • Set the current horizontal position of the scroll bar for each of the set of matched elements.

    see

    ``

    since

    1.2.6

    example

    ​ ````Set the scrollLeft of a div.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>scrollLeft demo</title>
    <style>
    div.demo {
    background: #ccc none repeat scroll 0 0;
    border: 3px solid #666;
    margin: 5px;
    padding: 5px;
    position: relative;
    width: 200px;
    height: 100px;
    overflow: auto;
    }
    p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    width: 1000px;
    height: 1000px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div class="demo"><h1>lalala</h1><p>Hello</p></div>

    <script>
    $( "div.demo" ).scrollLeft( 300 );
    </script>

    </body>
    </html>

    Parameters

    • value: number

      An integer indicating the new position to set the scroll bar to.

    Returns JQuery<TElement>

  • Get the current horizontal position of the scroll bar for the first element in the set of matched elements.

    see

    ``

    since

    1.2.6

    example

    ​ ````Get the scrollLeft of a paragraph.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>scrollLeft demo</title>
    <style>
    p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p><p></p>

    <script>
    var p = $( "p:first" );
    $( "p:last" ).text( "scrollLeft:" + p.scrollLeft() );
    </script>

    </body>
    </html>

    Returns undefined | number

  • scrollParent(): JQuery<HTMLElement>
  • scrollTop(value: number): JQuery<TElement>
  • scrollTop(): undefined | number
  • Set the current vertical position of the scroll bar for each of the set of matched elements.

    see

    ``

    since

    1.2.6

    example

    ​ ````Set the scrollTop of a div.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>scrollTop demo</title>
    <style>
    div.demo {
    background: #ccc none repeat scroll 0 0;
    border: 3px solid #666;
    margin: 5px;
    padding: 5px;
    position: relative;
    width: 200px;
    height: 100px;
    overflow: auto;
    }
    p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    width: 1000px;
    height: 1000px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div class="demo"><h1>lalala</h1><p>Hello</p></div>

    <script>
    $( "div.demo" ).scrollTop( 300 );
    </script>

    </body>
    </html>

    Parameters

    • value: number

      A number indicating the new position to set the scroll bar to.

    Returns JQuery<TElement>

  • 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.

    see

    ``

    since

    1.2.6

    example

    ​ ````Get the scrollTop of a paragraph.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>scrollTop demo</title>
    <style>
    p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p><p></p>

    <script>
    var p = $( "p:first" );
    $( "p:last" ).text( "scrollTop:" + p.scrollTop() );
    </script>

    </body>
    </html>

    Returns undefined | number

  • select<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "select">): JQuery<TElement>
  • select(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "select">): JQuery<TElement>
  • Bind an event handler to the "select" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "select">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "select" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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 do something when text in input boxes is selected:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>select demo</title>
    <style>
    p {
    color: blue;
    }
    div {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Click and drag the mouse to select text in the inputs.</p>
    <input type="text" value="Some text">
    <input type="text" value="to test on">
    <div></div>

    <script>
    $( ":input" ).select(function() {
    $( "div" ).text( "Something was selected" ).show().fadeOut( 1000 );
    });
    </script>

    </body>
    </html>
    example

    ​ ````To trigger the select event on all input elements, try:

    $( "input" ).select();
    

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "select">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • selectable(): JQuery<HTMLElement>
  • selectable(methodName: "destroy"): void
  • selectable(methodName: "disable"): void
  • selectable(methodName: "enable"): void
  • selectable(methodName: "widget"): JQuery<HTMLElement>
  • selectable(methodName: string): JQuery<HTMLElement>
  • selectable(options: SelectableOptions): JQuery<HTMLElement>
  • selectable(optionLiteral: string, optionName: string): any
  • selectable(optionLiteral: string, options: SelectableOptions): any
  • selectable(optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
  • Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "destroy"

    Returns void

  • Parameters

    • methodName: "disable"

    Returns void

  • Parameters

    • methodName: "enable"

    Returns void

  • Parameters

    • methodName: "widget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: string

    Returns JQuery<HTMLElement>

  • Parameters

    Returns JQuery<HTMLElement>

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery<HTMLElement>

  • selectmenu(): JQuery<HTMLElement>
  • selectmenu(methodName: "close"): JQuery<HTMLElement>
  • selectmenu(methodName: "destroy"): JQuery<HTMLElement>
  • selectmenu(methodName: "disable"): JQuery<HTMLElement>
  • selectmenu(methodName: "enable"): JQuery<HTMLElement>
  • selectmenu(methodName: "instance"): any
  • selectmenu(methodName: "menuWidget"): JQuery<HTMLElement>
  • selectmenu(methodName: "open"): JQuery<HTMLElement>
  • selectmenu(methodName: "refresh"): JQuery<HTMLElement>
  • selectmenu(methodName: "widget"): JQuery<HTMLElement>
  • selectmenu(methodName: string): JQuery<HTMLElement>
  • selectmenu(options: SelectMenuOptions): JQuery<HTMLElement>
  • selectmenu(optionLiteral: string, optionName: string): any
  • selectmenu(optionLiteral: string, options: SelectMenuOptions): any
  • selectmenu(optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
  • Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "close"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "destroy"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "disable"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "enable"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "instance"

    Returns any

  • Parameters

    • methodName: "menuWidget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "open"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "refresh"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "widget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: string

    Returns JQuery<HTMLElement>

  • Parameters

    Returns JQuery<HTMLElement>

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery<HTMLElement>

  • serialize(): string
  • Encode a set of form elements as a string for submission.

    see

    ``

    since

    1.0

    example

    ​ ````Serialize a form to a query string that could be sent to a server in an Ajax request.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>serialize demo</title>
    <style>
    body, select {
    font-size: 12px;
    }
    form {
    margin: 5px;
    }
    p {
    color: red;
    margin: 5px;
    font-size: 14px;
    }
    b {
    color: blue;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <form>
    <select name="single">
    <option>Single</option>
    <option>Single2</option>
    </select>

    <br>
    <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
    </select>

    <br>
    <input type="checkbox" name="check" value="check1" id="ch1">
    <label for="ch1">check1</label>
    <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
    <label for="ch2">check2</label>

    <br>
    <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
    <label for="r1">radio1</label>
    <input type="radio" name="radio" value="radio2" id="r2">
    <label for="r2">radio2</label>
    </form>

    <p><tt id="results"></tt></p>

    <script>
    function showValues() {
    var str = $( "form" ).serialize();
    $( "#results" ).text( str );
    }
    $( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
    $( "select" ).on( "change", showValues );
    showValues();
    </script>

    </body>
    </html>

    Returns string

  • Encode a set of form elements as an array of names and values.

    see

    ``

    since

    1.2

    example

    ​ ````Get the values from a form, iterate through them, and append them to a results display.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>serializeArray demo</title>
    <style>
    body, select {
    font-size: 14px;
    }
    form {
    margin: 5px;
    }
    p {
    color: red;
    margin: 5px;
    }
    b {
    color: blue;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p><b>Results:</b> <span id="results"></span></p>
    <form>
    <select name="single">
    <option>Single</option>
    <option>Single2</option>
    </select>
    <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
    </select>
    <br>
    <input type="checkbox" name="check" value="check1" id="ch1">
    <label for="ch1">check1</label>
    <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
    <label for="ch2">check2</label>
    <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
    <label for="r1">radio1</label>
    <input type="radio" name="radio" value="radio2" id="r2">
    <label for="r2">radio2</label>
    </form>

    <script>
    function showValues() {
    var fields = $( ":input" ).serializeArray();
    $( "#results" ).empty();
    jQuery.each( fields, function( i, field ) {
    $( "#results" ).append( field.value + " " );
    });
    }

    $( ":checkbox, :radio" ).click( showValues );
    $( "select" ).change( showValues );
    showValues();
    </script>

    </body>
    </html>

    Returns JQuery.NameValuePair[]

  • setSelection(startOffset: number, endOffset: number): JQuery<TElement>
  • Selects the text at given range of an INPUT or TEXTAREA element.

    Parameters

    • startOffset: number

      0-based index pointing to the start of the range to select (inclusive).

    • endOffset: number

      0-based index pointing to the end of the range to select (exclusive).

    Returns JQuery<TElement>

    this for chaining.

  • show(duration: JQuery.Duration, easing: string, complete: ((this: TElement) => void)): JQuery<TElement>
  • show(duration: JQuery.Duration, easing_complete: string | ((this: TElement) => void)): JQuery<TElement>
  • show(duration_complete_options?: JQuery.Duration | EffectsOptions<TElement> | ((this: TElement) => void)): JQuery<TElement>
  • show(options: any): JQuery<TElement>
  • show(effect: string, options?: any, duration?: number, complete?: Function): JQuery<TElement>
  • show(effect: string, options?: any, duration?: string, complete?: Function): JQuery<TElement>
  • Display the matched elements.

    see

    ``

    since

    1.4.3

    Parameters

    • duration: JQuery.Duration

      A string or number determining how long the animation will run.

    • easing: string

      A string indicating which easing function to use for the transition.

    • complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Display the matched elements.

    see

    ``

    since

    1.0

    since

    1.4.3

    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's animation ends.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>show demo</title>
    <style>
    div {
    background: #def3ca;
    margin: 3px;
    width: 80px;
    display: none;
    float: left;
    text-align: center;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button id="showr">Show</button>
    <button id="hidr">Hide</button>
    <div>Hello 3,</div>
    <div>how</div>
    <div>are</div>
    <div>you?</div>

    <script>
    $( "#showr" ).click(function() {
    $( "div" ).first().show( "fast", function showNext() {
    $( this ).next( "div" ).show( "fast", showNext );
    });
    });

    $( "#hidr" ).click(function() {
    $( "div" ).hide( 1000 );
    });
    </script>

    </body>
    </html>
    example

    ​ ````Show all span and input elements with an animation. Change the text once the animation is done.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>show demo</title>
    <style>
    span {
    display: none;
    }
    div {
    display: none;
    }
    p {
    font-weight: bold;
    background-color: #fcd;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>Do it!</button>
    <span>Are you sure? (type 'yes' if you are) </span>
    <div>
    <form>
    <input type="text" value="as;ldkfjalsdf">
    </form>
    </div>
    <p style="display:none;">I'm hidden...</p>

    <script>
    function doIt() {
    $( "span,div" ).show( "slow" );
    }
    // Can pass in function name
    $( "button" ).click( doIt );

    $( "form" ).submit(function( event ) {
    if ( $( "input" ).val() === "yes" ) {
    $( "p" ).show( 4000, function() {
    $( this ).text( "Ok, DONE! (now showing)" );
    });
    }
    $( "span,div" ).hide( "fast" );

    // Prevent form submission
    event.preventDefault();
    });
    </script>

    </body>
    </html>

    Parameters

    • duration: JQuery.Duration

      A string or number determining how long the animation will run.

    • easing_complete: string | ((this: TElement) => void)

      @param easing_complete

      • easing — A string indicating which easing function to use for the transition.
      • complete — A function to call once the animation is complete, called once per matched element.

    Returns JQuery<TElement>

  • Display the matched elements.

    see

    ``

    since

    1.0

    example

    ​ ````Animates all hidden paragraphs to show slowly, completing the animation within 600 milliseconds.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>show demo</title>
    <style>
    p {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>Show it</button>
    <p style="display: none">Hello 2</p>

    <script>
    $( "button" ).click(function() {
    $( "p" ).show( "slow" );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional duration_complete_options: JQuery.Duration | EffectsOptions<TElement> | ((this: TElement) => void)

      @param duration_complete_options

      • duration — A string or number determining how long the animation will run.
      • complete — A function to call once the animation is complete, called once per matched element.
      • options — A map of additional options to pass to the method.

    Returns JQuery<TElement>

  • Parameters

    • options: any

    Returns JQuery<TElement>

  • Parameters

    • effect: string
    • Optional options: any
    • Optional duration: number
    • Optional complete: Function

    Returns JQuery<TElement>

  • Parameters

    • effect: string
    • Optional options: any
    • Optional duration: string
    • Optional complete: Function

    Returns JQuery<TElement>

  • siblings(selector?: string): JQuery<TElement>
  • Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

    see

    ``

    since

    1.0

    example

    ​ ````Find the unique siblings of all yellow li elements in the 3 lists (including other yellow li elements if appropriate).

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>siblings demo</title>
    <style>
    ul {
    float: left;
    margin: 5px;
    font-size: 16px;
    font-weight: bold;
    }
    p {
    color: blue;
    margin: 10px 20px;
    font-size: 16px;
    padding: 5px;
    font-weight: bolder;
    }
    .hilite {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <ul>
    <li>One</li>
    <li>Two</li>
    <li class="hilite">Three</li>
    <li>Four</li>
    </ul>

    <ul>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    </ul>

    <ul>
    <li>Eight</li>
    <li class="hilite">Nine</li>
    <li>Ten</li>
    <li class="hilite">Eleven</li>
    </ul>

    <p>Unique siblings: <b></b></p>

    <script>
    var len = $( ".hilite" ).siblings()
    .css( "color", "red" )
    .length;
    $( "b" ).text( len );
    </script>

    </body>
    </html>
    example

    ​ ````Find all siblings with a class "selected" of each div.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>siblings demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div><span>Hello</span></div>
    <p class="selected">Hello Again</p>
    <p>And Again</p>

    <script>
    $( "p" ).siblings( ".selected" ).css( "background", "yellow" );
    </script>

    </body>
    </html>

    Parameters

    • Optional selector: string

      A string containing a selector expression to match elements against.

    Returns JQuery<TElement>

  • signature(settings: Partial<SignatureSettings>): JQuery<TElement>
  • signature(method: "option", settings: Partial<SignatureSettings>): JQuery<TElement>
  • signature<K>(method: "option", name: K, value: SignatureSettings[K]): JQuery<TElement>
  • signature<K>(method: "option", name: K): SignatureSettings[K]
  • signature(method: "option"): SignatureSettings
  • signature(method: "enable"): JQuery<TElement>
  • signature(method: "disable"): JQuery<TElement>
  • signature(method: "destroy"): JQuery<TElement>
  • signature(method: "clear"): JQuery<TElement>
  • signature(method: "isEmpty"): JQuery<TElement>
  • signature(method: "toJSON"): string
  • signature(method: "toSVG"): string
  • signature(method: "toDataURL", type?: "image/png"): string
  • signature(method: "toDataURL", type: "image/jpeg", quality?: number): string
  • signature(method: "draw", signature: string | SignatureJson): JQuery<TElement>
  • Converts each input field in this selection into a signature input field

    Parameters

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • Update the settings for the signature widgets.

    Parameters

    • method: "option"

      The method to be called on the signature widget.

    • settings: Partial<SignatureSettings>

      The new settings for the signature widget.

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • Updates a particular setting for the signature instances.

    Type Parameters

    Parameters

    • method: "option"

      The method to be called on the signature widget.

    • name: K

      Name of the setting to update.

    • value: SignatureSettings[K]

      The new value for the setting.

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • Retrieves one of the current settings for the first signature instance.

    Type Parameters

    Parameters

    • method: "option"

      The method to be called on the signature widget.

    • name: K

      Name of the setting to retrieve.

    Returns SignatureSettings[K]

    The current value of the given setting.

  • Retrieves all of the current settings for the first signature instance.

    Parameters

    • method: "option"

      The method to be called on the signature widget.

    Returns SignatureSettings

    The settings of the signature widget.

  • Enables the signature capture functionality.

    Parameters

    • method: "enable"

      The method to be called on the signature widget.

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • Disables the signature capture functionality.

    Parameters

    • method: "disable"

      The method to be called on the signature widget.

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • Removes the signature functionality.

    Parameters

    • method: "destroy"

      The method to be called on the signature widget.

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • Erase any current signature within the div(s). This triggers the change event.

    Parameters

    • method: "clear"

      The method to be called on the signature widget.

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • Determine whether the first signature area has any signature drawn within it.

    Parameters

    • method: "isEmpty"

      The method to be called on the signature widget.

    Returns JQuery<TElement>

    true if no signature is currently drawn, or false otherwise.

  • Convert the first signature to a JSON string for transferral/storage. A sample follows for a signature with two lines:

    {
    "lines": [
    [
    [100, 100],
    [180, 50],
    [180, 150],
    [100, 100]
    ],
    [
    [140, 75],
    [100, 50],
    [100, 150],
    [140, 125]
    ]
    ]
    }

    Parameters

    • method: "toJSON"

      The method to be called on the signature widget.

    Returns string

    A JSON string with the line data of the signature.

  • Convert the first signature to a SVG document for transferral/storage. A sample follows for a signature with two lines:

    <?xml version="1.0"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg" width="15cm" height="15cm">
    <g fill="#ffffff">
    <rect x="0" y="0" width="400" height="200"/>
    <g fill="none" stroke="#000000" stroke-width="2">
    <polyline points="100,100 180,50 180,150 100,100"/>
    <polyline points="140,75 100,50 100,150 140,125"/>
    </g>
    </g>
    </svg>
    since

    1.1.1

    Parameters

    • method: "toSVG"

      The method to be called on the signature widget.

    Returns string

    An SVG string with the line data of the signature.

  • Convert the first signature to a data URI for transferral/storage:

    data:image/png;base64,iVBORw0KGgoAAAAN...AAAASUVORK5CYII=
    
    since

    1.2.0

    Parameters

    • method: "toDataURL"

      The method to be called on the signature widget.

    • Optional type: "image/png"

      The image format to use. Defaults to image/png.

    Returns string

    A string with the data URI of an image with the signature.

  • Convert the first signature to a data URI for transferral and storage:

    data:image/jpeg;base64,iVBORw0KGgoAAAAN...AAAASUVORK5CYII=
    
    since

    1.2.0

    Parameters

    • method: "toDataURL"

      The method to be called on the signature widget.

    • type: "image/jpeg"

      The image format to use. Defaults to image/png.

    • Optional quality: number

      The image quality for JPEG images. A value between 0 and 1, default is 0.92.

    Returns string

    A string with the data URI of an image with the signature.

  • Redraws the signature from the supplied definition. This triggers the change event.

    Parameters

    • method: "draw"

      The method to be called on the signature widget.

    • signature: string | SignatureJson

      The signature data to draw. May be (a) a JSON object or its string representation as obtained from the toJSON method); or (b) the SVG string as obtained from the toSVG method), or (c) the data URI string as obtained from the toDataURL method.

    Returns JQuery<TElement>

    this jQuery instance for chaining.

  • slice(start: number, end?: number): JQuery<TElement>
  • Reduce the set of matched elements to a subset specified by a range of indices.

    see

    ``

    since

    1.1.4

    example

    ​ ````Turns divs yellow based on a random slice.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>slice demo</title>
    <style>
    div {
    width: 40px;
    height: 40px;
    margin: 10px;
    float: left;
    border: 2px solid blue;
    }
    span {
    color: red;
    font-weight: bold;
    }
    button {
    margin: 5px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p><button>Turn slice yellow</button>
    <span>Click the button!</span></p>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
    function colorEm() {
    var $div = $( "div" );
    var start = Math.floor( Math.random() * $div.length );
    var end = Math.floor( Math.random() * ( $div.length - start ) ) +
    start + 1;
    if ( end === $div.length ) {
    end = undefined;
    }
    $div.css( "background", "" );
    if ( end ) {
    $div.slice( start, end ).css( "background", "yellow" );
    } else {
    $div.slice( start ).css( "background", "yellow" );
    }
    $( "span" ).text( "$( 'div' ).slice( " + start +
    (end ? ", " + end : "") +
    ").css( 'background', 'yellow' );" );
    }

    $( "button" ).click( colorEm );
    </script>

    </body>
    </html>
    example

    ​ ````Selects all paragraphs, then slices the selection to include only the first element.

    $( "p" ).slice( 0, 1 ).wrapInner( "<b></b>" );
    
    example

    ​ ````Selects all paragraphs, then slices the selection to include only the first and second element.

    $( "p" ).slice( 0, 2 ).wrapInner( "<b></b>" );
    
    example

    ​ ````Selects all paragraphs, then slices the selection to include only the second element.

    $( "p" ).slice( 1, 2 ).wrapInner( "<b></b>" );
    
    example

    ​ ````Selects all paragraphs, then slices the selection to include only the second and third element.

    $( "p" ).slice( 1 ).wrapInner( "<b></b>" );
    
    example

    ​ ````Selects all paragraphs, then slices the selection to include only the third element.

    $( "p" ).slice( -1 ).wrapInner( "<b></b>" );
    

    Parameters

    • start: number

      An integer indicating the 0-based position at which the elements begin to be selected. If negative, it indicates an offset from the end of the set.

    • Optional end: number

      An integer indicating the 0-based position at which the elements stop being selected. If negative, it indicates an offset from the end of the set. If omitted, the range continues until the end of the set.

    Returns JQuery<TElement>

  • slideDown(duration: JQuery.Duration, easing: string, complete?: ((this: TElement) => void)): JQuery<TElement>
  • slideDown(duration_easing: string | number, complete: ((this: TElement) => void)): JQuery<TElement>
  • slideDown(duration_easing_complete_options?: string | number | EffectsOptions<TElement> | ((this: TElement) => void)): JQuery<TElement>
  • Display the matched elements with a sliding motion.

    see

    ``

    since

    1.4.3

    Parameters

    • duration: JQuery.Duration

      A string or number determining how long the animation will run.

    • easing: string

      A string indicating which easing function to use for the transition.

    • Optional complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Display the matched elements with a sliding motion.

    see

    ``

    since

    1.0

    since

    1.4.3

    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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>slideDown demo</title>
    <style>
    div {
    background: #cfd;
    margin: 3px;
    width: 50px;
    text-align: center;
    float: left;
    cursor: pointer;
    border: 2px outset black;
    font-weight: bolder;
    }
    input {
    display: none;
    width: 120px;
    float: left;
    margin: 10px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>Push!</div>
    <input type="text">
    <input type="text" class="middle">
    <input type="text">

    <script>
    $( "div" ).click(function() {
    $( this ).css({
    borderStyle: "inset",
    cursor: "wait"
    });
    $( "input" ).slideDown( 1000, function() {
    $( this )
    .css( "border", "2px red inset" )
    .filter( ".middle" )
    .css( "background", "yellow" )
    .focus();
    $( "div" ).css( "visibility", "hidden" );
    });
    });

    </script>

    </body>
    </html>

    Parameters

    • duration_easing: string | number

      @param duration_easing

      • duration — A string or number determining how long the animation will run.
      • easing — A string indicating which easing function to use for the transition.
    • complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Display the matched elements with a sliding motion.

    see

    ``

    since

    1.0

    since

    1.4.3

    example

    ​ ````Animates all divs to slide down and show themselves over 600 milliseconds.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>slideDown demo</title>
    <style>
    div {
    background: #de9a44;
    margin: 3px;
    width: 80px;
    height: 40px;
    display: none;
    float: left;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    Click me!
    <div></div>
    <div></div>
    <div></div>

    <script>
    $( document.body ).click(function () {
    if ( $( "div:first" ).is( ":hidden" ) ) {
    $( "div" ).slideDown( "slow" );
    } else {
    $( "div" ).hide();
    }
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional duration_easing_complete_options: string | number | EffectsOptions<TElement> | ((this: TElement) => void)

      @param duration_easing_complete_options

      • duration — A string or number determining how long the animation will run.
      • easing — A string indicating which easing function to use for the transition.
      • complete — A function to call once the animation is complete, called once per matched element.
      • options — A map of additional options to pass to the method.

    Returns JQuery<TElement>

  • slideToggle(duration: JQuery.Duration, easing: string, complete?: ((this: TElement) => void)): JQuery<TElement>
  • slideToggle(duration_easing: string | number, complete: ((this: TElement) => void)): JQuery<TElement>
  • slideToggle(duration_easing_complete_options?: string | number | EffectsOptions<TElement> | ((this: TElement) => void)): JQuery<TElement>
  • Display or hide the matched elements with a sliding motion.

    see

    ``

    since

    1.4.3

    Parameters

    • duration: JQuery.Duration

      A string or number determining how long the animation will run.

    • easing: string

      A string indicating which easing function to use for the transition.

    • Optional complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Display or hide the matched elements with a sliding motion.

    see

    ``

    since

    1.0

    since

    1.4.3

    example

    ​ ````Animates divs between dividers with a toggle that makes some appear and some disappear.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>slideToggle demo</title>
    <style>
    div {
    background: #b977d1;
    margin: 3px;
    width: 60px;
    height: 60px;
    float: left;
    }
    div.still {
    background: #345;
    width: 5px;
    }
    div.hider {
    display: none;
    }
    span {
    color: red;
    }
    p {
    clear: left;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div></div>
    <div class="still"></div>
    <div style="display:none;">
    </div><div class="still"></div>
    <div></div>
    <div class="still"></div>
    <div class="hider"></div>
    <div class="still"></div>
    <div class="hider"></div>
    <div class="still"></div>
    <div></div>
    <p><button id="aa">Toggle</button> There have been <span>0</span> toggled divs.</p>

    <script>
    $( "#aa" ).click(function() {
    $( "div:not(.still)" ).slideToggle( "slow", function() {
    var n = parseInt( $( "span" ).text(), 10 );
    $( "span" ).text( n + 1 );
    });
    });
    </script>

    </body>
    </html>

    Parameters

    • duration_easing: string | number

      @param duration_easing

      • duration — A string or number determining how long the animation will run.
      • easing — A string indicating which easing function to use for the transition.
    • complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Display or hide the matched elements with a sliding motion.

    see

    ``

    since

    1.0

    since

    1.4.3

    example

    ​ ````Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>slideToggle demo</title>
    <style>
    p {
    width: 400px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>Toggle</button>
    <p>
    This is the paragraph to end all paragraphs. You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life. Congratulations!
    </p>

    <script>
    $( "button" ).click(function() {
    $( "p" ).slideToggle( "slow" );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional duration_easing_complete_options: string | number | EffectsOptions<TElement> | ((this: TElement) => void)

      @param duration_easing_complete_options

      • duration — A string or number determining how long the animation will run.
      • easing — A string indicating which easing function to use for the transition.
      • complete — A function to call once the animation is complete, called once per matched element.
      • options — A map of additional options to pass to the method.

    Returns JQuery<TElement>

  • slideUp(duration: JQuery.Duration, easing: string, complete?: ((this: TElement) => void)): JQuery<TElement>
  • slideUp(duration_easing: string | number, complete: ((this: TElement) => void)): JQuery<TElement>
  • slideUp(duration_easing_complete_options?: string | number | EffectsOptions<TElement> | ((this: TElement) => void)): JQuery<TElement>
  • Hide the matched elements with a sliding motion.

    see

    ``

    since

    1.4.3

    Parameters

    • duration: JQuery.Duration

      A string or number determining how long the animation will run.

    • easing: string

      A string indicating which easing function to use for the transition.

    • Optional complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Hide the matched elements with a sliding motion.

    see

    ``

    since

    1.0

    since

    1.4.3

    example

    ​ ````Animates the parent paragraph to slide up, completing the animation within 200 milliseconds. Once the animation is done, it displays an alert.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>slideUp demo</title>
    <style>
    div {
    margin: 2px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>
    <button>Hide One</button>
    <input type="text" value="One">
    </div>

    <div>
    <button>Hide Two</button>
    <input type="text" value="Two">
    </div>

    <div>
    <button>Hide Three</button>
    <input type="text" value="Three">
    </div>

    <div id="msg"></div>

    <script>
    $( "button" ).click(function() {
    $( this ).parent().slideUp( "slow", function() {
    $( "#msg" ).text( $( "button", this ).text() + " has completed." );
    });
    });
    </script>

    </body>
    </html>

    Parameters

    • duration_easing: string | number

      @param duration_easing

      • duration — A string or number determining how long the animation will run.
      • easing — A string indicating which easing function to use for the transition.
    • complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Hide the matched elements with a sliding motion.

    see

    ``

    since

    1.0

    since

    1.4.3

    example

    ​ ````Animates all divs to slide up, completing the animation within 400 milliseconds.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>slideUp demo</title>
    <style>
    div {
    background: #3d9a44;
    margin: 3px;
    width: 80px;
    height: 40px;
    float: left;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    Click me!
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
    $( document.body ).click(function() {
    if ( $( "div:first" ).is( ":hidden" ) ) {
    $( "div" ).show( "slow" );
    } else {
    $( "div" ).slideUp();
    }
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional duration_easing_complete_options: string | number | EffectsOptions<TElement> | ((this: TElement) => void)

      @param duration_easing_complete_options

      • duration — A string or number determining how long the animation will run.
      • easing — A string indicating which easing function to use for the transition.
      • complete — A function to call once the animation is complete, called once per matched element.
      • options — A map of additional options to pass to the method.

    Returns JQuery<TElement>

  • slider(): JQuery<HTMLElement>
  • slider(methodName: "destroy"): void
  • slider(methodName: "disable"): void
  • slider(methodName: "enable"): void
  • slider(methodName: "refresh"): void
  • slider(methodName: "value"): number
  • slider(methodName: "value", value: number): void
  • slider(methodName: "values"): number[]
  • slider(methodName: "values", index: number): number
  • slider(methodName: string, index: number, value: number): void
  • slider(methodName: "values", index: number, value: number): void
  • slider(methodName: string, values: number[]): void
  • slider(methodName: "values", values: number[]): void
  • slider(methodName: "widget"): JQuery<HTMLElement>
  • slider(methodName: string): JQuery<HTMLElement>
  • slider(options: SliderOptions): JQuery<HTMLElement>
  • slider(optionLiteral: string, optionName: string): any
  • slider(optionLiteral: string, options: SliderOptions): any
  • slider(optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
  • Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "destroy"

    Returns void

  • Parameters

    • methodName: "disable"

    Returns void

  • Parameters

    • methodName: "enable"

    Returns void

  • Parameters

    • methodName: "refresh"

    Returns void

  • Parameters

    • methodName: "value"

    Returns number

  • Parameters

    • methodName: "value"
    • value: number

    Returns void

  • Parameters

    • methodName: "values"

    Returns number[]

  • Parameters

    • methodName: "values"
    • index: number

    Returns number

  • Parameters

    • methodName: string
    • index: number
    • value: number

    Returns void

  • Parameters

    • methodName: "values"
    • index: number
    • value: number

    Returns void

  • Parameters

    • methodName: string
    • values: number[]

    Returns void

  • Parameters

    • methodName: "values"
    • values: number[]

    Returns void

  • Parameters

    • methodName: "widget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: string

    Returns JQuery<HTMLElement>

  • Parameters

    Returns JQuery<HTMLElement>

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery<HTMLElement>

  • sortable(): JQuery<HTMLElement>
  • sortable(methodName: "destroy"): void
  • sortable(methodName: "disable"): void
  • sortable(methodName: "enable"): void
  • sortable(methodName: "widget"): JQuery<HTMLElement>
  • sortable(methodName: "toArray", options?: { attribute?: string }): string[]
  • sortable(methodName: string): JQuery<HTMLElement>
  • sortable(options: SortableOptions): JQuery<HTMLElement>
  • sortable(optionLiteral: string, optionName: string): any
  • sortable(methodName: "serialize", options?: { attribute?: string; expression?: RegExp; key?: string }): string
  • sortable(optionLiteral: string, options: SortableOptions): any
  • sortable(optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
  • Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "destroy"

    Returns void

  • Parameters

    • methodName: "disable"

    Returns void

  • Parameters

    • methodName: "enable"

    Returns void

  • Parameters

    • methodName: "widget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "toArray"
    • Optional options: { attribute?: string }
      • Optional attribute?: string

    Returns string[]

  • Parameters

    • methodName: string

    Returns JQuery<HTMLElement>

  • Parameters

    Returns JQuery<HTMLElement>

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    • methodName: "serialize"
    • Optional options: { attribute?: string; expression?: RegExp; key?: string }
      • Optional attribute?: string
      • Optional expression?: RegExp
      • Optional key?: string

    Returns string

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery<HTMLElement>

  • spinner(): JQuery<HTMLElement>
  • spinner(methodName: "destroy"): void
  • spinner(methodName: "disable"): void
  • spinner(methodName: "enable"): void
  • spinner(methodName: "pageDown", pages?: number): void
  • spinner(methodName: "pageUp", pages?: number): void
  • spinner(methodName: "stepDown", steps?: number): void
  • spinner(methodName: "stepUp", steps?: number): void
  • spinner(methodName: "value"): number
  • spinner(methodName: "value", value: number): void
  • spinner(methodName: "widget"): JQuery<HTMLElement>
  • spinner(methodName: string): JQuery<HTMLElement>
  • spinner(options: SpinnerOptions): JQuery<HTMLElement>
  • spinner(optionLiteral: string, optionName: string): any
  • spinner(optionLiteral: string, options: SpinnerOptions): any
  • spinner(optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
  • Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "destroy"

    Returns void

  • Parameters

    • methodName: "disable"

    Returns void

  • Parameters

    • methodName: "enable"

    Returns void

  • Parameters

    • methodName: "pageDown"
    • Optional pages: number

    Returns void

  • Parameters

    • methodName: "pageUp"
    • Optional pages: number

    Returns void

  • Parameters

    • methodName: "stepDown"
    • Optional steps: number

    Returns void

  • Parameters

    • methodName: "stepUp"
    • Optional steps: number

    Returns void

  • Parameters

    • methodName: "value"

    Returns number

  • Parameters

    • methodName: "value"
    • value: number

    Returns void

  • Parameters

    • methodName: "widget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: string

    Returns JQuery<HTMLElement>

  • Parameters

    Returns JQuery<HTMLElement>

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery<HTMLElement>

  • stop(queue: string, clearQueue?: boolean, jumpToEnd?: boolean): JQuery<TElement>
  • stop(clearQueue?: boolean, jumpToEnd?: boolean): JQuery<TElement>
  • Stop the currently-running animation on the matched elements.

    see

    ``

    since

    1.7

    Parameters

    • queue: string

      The name of the queue in which to stop animations.

    • Optional clearQueue: boolean

      A Boolean indicating whether to remove queued animation as well. Defaults to false.

    • Optional jumpToEnd: boolean

      A Boolean indicating whether to complete the current animation immediately. Defaults to false.

    Returns JQuery<TElement>

  • Stop the currently-running animation on the matched elements.

    see

    ``

    since

    1.2

    example

    ​ ````Click the Go button once to start the animation, then click the STOP button to stop it where it's currently positioned. Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>stop demo</title>
    <style>
    div {
    position: absolute;
    background-color: #abc;
    left: 0px;
    top: 30px;
    width: 60px;
    height: 60px;
    margin: 5px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button id="go">Go</button>
    <button id="stop">STOP!</button>
    <button id="back">Back</button>
    <div class="block"></div>

    <script>
    // Start animation
    $( "#go" ).click(function() {
    $( ".block" ).animate({ left: "+=100px" }, 2000 );
    });

    // Stop animation when button is clicked
    $( "#stop" ).click(function() {
    $( ".block" ).stop();
    });

    // Start animation in the opposite direction
    $( "#back" ).click(function() {
    $( ".block" ).animate({ left: "-=100px" }, 2000 );
    });
    </script>

    </body>
    </html>
    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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>stop demo</title>
    <style>
    .block {
    background-color: #abc;
    border: 2px solid black;
    width: 200px;
    height: 80px;
    margin: 10px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button id="toggle">slideToggle</button>
    <div class="block"></div>

    <script>
    var $block = $( ".block" );

    // Toggle a sliding animation animation
    $( "#toggle" ).on( "click", function() {
    $block.stop().slideToggle( 1000 );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional clearQueue: boolean

      A Boolean indicating whether to remove queued animation as well. Defaults to false.

    • Optional jumpToEnd: boolean

      A Boolean indicating whether to complete the current animation immediately. Defaults to false.

    Returns JQuery<TElement>

  • submit<TData>(eventData: TData, handler: TypeEventHandler<TElement, TData, TElement, TElement, "submit">): JQuery<TElement>
  • submit(handler?: false | TypeEventHandler<TElement, null, TElement, TElement, "submit">): JQuery<TElement>
  • Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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").

    Type Parameters

    • TData

    Parameters

    • eventData: TData

      An object containing data that will be passed to the event handler.

    • handler: TypeEventHandler<TElement, TData, TElement, TElement, "submit">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.3. Use `` or ``.

    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

    ​ ````If you'd like to prevent forms from being submitted unless a flag variable is set, try:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>submit demo</title>
    <style>
    p {
    margin: 0;
    color: blue;
    }
    div,p {
    margin-left: 10px;
    }
    span {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Type 'correct' to validate.</p>
    <form action="javascript:alert( 'success!' );">
    <div>
    <input type="text">
    <input type="submit">
    </div>
    </form>
    <span></span>

    <script>
    $( "form" ).submit(function( event ) {
    if ( $( "input:first" ).val() === "correct" ) {
    $( "span" ).text( "Validated..." ).show();
    return;
    }

    $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
    event.preventDefault();
    });
    </script>

    </body>
    </html>
    example

    ​ ````If you'd like to prevent forms from being submitted unless a flag variable is set, try:

    $( "form" ).submit(function() {
    return this.some_flag_variable;
    });
    example

    ​ ````To trigger the submit event on the first form on the page, try:

    $( "form:first" ).submit();
    

    Parameters

    • Optional handler: false | TypeEventHandler<TElement, null, TElement, TElement, "submit">

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • surroundSelectedText(prefix: string, suffix: string): JQuery<TElement>
  • For an INPUT or TEXTAREA element: Inserts the given prefix at the beginning of the currently selected text, and the given suffix at the end of the currently selected text. When no text is selected, inserts the given prefix and suffix at the current position of the cursor.

    Parameters

    • prefix: string

      Text to insert at the beginning of the currently selected text.

    • suffix: string

      Text to insert at the end of the currently selected text.

    Returns JQuery<TElement>

    this for chaining.

  • switchClass(removeClassName: string, addClassName: string, duration?: number, easing?: string, complete?: Function): JQuery<TElement>
  • switchClass(removeClassName: string, addClassName: string, duration?: string, easing?: string, complete?: Function): JQuery<TElement>
  • Parameters

    • removeClassName: string
    • addClassName: string
    • Optional duration: number
    • Optional easing: string
    • Optional complete: Function

    Returns JQuery<TElement>

  • Parameters

    • removeClassName: string
    • addClassName: string
    • Optional duration: string
    • Optional easing: string
    • Optional complete: Function

    Returns JQuery<TElement>

  • tabs(): JQuery<HTMLElement>
  • tabs(methodName: "destroy"): void
  • tabs(methodName: "disable"): void
  • tabs(methodName: "disable", index: number): void
  • tabs(methodName: "enable"): void
  • tabs(methodName: "enable", index: number): void
  • tabs(methodName: "load", index: number): void
  • tabs(methodName: "refresh"): void
  • tabs(methodName: "widget"): JQuery<HTMLElement>
  • tabs(methodName: "select", index: number): JQuery<HTMLElement>
  • tabs(methodName: string): JQuery<HTMLElement>
  • tabs(options: TabsOptions): JQuery<HTMLElement>
  • tabs(optionLiteral: string, optionName: string): any
  • tabs(optionLiteral: string, options: TabsOptions): any
  • tabs(optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
  • Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "destroy"

    Returns void

  • Parameters

    • methodName: "disable"

    Returns void

  • Parameters

    • methodName: "disable"
    • index: number

    Returns void

  • Parameters

    • methodName: "enable"

    Returns void

  • Parameters

    • methodName: "enable"
    • index: number

    Returns void

  • Parameters

    • methodName: "load"
    • index: number

    Returns void

  • Parameters

    • methodName: "refresh"

    Returns void

  • Parameters

    • methodName: "widget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "select"
    • index: number

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: string

    Returns JQuery<HTMLElement>

  • Parameters

    Returns JQuery<HTMLElement>

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery<HTMLElement>

  • text(text_function: string | number | boolean | ((this: TElement, index: number, text: string) => string | number | boolean)): JQuery<TElement>
  • text(): string
  • Set the content of each element in the set of matched elements to the specified text.

    see

    ``

    since

    1.0

    since

    1.4

    example

    ​ ````Add text to the paragraph (notice the bold tag is escaped).

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>text demo</title>
    <style>
    p {
    color: blue;
    margin: 8px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Test Paragraph.</p>

    <script>
    $( "p" ).text( "<b>Some</b> new text." );
    </script>

    </body>
    </html>

    Parameters

    • text_function: string | number | boolean | ((this: TElement, index: number, text: string) => string | number | boolean)

      @param text_function

      • text — The text to set as the content of each matched element. When Number or Boolean is supplied, it will be converted to a String representation.
      • function — A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.

    Returns JQuery<TElement>

  • Get the combined text contents of each element in the set of matched elements, including their descendants.

    see

    ``

    since

    1.0

    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).

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>text demo</title>
    <style>
    p {
    color: blue;
    margin: 8px;
    }
    b {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p><b>Test</b> Paragraph.</p>
    <p></p>

    <script>
    var str = $( "p:first" ).text();
    $( "p:last" ).html( str );
    </script>

    </body>
    </html>

    Returns string

  • Initializes the timepicker on this element. It lets the user select a time (hour and minute).

    Parameters

    Returns JQuery<TElement>

    this for chaining.

  • toArray(): TElement[]
  • Retrieve all the elements contained in the jQuery set, as an array.

    see

    ``

    since

    1.4

    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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>toArray demo</title>
    <style>
    span {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    Reversed - <span></span>

    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <script>
    function disp( divs ) {
    var a = [];
    for ( var i = 0; i < divs.length; i++ ) {
    a.push( divs[ i ].innerHTML );
    }
    $( "span" ).text( a.join( " " ) );
    }

    disp( $( "div" ).toArray().reverse() );
    </script>

    </body>
    </html>

    Returns TElement[]

  • toggle(duration: JQuery.Duration, easing: string, complete?: ((this: TElement) => void)): JQuery<TElement>
  • toggle(duration: JQuery.Duration, complete: ((this: TElement) => void)): JQuery<TElement>
  • toggle(duration_complete_options_display?: boolean | JQuery.Duration | EffectsOptions<TElement> | ((this: TElement) => void)): JQuery<TElement>
  • toggle(options: any): JQuery<TElement>
  • toggle(effect: string, options?: any, duration?: number, complete?: Function): JQuery<TElement>
  • toggle(effect: string, options?: any, duration?: string, complete?: Function): JQuery<TElement>
  • Display or hide the matched elements.

    see

    ``

    since

    1.4.3

    Parameters

    • duration: JQuery.Duration

      A string or number determining how long the animation will run.

    • easing: string

      A string indicating which easing function to use for the transition.

    • Optional complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Display or hide the matched elements.

    see

    ``

    since

    1.0

    Parameters

    • duration: JQuery.Duration

      A string or number determining how long the animation will run.

    • complete: ((this: TElement) => void)

      A function to call once the animation is complete, called once per matched element.

        • (this: TElement): void
        • Parameters

          • this: TElement

          Returns void

    Returns JQuery<TElement>

  • Display or hide the matched elements.

    see

    ``

    since

    1.0

    since

    1.3

    example

    ​ ````Toggles all paragraphs.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>toggle demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>Toggle</button>
    <p>Hello</p>
    <p style="display: none">Good Bye</p>

    <script>
    $( "button" ).click(function() {
    $( "p" ).toggle();
    });
    </script>

    </body>
    </html>
    example

    ​ ````Animates all paragraphs to be shown if they are hidden and hidden if they are visible, completing the animation within 600 milliseconds.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>toggle demo</title>
    <style>
    p {
    background: #dad;
    font-weight: bold;
    font-size: 16px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>Toggle 'em</button>
    <p>Hiya</p>
    <p>Such interesting text, eh?</p>

    <script>
    $( "button" ).click(function() {
    $( "p" ).toggle( "slow" );
    });
    </script>

    </body>
    </html>
    example

    ​ ````Shows all paragraphs, then hides them all, back and forth.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>toggle demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>Toggle</button>
    <p>Hello</p>
    <p style="display: none">Good Bye</p>

    <script>
    var flip = 0;
    $( "button" ).click(function() {
    $( "p" ).toggle( flip++ % 2 === 0 );
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional duration_complete_options_display: boolean | JQuery.Duration | EffectsOptions<TElement> | ((this: TElement) => void)

      @param duration_complete_options_display

      • duration — A string or number determining how long the animation will run.
      • complete — A function to call once the animation is complete, called once per matched element.
      • options — A map of additional options to pass to the method.
      • display — Use true to show the element or false to hide it.

    Returns JQuery<TElement>

  • Parameters

    • options: any

    Returns JQuery<TElement>

  • Parameters

    • effect: string
    • Optional options: any
    • Optional duration: number
    • Optional complete: Function

    Returns JQuery<TElement>

  • Parameters

    • effect: string
    • Optional options: any
    • Optional duration: string
    • Optional complete: Function

    Returns JQuery<TElement>

  • toggleClass<TState>(className_function: TypeOrArray<string> | ((this: TElement, index: number, className: string, state: TState) => string), state?: TState): JQuery<TElement>
  • toggleClass(state?: boolean): JQuery<TElement>
  • toggleClass(className: string, duration?: number, easing?: string, complete?: Function): JQuery<TElement>
  • toggleClass(className: string, duration?: string, easing?: string, complete?: Function): JQuery<TElement>
  • toggleClass(className: string, aswitch?: boolean, duration?: number, easing?: string, complete?: Function): JQuery<TElement>
  • toggleClass(className: string, aswitch?: boolean, duration?: string, easing?: string, complete?: Function): JQuery<TElement>
  • 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.

    see

    ``

    since

    1.0

    since

    1.3

    since

    1.4

    since

    3.3

    example

    ​ ````Toggle the class 'highlight' when a paragraph is clicked.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>toggleClass demo</title>
    <style>
    p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
    cursor: pointer;
    }
    .blue {
    color: blue;
    }
    .highlight {
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p class="blue">Click to toggle</p>
    <p class="blue highlight">highlight</p>
    <p class="blue">on these</p>
    <p class="blue">paragraphs</p>

    <script>
    $( "p" ).click(function() {
    $( this ).toggleClass( "highlight" );
    });
    </script>

    </body>
    </html>
    example

    ​ ````Add the "highlight" class to the clicked paragraph on every third click of that paragraph, remove it every first and second click.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>toggleClass demo</title>
    <style>
    p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
    cursor: pointer;
    }
    .blue {
    color: blue;
    }
    .highlight {
    background: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
    <p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
    <p class="blue">on these (<span>clicks: 0</span>)</p>
    <p class="blue">paragraphs (<span>clicks: 0</span>)</p>

    <script>
    var count = 0;
    $( "p" ).each(function() {
    var $thisParagraph = $( this );
    var count = 0;
    $thisParagraph.click(function() {
    count++;
    $thisParagraph.find( "span" ).text( "clicks: " + count );
    $thisParagraph.toggleClass( "highlight", count % 3 === 0 );
    });
    });
    </script>

    </body>
    </html>
    example

    ​ ````Toggle the class name(s) indicated on the buttons for each div.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>toggleClass demo</title>
    <style>
    .wrap > div {
    float: left;
    width: 100px;
    margin: 1em 1em 0 0;
    padding-left: 3px;
    border: 1px solid #abc;
    }
    div.a {
    background-color: aqua;
    }
    div.b {
    background-color: burlywood;
    }
    div.c {
    background-color: cornsilk;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div class="buttons">
    <button>toggle</button>
    <button class="a">toggle a</button>
    <button class="a b">toggle a b</button>
    <button class="a b c">toggle a b c</button>
    <a href="#">reset</a>
    </div>
    <div class="wrap">
    <div></div>
    <div class="b"></div>
    <div class="a b"></div>
    <div class="a c"></div>
    </div>

    <script>
    var cls = [ "", "a", "a b", "a b c" ];
    var divs = $( "div.wrap" ).children();
    var appendClass = function() {
    divs.append(function() {
    return "<div>" + ( this.className || "none" ) + "</div>";
    });
    };

    appendClass();

    $( "button" ).on( "click", function() {
    var tc = this.className || undefined;
    divs.toggleClass( tc );
    appendClass();
    });

    $( "a" ).on( "click", function( event ) {
    event.preventDefault();
    divs.empty().each(function( i ) {
    this.className = cls[ i ];
    });
    appendClass();
    });
    </script>

    </body>
    </html>

    Type Parameters

    • TState extends boolean

    Parameters

    • className_function: TypeOrArray<string> | ((this: TElement, index: number, className: string, state: TState) => string)

      @param className_function

      • className — One or more class names (separated by spaces) to be toggled for each element in the matched set.
      • function — A function that returns class names to be toggled in the class attribute of each element in the matched set. Receives the index position of the element in the set, the old class value, and the state as arguments.
    • Optional state: TState

      A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.

    Returns JQuery<TElement>

  • 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.

    see

    ``

    since

    1.4

    deprecated

    ​ Deprecated since 3.0. See ``.

    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.

    Solution: If this functionality is still needed, save the current full .attr( "class" ) value in a data item and restore it when required.

    Parameters

    • Optional state: boolean

      A boolean value to determine whether the class should be added or removed.

    Returns JQuery<TElement>

  • Parameters

    • className: string
    • Optional duration: number
    • Optional easing: string
    • Optional complete: Function

    Returns JQuery<TElement>

  • Parameters

    • className: string
    • Optional duration: string
    • Optional easing: string
    • Optional complete: Function

    Returns JQuery<TElement>

  • Parameters

    • className: string
    • Optional aswitch: boolean
    • Optional duration: number
    • Optional easing: string
    • Optional complete: Function

    Returns JQuery<TElement>

  • Parameters

    • className: string
    • Optional aswitch: boolean
    • Optional duration: string
    • Optional easing: string
    • Optional complete: Function

    Returns JQuery<TElement>

  • tooltip(): JQuery<HTMLElement>
  • tooltip(methodName: "destroy"): void
  • tooltip(methodName: "disable"): void
  • tooltip(methodName: "enable"): void
  • tooltip(methodName: "open"): void
  • tooltip(methodName: "close"): void
  • tooltip(methodName: "widget"): JQuery<HTMLElement>
  • tooltip(methodName: string): JQuery<HTMLElement>
  • tooltip(options: TooltipOptions): JQuery<HTMLElement>
  • tooltip(optionLiteral: string, optionName: string): any
  • tooltip(optionLiteral: string, options: TooltipOptions): any
  • tooltip(optionLiteral: string, optionName: string, optionValue: any): JQuery<HTMLElement>
  • Returns JQuery<HTMLElement>

  • Parameters

    • methodName: "destroy"

    Returns void

  • Parameters

    • methodName: "disable"

    Returns void

  • Parameters

    • methodName: "enable"

    Returns void

  • Parameters

    • methodName: "open"

    Returns void

  • Parameters

    • methodName: "close"

    Returns void

  • Parameters

    • methodName: "widget"

    Returns JQuery<HTMLElement>

  • Parameters

    • methodName: string

    Returns JQuery<HTMLElement>

  • Parameters

    Returns JQuery<HTMLElement>

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery<HTMLElement>

  • trigger(eventType_event: string | Event, extraParameters?: string | number | boolean | any[] | PlainObject<any>): JQuery<TElement>
  • Execute all handlers and behaviors attached to the matched elements for the given event type.

    see

    ``

    since

    1.0

    since

    1.3

    example

    ​ ````Clicks to button #2 also trigger a click for button #1.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>trigger demo</title>
    <style>
    button {
    margin: 10px;
    }
    div {
    color: blue;
    font-weight: bold;
    }
    span {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button>Button #1</button>
    <button>Button #2</button>
    <div><span>0</span> button #1 clicks.</div>
    <div><span>0</span> button #2 clicks.</div>

    <script>
    $( "button:first" ).click(function() {
    update( $( "span:first" ) );
    });

    $( "button:last" ).click(function() {
    $( "button:first" ).trigger( "click" );
    update( $( "span:last" ) );
    });

    function update( j ) {
    var n = parseInt( j.text(), 10 );
    j.text( n + 1 );
    }
    </script>

    </body>
    </html>
    example

    ​ ````To submit the first form without using the submit() function, try:

    $( "form:first" ).trigger( "submit" );
    
    example

    ​ ````To submit the first form without using the submit() function, try:

    var event = jQuery.Event( "submit" );
    $( "form:first" ).trigger( event );
    if ( event.isDefaultPrevented() ) {
    // Perform an action...
    }
    example

    ​ ````To pass arbitrary data to an event:

    $( "p" )
    .click(function( event, a, b ) {
    // When a normal click fires, a and b are undefined
    // for a trigger like below a refers to "foo" and b refers to "bar"
    })
    .trigger( "click", [ "foo", "bar" ] );
    example

    ​ ````To pass arbitrary data through an event object:

    var event = jQuery.Event( "logged" );
    event.user = "foo";
    event.pass = "bar";
    $( "body" ).trigger( event );
    example

    ​ ````Alternative way to pass data through an event object:

    $( "body" ).trigger({
    type:"logged",
    user:"foo",
    pass:"bar"
    });

    Parameters

    • eventType_event: string | Event

      @param eventType_event

      • eventType — A string containing a JavaScript event type, such as click or submit.
      • event — A `jQuery.Event` object.
    • Optional extraParameters: string | number | boolean | any[] | PlainObject<any>

      Additional parameters to pass along to the event handler.

    Returns JQuery<TElement>

  • triggerHandler(eventType_event: string | Event, extraParameters?: string | number | boolean | any[] | PlainObject<any>): any
  • Execute all handlers attached to an element for an event.

    see

    ``

    since

    1.2

    since

    1.3

    example

    ​ ````If you called .triggerHandler() on a focus event - the browser's default focus action would not be triggered, only the event handlers bound to the focus event.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>triggerHandler demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button id="old">.trigger( "focus" )</button>
    <button id="new">.triggerHandler( "focus" )</button><br><br>

    <input type="text" value="To Be Focused">

    <script>
    $( "#old" ).click(function() {
    $( "input" ).trigger( "focus" );
    });
    $( "#new" ).click(function() {
    $( "input" ).triggerHandler( "focus" );
    });
    $( "input" ).focus(function() {
    $( "<span>Focused!</span>" ).appendTo( "body" ).fadeOut( 1000 );
    });
    </script>

    </body>
    </html>

    Parameters

    • eventType_event: string | Event

      @param eventType_event

      • eventType — A string containing a JavaScript event type, such as click or submit.
      • event — A `jQuery.Event` object.
    • Optional extraParameters: string | number | boolean | any[] | PlainObject<any>

      Additional parameters to pass along to the event handler.

    Returns any

  • Remove a previously-attached event handler from the elements.

    see

    ``

    since

    1.0

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.0. Use ``.

    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

    ​ ````Can bind and unbind events to the colored button.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>unbind demo</title>
    <style>
    button {
    margin: 5px;
    }
    button#theone {
    color: red;
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button id="theone">Does nothing...</button>
    <button id="bind">Bind Click</button>
    <button id="unbind">Unbind Click</button>
    <div style="display:none;">Click!</div>

    <script>
    function aClick() {
    $( "div" ).show().fadeOut( "slow" );
    }
    $( "#bind" ).click(function() {
    $( "#theone" )
    .bind( "click", aClick )
    .text( "Can Click!" );
    });
    $( "#unbind" ).click(function() {
    $( "#theone" )
    .unbind( "click", aClick )
    .text( "Does nothing..." );
    });
    </script>

    </body>
    </html>
    example

    ​ ````To unbind just one previously bound handler, pass the function in as the second argument:

    var foo = function() {
    // Code to handle some kind of event
    };

    $( "p" ).bind( "click", foo ); // ... Now foo will be called when paragraphs are clicked ...

    $( "p" ).unbind( "click", foo ); // ... foo will no longer be called.

    Type Parameters

    • TType extends string

    Parameters

    • event: TType

      A string containing one or more DOM event types, such as "click" or "submit," or custom event names.

    • handler: false | TypeEventHandler<TElement, any, TElement, TElement, TType>

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Remove a previously-attached event handler from the elements.

    see

    ``

    since

    1.0

    deprecated

    ​ Deprecated since 3.0. Use ``.

    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

    ​ ````To unbind all events from all paragraphs, write:

    $( "p" ).unbind();
    
    example

    ​ ````To unbind all click events from all paragraphs, write:

    $( "p" ).unbind( "click" );
    

    Parameters

    • Optional event: string | TriggeredEvent<TElement, any, any, any>

      A string containing one or more DOM event types, such as "click" or "submit," or custom event names. A jQuery.Event object.

    Returns JQuery<TElement>

  • undelegate<TType>(selector: string, eventType: TType, handler: false | TypeEventHandler<TElement, any, any, any, TType>): JQuery<TElement>
  • undelegate(selector: string, eventType_events: string | TypeEventHandlers<TElement, any, any, any>): JQuery<TElement>
  • undelegate(namespace?: string): JQuery<TElement>
  • Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.

    see

    ``

    since

    1.4.2

    deprecated

    ​ Deprecated since 3.0. Use ``.

    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

    ​ ````Can bind and unbind events to the colored button.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>undelegate demo</title>
    <style>
    button {
    margin: 5px;
    }
    button#theone {
    color: red;
    background: yellow;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button id="theone">Does nothing...</button>
    <button id="bind">Bind Click</button>
    <button id="unbind">Unbind Click</button>
    <div style="display:none;">Click!</div>

    <script>
    function aClick() {
    $( "div" ).show().fadeOut( "slow" );
    }
    $( "#bind" ).click(function() {
    $( "body" )
    .delegate( "#theone", "click", aClick )
    .find( "#theone" ).text( "Can Click!" );
    });
    $( "#unbind" ).click(function() {
    $( "body" )
    .undelegate( "#theone", "click", aClick )
    .find( "#theone" ).text( "Does nothing..." );
    });
    </script>

    </body>
    </html>
    example

    ​ ````To undelegate just one previously bound handler, pass the function in as the third argument:

    var foo = function () {
    // Code to handle some kind of event
    };

    // ... Now foo will be called when paragraphs are clicked ...
    $( "body" ).delegate( "p", "click", foo );

    // ... foo will no longer be called.
    $( "body" ).undelegate( "p", "click", foo );

    Type Parameters

    • TType extends string

    Parameters

    • selector: string

      A selector which will be used to filter the event results.

    • eventType: TType

      A string containing a JavaScript event type, such as "click" or "keydown"

    • handler: false | TypeEventHandler<TElement, any, any, any, TType>

      A function to execute each time the event is triggered.

    Returns JQuery<TElement>

  • Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.

    see

    ``

    since

    1.4.2

    since

    1.4.3

    deprecated

    ​ Deprecated since 3.0. Use ``.

    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.

    Parameters

    • selector: string

      A selector which will be used to filter the event results.

    • eventType_events: string | TypeEventHandlers<TElement, any, any, any>

      @param eventType_events

      • eventType — A string containing a JavaScript event type, such as "click" or "keydown"
      • events — An object of one or more event types and previously bound functions to unbind from them.

    Returns JQuery<TElement>

  • Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.

    see

    ``

    since

    1.4.2

    since

    1.6

    deprecated

    ​ Deprecated since 3.0. Use ``.

    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

    ​ ````To unbind all delegated events from all paragraphs, write:

    $( "p" ).undelegate();
    
    example

    ​ ````To unbind all delegated click events from all paragraphs, write:

    $( "p" ).undelegate( "click" );
    
    example

    ​ ````To unbind all delegated events by their namespace:

    var foo = function() {
    // Code to handle some kind of event
    };

    // Delegate events under the ".whatever" namespace
    $( "form" ).delegate( ":button", "click.whatever", foo );

    $( "form" ).delegate( "input[type='text'] ", "keypress.whatever", foo );

    // Unbind all events delegated under the ".whatever" namespace
    $( "form" ).undelegate( ".whatever" );

    Parameters

    • Optional namespace: string

      A selector which will be used to filter the event results.

    Returns JQuery<TElement>

  • uniqueId(): JQuery<HTMLElement>
  • unmousewheel(handler: TypeEventHandler<HTMLElement, undefined, HTMLElement, HTMLElement, "mousewheel">): JQuery<TElement>
  • Removes the given event listener for the mousewheel event.

    Parameters

    • handler: TypeEventHandler<HTMLElement, undefined, HTMLElement, HTMLElement, "mousewheel">

      Callback to remove.

    Returns JQuery<TElement>

    this for chaining.

  • unwrap(selector?: string): JQuery<TElement>
  • Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

    see

    ``

    since

    1.4

    since

    3.0

    example

    ​ ````Wrap/unwrap a div around each of the paragraphs.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>unwrap demo</title>
    <style>
    div {
    border: 2px solid blue;
    }
    p {
    background: yellow;
    margin: 4px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>
    <button>wrap/unwrap</button>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
    <script>
    var pTags = $( "p" );
    $( "button" ).click(function() {
    if ( pTags.parent().is( "div" ) ) {
    pTags.unwrap();
    } else {
    pTags.wrap( "<div></div>" );
    }
    });
    </script>

    </body>
    </html>

    Parameters

    • Optional selector: string

      A selector to check the parent element against. If an element's parent does not match the selector, the element won't be unwrapped.

    Returns JQuery<TElement>

  • val(value_function: string | number | string[] | ((this: TElement, index: number, value: string) => string)): JQuery<TElement>
  • val(): undefined | (TElement extends HTMLSelectElement & { type: "select-one" } ? string : TElement extends HTMLSelectElement & { type: "select-multiple" } ? string[] : TElement extends HTMLSelectElement ? string | string[] : TElement extends { value: string | number } ? TElement["value"] : string | number | string[])
  • Set the value of each element in the set of matched elements.

    see

    ``

    since

    1.0

    since

    1.4

    example

    ​ ````Set the value of an input box.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>val demo</title>
    <style>
    button {
    margin: 4px;
    cursor: pointer;
    }
    input {
    margin: 4px;
    color: blue;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>
    <button>Feed</button>
    <button>the</button>
    <button>Input</button>
    </div>
    <input type="text" value="click a button">

    <script>
    $( "button" ).click(function() {
    var text = $( this ).text();
    $( "input" ).val( text );
    });
    </script>

    </body>
    </html>
    example

    ​ ````Use the function argument to modify the value of an input box.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>val demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Type something and then click or tab out of the input.</p>
    <input type="text" value="type something">

    <script>
    $( "input" ).on( "blur", function() {
    $( this ).val(function( i, val ) {
    return val.toUpperCase();
    });
    });
    </script>

    </body>
    </html>
    example

    ​ ````Set a single select, a multiple select, checkboxes and a radio button .

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>val demo</title>
    <style>
    body {
    color: blue;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <select id="single">
    <option>Single</option>
    <option>Single2</option>
    </select>

    <select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
    </select>

    <br>
    <input type="checkbox" name="checkboxname" value="check1"> check1
    <input type="checkbox" name="checkboxname" value="check2"> check2
    <input type="radio" name="r" value="radio1"> radio1
    <input type="radio" name="r" value="radio2"> radio2

    <script>
    $( "#single" ).val( "Single2" );
    $( "#multiple" ).val([ "Multiple2", "Multiple3" ]);
    $( "input").val([ "check1", "check2", "radio1" ]);
    </script>

    </body>
    </html>

    Parameters

    • value_function: string | number | string[] | ((this: TElement, index: number, value: string) => string)

      @param value_function

      • value — A string of text, a number, or an array of strings corresponding to the value of each matched element to set as selected/checked.
      • 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 value as arguments.

    Returns JQuery<TElement>

  • Get the current value of the first element in the set of matched elements.

    see

    ``

    since

    1.0

    example

    ​ ````Get the single value from a single select and an array of values from a multiple select and display their values.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>val demo</title>
    <style>
    p {
    color: red;
    margin: 4px;
    }
    b {
    color: blue;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p></p>

    <select id="single">
    <option>Single</option>
    <option>Single2</option>
    </select>

    <select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
    </select>

    <script>
    function displayVals() {
    var singleValues = $( "#single" ).val();
    var multipleValues = $( "#multiple" ).val() || [];
    // When using jQuery 3:
    // var multipleValues = $( "#multiple" ).val();
    $( "p" ).html( "<b>Single:</b> " + singleValues +
    " <b>Multiple:</b> " + multipleValues.join( ", " ) );
    }

    $( "select" ).change( displayVals );
    displayVals();
    </script>

    </body>
    </html>
    example

    ​ ````Find the value of an input box.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>val demo</title>
    <style>
    p {
    color: blue;
    margin: 8px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <input type="text" value="some text">
    <p></p>

    <script>
    $( "input" )
    .keyup(function() {
    var value = $( this ).val();
    $( "p" ).text( value );
    })
    .keyup();
    </script>

    </body>
    </html>

    Returns undefined | (TElement extends HTMLSelectElement & { type: "select-one" } ? string : TElement extends HTMLSelectElement & { type: "select-multiple" } ? string[] : TElement extends HTMLSelectElement ? string | string[] : TElement extends { value: string | number } ? TElement["value"] : string | number | string[])

  • width(value_function: string | number | ((this: TElement, index: number, value: number) => string | number)): JQuery<TElement>
  • width(): undefined | number
  • Set the CSS width of each element in the set of matched elements.

    see

    ``

    since

    1.0

    since

    1.4.1

    example

    ​ ````Change the width of each div the first time it is clicked (and change its color).

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>width demo</title>
    <style>
    div {
    width: 70px;
    height: 50px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
    }
    .mod {
    background: blue;
    cursor: default;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <div>d</div>
    <div>d</div>
    <div>d</div>
    <div>d</div>
    <div>d</div>

    <script>
    var modWidth = 50;
    $( "div" ).one( "click", function() {
    $( this ).width( modWidth ).addClass( "mod" );
    modWidth -= 8;
    });
    </script>

    </body>
    </html>

    Parameters

    • value_function: string | number | ((this: TElement, index: number, value: number) => string | number)

      @param value_function

      • value — An integer representing the number of pixels, or an integer along with an optional unit of measure appended (as a string).
      • function — A function returning the width to set. Receives the index position of the element in the set and the old width as arguments. Within the function, this refers to the current element in the set.

    Returns JQuery<TElement>

  • Get the current computed width for the first element in the set of matched elements.

    see

    ``

    since

    1.0

    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.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>width demo</title>
    <style>
    body {
    background: yellow;
    }
    button {
    font-size: 12px;
    margin: 2px;
    }
    p {
    width: 150px;
    border: 1px red solid;
    }
    div {
    color: red;
    font-weight: bold;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <button id="getp">Get Paragraph Width</button>
    <button id="getd">Get Document Width</button>
    <button id="getw">Get Window Width</button>
    <div>&nbsp;</div>
    <p>
    Sample paragraph to test width
    </p>

    <script>
    function showWidth( ele, w ) {
    $( "div" ).text( "The width for the " + ele + " is " + w + "px." );
    }
    $( "#getp" ).click(function() {
    showWidth( "paragraph", $( "p" ).width() );
    });
    $( "#getd" ).click(function() {
    showWidth( "document", $( document ).width() );
    });
    $("#getw").click(function() {
    showWidth( "window", $( window ).width() );
    });
    </script>

    </body>
    </html>

    Returns undefined | number

  • wrap(wrappingElement_function: string | Element | JQuery<HTMLElement> | ((this: TElement, index: number) => string | JQuery<HTMLElement>)): JQuery<TElement>
  • Wrap an HTML structure around each element in the set of matched elements.

    see

    ``

    since

    1.0

    since

    1.4

    example

    ​ ````Wrap a new div around all of the paragraphs.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>wrap demo</title>
    <style>
    div {
    border: 2px solid blue;
    }
    p {
    background: yellow;
    margin: 4px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

    <script>
    $( "p" ).wrap( "<div></div>" );
    </script>

    </body>
    </html>
    example

    ​ ````Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the <strong> (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html.>

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>wrap demo</title>
    <style>
    div {
    border: 2px blue solid;
    margin: 2px;
    padding: 2px;
    }
    p {
    background: yellow;
    margin: 2px;
    padding: 2px;
    }
    strong {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <span>Span Text</span>
    <strong>What about me?</strong>
    <span>Another One</span>

    <script>
    $( "span" ).wrap( "<div><div><p><em><b></b></em></p></div></div>" );
    </script>

    </body>
    </html>
    example

    ​ ````Wrap a new div around all of the paragraphs.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>wrap demo</title>
    <style>
    div {
    border: 2px solid blue;
    }
    p {
    background: yellow;
    margin: 4px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

    <script>
    $( "p" ).wrap( document.createElement( "div" ) );
    </script>

    </body>
    </html>
    example

    ​ ````Wrap a jQuery object double depth div around all of the paragraphs. Notice it doesn't move the object but just clones it to wrap around its target.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>wrap demo</title>
    <style>
    div {
    border: 2px solid blue;
    margin: 2px;
    padding: 2px;
    }
    .doublediv {
    border-color: red;
    }
    p {
    background: yellow;
    margin: 4px;
    font-size: 14px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
    <div class="doublediv"><div></div></div>

    <script>
    $( "p" ).wrap( $( ".doublediv" ) );
    </script>

    </body>
    </html>

    Parameters

    • wrappingElement_function: string | Element | JQuery<HTMLElement> | ((this: TElement, index: number) => string | JQuery<HTMLElement>)

      @param wrappingElement_function

      • wrappingElement — A selector, element, HTML string, or jQuery object specifying the structure to wrap around the matched elements. When you pass a jQuery collection containing more than one element, or a selector matching more than one element, the first element will be used.
      • function — A callback function returning the HTML content or jQuery object to wrap around the 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.

    Returns JQuery<TElement>

  • wrapAll(wrappingElement_function: string | Element | JQuery<HTMLElement> | ((this: TElement) => string | JQuery<HTMLElement>)): JQuery<TElement>
  • Wrap an HTML structure around all elements in the set of matched elements.

    see

    ``

    since

    1.2

    since

    1.4

    example

    ​ ````Wrap a new div around all of the paragraphs.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>wrapAll demo</title>
    <style>
    div {
    border: 2px solid blue;
    }
    p {
    background: yellow;
    margin: 4px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

    <script>
    $( "p" ).wrapAll( "<div></div>" );
    </script>

    </body>
    </html>
    example

    ​ ````Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the <strong> (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>wrapAll demo</title>
    <style>
    div {
    border: 2px blue solid;
    margin: 2px;
    padding: 2px;
    }
    p {
    background: yellow;
    margin: 2px;
    padding: 2px;
    }
    strong {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <span>Span Text</span>
    <strong>What about me?</strong>
    <span>Another One</span>

    <script>
    $( "span").wrapAll( "<div><div><p><em><b></b></em></p></div></div>" );
    </script>

    </body>
    </html>
    example

    ​ ````Wrap a new div around all of the paragraphs.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>wrapAll demo</title>
    <style>
    div {
    border: 2px solid blue;
    }
    p {
    background: yellow;
    margin: 4px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

    <script>
    $( "p" ).wrapAll( document.createElement( "div" ) );
    </script>

    </body>
    </html>
    example

    ​ ````Wrap a jQuery object double depth div around all of the paragraphs. Notice it doesn't move the object but just clones it to wrap around its target.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>wrapAll demo</title>
    <style>
    div {
    border: 2px solid blue;
    margin: 2px;
    padding: 2px;
    }
    .doublediv {
    border-color: red;
    }
    p {
    background: yellow;
    margin: 4px;
    font-size: 14px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
    <div class="doublediv"><div></div></div>

    <script>
    $( "p" ).wrapAll( $( ".doublediv" ) );
    </script>

    </body>
    </html>

    Parameters

    • wrappingElement_function: string | Element | JQuery<HTMLElement> | ((this: TElement) => string | JQuery<HTMLElement>)

      @param wrappingElement_function

      • wrappingElement — A selector, element, HTML string, or jQuery object specifying the structure to wrap around the matched elements.
      • function — A callback function returning the HTML content or jQuery object to wrap around all the matched elements. Within the function, this refers to the first element in the set. Prior to jQuery 3.0, the callback was incorrectly called for every element in the set and received the index position of the element in the set as an argument.

    Returns JQuery<TElement>

  • wrapInner(wrappingElement_function: string | Element | JQuery<HTMLElement> | ((this: TElement, index: number) => string | Element | JQuery<HTMLElement>)): JQuery<TElement>
  • Wrap an HTML structure around the content of each element in the set of matched elements.

    see

    ``

    since

    1.2

    since

    1.4

    example

    ​ ````Selects all paragraphs and wraps a bold tag around each of its contents.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>wrapInner demo</title>
    <style>
    p {
    background: #bbf;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

    <script>
    $( "p" ).wrapInner( "<b></b>" );
    </script>

    </body>
    </html>
    example

    ​ ````Wraps a newly created tree of objects around the inside of the body.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>wrapInner demo</title>
    <style>
    div {
    border: 2px green solid;
    margin: 2px;
    padding: 2px;
    }
    p {
    background: yellow;
    margin: 2px;
    padding: 2px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    Plain old text, or is it?

    <script>
    $( "body" ).wrapInner( "<div><div><p><em><b></b></em></p></div></div>" );
    </script>

    </body>
    </html>
    example

    ​ ````Selects all paragraphs and wraps a bold tag around each of its contents.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>wrapInner demo</title>
    <style>
    p {
    background: #9f9;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

    <script>
    $( "p" ).wrapInner( document.createElement( "b" ) );
    </script>

    </body>
    </html>
    example

    ​ ````Selects all paragraphs and wraps a jQuery object around each of its contents.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>wrapInner demo</title>
    <style>
    p {
    background: #9f9;
    }
    .red {
    color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>

    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

    <script>
    $( "p" ).wrapInner( $( "<span class='red'></span>" ) );
    </script>

    </body>
    </html>

    Parameters

    • wrappingElement_function: string | Element | JQuery<HTMLElement> | ((this: TElement, index: number) => string | Element | JQuery<HTMLElement>)

      @param wrappingElement_function

      • wrappingElement — An HTML snippet, selector expression, jQuery object, or DOM element specifying the structure to wrap around the content of the matched elements.
      • function — A callback function which generates a structure to wrap around the content of the 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.

    Returns JQuery<TElement>

  • zIndex(): number
  • zIndex(zIndex: number): JQuery<HTMLElement>
  • zIndex(): number
  • zIndex(zIndex: number): JQuery<TElement>
  • Returns number

  • Parameters

    • zIndex: number

    Returns JQuery<HTMLElement>

  • Gets the z-index of this element.

    Returns number

    The z-index of this element.

  • Sets the z-index of this element the given value.

    Parameters

    • zIndex: number

      The z-index to set.

    Returns JQuery<TElement>

    The z-index of this element.

Generated using TypeDoc