JQuery Flashcards
What is DOM manipulation?
DOM (document object model) manipulation
The DOM, or document object model is the browser’s representation of the current state of the HTML content of a page. The DOM is not to be confused with the HTML file for a page.
When the browser first loads an HTML page, the DOM will look a lot like the HTML source code, but as JavaScript scripts begin to take over, HTML elements can be added and removed, regardless of whether or not they appeared in the HTML file.
When you view HTML in the elements panel of Chrome DevTools, you are looking at a representation of the DOM.
What is traversing?
Using jQuery or JavaScript to find particular elements in the DOM.
What is manipulating?
Updating the DOM with jQuery or JavaScript.
What does the dollar sign mean in the jQuery syntax?
The $ is the jQuery object, which has methods for DOM manipulation and traversal, among other things.
Why should you use “js-“ in your syntax for jQuery?
Any time you add class names that are there not for styling purposes but as a target for DOM manipulation, it’s best practice to let the class name reflect this. You don’t want your JavaScript layer to be dependent on the same class names being used for styling purposes because those might change, and your JavaScript code should continue to work even when styles change.
Why should the jQuery come before index.js in the HTML document?
First, we include the jQuery library, and then we link to index.js. Recall that the browser reads our HTML file top to bottom, so if you have an index.js file that depends on jQuery, that index.js file needs to come after jQuery.
What does this syntax do? $()
When you use the $() jQuery method to target a set of elements, the object you get back is a jQuery object, and it has numerous traversal methods that you can use to traverse the selected element(s).
What is event-driven DOM manipulation?
writing instructions that tell the computer to listen for When specific kinds of events happen and then do something in response. Whenever the event occurs, the computer executes a callback function, which is a set of instructions about what to do whenever the event occurs.
For instance, you could listen for when users click a submit button on a signup form (that would be the event), and that could trigger a form validation callback function that validates password requirements. If the form is valid, its contents get posted to the server. If not, the page gets updated to display validation errors to the user, which we hope will prompt the user to update the invalid inputs and resubmit.
How do you activate a function for an event listener?
Use this syntax at the end of your js file:
$(function);
When the browser finishes loading the DOM for a page, it emits a “ready” event. This event happens once per page load. jQuery will run the callback function we pass to $() after this ready event happens. You should start using the $(callbackFn) function to activate your application.
What is another method for activating a function for an event listener?
Earlier versions of (jQuery < 3.0) used the built-in .ready() method.
.ready has been deprecated (programmer talk for ‘no longer preferred, but still allowed’), and you shouldn’t use it in your own code, but you should understand that it does the same thing as $(callbackFn), as you’re likely to encounter legacy code with the older syntax.
By default, where does the browser submit a form?
By default, when the browser sees that a user submits a form, it tries to submit the form to a server, as explained in this URL:
https://stackoverflow.com/questions/1131781/is-it-a-good-practice-to-use-an-empty-url-for-a-html-forms-action-attribute-a/1132015#1132015
How do you stop the browser from submitting the form to the server by default?
Use jQuery’s preventDefault method to stop the default submission behavior for forms (and it can also be used to stop the default behavior for anchor tags).
What does using the word “this” do in jQuery?
Inside a callback function on an event listener, this refers to event.currentTarget. So anywhere that you have been typing out event.currentTarget, you can replace it with the this keyword.
It is more common to use this in jQuery code than event.currentTarget, so you will see that style used throughout the remainder of the course.
Remember that this only refers to the element within the callback function. Outside of the callback function, it could refer to something completely different.
Finally, note that in the context of callback functions, this will not behave as expected if you use ES6 arrow functions. If you need this to refer to the event object, stick with the function keyword.
What is event delegation?
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.
https://learn.jquery.com/events/event-delegation/
