front-end-developer_1_

Front-End-Developer - Level 1
$(document).ready(function() {
$("button#green").click(function() {
$("body").removeClass();
$("body").addClass("green-background");
});
$("button#yellow").click(function() {
$("body").removeClass();
$("body").addClass("yellow-background");
});
$("button#red").click(function() {
$("body").removeClass();
$("body").addClass("red-background");
});
});
And now everything works perfectly!
removeClass() without an argument removes all classes from the selected element; if you'd
like to just remove a specific class, you can pass it in as an argument (or pass in multiple
classes separated by spaces).
There is another way to change the CSS of an element with jQuery:
$("button#green").click(function() {
});
$("body").css("background-color", "green");
You've seen this before, in my trick for making sure the correct element is selected.
However, this is a bad approach for real code, for two reasons. First, it's mixing our
concerns. JavaScript is responsible for how the page behaves; CSS is responsible for how
the page looks. Here, we've put something about how the page looks in our JavaScript. This
makes it difficult for other programmers who might need to change this page in the future to
know where to look for the appropriate code. Second, you lose one of the biggest powers of
CSS: the ability to create a class and re-use that style across elements and pages. Here,
when we've put a style in our JavaScript, it can't be re-used. So, when you want to change
the style of your page, stick to adding and removing classes.
Before we move on from our intro to jQuery, you should take a look at the jQuery
documentation. It will probably feel a bit overwhelming at first, and there is a lot in there we
haven't even begun to cover. But check out the sections on Effects, Mouse Events, Form
Events, Manipulation, and Traversing. There's a lot in there you'll be able to understand. And
in the future, when you're trying to figure out how to do something with jQuery, the
documentation is a great place to look.
Attributes
188