Let us learn JQuery - Part 4 of 12 (CSS with JQuery)

Download

Table of Content

1. Introduction
2. CSS with JQuery
   1. CSS Attributes Examples
      1. Setting single CSS Properties
      2. Setting multiple CSS Properties
   2. CSS Class Examples
      1. addClass
      2. removeClass
      3. toggleClass
3. References
4. Conclusion

Introduction

This is the fourth part of the "Let us learn JQuery" series where we will concentrate on how CSS has an influence on JQuery. By using a combination of CSS and JQuery, we can make dom elements selection, manipulate dom elements, make animations etc.

This whole series is comprise of twelve sections which are as under

1. JQuery - A formal introduction using "Hello World"
2. JQuery Selectors
3. JQuery Traversal
4. CSS with JQuery
5. DOM with JQuery
6. JQuery and Events
7. Animated effects using JQuery
8. JQuery and Ajax
9. Custom JQuery Plugins
10. JQuery Validation Framework
11. JQuery Workshop
12. Mobile JQuery

Well,for each of these topics we will have enough practical exposure so that we can have a good understanding on the subject.

This is the fourth part of the series and here we will learn about the influence of CSS in JQuery

CSS with JQuery

By this time, I believe that we have already came across some examples with JQuery CSS and has got some idea (I assume that we have properly gone through JQuery Selector and JQuery Traversal tutorials).However, that is not all.In this section we will delve more deeper into it.

We will look into some of the examples first with CSS attributes followed by what we can do with CSS class

A. CSS Attributes Examples

Here, we will look into Setting single CSS Properties and Setting multiple CSS Properties

a. Setting single CSS Properties

$("table tr").find("th").css('background-color', 'green');

We have already visited this example in the "find()" method section of JQuery Travsersal.What we are doing here is that, first we are filtering the records by the "tr"'s of the "table" element.And then filtering the same with the "th" elements.Once done, we are setting the background color of the "table header" to green by using the css.The .css method is use for working the CSS stuff with JQuery.

b. Setting multiple CSS Properties

We can also change multiple CSS properties in a single call as shown under

$(document).ready(function () {
$("table tr").find("th").css
(
{
'background-color': 'green',
'border': '5px solid'
}
);
$("table tr").find("td").css
(
{
'background-color': 'orange',
'border': '5px solid',
'font-size': '20px',
'font-weight': '900'
}
);
});

Output

Here we are applying multiple CSS styles to "th" and "td" elements.

The syntax to apply multiple css properties is as under

$(Selector).css
(
{
'property1' : 'value1',
'property2' :'value2',
.......................
.......................
'property_N': 'valueN'
}
)

A. CSS Class Examples

We can also change the CSS class of an HTML element using JQuery.Let us look into the below examples

a. addClass

Purpose:Add a CSS class to an HTML element

$('tr:even', this).addClass('even')

This example we have seen in the "each()" function of JQuery traversal.Here we are adding a class to the even rows of the table.

N.B.~We can add multiple classes by separating the class names with a space in the method parameter e.g.

$('tr:even', this).addClass('class1 class2 class3 .... classN')

b. removeClass

Purpose:Remove a CSS class to an HTML element

$('tr:even', this).removeClass('even')

This example we have seen in the "each()" function of JQuery traversal.Here we are removing a class to the even rows of the table.

N.B.~We can remove multiple classes by separating the class names with a space in the method parameter e.g.

$('tr:even', this).removeClass('class1 class2 class3 .... classN')

c. toggleClass

Purpose:Toggling a CSS class means adding the class to an HTML element if it is not there or removing the class from an HTML element if it is present.

$(document).ready(function () {
$('tr:even', this).toggleClass('even'); // Case 1: will add the class
$('tr:even', this).toggleClass('even'); // Case 2: will remove the class
});

In the first case, since no class has been applied to the even "tr"'s, so the "even" class will be added.At this stage the output will be

In the second case, since already the "even" class has been applied , so it will be removed.Henceforth at this stage the output will be

References

.css()

Conclusion

So,in this section we have learnt as how to apply multiple CSS attributes to Html elements, class addition and deletion etc.Hope, it is clear.Let's move on to the next section.

If you like this article, subscribe to our RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.