-
jQuery Traversing Descendants
Traversing Down the DOM Tree In logical relationships a descendant is a child, grandchild, great-grandchild, and so on. jQuery provides the useful methods such as children() and find() that you can use to traverse down in the DOM tree either single or multiple levels to easily find or get the child or other descendants of an element in the…
-
jQuery parents() Method
The jQuery parents() method is used to get the ancestors of the selected element. The following example will add a border around all the ancestor elements of the <li> which are <ul>, <div>, <body> and the <html> elements. Example You can optionally include one or more selector as a parameter within the parents() method to filter your search for the ancestors. The following example will apply the…
-
jQuery Traversing Ancestors
Traversing Up the DOM Tree In logical relationships an ancestor is a parent, grandparent, great-grandparent, and so on. jQuery provides the useful methods such as parent(), parents() and parentsUntil() that you can use to traverse up in the DOM tree either single or multiple levels to easily get the parent or other ancestors of an element in the hierarchy. jQuery parent() Method…
-
jQuery innerWidth() and innerHeight() Methods
The jQuery innerWidth() and innerHeight() methods get or set the inner width and the inner height of the element respectively. This inner width and height includes the padding but excludes border and margin on the element. The following example will return the inner width and height of a <div> element on the click of a button. Example Similarly, you can set the element’s inner width and height by passing the value…
-
jQuery Dimensions
Understanding the jQuery Dimensions jQuery provides several methods, such as height(), innerHeight(), outerHeight(), width(), innerWidth() and outerWidth() to get and set the CSS dimensions for the elements. Check out the following illustration to understand how these methods are calculating the dimensions of an element’s box. jQuery width() and height() Methods The jQuery width() and height() methods get or set the width and the height of the element respectively. This width and height doesn’t include padding, border and margin on the…
-
Set Multiple CSS Properties and Values
You can also set multiple CSS properties with the css() method. The basic syntax for setting the more than one property for the elements can be given with: $(selector).css({“propertyName”:”value”, “propertyName”:”value”, …}); The following example will set the background-color as well as the padding CSS property for the selected elements at the same time. Example
-
jQuery Get and Set CSS Properties
jQuery css() Method The jQuery css() method is used to get the computed value of a CSS property or set one or more CSS properties for the selected elements. This method provides a quick way to apply the styles directly to the HTML elements (i.e. inline styles) that haven’t been or can’t easily be defined in a stylesheet. Get a CSS Property…
-
jQuery removeClass() Method
Similarly, you can remove the classes from the elements using the jQuery removeClass() method. The removeClass() method can remove a single class, multiple classes, or all classes at once from the selected elements. The following example will remove the class .page-header from the <h1> and the class .hint and .highlight from the <p> elements on button click. Example When the removeClass() method is called without an argument it will remove all…
-
jQuery Add and Remove CSS Classes
jQuery CSS Classes Manipulation jQuery provides several methods, such as addClass(), removeClass(), toggleClass(), etc. to manipulate the CSS classes assigned to HTML elements. jQuery addClass() Method The jQuery addClass() method adds one or more classes to the selected elements. The following example will add the class .page-header to the <h1> and the class .highlight to the <p> elements with class .hint on button click. Example You can also add multiple classes to…
-
jQuery unwrap() Method
The jQuery unwrap() method removes the parent elements of the selected elements from the DOM. This is typically the inverse of the wrap() method. The following example will remove the parent element of <p> elements on button click. Example jQuery removeAttr() Method The jQuery removeAttr() method removes an attribute from the selected elements. The example below will remove the href attribute form the <a> elements on button click. Example