jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler.

There are different methods to use jQuery. One is by using CDN link and the other is by including the jQuery file in project.

JQuery Selectors are used for selecting the elements on which some actions are needed to be performed

We can manipulate attributes assigned to HTML elements easily through jQuery. href, src, id, class, style are all examples of HTML attributes.

The removeAttr() method is used for removing any attribute of an element.

jQuery allow content Manipulation. The methods used for these purposes all html() and text().

val() method is used to get or set the values of form fields, such as textboxes, dropdowns, and similar inputs

append() and prepend()

append() allows us to add content at the end while prepend() allows us to add content at the begining.

after() inserts content after the selected elements and before() inserts content before the selected elements

The addClass( ) method adds one or more classes to the selected elements.

The removeClass() method removes one or more class names from the selected elements.

The toggleClass() method toggles between adding/removing classes from the selected elements, meaning that if the specified class exists for the element, it is removed, and if it does not exist, it is added.

The css() method can be used to get and set CSS property values.

The width() and height() methods can be used to get and set the width and height of HTML elements.

DOM Traversal methods

DOM Traversal methods include parent(), parents(), children(), siblings(), next(), prev()

remove() method is used to remove a particular element.

The empty() method is used to remove the child elements of the selected element(s).

JQuery provides an efficient way to handle events. Events occur when the user performs an action, such as clicking an element, moving the mouse, or submitting a form.

The on() method is used to attach an event to the selected element.

Hide(), Show(), Toggle()

hide() method is used to hide. show() method is used to show. toggle() method is used to hide and show.

fadeIn(), fadeOut(), fadeToggle()

jQuery provides the fadeIn and fadeOut methods, which fade an element in and out of visibility.

slideUp(), slideDown()

The slideUp() and slideDown() methods are used to create a sliding effect on elements.

The slideToggle() method is used to slide up or slide down the selected element.

The animate() method lets you animate to a set value, or to a value relative to the current value.

The * selector is used to select all elements in the document including html, head, and body.

#id Selector in jQuery

The #id selector is used to select elements with the specific id. The id refers to the id attribute of an HTML element.

.class Selector in jQuery

The .class selector is used to select all elements with the specific class. It refers to the class attribute of an HTML element.

multiple classes Selector in jQuery

We can use .class selector to select multiple classes. For this purpose, we have to only separate each class with a comma.

element Selector in jQuery

The element selector is used to select all elements with the specific element name.

multiple elements Selector in jQuery

We can select multiple elements with the help of element selector. For this purpose, we just have to separate each of them with a comma.

:first Selector in jQuery

The :first selector is used to select the first element. It is only used to select one single element.

:last Selector in jQuery

The :last selector is used to select the last element. It is only used to select one single element.

:even Selector in jQuery

The :even selector is used to select each element with an even index number like 0, 2, 4, 6, 8, etc. As we know, the index number starts from 0.

:odd Selector in jQuery

The :odd selector is used to selecting each element with an odd index number like 0, 2, 4, 6, 8, etc. As we know, the index number starts from 0.

:first-child Selector in jQuery

The :first-child selector is used to selecting all elements that are the first child of their parent.

:first-of-type Selector in jQuery

The :first-of-type selector is used to selecting all elements that are their parent first child. It is similar to :nth-of-type selector.

:last-child Selector in jQuery

The :last-child selector is used to selecting all elements that are the last child of their parent.

:last-of-type Selector in jQuery

The :last-of-type selector is used to selecting all elements that are their parent last child. It is similar to :nth-of-type selector.

:nth-child() Selector in jQuery

The :nth-child(n) selector is used to select all elements that are the nth-child of their parent regardless of their type.

:nth-last-child() Selector in jQuery

The :nth-last-child(n) selector is used to select all elements that are the nth-last-child of their parent regardless of their type but counting starts from the last child, not the first child.

:nth-of-type() Selector in jQuery

The :nth-of-type(n) selector is used to select all elements that are the nth-child that belong to a particular type, of their parent.

:nth-last-of-type() Selector in jQuery

The :nth-last-of-type(n) selector is used to select all elements that are the nth child that belong to a particular type, of their parent. but counting from the last child.

