jQuery

Question 1

What is jQuery?

Answer 1

jQuery is a library. A library is code that someone else wrote that you can incorporate into your own projects to improve them or make coding easier.

Question 2

What is the shorthand way to write jQuery?

Answer 2

The dollar sign $

Question 3

Where should the script tag for the jQuery library be placed?

Answer 3

In the body of our body tag right above our javascript script tag.

Question 4

What’s a way of ensuring that our javascript library does not access our jQuery library until it is ready (when script tag is placed in the head tag)?

Answer 4

We can use the following code:

$(document).ready(function () {
$(“h1”).css(“color”, “red”);
})

Question 5

What’s a second way of ensuring that our javascript library does not access our jQuery library until it is ready?

Answer 5

By including the script tag at the bottom of our webpage (bottom of body section above our javascript script tag).

Question 6

How does minification work to reduce file size?

Answer 6

Minification removes whitespace and comments in your code. The link in our jQuery script tag takes us to to a minimized jQuery library.

Question 7

Why do we minifiy our code?

Answer 7

All of our code has to be loaded by our user’s browser and depending on their internet speed that may take a short or long time. Minifying helps our code to be loaded much faster.
The browser does not care about comments or spaces.

Question 8

How do we select elements with jQuery?

Answer 8

We replace the document.querySelector with the keyword jQuery(or the dollar sign).

Ex:
javascript: document.querySelector(“h1.title”)
jQuery: $(“h1.title”)

Question 9

How do we select multiple elements in jQuery?

Answer 9

By using the same syntax for selecting a single element.

Ex:
javascript: document.querySelectorAll(“button”)
jQuery: $(“button”)

Question 10

How can we manipulate (set) the style of an element with jQuery?

Answer 10

By using the .css method.

Ex:
$(“h1”).css(“color”, “red”);

The 1st input is the property we want to change and the 2nd input is the value we want to set for the property.

Question 11

How can we get the current value for a css property?

Answer 11

By having the name of the property as a string within the css jQuery method and logging it to the console.

Example:
console.log($(“h1”).css(“font-size”));

Question 12

How can we keep our css (styling) and our javascript (behavior) separate?

Answer 12

By first creating a class in our stylesheet and then adding that class with javascript.

Example:
In css:
.big-title {
font-size: 10rem;
color: yellow;
font-family: cursive;
}

In javascript:
$(“h1”).addClass(“big-title”);

Question 13

How do we add multiple classes in jQuery?

Answer 13

We add multiple classes in jQuery by adding a space in between the classes.

Example:

$(“h1”).addClass(“big-title margin-50”);

Adds both the big-title class and margin-50 class.

Question 14

How can we see if a selected element has a certain class in jQuery?

Answer 14

By selecting our element and using the hasClass method and query for the specific class.

Example:
$(“h1”).hasClass(“big-title”);

Question 15

How can we change the text of a selected element using jQuery? (two methods)

Answer 15

1st method:
Select the element than place the new text wanted inside of the text method.
Example:
$(“h1”).text(“bye”);

2nd method
Changing the inner html by using the html method.
Example:
$(“h1”).html(“<em>bye</em>”);

Note: Javascript uses the innerHTML method.

Question 16

What do we use if we want to get attributes on the fly using jQuery?

Answer 16

We select the element we want, enter the name of the attribute we want in the attribute method, and console log the line of code (to get a specific attribute).

Example:
console.log($(“img”).attr(“src”));

Question 17

What do we use if we want to set attributes on the fly using jQuery?

Answer 17

We use the same syntax to get the attribute but we enter a second input which will change the current attribute.

