Day 3: Event Handlers and Animations | Tiffany R. White Blog

Day 3: Event Handlers and Animations

Reading time: 1 min


I only did one jQuery class today as I had a lot to get done otherwise, but we went over documentation (which I never use the browser for because Dash) and preparing your prototype with comments, looking at your HTML file to see what you need to animate.

We went over manipulating the DOM (more on that in a moment) and Traversing the DOM and Event Handlers.

So you can manipulate the DOM with the [jquery].hide()[/jquery] method as well as the


. But we also added a button to the DOM in the HTML with this

$(".spoiler").append("<button>Reveal Spoiler!</button>");

Also we went over event handlers. So now that we have the button made in our HTML you can add a


with passing an anonymous function in order to do something when the button we made is pressed.


So in the code block with the button selector with the [jquery].click(function() {});[/jquery] you can do nifty things. So inside this code block we used




I hadn’t really gotten my head around [jquery]$(this)[/jquery] until he explained that since we had two
elements under the
<div class= "spoiler"</div>

<div class= "spoiler"</div>

we needed to specify which button the
when clicked. So I found that
is magical. So when I click on the first spoiler button, this knows what to do with it. It knows I’m not clicking the second spoiler button. It knows to hide remove the second one when I am clicking the first. Cool stuff. It was a pretty easy lesson since I have gone over this on Codecademy and Free Code Camp. But refresher is great for reinforcement.


No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.

Coffee Buy me a coffeeBuy me a coffee

Webmentions 0

No webmentions were found.