Updated July 1, 2023
Introduction to jQuery Methods
If you are surprised by the word jQuery let me first explain to you what jQuery is. jQuery is one of the most popular javascript libraries to build websites or web applications. It is specially designed to resolve html dom tree manipulation and event handling and html dom tree traversal, css transition, and css animation with handling Ajax. It is also open source and free of cost under the Gnu license. In this topic, we are going to learn about jQuery Methods.
jQuery is very easy to learn as it simplifies javascript programming. JQuery is css3 compliant, has cross-browser compatibility, and has very low lightweight footprints. In short, we can say that jQuery has changed the path for developers who used to write their lengthy code in javascript. jQuery provides a different method for dom manipulation, transversal m, event handling or event triggering, attributes manipulation, dimension manipulation, css manipulation, and animations.
Types of jQuery Methods
Here we are going to learn different types of jQuery Methods given below
1. Dom Manipulation
Whatever we do, use these methods, ultimately, focus on changing dom events. In other words, we can say we are manipulating Dom using these methods. Some of the dom-manipulation jQuery methods are:
- addClass(): The set of matched elements adds the specified class or classes to each element.
- after(): In the set of matched elements, insert data or content specified by the parameter after each element tag.
- append(): In short words, we can say we insert data or content to the specific element using this method.
- attr(): This method gives the attribute value of the particular element.
- before(): We can insert data or content before each specified element using this method.
- clone(): We deep copy the sourced element using this method.
- css(): We change the css of the specified element using this method.
- detach(): We delete the specified element from the dom tree using this method.
- hasClass(): We find the specified class attached to the particular element using this method.
- empty(): This method deletes all the child nodes attached to the specific element dom tree.
- height(): This method gives the value of the height of the specified element.
- offset(): This method sets the coordinate of the specified element relative to the document.
- position(): This method gets the current position of the specified element relative to its parent element.
- prop(): This method gives the value of the currently selected element property.
- replaceAll(): This method replaces all the target elements with the specified element.
- text(): This method sets or gets the text string value of specified elements.
- Val(): This method gives the current value of the first specified elements.
- width(): This method gives the computed width value of the specified elements.
- wrap(): This method wraps the particular html structure around each element in the sets of specified elements.
- wrapInner(): This method wraps the html structure around the content of each specified element.
2. Traversing
This method helps us navigate following a parent-child hierarchy from one dom element to another. Some of the traversing techniques are:
- add(): This method creates a new jQuery object and adds it to the specified elements.
- addBack(): This method adds a previous jQuery set of the element to the current stack element.
- children(): These methods find the child element of each specified element.
- closest(): This method finds the element that matches the selector first.
- contents(): This method finds the specified element’s content, including both comment nodes and text.
- each(): This method iterates through a loop which means this method will be applied to all the specified elements related to it.
- end(): This method ends the most recent filtering task and returns its matched element to its previous state.
- eq(): This method reduces the set of the specified element to one at the specified index.
- filter(): This method gives the specified element based on the filter we give.
- first(): This method provides the specified element based on the selector you have provided.
- has(): This method offers a set of specified elements or selectors.
- Map (): This method returns a new value of a jQuery object based on a function passed through each element.
- next(): This method immediately gives the selected element’s next sibling.
- parent(): This method allows the parent to choose the specified element.
- prev(): This method provides immediate previous siblings of the currently specified elements.
3. Event Triggering
Using this method, we register changes in the dom manipulation that will take effect when interacting with the browser. Some of the event-handling jQuery methods are:
- bind(): This method attaches an event handling to the specified element.
- blur(): This method binds a blur javascript event to the specified element.
- change(): This event binds the specified element with the change javascript element.
- click(): This method binds a click javascript event to the specified element.
- delegate(): This method attaches one or more than one event to the specified element set.
- die(): This method removes any javascript event handling attached to the set of the specified element.
- error(): This method attaches an error event handling to the specified set of the element.
- focus(): These methods bind a focus event handling to the specified elements.
- hover(): This method binds a hover event handling to the selected set of elements.
Well, I tried to include the maximum number of possible used jQuery methods in our day to the day development process. Apart from these, many more methods need to be studied. Every day there is some development in jQuery methods. So every time jQuery releases its version, they include several new jQuery Methods.
Recommended Articles
We hope that this EDUCBA information on “jQuery Methods” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
