jQuery Flashcards
What is jQuery?
jQuery is a library. A library is code that someone else wrote that you can incorporate into your own projects to improve them or make coding easier.
What is the shorthand way to write jQuery?
The dollar sign $
Where should the script tag for the jQuery library be placed?
In the body of our body tag right above our javascript script tag.
What’s a way of ensuring that our javascript library does not access our jQuery library until it is ready (when script tag is placed in the head tag)?
We can use the following code:
$(document).ready(function () {
$(“h1”).css(“color”, “red”);
})
What’s a second way of ensuring that our javascript library does not access our jQuery library until it is ready?
By including the script tag at the bottom of our webpage (bottom of body section above our javascript script tag).
How does minification work to reduce file size?
Minification removes whitespace and comments in your code. The link in our jQuery script tag takes us to to a minimized jQuery library.
Why do we minifiy our code?
All of our code has to be loaded by our user’s browser and depending on their internet speed that may take a short or long time. Minifying helps our code to be loaded much faster.
The browser does not care about comments or spaces.
How do we select elements with jQuery?
We replace the document.querySelector with the keyword jQuery(or the dollar sign).
Ex:
javascript: document.querySelector(“h1.title”)
jQuery: $(“h1.title”)
How do we select multiple elements in jQuery?
By using the same syntax for selecting a single element.
Ex:
javascript: document.querySelectorAll(“button”)
jQuery: $(“button”)
How can we manipulate (set) the style of an element with jQuery?
By using the .css method.
Ex:
$(“h1”).css(“color”, “red”);
The 1st input is the property we want to change and the 2nd input is the value we want to set for the property.
How can we get the current value for a css property?
By having the name of the property as a string within the css jQuery method and logging it to the console.
Example:
console.log($(“h1”).css(“font-size”));
How can we keep our css (styling) and our javascript (behavior) separate?
By first creating a class in our stylesheet and then adding that class with javascript.
Example:
In css:
.big-title {
font-size: 10rem;
color: yellow;
font-family: cursive;
}
In javascript:
$(“h1”).addClass(“big-title”);
How do we add multiple classes in jQuery?
We add multiple classes in jQuery by adding a space in between the classes.
Example:
$(“h1”).addClass(“big-title margin-50”);
Adds both the big-title class and margin-50 class.
How can we see if a selected element has a certain class in jQuery?
By selecting our element and using the hasClass method and query for the specific class.
Example:
$(“h1”).hasClass(“big-title”);
How can we change the text of a selected element using jQuery? (two methods)
1st method:
Select the element than place the new text wanted inside of the text method.
Example:
$(“h1”).text(“bye”);
2nd method
Changing the inner html by using the html method.
Example:
$(“h1”).html(“<em>bye</em>”);
Note: Javascript uses the innerHTML method.
What do we use if we want to get attributes on the fly using jQuery?
We select the element we want, enter the name of the attribute we want in the attribute method, and console log the line of code (to get a specific attribute).
Example:
console.log($(“img”).attr(“src”));
What do we use if we want to set attributes on the fly using jQuery?
We use the same syntax to get the attribute but we enter a second input which will change the current attribute.
Example:
$(“a”).attr(“href”, “ https//www.yahoo.com”) ;
How do we add an event listener using jQuery?
Select the element we want (h1 in this example), use dot notation to add the click method, add the call back function.
Example:
$(“h1”).click(function() {
$(“h1”).css(“color”, “purple”);
});
How do you add an event listener in jQuery to all of the same type of elements at once?
We use the same syntax when selecting one element. jQuery will automatically select all of the element with a specific element name or class. There is no need to use a for loop as we do with plain javascript.
Example:
$(“button”).click(function() {
$(“h1”).css(“color”, “purple”);
});
How do add a keypress event listener?
By targeting the input element, adding a keypress event, and logging that keypress event when detected.
Example:
$(“input”).keypress(function(event) {
console.log(event.key)
}
Or entire document:
$(document).keypress(function(event) {
console.log(event.key)
}
What’s an even more flexible way of adding an event listener in jQuery?
Select the element of interest, add the “on” method, add the event you are listening for, and add a callback function in the second parameter.
$(“h1”).on(“mouseover”, function() {
$(“h1”).css(“color”, “purple”);
};
How can we use jQuery to add new elements before other elements on the fly?
Target the element you want to add another element before, use the before method, and enter the html for the element you want to add before in the parenthesis.
Example:
$(“h1”).before(“<button>New</button>”);
How can we use jQuery to add new elements after other elements on the fly?
Target the element you want to add another element before, use the after method, and enter the html for the element you want to add after in the parenthesis.
Example:
$(“h1”).after(“<button>New</button>”);
What’s the difference between the prepend method and the before method?
Prepend will add your new html element into the item (element) that you selected just after the opening tag.
Example:
$(“h1”).prepend(“<button>New</button>”);