:only-child Selector in jQuery

The :only-child selector is used to selecting every element that is the only child of its parent.

:only-of-type Selector in jQuery

The :only-of-type selector is used to selecting every element that is the only child of its type, of its parent.

parent > child Selector in jQuery

The $(parent > child) selector is used to select all elements that are a direct child of the specified element.

parent descendant Selector in jQuery

The (parent descendant) selector is used to select all elements that are descendants of a specified element.

element + next Selector in jQuery

The (element + next) selector is used to select the next element of the specified element.

element ~ siblings Selector in jQuery

The (element ~ siblings) selector is used to select sibling elements that appear after the specified element.

:eq() Selector in jQuery

The :eq() selector is used to select an element with a specific index number. As index numbers start at 0, therefore, first element will have the index number 0.

:gt() Selector in jQuery

The :gt() selector is used to select elements with an index number higher than a specified number. The index numbers start at 0.

:lt() Selector in jQuery

The :lt() selector is used to select elements with an index number lower than a specified number. The index numbers start at 0.

Jquery

Home >> Jquery

All Jquery Tutorials, Quizzes & Exercises

jQuery Intro
Intro	jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler.
jQuery Syntax	There are different methods to use jQuery. One is by using CDN link and the other is by including the jQuery file in project.
jQuery Selector	JQuery Selectors are used for selecting the elements on which some actions are needed to be performed

jQuery Intro Quiz
INTRO QUIZ	In jQuery Intro Quiz Test, Questions related to tutorials present in the Intro Section is asked

jQuery Intro Exercise
INTRO EXERCISE	In jQuery Intro Exercise test, question related to all topics present in the Intro section is asked.

jQuery Basic
Attributes	We can manipulate attributes assigned to HTML elements easily through jQuery. href, src, id, class, style are all examples of HTML attributes.
Removing Attributes	The removeAttr() method is used for removing any attribute of an element.
Content Manipulation	jQuery allow content Manipulation. The methods used for these purposes all html() and text().
val() Method	val() method is used to get or set the values of form fields, such as textboxes, dropdowns, and similar inputs
append() and prepend()	append() allows us to add content at the end while prepend() allows us to add content at the begining.
after() and before()	after() inserts content after the selected elements and before() inserts content before the selected elements
addClass() Method	The addClass( ) method adds one or more classes to the selected elements.
removeClass() Method	The removeClass() method removes one or more class names from the selected elements.
toggleClass() Method	The toggleClass() method toggles between adding/removing classes from the selected elements, meaning that if the specified class exists for the element, it is removed, and if it does not exist, it is added.
css() Method	The css() method can be used to get and set CSS property values.
width() and height()	The width() and height() methods can be used to get and set the width and height of HTML elements.

jQuery Basic Quiz
BASIC QUIZ	In jQuery Basic Quiz Test, Questions related to tutorials present in the Basic Section is asked

jQuery Basic Exercise
BASIC EXERCISE	In jQuery Basic Exercise test, question related to all topics present in the Basic section is asked.

jQuery Advance
DOM Traversal methods	DOM Traversal methods include parent(), parents(), children(), siblings(), next(), prev()
remove() Method	remove() method is used to remove a particular element.
empty() Method	The empty() method is used to remove the child elements of the selected element(s).
Event Handling	JQuery provides an efficient way to handle events. Events occur when the user performs an action, such as clicking an element, moving the mouse, or submitting a form.
on() Method	The on() method is used to attach an event to the selected element.
Hide(), Show(), Toggle()	hide() method is used to hide. show() method is used to show. toggle() method is used to hide and show.
fadeIn(), fadeOut(), fadeToggle()	jQuery provides the fadeIn and fadeOut methods, which fade an element in and out of visibility.
slideUp(), slideDown()	The slideUp() and slideDown() methods are used to create a sliding effect on elements.
slideToggle()	The slideToggle() method is used to slide up or slide down the selected element.
animate()	The animate() method lets you animate to a set value, or to a value relative to the current value.

jQuery Advance Quiz
ADVANCE QUIZ	In jQuery Advance Quiz Test, Questions related to tutorials present in the Advance Section is asked

