Accessing form elements:
A) What is the property/attribute of the text field that stores what the user has typed in?
-input
B) Which property do we check to see if a radio button or checkbox was selected?
-For radio buttons and checkboxes, you use the checked attribute to determine whether they were selected or not.
Preventing a form from being submitted:
C) What would happen if we did not return false upon checking a form and finding something unacceptable?
-The form would submit the invalid or unacceptable data
Hiding and showing form sections:
D) What attribute of the DOM is used to hide an element on the page? - The display attribute with a value of none is used to hide elements on a page.
E) What attribute of the DOM is used to show an element on the page? - The display attribute with a value of block, inline, or inline block is used to show an element on the page
Manipulating Page Content:
Creating, getting and setting content
- What’s the difference between the .html() and .text() methods?
.text get the text content of each element matching the selector including their descendants or sets the text content of the matched selector. the .html() method only grabs the text content of the first matching element. Additionally .text() can’t be used on form inputs or scripts
- [Critical Thinking] When the author ‘sets’ the html via the .html() method, how would you do the same thing using the JavaScript DOM?
To set the html using the JavaScript DOM, you would use the .text() on the element that you want to set and pass in the value you want it to be set to.
Manipulating attributes
3 ) [Critical Thinking] What is the jQuery syntax to force all tags to popup in a new window?
$(‘a’).attr(’target’, ‘_black’);
4 ) [Critical Thinking] Show a jQuery example where you set multiple attributes on a selected group of elements all at one time.
$(‘img').children().getAttribute(‘src’, ‘all_my_images.png’);
Inserting content:
5 ) [Critical Thinking] Write the jQuery syntax to move the last of 4 paragraphs so it is placed before all 4 paragraphs.
$(‘div p’).last().after(‘p’);
Wrapping, replacing, and removing content:
6 ) [Critical Thinking] Write the jQuery syntax to wrap all span tags with a class of blue inside divs with a 1px solid red border.
if ($(’span’).parent().is(‘div’).css(‘border’, ’1px solid red’) {
$(’span’).addClass(‘blue’);
}
Working with CSS:
7 ) [True or False] Using jQuery’s innerWidth() method includes the border but discludes the padding for the last matched element.
true
Associating data with page elements:
8 ) [Critical Thinking] Can you think of something useful to do with the .data() method? Explain what you would do to make it useful.
Use case for the data method may be when you want to switch out an image on a click event. You could store the alternate image src in the data attribute and use the data() method to retrieve and replace src.
9 ) What does the author use to make a string of the object returned via the .data() method when there’s no data currently on the element?
Understanding the jQuery event handling features:
10 ) [Critical Thinking] Why would we use jQuery to handle our events?
Binding and unbinding events:
11 ) [Critical Thinking] When the author shows how to create a mouseover effect using the toggleClass() method, what 2 events are used inside the .on() method?
Convenient event helper methods
12 ) What does the .hover() method accept as it’s two parameters?
The .hover() method accepts a handlerIn and handlerOut method. The handlerIn is a function to execute when the mouse pointer enters the element and the handlerOut functions executes when the mouse pointer leave the element.
Using the jQuery event handler:
13 ) [Critical Thinking] Do you see any use for preventDefault()? Identify how you would use it.
The preventDefault() could be use to make an element click about with the anchor tag but prevent it from actually making a request to another page.
14 ) [Critical Thinking] What does the pageX property of the event display?
The pageX property displays the mouse position relative to the left edge of the document.
Using miscellaneous event features:
15 ) [Critical Thinking] What does the trigger() method do?
It executes handles attached to a matching selector.
Hiding and showing elements:
16 ) [Critical Thinking] What is meant by a callback function?
A callback function is a function that is passed as a parameter and to be executed after after another function or event. An example of this could be in the .on function when a click event has been pasted.
$(‘button’).on(‘click', changeFont);
Assuming the changeFont function was defined, it would be the callback when the click event on the button was fired.
Fading elements in and out:
17 ) Show the jQuery syntax to attach a click event to a
$(‘#myDiv’).on(‘click’, function() {
$(this).fadeOut(‘slow’);
alert(‘See Ya!’);
}
Sliding elements:
18 ) What does the slideToggle() method do?
If the element is hidden, the slideToggle() method shows the element with a slide animation. If the element is shown then the slideToggle() method hides the element with a slide animation.
Creating custom animations:
19 ) What is the exact jQuery syntax the author uses to animate the a