Home » jQuery » jQuery – class manipulation

jQuery – class manipulation

So, now that we’ve fully exhausted the topic of how to select elements using jQuery, what can we do with it?

Well, one thing we can do is use the two built-in methods, addClass and removeClass, to change the look of your site on the fly.

Given the following HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
<link rel="stylesheet"
  type="text/css"
  href="App_Themes/Main/StyleSheet.css" />
<script src="js/jquery-1.2.6.min.js"
  type="text/javascript"></script>
<script src="default.js"
  type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="main" class="red">
    Here is some text
    </div>
    </form>
</body>
</html>

and the following CSS:

.red
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FF0000;
}

.blue
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #0000FF;
}

If we run the HTML we will see red text for “Here is some text”

Now, if we place the following code in our default.js file:

$(function() {
$("#main").addClass("blue")
    .removeClass("red");
});

the text will be blue instead of red.

We’ve used the addClass() method to add the blue class to the element with the ID of “main” and we’ve used the removeClass method to remove the red class.

The other thing we’ve taken advantage of in this demo is the fact that all of the methods in jQuery return the original selector unless part of their functionality is to return a different set of elements.  This allows us to chain the methods together in much the same way that we could chain input and output streaming operators in C++ (for those of you who know C++).

 

Other post in jQuery

Like this Article? Subscribe to get every article sent to your email.

Related Post

  • jQuery – The Man, The Myth, The LegendjQuery – The Man, The Myth, The Legend I admit it.  I've been ignoring jQuery for quite a while.  But I have a tendency to do that with most new things.  I generally don't work with beta software and I wait for […]
  • jQuery – EventsjQuery – Events As well as being able to change the class associated with an element or a set of elements on a screen, jQuery also allows you to fire events.  You might want to do this, for example, if […]
  • jQuery Simple SelectorsjQuery Simple Selectors Last week we started looking at the jQuery selector by looking at the syntax we used to get our "hello world" demo working.Today, we'll start digging a little deeper into this main […]
  • jQuery Selectors – Looks just like CSSjQuery Selectors – Looks just like CSS Last week we took a look at the jQuery selector syntax, which allows us to select elements by their ID, class name, or tag name.While it is pretty cool that you can select by class […]
  • jQuery Looks like XPathjQuery Looks like XPath So far in our examination of jQuery we've seen how to select an ID, select a set of elements by tag name and select a set of elements by their class.  But what if we wanted to select a […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.

One Pingback/Trackback