jQuery Advance Exercise
ADVANCE EXERCISE	In jQuery Advance Exercise test, question related to all topics present in the Advance section is asked.

jQuery Selectors
:focus Selector in jQuery	The :focus selector is used to selecting the element that currently has focus.
:contains() Selector in jQuery	The :contains() selector is used to select elements containing the specified string.
:has() Selector in jQuery	The :has() selector is used to select all elements that have one or more elements inside of them and it matches the specified selector.
:empty Selector in jQuery	The :empty selector is used to selecting empty elements. An empty element is an element without child elements or text.
:parent Selector in jQuery	The :parent selector is used to selecting all elements that are the parent of another element.
:hidden Selector in jQuery	The :hidden selector is used to select hidden elements.
:visible Selector in jQuery	The :visible selector is used to selecting every element that is currently visible.
:root Selector in jQuery	The :root selector is used to selecting the document root element. In the case of HTML, the root element is always the html element.
:lang() Selector in jQuery	The :lang() selector is used to select all elements with the language attribute starting with a specified value.
[attribute] Selector in jQuery	The [attribute] selector is used to select each element with the specified attribute.
[attribute=value] Selector in jQuery	The [attribute=value] selector is used to select each element with the specified attribute and value.
[attribute!=value] Selector in jQuery	The [attribute!=value] selector is used to select each element that does NOT have the specified attribute and value.
[attribute$=value] Selector in jQuery	The [attribute$=value] selector is used to select an element with a specific attribute, but with a value ending in a specific string.
[attribute\|=value] Selector in jQuery	The [attribute\|=value] selector is used to select all elements with a specified attribute but with a value equal to a specified string or starting with that string.
[attribute^=value] Selector in jQuery	The [attribute^=value] selector is used to select each element with a specific attribute, with a value beginning in a specific string.
[attribute~=value] Selector in jQuery	The [attribute~=value] selector is used to select each element with a specific attribute but with a value containing a specific string.
[attribute*=value] Selector in jQuery	The [attribute*=value] selector is used to select each element with a specific attribute, with a value containing a string.
:input Selector in jQuery	The :input selector is used for selecting form elements. We can also use it with buttons.
:text Selector in jQuery	The :text selector is used to select input elements with type=text.
:password Selector in jQuery	The :password selector is used to select input elements with type=password.
:radio Selector in jQuery	The :radio selector is used to select input elements with type=radio.
:checkbox Selector in jQuery	The :checkbox selector is used to select input elements with type=checkbox.
:submit Selector in jQuery	The :submit selector is used to select button and input elements with type=submit.
:reset Selector in jQuery	The :reset selector is used to select button and input elements with type=reset. We cannot select reset button by using input:reset.
:button Selector in jQuery	The :button selector is used to select button and input elements with type=button.
:image Selector in jQuery	The :image selector is used to select input elements with type=image.
:file Selector in jQuery	The :file selector is used to selecting input elements with type=file.
:enabled Selector in jQuery	The :enabled selector is used to select all enabled form elements.
:disabled Selector in jQuery	The :disabled selector is used to select all disabled form elements.
:selected Selector in jQuery	The :selected selector is used to select option elements that are pre-selected. It will not work on radio buttons or checkboxes.
:checked Selector in jQuery	The :checked selector is used to select all checked checkboxes or radio buttons.
* Selector in jQuery	The * selector is used to select all elements in the document including html, head, and body.
#id Selector in jQuery	The #id selector is used to select elements with the specific id. The id refers to the id attribute of an HTML element.
.class Selector in jQuery	The .class selector is used to select all elements with the specific class. It refers to the class attribute of an HTML element.
multiple classes Selector in jQuery	We can use .class selector to select multiple classes. For this purpose, we have to only separate each class with a comma.
element Selector in jQuery	The element selector is used to select all elements with the specific element name.
multiple elements Selector in jQuery	We can select multiple elements with the help of element selector. For this purpose, we just have to separate each of them with a comma.
:first Selector in jQuery	The :first selector is used to select the first element. It is only used to select one single element.
:last Selector in jQuery	The :last selector is used to select the last element. It is only used to select one single element.
:even Selector in jQuery	The :even selector is used to select each element with an even index number like 0, 2, 4, 6, 8, etc. As we know, the index number starts from 0.
:odd Selector in jQuery	The :odd selector is used to selecting each element with an odd index number like 0, 2, 4, 6, 8, etc. As we know, the index number starts from 0.
:first-child Selector in jQuery	The :first-child selector is used to selecting all elements that are the first child of their parent.
:first-of-type Selector in jQuery	The :first-of-type selector is used to selecting all elements that are their parent first child. It is similar to :nth-of-type selector.
:last-child Selector in jQuery	The :last-child selector is used to selecting all elements that are the last child of their parent.
:last-of-type Selector in jQuery	The :last-of-type selector is used to selecting all elements that are their parent last child. It is similar to :nth-of-type selector.
:nth-child() Selector in jQuery	The :nth-child(n) selector is used to select all elements that are the nth-child of their parent regardless of their type.
:nth-last-child() Selector in jQuery	The :nth-last-child(n) selector is used to select all elements that are the nth-last-child of their parent regardless of their type but counting starts from the last child, not the first child.
:nth-of-type() Selector in jQuery	The :nth-of-type(n) selector is used to select all elements that are the nth-child that belong to a particular type, of their parent.
:nth-last-of-type() Selector in jQuery	The :nth-last-of-type(n) selector is used to select all elements that are the nth child that belong to a particular type, of their parent. but counting from the last child.
:only-child Selector in jQuery	The :only-child selector is used to selecting every element that is the only child of its parent.
:only-of-type Selector in jQuery	The :only-of-type selector is used to selecting every element that is the only child of its type, of its parent.
parent > child Selector in jQuery	The $(parent > child) selector is used to select all elements that are a direct child of the specified element.
parent descendant Selector in jQuery	The (parent descendant) selector is used to select all elements that are descendants of a specified element.
element + next Selector in jQuery	The (element + next) selector is used to select the next element of the specified element.
element ~ siblings Selector in jQuery	The (element ~ siblings) selector is used to select sibling elements that appear after the specified element.
:eq() Selector in jQuery	The :eq() selector is used to select an element with a specific index number. As index numbers start at 0, therefore, first element will have the index number 0.
:gt() Selector in jQuery	The :gt() selector is used to select elements with an index number higher than a specified number. The index numbers start at 0.
:lt() Selector in jQuery	The :lt() selector is used to select elements with an index number lower than a specified number. The index numbers start at 0.
:not() Selector in jQuery	The :not() selector is used to select all elements except the specified element. It is used with other selectors to select everything except the specified element in a group.
:header Selector in jQuery	The :header selector is used to selecting all header elements i.e, h1 to h6.
:animated Selector in jQuery	The :animated selector is used to select all elements that are currently animated.

