jQuery Basics

Question 1

shorthand for jQuery

Answer 1

$

Question 2

select the element with the CSS class of warning

Answer 2

$(“.warning”)

Remember that CSS classes start with a period

Question 3

hide warning when the page loads and then show it slowly

Answer 3

$(“.warning).hide().show(“slow”)

Question 4

open Chrome Developer Tools

Answer 4

Command + Option (Alt) + J

Question 5

go over to previous line of code

Answer 5

the up key

Question 6

display the function myCode after the DOM has loaded

Answer 6

$(document).ready(myCode)

Question 7

add a button to the spoiler class

Answer 7

$(“.spoiler).append(“Reveal Spoiler “);

Question 8

add a click handler to the button, show the spoiler and remove the button

Answer 8

$(“button”).click(function(){
$(“.spoiler.span”).show();
$(this).remove();
});

Question 9

show the spoiler next to the button clicked

Answer 9

$(this).prev().show();

Question 10

Capture the click event on a link to an image (with the ul id=”imageGallery”)

Answer 10

$(“#imageGallery a”).click();

Question 11

prevent browser default behavior

Answer 11

$(“#imageGallery a”).click(function(event){

event.preventDefault();

Question 12

Using jQuery only, add to all links with the class “external”, the target attribute with the value of “_blank”.

Answer 12

$(“a.external”).attr(“target”,”_blank”);

Question 13

create a detached select object of the DOM

Answer 13

$select = $(“”);

Question 14

A prompt dialog will open prompting for someone’s full name. Use jQuery to follow the comments in code. First, select the correct input, and then set its value to the fullName.

//Show Prompt Window and store value
var fullName = prompt("What is your full name?");

//Select Input with the id of #fullName
//Insert value in to full name input

Answer 14

//Show Prompt Window and store value
var fullName = prompt("What is your full name?");

//Select Input with the id of #fullName
//Insert value in to full name input
$('#fullName').val(fullName);

/* $('#fullName') -> selects the input with this id.
   .val() -> JQuery method to get a value from an element or set the value if a value is passed.
   In this case, we set the value of the input to the value we get from the prompt.
*/

Question 15

use a single jQuery method to either show or hide the $(“#colorSelect”)

Answer 15

$(“#colorSelect”).toggle();