jQuery

Question 1

5 things that jquery makes it easy to do

Answer 1

Find - Elements in an HTML document

Change - HTML content

Listen - to what a user does and react accordingly

Animate content on a page

Talk - over the network to fetch new content

Question 2

find an h1 in the DOM using jQuery and return the text that it contains

Answer 2

jQuery("h1");  
(important to not that it is a string wrapped in "")
or
$("h1").text();
$("#idName").text();
$(".className").text();

Question 3

find an h1 and change/add the text

Answer 3

$(“h1”).text(“new text here”);

note: need to make sure the DOM has finished loading the HTML content before we can reliably use jQuery

Question 4

how to make sure that jquery is only run when the DOM is finished loading?

Answer 4

use the “ready” method. example:
jQuery(document).ready(functyion(){
$(“h1”).text(“new text here”);
});

Question 5

how to get all of the li in an HTML list

Answer 5

$(“li”);

It returns an object with all of the line items

Question 6

how to get the li of a of the “destinations” class

Answer 6

$(“.destinations li”);

if there are li’s that are children of the destination’s li’s then we will need to use the decedent selector if you want only the lis that are the direct children of destinations class. like this:
$(“.destinations > li”);

Question 7

selecting multiple elements or specific elements in the array

Answer 7

multiple elements
$(.className, #idName);

specific list items
$(li: first): would select the first li
can also use: last, odd, even

Question 8

how to find elements by traversing the DOM

Answer 8

$("#destinations").find("li");
or
$("li").first();
or
$("li").last();

Question 9

how to walk the DOM (get to the next or previous li for example)?

Answer 9

$(“li”).first().next();

$(“li”).last().prev();

Question 10

how to “walk up” or “walk down” the DOM

Answer 10

$(“li”).parent();

$(“li”).children();

Question 11

how to add (4 methods) elements of the DOM

Answer 11

Adding

var. appendTo(“element”);
var. prependTo(“element”);
var. insertAfter(“element”);
var. insertBefore(“element”);

Or 
$('item already in DOM').append('element')
$('item').prepend('element')
$('item').after('element')
$('item').before('element')

Question 12

How to remove an item from the DOM

Answer 12

$(‘item’).remove()

Question 13

How to add an event listener to execute a function when a button is clicked.

Additionally, how would you only change the button that was clocked (as opposed to all of the buttons?

Answer 13

$('button').on('click', function(){
     //function here 
})

To apply it to only the button that was clicked…

Question 14

How to add an event listener to execute a function when a button is clicked.

Additionally, how would you only change the button that was clocked (as opposed to all of the buttons?

Answer 14

$('button').on('click', function(){
     //function here 
})

To apply it to only the button that was clicked…

Question 15

How to add an event listener to execute a function when a button is clicked.

Additionally, how would you only change the button that was clocked (as opposed to all of the buttons?

Answer 15

$('button').on('click', function(){
     //function here 
})

To apply it to only the button that was clicked…

Question 16

How to append the var price to a button that was clicked to the nearest item of class .vacation

Answer 16

$(this).closest(‘.vacation’).append(price)

Question 17

how to find the data attribute in html through jquery

Answer 17

$(‘item’).data(‘dataName’);

Question 18

how to use event delegation (what is used in event handlers to target only specific elements of an item that has an event handler). in this case try to target only the ‘button’ element inside of the vacation class

Answer 18

$(‘.vacation).on(‘click’, ‘button’, function(){});

Question 19

how to get only the items that only fit criteria. in this example find only the elements that have the “.on-sale” class in the element that has a class of “.vacation”

Answer 19

$(‘.vacation’).filter(‘.on-sale.’);

Question 20

how to add or remove classes from an element (use $(‘.vacation’).filter(‘.on-sale.’); as the elements that you want to add or remove the class ‘.highlighted’)

Answer 20

$(‘.vacation’).filter(‘.on-sale.’).addClass(‘highlighted’);

$(‘.highlighted’).addClass(‘highlighted’);