jQuery Effects
animate() Method in jQuery	The animate() method is used to perform a custom animation on a set of CSS properties.
clearQueue() Method in jQuery	The clearQueue() method is used to remove all those items from the queue that have not yet been run. We can remove any queued function with it.
delay() Method in jQuery	The delay() method is used to set a timer to delay the execution of the next item in the queue.
dequeue() Method in jQuery	The dequeue() method is used to remove the next function from the queue, and then it executes the next function.
fadeIn() Method in jQuery	The fadeIn() method is used to gradually change the opacity from 0 to 1 for selected elements. In other words, it changes from hidden to visible.
Effect fadeOut() Method in jQuery	The fadeOut() method is used to gradually change the opacity from 1 to 0 for selected elements. In other words, it changes from visible to hidden.
Effect fadeTo() Method in jQuery	The fadeTo() method is used to gradually change the opacity, for selected elements, to a specified opacity.
fadeToggle() Method in jQuery	The fadeToggle() method is used to toggles between the fadeIn() and fadeOut() methods. If the elements are faded in, fadeToggle() will fade them out. If the elements are faded out, fadeToggle() will fade them in.
finish() Method in jQuery	The finish() method is used to stop the currently running animations, remove all queued animations, and complete all animations for the selected elements.
hide() Method in jQuery	The hide() method is used to hide the selected elements. It is much more similar to display none CSS property.
Effect show() Method in jQuery	The show() method is used to show the selected elements. For hiding them again, we have to use the hide() method.
queue() Method in jQuery	The queue() method is used to show the queue of functions to be executed on the selected elements. It is one or more functions waiting to run.
slideDown() Method in jQuery	The slideDown() method is used to slide down the selected elements. In other words, it shows the element. It is used in combination with the slideUp() method.
slideUp() Method in jQuery	The slideUp() method is used to slide up the selected elements. In other words, it hides the element. It is used in combination with the slideDown() method.
slideToggle() Method in jQuery	The slideToggle() method is used to toggle between slideUp() and slideDown() for the selected elements.
stop() Method in jQuery	The stop() method is used to stop the currently running animation for the selected elements.
toggle() Method in jQuery	The toggle() method is used to toggles between hide() and show() for the selected elements.

