This is the main content
Understand the use cases for jQuery
Be able to animate using jQuery
First, the $ sign represents the jQuery library. Any time you use jQuery, you start the statement with a $ sign.
The selection part is very important as it tells jQuery what you want to style, animate or modify. This is done using selectors like those found in CSS such as .main_text
The `on` part of the statement is telling jQuery what jQuery function to apply. There are loads of these! The `on` function is used to tell the browser how to respond to an event, in this case a click event.
First, the $ sign represents the jQuery library. Any time you use jQuery, you start the statement with a $ sign.
The selection part is very important as it tells jQuery what you want to style, animate or modify. This is done using selectors like those found in CSS such as .main_text
The `on` part of the statement is telling jQuery what jQuery function to apply. There are loads of these! The `on` function is used to tell the browser how to respond to an event, in this case a click event.
First, the $ sign represents the jQuery library. Any time you use jQuery, you start the statement with a $ sign.
The selection part is very important as it tells jQuery what you want to style, animate or modify. This is done using selectors like those found in CSS such as .main_text
The `on` part of the statement is telling jQuery what jQuery function to apply. There are loads of these! The `on` function is used to tell the browser how to respond to an event, in this case a click event.
First, the $ sign represents the jQuery library. Any time you use jQuery, you start the statement with a $ sign.
The selection part is very important as it tells jQuery what you want to style, animate or modify. This is done using selectors like those found in CSS such as .main_text
The `on` part of the statement is telling jQuery what jQuery function to apply. There are loads of these! The `on` function is used to tell the browser how to respond to an event, in this case a click event.
//Adds a click event to every button
$("button").click(function(){
alert("Button clicked");
//Animate the main content section
$("#main_content").animate({"opacity" : 0.2}, 2000);
})This is the main content
//Animation
$("#content").animate(
{
"margin-top" : 50px,
"margin-left" : 20px
}
);
//Changing HTML
$("#main_text").html("This is the new main text");
//Adding event handlers
$("button").on("click", function(){
alert("A button was clicked");
});Visit https://www.w3schools.com/jquery/ and work through the jQuery examples there.
Start by copying the examples, then trying them out in your web browser.
Your teacher will check in on you as you work through them.
