JQuery UI Complete Reference Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report JQuery UI contains the set of GUI widgets, animated visual effects, and themes implemented with jQuery, Cascading Style Sheets, and HTML that is built with jQuery JavaScript Library. The Complete List of jQuery UI is listed below: Effects jQuery UI Blind EffectjQuery UI Bounce EffectjQuery UI Clip EffectjQuery UI Drop EffectJQuery UI Explode EffectjQuery UI Fade EffectjQuery UI Fold EffectjQuery UI Highlight EffectjQuery UI Puff EffectjQuery UI Pulsate EffectjQuery UI Scale EffectjQuery UI Shake EffectjQuery UI Size EffectjQuery UI Slide Effect Interactions: 1. Draggable Widget Options jQuery UI Draggable addClasses OptionjQuery UI Draggable axis OptionjQuery UI Draggable cursor OptionjQuery UI Draggable cursorAt OptionjQuery UI Draggable delay OptionjQuery UI Draggable distance OptionjQuery UI Draggable disabled OptionjQuery UI Draggable grid OptionjQuery UI Draggable helper OptionjQuery UI Draggable opacity OptionjQuery UI Draggable revertDuration OptionjQuery UI Draggable revert OptionjQuery UI Draggable scroll OptionjQuery UI Draggable scrollSpeed OptionjQuery UI Draggable scrollSensitivity Option 2. Droppable Widget: Options jQuery UI Droppable accept OptionjQuery UI Droppable activeClass Option 3. Resizable Widget Options jQuery UI Resizable alsoResize OptionjQuery UI Resizable animate OptionjQuery UI Resizable animateDuration OptionjQuery UI Resizable cancel OptionjQuery UI Resizable classes OptionjQuery UI Resizable delay OptionjQuery UI Resizable disabled OptionjQuery UI Resizable distance OptionjQuery UI Resizable grid OptionjQuery UI Resizable ghost OptionjQuery UI Resizable handles OptionjQuery UI Resizable helper OptionjQuery UI Resizable maxWidth OptionjQuery UI Resizable maxHeight OptionjQuery UI Resizable minHeight OptionjQuery UI Resizable minWidth Option Methods: jQuery UI Resizable destroy() MethodjQuery UI Resizable disable() Method 4. Sortable Widget: Options jQuery UI Sortable Widget appendTo OptionjQuery UI Sortable Widget axis OptionjQuery UI Sortable Widget classes OptionjQuery UI Sortable Widget Cursor OptionjQuery UI Sortable Widget delay Option JQuery Widgets: jQuery UI widget() Method 1. Accordion Widget Options jQueryUI Accordion active OptionjQueryUI Accordion Collapsible OptionjQueryUI Accordion disabled OptionjQueryUI Accordion event OptionjQueryUI Accordion header OptionjQueryUI Accordion icons Option Methods: jQuery UI Accordion destroy() MethodjQuery UI Accordion disable() MethodjQuery UI Accordion option() MethodjQuery UI accordion Widget() MethodjQuery UI Accordion Widget instance() Method 2. Autocomplete Widget: Options jQuery UI Autocomplete autoFocus OptionjQuery UI Autocomplete delay OptionjQuery UI Autocomplete disabled OptionjQuery UI Autocomplete minLength Option 3. Button Widget jQuery UI Button Methods: jQuery UI Button Widget instance() Method 4. Checkboxradio Widget: jQuery UI Checkboxradio Widget Options jQuery UI Checkboxradio Widget classes OptionjQuery UI Checkboxradio Widget disabled OptionjQuery UI Checkboxradio Widget icon OptionjQuery UI Checkboxradio Widget label Option Methods: jQuery UI Checkboxradio Widget destroy() MethodjQuery UI Checkboxradio Widget disable() Method 5. Controlgroup Widget: jQuery UI Controlgroup Widget 6. Datepicker Widget; Options jQuery UI Datepicker altFormat OptionjQuery UI Datepicker altField OptionjQuery UI Datepicker buttonImage OptionjQuery UI Datepicker buttonImageOnly OptionjQuery UI Datepicker closeText optionjQuery UI Datepicker defaultDate OptionjQuery UI Datepicker dateFormat OptionjQuery UI Datepicker dayNames OptionjQuery UI Datepicker dayNamesMin OptionjQuery UI Datepicker duration OptionjQuery UI Datepicker firstDay OptionjQuery UI Datepicker hideIfNoPrevNext OptionjQuery UI Datepicker monthNames OptionjQuery UI Datepicker nextText OptionjQuery UI datepicker shortYearCutoff OptionjQuery UI datepicker selectOtherMonths OptionjQuery UI Datepicker showButtonPanel OptionjQuery UI Datepicker showCurrentAtPos OptionjQuery UI Datepicker showMonthAfterYear OptionjQuery UI Datepicker showOn OptionjQuery UI datepicker selectOtherMonths OptionjQuery UI Datepicker showAnim OptionjQuery UI Datepicker showOtherMonths optionjQuery UI Datepicker stepMonths OptionjQuery UI Datepicker weekHeader OptionjQuery UI Datepicker showCurrentAtPos OptionjQuery UI Datepicker showMonthAfterYear OptionjQuery UI Datepicker showOn OptionjQuery UI Datepicker yearRange OptionjQuery UI Datepicker yearSuffix Option Methods: jQuery UI Datepicker getDate() MethodjQuery UI Datepicker setDate() Method 7. Dialog Widget: Option jQuery UI Dialog autoOpen OptionjQuery UI Dialog closeText OptionjQuery UI dialog close(event, ui) eventjQuery UI Dialog closeOnEscape OptionjQuery UI Dialog draggable OptionjQuery UI Dialog height OptionjQuery UI Dialog maxHeight OptionjQuery UI Dialog minHeight OptionjQuery UI Dialog minWidth OptionjQuery UI Dialog modal OptionjQuery UI Dialog resizable OptionjQuery UI Dialog title OptionjQuery UI Dialog width Option Methods jQuery UI dialog close() MethodjQuery UI dialog destroy() MethodjQuery UI dialog open() MethodjQuery UI dialog isOpen() MethodjQuery UI dialog option() MethodjQuery UI dialog option(optionName) methodjQuery UI dialog widget() Method Events: jQuery UI dialog create(event, ui) eventjQuery UI | Dialog Drag(event, ui) EventjQuery UI dialog dragStart(event, ui) EventjQuery UI dialog dragStop(event, ui) EventjQuery UI dialog open(event,ui) eventjQuery UI dialog resize(event,ui) eventjQuery UI dialog resizeStart(event, ui) EventjQuery UI dialog resizeStop() Event 8. Menu Widget Methods jQuery UI menu collapse() MethodjQuery UI Menu destroy() MethodjQuery UI menu isFirstItem() MethodjQuery UI menu isLastItem() Method 9. Slider Widget Options jQuery UI Slider destroy() MethodjQuery UI Slider disable() MethodjQuery UI Slider enable() MethodjQuery UI Slider option() MethodjQuery UI Slider option() MethodjQuery UI Slider range OptionjQuery UI Slider value OptionjQuery UI Slider values OptionjQuery UI Slider widget Method 10. Spinner Widget Options jQuery UI Spinner disabled OptionjQuery UI Spinner min OptionjQuery UI Spinner max OptionjQuery UI Spinner step Option Methods: jQuery UI Spinner enable() MethodjQuery UI Spinner pageDown() MethodjQuery UI Spinner pageUp() MethodjQuery UI Spinner stepUp() MethodjQuery UI Spinner stepDown() MethodjQuery UI Spinner widget() method Events: jQuery UI Spinner start EventjQuery UI Spinner stop Event 11. Tabs Widget: Options jQuery UI Tabs active OptionjQuery UI Tabs collapsible OptionjQuery UI Tabs disabled OptionjQuery UI Tabs event OptionjQuery UI Tabs heightStyle Option Methods: jQuery UI Tabs destroy MethodjQuery UI Tabs enable MethodjQuery UI Tabs load() MethodjQuery UI Tabs load() MethodjQuery UI Tabs option() MethodjQuery UI Tabs widget() Method 12. Tooltip Widget: Methods: jQuery UI Tooltips close() MethodjQuery UI Tooltips destroy() MethodjQuery UI Tooltips disable() MethodjQuery UI Tooltips enable() MethodjQuery UI Tooltips open() Method Options jQuery UI Tooltips disabled OptionjQuery UI Tooltips track Option Events: jQuery UI Tooltips close EventjQuery UI Tooltips create EventjQuery UI Tooltips open Event jQuery UI Questions: jQuery UI option MethodjQuery UI option (optionName) MethodjQuery UI SelectmenujQuery BlockUI PluginjQuery UI | toggleClass MethodjQuery UI | position() MethodHow to make basic Autocomplete using jQuery UI ?jQuery UI datepicker option(optionName, value) MethodHow to Disable an datepicker in jQuery UI ?How to make basic menu using jQuery UI ?How to enable a jQuery UI menu ?How to Enable an accordion using jQuery UI ?How to implement categories menu using jQuery UI ?How to make a basic dialog using jQuery UI ?How to destroy a datepicker in jQuery UI ?How to make basic Datepicker using jQuery UI ?How to enable an autocomplete in jQuery UI ?How to Disable a Button in jQuery UI ?How to destroy a button in jQuery UI ?How to Design Color Picker using jQuery UI ?How to achieve drop-down having multiple input types ?How to handle multiple rows selection using jQuery DataTables plugin ?How to disable a jQuery UI menu? Comment More infoAdvertise with us Next Article Getting Started with jQuery S shubhamyadav4 Follow Improve Article Tags : Web Technologies JQuery jQuery-UI Similar Reads jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc 8 min read Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M 4 min read jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java 7 min read jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w 2 min read jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service 4 min read jQuery SelectorsJQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl 5 min read jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se 1 min read jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja 1 min read jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example, 1 min read jQuery EventsjQuery EventsjQuery events are actions or occurrences that happen on a web page, such as clicks, hover, or keypress. jQuery provides methods to handle and respond to these events with ease. jQuery events are used to create dynamic web pages. Syntax: $(selector).method(function)Here We will explore some basic eve 4 min read jQuery bind() MethodThe jQuery bind() method is used to attach one or more event handlers for selected elements. This method specifies a function to run when an event occurs. Syntax$(selector).bind(event, data, function);ParametersIt accepts three parameters that are described below: event: This is an event type that 2 min read jQuery blur() MethodjQuery blur() is an inbuilt method that is used to remove focus from the selected element. This method starts the blur event or it can be attached a function to run when a blur event occurs. Syntax:$(selector).blur(function)Parameters: It accepts an optional parameter "function". jQuery examples t 1 min read jQuery change() MethodThe jQuery change() method is used to detect changes in the value of form elements like <input>, <select>, or <textarea>. It triggers a specified function when a user modifies the input or selects a different option.Syntax$(selector).change(function)Parameters : It accepts an optio 2 min read jQuery EffectsjQuery animate() MethodThe animate() method is an inbuilt method in jQuery which is used to change the state of the element with CSS style. This method can also be used to change the CSS property to create the animated effect for the selected element. Syntax: (selector).animate({styles}, para1, para2, para3); Here "select 2 min read jQuery clearQueue() MethodThe jQuery clearQueue() method removes all items from the queue that have not yet been run. Note that when a function has started to run, it runs until it is completed. Syntax: $(selector).clearQueue(name); Here "selector" is the selected element. Parameter: It accepts a parameter "name" which is th 2 min read jQuery delay() MethodjQuery delay() method is an inbuilt that is used to set a timer to delay the execution of the next item in the queue. Syntax:$(selector).delay(para1, para2);Parameter: It accepts two parameters which are specified below: para1: It specifies the speed of the delay.para2: It is optional and specifies 2 min read jQuery HTML/CSSjQuery addClass() MethodThe addClass() method is an inbuilt method in jQuery that is used to add more properties to each selected element. It can also be used to change the property of the selected element. This method can be used in two different ways: 1) By adding a Class name directly: Here, the Class name can be used d 2 min read jQuery after() MethodThe after() method is an inbuilt function in jQuery which is used to insert content, specified by the parameter for each selected element in the set of matched elements. Syntax: $(selector).after(A);Parameter: It accepts a parameter "A" which is either a content or function passed to the method. Ret 1 min read jQuery append() MethodThe append() method in jQuery is used to insert some content at the end of the selected elements. Syntax: $(selector).append( content, function(index, html) ) Parameters: This method accepts two parameters as mentioned above and described below: content: It is a required parameter and is used to spe 2 min read jQuery TraversingjQuery | TraversingIn jQuery, traversing means moving through or over the HTML elements to find, filter or select a particular or entire element. Based on the traversing purposes following methods are Categorized as follows: Tree Traversing: Ancestors: parent() it gives parent element of specified selector Syntax: $(s 4 min read jQuery add() methodThe jQuery add() method is used to add elements to the existing group of elements. This method can add element to the whole document, or just inside the context element if the context parameter is defined. Syntax: $(selector).add(element, context_parameter) Here selector helps to find the matching e 1 min read jQuery addBack() MethodThe addBack() is an inbuilt method in jQuery that adds the previous set of elements to the current set. This method adds previous DOM tree elements to the current set and maintains them in the internal stack which will take care of changes to the matched set of elements. Syntax: .addBack(selector) P 2 min read Like