JQuery Flashcards
1
Q
What does DOM stand for?
A
Document Object Model
2
Q
What is the DOM?
A
It is the browser’s representation of the current state of the HTML content of a page
3
Q
What should we not confuse the DOM with?
A
The html file for a page
4
Q
When will the DOM look a lot like an Html file?
A
When the browser first loads the HTML page
5
Q
When will the DOM start to look different than the original HTML file?
A
When the JavaScript scripts start to take over.
6
Q
What is one of the things that specifically start to happen when JavaScript takes over the DOM?
A
Html elements can be added or removed whether or not they appeared in the HTML file
7
Q
When is an example of a time where you’ve worked with a DOM?
A
When you view HTML in the elements panel of Chrome DevTools, you are looking at a representation of the DOM.
8
Q
What is traversing?
A
using jQuery to find particular elements in the DOM
9
Q
What is manipulation in reference to the DOM?
A
Updating particular elements in the DOM.
10
Q
So you need to use JQuery to do DOM traversing and manipulation?
A
No, you can accomplish that with JavaScript on it’s own
11
Q
Why is it preferred to use JQuery for DOM traversing and Manipulation if you can accomplish it with normal JavaScript?
A
because of cross-browser compatibility issues
12
Q
How do you select elements in jquery?
A
$(‘___’)
In the space you add the same selectors you would in css whether it be an element or a class or an Id.
Paragraphs would be —-> $(‘p’)
Class would be ——> $(‘.className’)
Etc..
13
Q
If you create a class specifically for being a target of Jquery code, what prefix should you use?
A
.js-
Example
p class = ‘.js-rest-of-name’
14
Q
Why should we use a js prefix before our JavaScript class targets ?
A
Because we don’t want to use the same classes for our stying classes as the ones for our JavaScript classes - styling of a page may need to change - but your page should work even if the styling changes
15
Q
Do we need to add the . On the jquery class name when applying it to the HTML elements?
A
No, only in JavaScript
16
Q
When you have a js.file that comes after JQuery where do you put the Jquery file with the script tags?
A
The The js file has to come after the jquery file.
17
Q
What does the jquery method .find(‘ ‘) do?
A
It looks and searches for all the children of an element with a particular class.
18
Q
What does the .parent(‘ ‘) jquery element do?
A
It searches for the parent of a particular element that has a certain class
19
Q
what is Event Driven DOM Manipulation?
A
in plain English it just means writing instructions that tell the computer to listen for when specific kinds of events happen and then do something in response.
20
Q
What is a CallBack Function in Jquery?
A
It is a set of instructions about what to do when its particular event occurs
21
Q
What are the two things you need to specify when creating an event listener?
A
You need to specify:
- The event, its looking for
- The call back function to happen
22
Q
What type of an event occurs once a page is finished loading?
A
a ready event
23
Q
how many times does the “ready event” happen?
A
once per page load
24
Q
What is a ‘Ready Event Call Back Function’
A
is a call back function that runs when the ready event occurs
25
what is the syntax of the 'Ready Event Call Back Function'?
$(CallBackFunctionName)
26
What is a DOM Event object?
An event object allows us to gain information about the specific event that triggered the call back function.
It can tell us everything from they type of button clicked.
The type of event
The specific element that was clicked etc
This is what an event object is
27
What information is available to you when it comes to DOM Event Objects?
This contains information about where you typed in the text, what keys you pressed, or which buttons were clicked. In fact, just about every piece of information you could ever want to know about how you performed an action is contained within the event object.
28
event.which contains what information?
contains information about which button was pressed in a mousedown event
29
event.key contains what information?
contains information about which key was pressed in a keydown event.
30
What information does event.currentTarget contain?
This contains information about which DOM element the user has interacted with.
31
what is event.stopPropagation( )?
Sometimes when you set a jquery selector you will chose multiple selectors, and sometimes those selectors will be children/parents of one another.. for example
$('div, ul, li').click(function)
when you click on the li - you are also technically clicking on the ul and the div.... when you click on the ul
you are also clicking on the div... so your function will run for those elements also. This may not be what you want.
so you use event.stopPropagation()
when you do this we're telling the browser to stop the event from "bubbling up" the DOM. It will run the function for the innermost clicked element and not continue up to the parent or grandparent element
32
what does event.preventDefault do?
it prevents the default behavior
33
what does the .this keyword mean in jquery?
refers to event.currentTarget. So anywhere that you have been typing out event.currentTarget, you can replace it with the this keyword
34
what is something you should remember about this inside of jquery?
Remember that this only refers to the element within the callback function. Outside of the callback function, it could refer to something completely different.
35
Will this keyword work with fat arrows the same way that it does with function keyword?
no it wont, use this with function keywords only
36
what is event delegation?
allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
37
how many times does the browser bind event listeners to elements and when?
it binds once and only once, when the page is first loaded, meaning we need event delegation for bind it to elements that appear later
38
how does event delegation work?
well remember even propagation? it looks at the event object and then bubbles up to the parent and its parent and all the way up the DOM? Well, what we do is we set a code on the parent of the event element and catch it there and add the code affecting future elements at that level
39
when should you use .on( ) vs .click( )
if you need to use jQuery to watch for elements that get added to the page after the JavaScript has been loaded), don't use .click(). Instead use .on() and target the specific event you're watching for (in this case "click"). You can then, optionally, filter the targeted events for that parent element by a more specific selector (in this case "li").
40
How are toggle buttons different than regular buttons?
toggle buttons stay in a particular state until they are clicked and remain in that state until they are clicked again
41
Are regular img tags interactive for keyboard users?
no they are not
42
if we want to make an image clickable for keyboard users what do we need to use instead of img tag in our html?
input type="image"
| src = " "
43
what do we need to add to input type="image" when creating A11Y accessible toggle buttons?
aria-pressed="false"
44
what does aria-pressed='false' do?
it makes sure that the image buttons are announced as toggle buttons so the visually impaired know what they are there, and how to use them
45
how do we used the .attr( ) method along with aria pressed and what does it do?
it is used with a boolean comparison to set aria-pressed to true or false as needed when the buttons are activated.
Now, where you can see a yellow color and know a lightbulb is on, a screen reader user will hear something like Lightbulb two, selected, toggle button.
46
what do form inputs used as buttons and regular button tags interpret a space bar when using the keyboard as keyboard user?
it is interpreted as a standard mouse click
47
are the beginning function( ) wrap and final calling of a function name always necessary in Jquery to get something to behave the way you want it to?
no, its not a requirement to get the jquery to function in the way yo want it to
48
how to access an image src using Jquery
$(parentName).find('img').attr('src');
49
how to set an attribute and value using jquery.
$(selector).attr(attribute,value)
$(img).attr( src, httpss//facebook.com)
50
what is the basic syntax for jQuery selector and action?
$(selector).action( )
51
what is the definition of a jquery selector?
an element that needs to be manipulated by j.Query
52
what is the definition of a jquery action?
denotes a jquery action that needs to be carried out on the html element designated as the selector
53
when selecting an element that is nested inside of another element, can you just choose the nested element outright?
no you cant, you must choose the path of that element as well.
for example
$('ul li a')
this would select an anchor link inside of a list tag inside of an unordered list tag
54
what does the .css method do?
it allows you to set the property and value of an element and then change the appearance by doing so
$(element).css('property','value)
$('h1').css('color','red');
This will change the header's color to red
$('h1').css('background-color','black');
this will change the background color of the header to black
55
What does the .before method do?
it adds whatever you put inside of the parens in front of the element you selected. So you can put whole 'html' elements in front of others.
$('ul').before(' A list of things i like
A list of things i like ');
this will put a header in front of the unordered list that you have already in your HTML
56
How does the .after( ) method work?
The same way as before, except it puts the content after the selector
57
What two things does the .text() method do?
1. It returns the text of an element without its HTML tags (empty parens)
2 it sets the text of an element by placing the content inside the parens (filled parens)
58
How can you grap the first or last selector of a group of elements elements?
$(“p:first”)
$(‘p:last’)
This will select the first or last element in a group of them.
59
What happens if you set an elements text using the .text( ) method while already has text?
The text you set will replace the text that was there
60
What are the similarities between .text( ) and .html( ) methods?
They both can be used to set the text of an element by adding content in the parens.
61
What are the differences between .text() and .html() methods?
When text() returns content its only the content without html tags.
.html() returns content with the HTML tags included
62
When you want to pass multiple properties and values onto a selector how do you do so?
Either with an unnamed object or with a named object passed in as a variable:
Let design = {
Color: “green”,
Background: “black”,
Border: “3px solid blue”}
As unnamed object:
$(‘h1’).css({“color”:”green”,”background”:”black”,”border”:”3px solid blue”});
Or as a named object passed as a variable
$(‘h1).css(design);
63
What is an attr() method used for?
To set or return a particular attribute value on an element.
$(element).attr(attribute)
64
What to remember about img tags and their attributes?
Img tags are inline so it’s attributes can be set inline in html, so those same attributes can be adjusted by attr( ) method in jquery even if they are usually done in css or on the css file
65
What is .val() method used for?
returning the value/ current content of an input element.
$("button").click(function(){
alert($("input:text").val());
});
This will create a function that when the button is clicked whatever text is the input will be returned as an alert
Or setting the value of an input
$("button").click(function(){
$("input:text").val("yo mama");
});
This will create a function that when the button is clicked; it will input the text “yo mama” into the input bar.
66
How do we set up a ready event call back function?
Function nameOfFunction(){
Stuff you want to happen;
}
$(nameOfFunction);
67
What is the .click() event
The click event performs a function when the selected element gets clicked.
$(element).click(function)
68
What does add and remove class do?
It adds or removes a class from your selector
$(‘h1’).addClass(‘newClassName’);
Remove class has the same syntax
69
What is .toggleClass()?
It works like add and remove class, everytime the event happens the class will toggle from added to removed, so the effect will turn on or off.
$("button").click(function(){
$("p").toggleClass("main");
});
This would make the class of main go onto the paragraphs when the button is clicked, and then when clicked again it will go off, and so on and so forth
70
What does .hide( ) do?
It hides the element that you put it on.
$(‘img’).click(function(){
$(this).hide();
});
This will make it so when the image is clicked it will be hidden
71
What is the .on( ) method?
It allows you to specify the event that fires it, and the function that happens when that event occurs.
$(‘selector’).on(‘event’, function(){
});
72
What is the keypress() method?
It is a combination of keydown() and keyup().
Keypress is executed whenever a key is pressed.
$(selector).keypress(function(){
});
73
What is keydown() and keyup() methods?
They both work like keypress() except keydown, fires a function when a key is pressed down.
And keyup, fires a function when a key is released.
74
What does .show() do?
It makes hidden elements appear or reappear.
$(selector).show(speed, callback)
75
What does .toggle() do?
It makes the element toggle between hide() and show() at the execution of an event.
$(selector).toggle(speed, callback)
76
What does speed and callback mean when used on effect methods like .hide() or show()?
Speed refers to how fast the action takes place - possible values are :
Slow, fast and milliseconds
Callback, refers to a function to be executed after the effect has taken place
77
What does .fadeOut() do?
It fades out the selected image
$(selector).fadeOut(speed,callback)
78
With the milliseconds parameter of effect methods, what value do you use to give a value
Just the number itself, it knows to go in milliseconds.
$(selector).fadeIn(3000);
This automatically knows 3000 milliseconds - you don’t need to add anything else.
79
How does fadeIn() work?
The same way as fadeOut( ) just the element appears
80
What does draggable() and droppable() do?
It allows elements to be dragged and placed on an element that has the droppable method on it
81
What does datepicker() do?
When you have an Input bar and you apply this when you click on it it will drop down a calander for someone to pick a date from
82
What is a .submit() method do?
It allows you to run a function when a form is submitted
ONLY CAN WORK ON FORMS!!!
$(‘form’).submit(function)
Or it can trigger a previously set .submit event function
$(‘form selector’).submit()
83
What do we need to remember about Jquery use of .submit event listeners?
A lot of times in jquery were going to need to set up event listeners to listen for when something has been submitted in a form - by default a form that’s set to submit automatically looks for a server to send it to —-
But a lot of times we don’t want to send this to a server (at least or not yet).
At this point we want to use event.preventDefault()
To stop this default action.
84
What is .empty() and how does it work?
It removes all children and content inside of an element, such as a div.
- it doesn’t remove the element itself, or it’s attributes
85
How do you return an integer from a user input?
Let variableName = parseInt($(input path).val())
86
what do we need to make sure we remember when working with Jquery and adding methods or events or effects on to a particular selector or element?
MAKE SURE THAT YOUR METHOD IS ON THE RIGHT SELECTOR AND NOT THE PARENT OR CHILD.
double check the html and make sure that you are accessing the right element. if not use .find() or parent() to look for the element nested in another.
Doublecheck the html!!! YOU HAVE TO GO THROUGH THE WHOLE PATH TO THE ELEMENT. THE CLASS OR ID IS NOT ENOUGH!!!!
87
what does .append and .prepend do?
it adds content to the end or the beginning of selected elements
$('element').append(
content
) $('element').prepend(content
)
88
what is the point of an array in the most basic sense?
to group data together