Example:
$(“a”).attr(“href”, “ https//www.yahoo.com”) ;

Question 18

How do we add an event listener using jQuery?

Answer 18

Select the element we want (h1 in this example), use dot notation to add the click method, add the call back function.

Example:
$(“h1”).click(function() {
$(“h1”).css(“color”, “purple”);
});

Question 19

How do you add an event listener in jQuery to all of the same type of elements at once?

Answer 19

We use the same syntax when selecting one element. jQuery will automatically select all of the element with a specific element name or class. There is no need to use a for loop as we do with plain javascript.

Example:
$(“button”).click(function() {
$(“h1”).css(“color”, “purple”);
});

Question 20

How do add a keypress event listener?

Answer 20

By targeting the input element, adding a keypress event, and logging that keypress event when detected.

Example:
$(“input”).keypress(function(event) {
console.log(event.key)
}

Or entire document:
$(document).keypress(function(event) {
console.log(event.key)
}

Question 21

What’s an even more flexible way of adding an event listener in jQuery?

Answer 21

Select the element of interest, add the “on” method, add the event you are listening for, and add a callback function in the second parameter.

$(“h1”).on(“mouseover”, function() {
$(“h1”).css(“color”, “purple”);
};

Question 22

How can we use jQuery to add new elements before other elements on the fly?

Answer 22

Target the element you want to add another element before, use the before method, and enter the html for the element you want to add before in the parenthesis.

Example:
$(“h1”).before(“<button>New</button>”);

Question 23

How can we use jQuery to add new elements after other elements on the fly?

Answer 23

Target the element you want to add another element before, use the after method, and enter the html for the element you want to add after in the parenthesis.

Example:
$(“h1”).after(“<button>New</button>”);

Question 24

What’s the difference between the prepend method and the before method?

Answer 24

Prepend will add your new html element into the item (element) that you selected just after the opening tag.
Example:
$(“h1”).prepend(“<button>New</button>”);

Question 25

What’s the difference between the append method and the after method?

Answer 25

Append will add your new html element just after the content in the element that you selected but before the closing tag of the selected element.

Example:
$(“h1”).append(“<button>New</button>”);

Question 26

How can we use jQuery to remove an element?

Answer 26

By using the remove method.

Example:
$(“button”).remove();

Note: This will remove all buttons in the document.

Question 27

How can we use jQuery to show a selected element when an event occurs?

Answer 27

We can use the show method.

Example:
$(“button”).on(“click”, function() {
$(“h1”).show();
})

Question 28

How can we use jQuery to hide a selected element when an event occurs?

Answer 28

We can use the hide method.

Example:
$(“button”).on(“click”, function() {
$(“h1”).hide();
})

Question 29

What are some common animations that we may want to add to our website using jQuery?

Answer 29

hide, show, fade, slide

Question 30

How can we toggle between hide() and show() for selected elements.

Answer 30

We can use the toggle method. We use the same syntax as the hide and show but we change the method.

Example:
$(“button”).on(“click”, function() {
$(“h1”).toggle();
});

Question 31

How can we fade out a visible element in jQuery?

Answer 31

We can use the fadeOut() method.

Syntax:
$(selector).fadeOut(speed,callback);

Note: Optional speed duration for the first input.

Example:
$(“button”).on(“click”, function() {
$(“h1”).fadeOut();
});

Question 32

How can we fade in a visible element in jQuery?

Answer 32

We can use the fadeIn() method.

Syntax:
$(selector).fadeIn(speed,callback);

Note: Optional speed duration for the first input.

Example:
$(“button”).on(“click”, function() {
$(“h1”).fadeIn();
});

Question 33

How can we toggle between fadeIn() and fadeOut() for selected elements.

Answer 33

We can use the fadeToggle method. We use the same syntax as the fadeIn() and fadeOut() but we change the method.

Example:
$(“button”).on(“click”, function() {
$(“h1”).fadeToggle();
});

Question 34

How can we slide up or slide down an element when a specific event occurs?

Answer 34

We can use the slideUp() and slideDown() method.

Syntax:
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);

Example:
$(“button”).on(“click”, function() {
$(“h1”).slideUp();
}) ;

Question 35

How can we toggle between slideUp() and slideDown() for selected elements.

Answer 35

We can use the slideToggle method. We use the same syntax as the slideUp() and slideDown() but we change the method.

Example:
$(“button”).on(“click”, function() {
$(“h1”).slideToggle();
});

Question 36

How can we create custom animations using jQuery?

Answer 36

By adding our own css rule inside of the animate method.

Example:
$(“button”).on(“click”, function() {
$(“h1”).animate({opacity: 0.5});
});

Note: Only use animate method with properties that have a numeric value (opacity, margin, etc.)

Question 37

How can we have more than one animation occurring at the same time?

Answer 37

We can chain the methods together.

Example:
$(“button”).on(“click”, function() {
$(“h1”).slideUp().slideDown().animate({opacity: 0.5});
});