Introduction to jQuery Methods
If you are surprised by the word jQuery let me first explain to you what is jQuery. 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 as well as html dom tree traversal, css transition and css animation with support of 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, 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, in the end, are focusing on changing dom events. In other words, we can say using these methods we are manipulating dom. Some of dom manipulation jQuery methods are:
- addClass(): In the set of matched elements, it 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 using this method we insert data or content to the specific element.
- attr(): This method gives the attribute value of the particular element.
- before(): Using this method we can insert any data or content before each specified element.
- clone(): Using this method we deep copy the sourced element.
- css(): Using this method we change the css of the specified element.
- detach(): Using this method we simply delete the specified element from the dom tree.
- hasClass(): Using this method we find the specified class attached to the particular element.
- empty(): This method deletes all the child nodes attached to the particular 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 element 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 elements.
2) Traversing
This method helps us in navigating from one dom element to other dom elements following a parent-child hierarchy. Some of the traversing methods are:
- add(): This method creates a new jQuery object and adds it to the specified elements.
- addBack(): This method adds a jQuery previous 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 which matches first to the selector.
- contents(): This method finds the content of the specified element including comment nodes and text both.
- each(): This method iterate through a loop which means this method will be applied to all the specified element relate 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 gives the specified element based on the selector you have given.
- has(): This method gives the set of specified element or selector.
- map(): This method returns a new value of a jQuery object based on a function that is passed through each element.
- next(): This method immediately gives the next sibling of the particular selected element.
- parent(): This method gives the parent select of the specified element.
- prev(): This method gives immediate previous sibling 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:
4.5 (6,398 ratings)
View Course
- bind(): This method attaches an event handling to the specified element.
- blur(): This method bind a blur javascript event to the specified element.
- change(): This event binds the specified element with the change javascript element.
- click(): This method bind a click javascript event to the specified element.
- delegate(): This method attaches one or more than one event to the specified set of the element.
- die(): This method removes any kind of 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 set of the element.
- hover(): This method bind a hover event handling to the specified set of the element.
Well, I tried to include the maximum number of possible used jQuery methods in our day to the day development process. Apart from these, there are many more methods that 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
This is a guide to jQuery Methods. Here we have discussed the different types of jQuery Methods like Dom Manipulation, Traversing and Event triggering Methods in detail. You may also look at the following article to learn more –
