JQuery Flashcards
Where should you go to get jquery?
Go to google’s hosted JQuery Library
Where should you go to get jquery?
Go to google’s hosted JQuery Library
What is the script that you MUST include to run JQUERY?
What tag must you have for ALL jquery to fall under in order to run?
$(document).ready(function(){
}
What is the script that you MUST include to run JQUERY?
What tag must you have for ALL jquery to fall under in order to run?
$(document).ready(function(){
}
Say I wanted to add an event handler on click for a button?
under the document ready function:
$(‘button’).click(function(){
alert(“You have clicked a button!”);
});
What is documentation?
Library of eventlisteners in Jquery
What is the basic flow of JQuery?
1) Select the element, class or id using the JQuery selector.
2) Add an event listener: How do you want this event to be triggered?’
3 Write the code on what you want to happen when the even is triggered?
Documentation is API documentation and contains what?
How to use documentation and….library of all event listeners in JQuery
What are getters and setters?
A getter gets the value of something…it spits out a value.
example of a getter:
var myText = $('#myParagraph').text();
alert(myText); //.text() GETS the values from myparagraph and a variable holds this information in this example
example of a setter:
$(‘#myParagraph’).text(‘see how I work as a setter’);
This?
In what context am I doing this? It’s only doing on THIS.
What do you need to understand in jQuery if you want to use APIs and AJAX
Dynamic content. It is HTML code that you generate after the page loads.
You must master traversing through HTML elements, which is how we reference HTML elements relative to their containing, or neighboring elements.
Why are .html() and .append() so important?
Ability to add new HTML content for any page you make. This is called dynamic content. The rules for adding jQuery listeners onto your dynamic content are a little tricky because at first, your browser doesn’t’;t know that the content is even there.
What is the most effective way to add event handlers to dynamically rendered HTML content?
Use the .on() method.
How does .on() work?
We must attach the .on() function to something within a selector. However, what you pass into the selector is NOT what you want to attach the event to. What does into the selector is the element that contains the relevant HTML elemnts you ant to attach an event listener to.
Break down the following:
$(document).on(‘click’, ‘button’, function(){alert(‘you clicked a button!’)});
Sphere of detection of this instance of .on() is paired with the selector for the whole document. That means that the following parameters apply to EVERYTING contained in the entire document. This is the widest scope that you can use on a jQuery function.
How many parameters can .on() take?
4:
1) the event: are you waiting for a click? A submit? Keydown?
2) Data you with to pass to the handler (this is not required and seldom used). We’re not using it here!
3) The target: i.e. the element you are trying to target. Here we are targeting a button. So now our search is narrowed down listening for a button to be clicked.
4) The function you want to run: Just the stuff you want to attach!
Why is the scope of your .on so important?
Because it narrows down the sphere of detection. Makijng it faster
What is a callback?
Essentially saying to run a function when another function calls upon it.
In jQuery you can put functions before the document is ready and so when you call upon them after something is dynamically created.
What is AJAX?
Maybe the most powerful form of front-end JavaScript right now is AJAX (Asynchronous JavaScript and XML).
Allows page to interact with your database without refreshing the page
Forms are 99% of what AJAX is used for
what are the two ways to use .submit()?
As an event handler or to actually submit the form
what is the value of return false?
Well if you don’t want your form to go somewhere because the form wasn’t filled in completely
.serialize()
The function .seralize() is a function that encodes a set of form elements into a computer-friedly array. Why is this helpful? Because .serialize transofmrs data that the user inputs into a format that can be easily passed to a back-end process and used by a non-human entity.