jQuery Events
blur() Method in jQuery	The blur event is used to occur when an element loses focus. The blur() method triggers the blur event.
change() Method in jQuery	The change event occurs when the value of an element has been changed. It works on textarea, select, and input elements.
click() Method in jQuery	The click event is used to occur when an element is clicked. The click() method is used to trigger the click event.
dblclick() Event in jQuery	The dblclick event is used to occur when an element is double-clicked. The dblclick() method is used to trigger the dblclick event.
event.currentTarget Property in jQuery	The event.currentTarget property is the current DOM(Document Object Model) element within the event bubbling phase and is typically equal to this.
event.data Property in jQuery	The event.data property is used to contain the optional data passed to an event method when the current executing handler is bound.
event.delegateTarget Property in jQuery	The event.delegateTarget property is used to return the current element where the jQuery event handler was attached.
event.isDefaultPrevented() Method in jQuery	The event.isDefaultPrevented() method is used to verify whether the preventDefault() method was called for the event or not.
event.isImmediatePropagationStopped() Method in jQuery	This method is used to verify whether the event.stopImmediatePropagation() was called for the event. It returns true if event.stopImmediatePropagation() is called, and false if not.
event.isPropagationStopped() Method in jQuery	The event.isPropagationStopped() method is used to verify whether event.stopPropagation() was called for the event. It returns true if event.stopPropagation() is called, and false if not.
event.namespace Property in jQuery	The event.namespace property is used to return the custom namespace when the event was triggered.
event.pageX Property in jQuery	The event.pageX property is used to return the position of the mouse pointer, relative to the left edge of the document. It is used together with the event.pageY property.
event.pageY Property in jQuery	The event.pageY property is used to return the position of the mouse pointer, relative to the Top edge of the document. It is used together with the event.pageX property.
event.preventDefault() Method in jQuery	The event.preventDefault() method stops the default action of an element from happening like preventing a submit button from submitting the form and the same with the URL.
event.relatedTarget Property in jQuery	The event.relatedTarget property is used to return which element is being entered or exited on mouse movement.
event.result Property in jQuery	The event.result property has the last value returned by an event handler triggered by the specified event.
event.stopImmediatePropagation() Method in jQuery	The event.stopImmediatePropagation() method is used to stop the rest of the event handlers from being executed.
event.stopPropagation() Method in jQuery	The event.stopPropagation() method is used to stop the bubbling of an event to parent elements i.e, it prevents any parent event handlers from being executed
event.target Property in jQuery	The event.target property is used to return which DOM(Document Object Model) element triggered the event. It is useful in many cases.
event.timeStamp Property in jQuery	The event.timeStamp property returns the number of milliseconds since January 1, 1970, when the event is triggered.
event.type Property in jQuery	The event.type property is used to return which event type was triggered.
event.which Property in jQuery	The event.which property is used to return which keyboard key or mouse button was pressed for the event.
focus() Method in jQuery	The focus event is used to occur when an element gets focused. The focus() method triggers the focus event.
focusin() Method in jQuery	The focusin event is used to occur when an element or its child element gets focus.
focusout() Method in jQuery	The focusout event is used to occur when an element or its child element loses focus.
hover() Method in jQuery	The hover() method is used to specify two functions to run when the mouse pointer hovers over the selected elements.
keydown() Method in jQuery	The keydown event is used to occur when a keyboard key is pressed down. It triggers the keydown event and we can attach a function to it.
keyup() Method in jQuery	The keyup event is used to occur when a keyboard key is released. It triggers the keyup event and we can attach a function to it.
keypress() Method in jQuery	The keypress event is used to occur when a keyboard key is pressed down. It triggers the keypress event and we can attach a function to it.
mousedown() Method in jQuery	The mousedown event is used to occur when the mouse button is pressed down over the selected element. The mousedown() function triggers the mousedown event.
mouseenter() Method in jQuery	The mouseenter event is used to occur when the mouse pointer enters the selected element. The mouseenter() function triggers the mouseenter event.
mouseleave() Method in jQuery	The mouseleave event is used to occur when the mouse pointer leaves the selected element. The mouseleave() function triggers the mouseleave event.
mousemove() Method in jQuery	The mousemove event is used to occur whenever the mouse pointer moves within the selected element. The mousemove() method triggered the mousemove event.
mouseout() Method in jQuery	The mouseout event is used to occur when the mouse pointer leaves the selected element. The mouseout() method triggered the mouseout event.
mouseover() Method in jQuery	The mouseover event is used to occur when the mouse pointer is over the selected element. The mouseover() method triggered the mouseover event.
mouseup() Method in jQuery	The mouseup event is used to occur when the mouse button is released over the selected element. The mouseup() function triggers the mouseup event.
off() Method in jQuery	The off() method is used to remove event handlers attached with the on() method. It is relatively new compared to previous similar functions like unbind(), die(), etc.
on() Method in jQuery	The on() method is used to attach one or more event handlers for the selected elements and child elements.
one() Method in jQuery	The one() method is used to attach one or more event handlers for the selected elements. It specifies a function to run when the event occurs.
$.proxy() Method in jQuery	The $.proxy method is used to take an existing function and returns a new one with a particular context.
ready() Method in jQuery	The ready event is used to occur when the DOM (document object m
resize() Method in jQuery	The resize event is used to occur when the browser window changes size. The resize() method triggered the resize event.
scroll() Method in jQuery	The scroll event is used to occur when the user scrolls in the specified element. It works for all scrollable elements and the window object.
select() Method in jQuery	The select event is used to occur when a text is selected in a text area or a text field. The select() method triggered the select event.
submit() Method in jQuery	The submit event is used to occur when a form is submitted. It is only used on form elements. The submit() method triggered the submit event.
trigger() Method in jQuery	The trigger() method is used to trigger the specified event and the default behavior of an event for the selected elements.
triggerHandler() Method in jQuery	The triggerHandler() method is used to trigger the specified event for the selected element. It is similar to the trigger() method.

jQuery Methods and Properties
data() Method in jQuery	The data() method is used to attach data to, or get data from, selected elements. For removing it, we have to use removeData() method.
each() Method in jQuery	The each() method is used to specify a function to run for each matched element. We can use return false to stop the loop.
get() Method in jQuery	The get() method is used to get the DOM elements specified by the selector.
index() Method in jQuery	The index() method is used to return the index position of specified elements relative to other specified elements.
noConflict() Method in jQuery	The noConflict() method is used to release jQuery control of the $ variable. It can also be used to specify a new custom name for the jQuery variable.
param() Method in jQuery	The param() method is used to create a serialized representation of an array or an object. It is useful in the URL query string when making an AJAX request.
removeData() Method in jQuery	The removeData() method is used to remove data that was set with the data() method.
toArray() Method in jQuery	The toArray() method is used to return the elements matched by the jQuery selector as an array.
jquery Property in jQuery	The jquery property is used to return a string containing the jQuery version number.
jQuery.fx.interval Property in jQuery	The jQuery.fx.interval property is used to change the animation firing rate in milliseconds. Its default value is 13 milliseconds.
jQuery.fx.off Property in jQuery	The jQuery.fx.off property is used to globally disable or enable all animations. Its default value is false which makes animations run normally.
jQuery.support Property in jQuery	The jQuery.support property is used to contain a collection of properties representing different browser features or bugs. It is primarily built for jQuery internal use.
length Property in jQuery	The length property is used to contain the number of elements in the jQuery object.

jQuery Traversing
add() Method in jQuery	The add() method is used to add elements to an existing group of elements. It adds elements to the whole document.
children() Method in jQuery	The children() method is used to return all direct children of the selected element. It is only used to traverse down a single level.
closest() Method in jQuery	The closest() method is used to return the first ancestor of the selected element. An ancestor can be a parent, grandparent, great-grandparent, and so on.
contents() Method in jQuery	The contents() method is used to return all direct children, including text and comment nodes, of the selected element.
each() Method in jQuery	The each() method is used to specify a function to run for each matched element. We can make the loop stop early by returning false.
eq() Method in jQuery	The eq() method is used to return an element with a specific index number of the selected elements.
filter() Method in jQuery	The filter() method is used to return elements that match certain criteria. It allows us to specify criteria for search.
find() Method in jQuery	The find() method is used to return descendant elements of the selected element. It can be a child, grandchild, great-grandchild, and so on.
first() Method in jQuery	The first() method is used to return the first element of the selected elements. If we want to get the last element, then we have to use the last() method.
has() Method in jQuery	The has() method is used to return all elements that have one or more elements inside of them that match the specified selector
is() Method in jQuery	The is() method is used to check if one of the selected elements matches the selectorElement.
last() Method in jQuery	The last() method is used to return the last element of the selected elements. If we want to get the first element, then we have to use the first() method.
next() Method in jQuery	The next() method is used to return the next sibling element of the selected element. Siblings elements are those elements that have the same parent.
nextAll() Method in jQuery	The nextAll() method is used to return all next sibling elements of the selected element. Sibling elements are those elements that have a common parent.
nextUntil() Method in jQuery	The nextUntil() method is used to return all next sibling elements between the selector and stop. Sibling elements are those elements that have a common parent.
not() Method in jQuery	The not() method is used to return elements that do not match certain criteria. We can specify the criteria.
offsetParent() Method in jQuery	The offsetParent() method is used to return the first positioned parent element. We can position an element using jQuery or with CSS properties.
parent() Method in jQuery	The parent() method is used to return the direct parent element of the selected element. It only traverses a single level up the DOM tree.
parents() Method in jQuery	The parents() method is used to return all ancestor elements of the selected element. It can be a parent, grandparent, great-grandparent, and so on.
parentsUntil() Method in jQuery	The parentsUntil() method returns all ancestor elements between the selector and stop. An ancestor can be a parent, grandparent, and so on.
prev() Method in jQuery	The prev() method returns the previous sibling element of the selected element. Sibling elements are those elements that have the same parent.
prevAll() Method in jQuery	The prevAll() method is used to return all previous sibling elements of the selected element. Sibling elements are those elements that have the same parent.
prevUntil() Method in jQuery	The prevUntil() method is used to return all previous sibling elements between the selector and stop. Sibling elements are those elements that have the same parent.
siblings() Method in jQuery	The siblings() method is used to return all sibling elements of the selected element. Sibling elements are those elements that have the same parent.
slice() Method in jQuery	The slice() method is used to select a subset of elements based on its index. A subset is a set that is a part of a larger set.

jQuery CSS and HTML Methods
addClass() Method in jQuery	The addClass() method is used to add one or more class names to the selected elements. We cannot use it to remove existing class attributes.
after() Method in jQuery	The after() method is used to insert specified content after the selected elements. For inserting the content before selected elements, we can use the before() method.
append() Method in jQuery	The append() method is used to insert specified content at the end of the selected elements. For inserting content at the beginning of the selected elements, we have to use the prepend() method.
appendTo() Method in jQuery	The appendTo() method is used to insert HTML elements at the end of the selected elements.
attr() Method in jQuery	The attr() method is used to set or return attributes and values of the selected elements.
before() Method in jQuery	The before() method is used to insert specified content in front of the selected elements. For inserting content after selected elements, we have to use the after() method.
clone() Method in jQuery	The clone() method is used to make a copy of selected elements, including its child nodes, text, and attributes.
css() Method in jQuery	The css() method is used to set or return one or more style properties for the selected elements.
detach() Method in jQuery	The detach() method is used to remove the selected elements with all of their text and child nodes. However, it keeps data and events.
empty() Method in jQuery	The empty() method is used to removes all child nodes and content from the selected elements. It does not remove the element itself, or its attributes.
hasClass() Method in jQuery	The hasClass() method is used to check if any of the selected elements have a specified class name. If the class is present with the same name, then it will return true otherwise false.
height() Method in jQuery	The height() method is used to set or return the height of the selected elements.
html() Method in jQuery	The html() method is used to set or return the content with tags of the selected elements.
innerHeight() Method in jQuery	The innerHeight() method returns the inner height of the FIRST matched element. It includes both the element height and padding of its y-axis if present.
innerWidth() Method in jQuery	The innerWidth() method is used to return the inner width of the FIRST matched element. It includes both the element width and padding of its x-axis if present.
insertAfter() Method in jQuery	The insertAfter() method is used to insert HTML elements after the selected elements. For inserting HTML elements before the selected elements, we have to use the insertBefore() method.
insertBefore() Method in jQuery	The insertBefore() method is used to insert HTML elements before the selected elements. For inserting HTML elements after the selected elements, we have to use the insertAfter() method.
offset() Method in jQuery	The offset() method is used to set or return the offset coordinates for the selected elements, relative to the document.
offsetParent() Method in jQuery	The offsetParent() method is used to return the first positioned parent element. We can position any element using jQuery, or with the CSS position property.
outerHeight() Method in jQuery	The outerHeight() method is used to return the outer height of the FIRST matched element. It includes both the element height, padding of its y-axis if present, and border width.
outerWidth() Method in jQuery	The outerWidth() method is used to return the outer width of the FIRST matched element. It includes both the element width, padding of its x-axis if present, and border width.
position() Method in jQuery	The position() method is used to return the position of the first matched element relative to its parent. It returns an object with 2 properties i.e, the top and left positions in pixels.
prepend() Method in jQuery	The prepend() method is used to insert specified content at the beginning of the selected elements. For inserting content at the end of the selected elements, we can use the append() method.
prependTo() Method in jQuery	The prependTo() method is used to insert HTML elements at the start of the selected elements. For inserting HTML elements at the end of the selected elements, we have to use the appendTo() method.
prop() Method in jQuery	The prop() method is used to set or return properties and values of the selected elements.
remove() Method in jQuery	The remove() method is used to remove the selected elements, including all text and child nodes. It is also used to remove data and events of the selected elements.
removeAttr() Method in jQuery	The removeAttr() method is used to remove one or more attributes from the selected elements.
removeClass() Method in jQuery	The removeClass() method is used to remove one or more class names from the selected elements. If no parameter is specified, it will remove ALL class names from the selected elements.
removeProp() Method in jQuery	The removeProp() method is used to remove a property set by the prop() method. We cannot use this method to remove HTML attributes like style, id, etc.
replaceAll() Method in jQuery	The replaceAll() method is used to replace selected elements with new HTML elements.
replaceWith() Method in jQuery	The replaceWith() method replaces selected elements with new content.
scrollLeft() Method in jQuery	The scrollLeft() method is used to set or return the horizontal scrollbar position for the selected elements.
scrollTop() Method in jQuery	The scrollTop() method is used to set or return the vertical scrollbar position for the selected elements.
text() Method in jQuery	The text() method is used to set or return the text content of the selected elements.
toggleClass() Method in jQuery	The toggleClass() method is used to toggle between adding and removing one or more class names from the selected elements.
unwrap() Method in jQuery	The unwrap() method is used to remove the parent element of the selected elements.
val() Method in jQuery	The val() method is used to return or set the value attribute of the selected elements. It is used with form elements.
width() Method in jQuery	The width() method is used to set or return the width of the selected elements.
wrap() Method in jQuery	The wrap() method is used to wrap specified HTML elements around each selected element.
wrapAll() Method in jQuery	The wrapAll() method is used to wrap specified HTML elements around all selected elements.
wrapInner() Method in jQuery	The wrapInner() method is used to wrap specified HTML elements around the content of each selected element.

Jquery

All Jquery Tutorials, Quizzes & Exercises

Contact Us

Hire An Expert From Our Platform