jQuery css() Method
The css() method sets or returns one or more style properties for the selected elements.
Category: JavaScript
jQuery – Get and Set CSS Classes
With jQuery, it is easy to manipulate the style of elements.
jQuery Manipulating CSS
jQuery has several methods for CSS manipulation. We will look at the following methods:
addClass()– Adds one or more classes to the selected elementsremoveClass()– Removes one or more classes from the selected elementstoggleClass()– Toggles between adding/removing classes from the selected elementscss()– Sets or returns the style attribute
jQuery – Remove Elements
With jQuery, it is easy to remove existing HTML elements.
Remove Elements/Content
To remove elements and content, there are mainly two jQuery methods:
remove()– Removes the selected element (and its child elements)empty()– Removes the child elements from the selected element
jQuery – Add Elements
With jQuery, it is easy to add new elements/content.
Add New HTML Content
We will look at four jQuery methods that are used to add new content:
append()– Inserts content at the end of the selected elementsprepend()– Inserts content at the beginning of the selected elementsafter()– Inserts content after the selected elementsbefore()– Inserts content before the selected elements
jQuery – Set Content and Attributes
Set Content – text(), html(), and val()
We will use the same three methods from the previous page to set content:
text()– Sets or returns the text content of selected elementshtml()– Sets or returns the content of selected elements (including HTML markup)val()– Sets or returns the value of form fields
The following example demonstrates h Continue reading jQuery – Set Content and Attributes
jQuery – Get Content and Attributes
jQuery contains powerful methods for changing and manipulating HTML elements and attributes.
jQuery DOM Manipulation
One very important part of jQuery is the possibility to manipulate the DOM.
jQuery comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes.
DOM = Document Object Model
The DOM defines a standard for accessing HTML and XML documents:
“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”
jQuery – Chaining
With jQuery, you can chain together actions/methods.
Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.
jQuery Callback Functions
A callback function is executed after the current effect is 100% finished.
jQuery Callback Functions
JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors.
To prevent this, you can create a callback function.
A callback function is executed after the current effect is finished.
Typical syntax: $(selector).hide(speed,callback); Continue reading jQuery Callback Functions
jQuery Stop Animations
jQuery stop() Method
The jQuery stop() method is used to stop an animation or effect before it is finished.
The stop() method works for all jQuery effect functions, including sliding, fading and custom animations. Continue reading jQuery Stop Animations
jQuery Effects – Animation
jQuery Animations – The animate() Method
The jQuery animate() method is used to create custom animations.
Syntax:
$(selector).animate({params},speed,callback);
The required params parameter defines the CSS properties to be animated.
The optional speed parameter specifies the duration of the effect. It can take the following values: “slow”, “fast”, or milliseconds.
The optional callback parameter is a function to be executed after the animation completes. Continue reading jQuery Effects – Animation