Lesson 180 – How Minification Works to Reduce File Size
You can use minifier.org to minify your own CSS or Javascript code.
The reason for minifying your Javascript or CSS file is that it makes the file smaller and quicker to load.
Lesson 181 – Selecting Elements with JQuery
In JQuery instead of writing –
document.querySelector("h1") to select the h1 element, you simply write –
$("h1")The “$” sign is short for “JQuery”.
With JQuery, the “$” sign will select all of the specified elements. So –
$("button") will select all of the button elements just like –
document.querySelectorALL("button")would select all of the button elements in Javascript.
Lesson 182 – Manipulating Styles with JQuery
To manipulate CSS using JQuery, you use the .css() method. So if you want to manipulate the CSS of the h1 element, you would use –
$("h1").css("color", "green");In addition to using the .css() method to set the value of an element, you can also use the .css() method to get the value of an element. So, if you want to find out the font-size of the h1 element, you could use –
console.log($("h1").css("font-size"));To maintain the separation of concerns, it is best not to use JQuery to directly change the CSS style of an element as in the above example. It would be better to use JQuery to apply a CSS class to the element. For example, you can add a “big-title” class to the CSS style sheet –
.big-title {
font-size: 10rem;
color: yellow;
font-family: cursive;
}You then use the JQuery .addClass() method to add that class to the h1 element like this –
$("h1").addClass("big-title");If you decide that adding a CSS class which creates a giant yellow cursive h1 was not your best design decision 🤔, then you can remove the CSS class from the element by using the JQuery .removeClass() method. For example –
$("h1").removeClass("big-title");If you need to add multiple CSS classes to an element you include all the classes you want to add inside the quotation marks inside the brackets of the .addClass() JQuery method. There must be a space left between each class you are adding.
So if you want to add the “big-title” class as well as a “margin-50” class to the h1 element you would do it like this –
$("h1").addClass("big-title margin-50");You can also use JQuery to find out whether a particular element has a class by using the .hasClass() method like this –
$("h1").hasClass("margin-50");If the h1 element has the CSS class of “margin-50”, you will get a true boolean. If it doesn’t have that class you will get a false boolean.