jQuery css methods
The jQuery library supports almost all of the selectors included in CSS 1, 2 and 3. When using jQuery, the developers can built websites without carring too much about the browser, because jQuery supports also older versions of Internet Explorer (Be careful, because jQuery 2.0 doesn’t support anymore IE 6, 7 or 8. This can also affect IE9 and even IE10 if they are used in their “Compatibility View” modes that emulate older versions.)
Html structure
For the sake of this tutorial, we will use the last tutorial’s DOM structure to get used with the available jQuery CSS methods.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <title>just a title passing by...</title> </head> <body> <div class="wrapper"> <ul> <li class="item1">list item 1</li> <li class="item2">list item 2</li> <li class="item3">list item 3</li> </ul> </div> </body> </html> |
jQuery – css methods
Below is a list with some of the most used jQuery methods for manipulation of the HTML and CSS in the DOM.
addClass() | Adds one or more class names to selected elements |
after() | Inserts content after selected elements |
append() | Inserts content at the end of selected elements |
appendTo() | Inserts HTML elements at the end of selected elements |
attr() | Sets or returns attributes/values of selected elements |
before() | Inserts content before selected elements |
clone() | Makes a copy of selected elements |
css() | Sets or returns one or more style properties for selected elements |
detach() | Removes selected elements (keeps data and events) |
empty() | Removes all child nodes and content from selected elements |
hasClass() | Checks if any of the selected elements have a specified class name |
height() | Sets or returns the height of selected elements |
html() | Sets or returns the content of selected elements |
innerHeight() | Returns the height of an element (includes padding, but not border) |
innerWidth() | Returns the width of an element (includes padding, but not border) |
insertAfter() | Inserts HTML elements after selected elements |
insertBefore() | Inserts HTML elements before selected elements |
offset() | Sets or returns the offset coordinates for selected elements (relative to the document) |
position() | Returns the position (relative to the parent element) of an element |
prepend() | Inserts content at the beginning of selected elements |
prependTo() | Inserts HTML elements at the beginning of selected elements |
prop() | Sets or returns properties/values of selected elements |
remove() | Removes the selected elements (including data and events) |
removeAttr() | Removes one or more attributes from selected elements |
removeClass() | Removes one or more classes from selected elements |
removeProp() | Removes a property set by the prop() method |
replaceWith() | Replaces selected elements with new content |
scrollLeft() | Sets or returns the horizontal scrollbar position of selected elements |
scrollTop() | Sets or returns the vertical scrollbar position of selected elements |
text() | Sets or returns the text content of selected elements |
toggleClass() | Toggles between adding/removing one or more classes from selected elements |
val() | Sets or returns the value attribute of the selected elements (for form elements) |
width() | Sets or returns the width of selected elements |
↠ Page 2 Working with jQuery Methods
Pages: 1 2