The first project in the jQuery Basics course was to create a basic button that hides the biggest Star Wars spoiler and reveals it when a user clicks on it.
.hide()
The hide() method is pretty self-explanatory. It hides an element from view.
We didn’t use it in this project, but you can also control the speed (slow or fast) and duration (in milliseconds) it takes to hide the element.
And, of course, if there’s a hide there must be a show. Then, there is the toggle function which toggles between show and hide. They work the same way as hide, taking in speed and duration as parameters.
$(".spoiler span").hide();
.append()
The append function attaches an element after the selected element. We used this to add the “Show Spoiler” buttons to the HTML.
$(".spoiler").append("<button>Reveal Spoiler</button>");
this
.click()
Click is a mouse event that requires user interaction. Specifically, a mouse click. After the mouse click, you would define a function. For this project, when the user clicks, an unnamed function will simultaneously show the hidden spoiler and hide the button.
$("button").click( function(){});
.remove()
Another self-explanatory function, remove simply removes an element from the HTML.
As I was watching the videos, I started moving ahead and used hide() to hide the button we created earlier, but Treehouse used this one instead. Visually, they do the same thing but after some Googling, it seems that remove cuts out some of the overhead. There’s no reason to hide the buttons unless I plan on using them again (practice project idea!).
$(this).remove();
.prev()
The prev function was a bit confusing at first. It selects the previous element in the HTML.
Initially, we had used show() on the span but because there are more than one span elements on the page, the result was kind of wonky. With prev(), we were able to select and show the spoiler that came directly before the button we clicked, instead of all of the spoilers.
$(this).prev().show();
And that is the basic jQuery code used to build this project. It’s really short and sweet but adds some fun dynamics to what could have been a really boring webpage. See? jQuery is fun!
If, by some miracle, you don’t know the major Star Wars spoilers and still plan on watching them, you might not want to click on anything and just take my word for it. Otherwise, click away!
Cerita Does IT 