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