- Level: Beginner
- Description: Practice implementing jQuery DOM manipulations and event handlers
Basic jQuery syntax: $(selector).action
To implement DOM manipulations and event handlers on HTML elements using jQuery, use the process flow:
- Identify the element you are watching/targetting (query/select the element)
- Indicate the action to be taken on the element and if applicable, refer to the function that should be invoked
- Write a function with all of the things that should happen when the action is triggered
Refer to the jQuery documentation for the full list of actions:
- Challenge Zero: On hover of each icon, change to giphy. When hovering off, return to icon
- Challenge One: Change the title from “Fortnite Emotes!” to anything you want
- Challenge Two: Remove the element with id “extra-text”
- Challenge Three: On click of the Fortnite logo, change the bg to “bg2.jpg”
- Challenge Four: On click of the emote titles, hide/show (toggle) the emote-info
$(“#icon”).hover(enter, leave);
function enter() {
this.src = “giphy.gif”;
}
function leave() {
this.src = “icon.gif”;
}
- Inner HTML →
$(selector).html(“new text”)
- Remove →
$(selector).remove(“#element”)
- Click →
$(selector).click(toBeExecuted)
function toBeExecuted() {
//all the things to be executed
}
- Toggle →
$(selector).slideToggle()